q2-tecton-elements 1.37.1 → 1.38.1

package/dist/components/q2-radio-group.js.map

@@ -1 +1 @@
-{"file":"q2-radio-group.js","mappings":"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","names":["Q2RadioGroup"],"sources":["./src/components/q2-radio-group/styles.scss?tag=q2-radio-group&encapsulation=shadow","./src/components/q2-radio-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    margin-top: var-list(--tct-scale-2, --app-scale-2x, 10px);\n}\n\nfieldset {\n    padding: 0;\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    gap: var-list(--app-scale-1x, 5px);\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\n.optional-tag {\n    margin-left: var-list(var-prefixer(input-label-optional-margin-left), --tct-scale-1, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(input-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(input-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(input-label-optional-font-weight), 400);\n}\n\n.tile-container {\n    &,\n    .options-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        flex-grow: 1;\n    }\n}\n\n.options-container {\n    --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n    --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n    margin: var(--comp-options-margin);\n    padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-border-radius-1, --app-border-radius-1, 2px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-input-error-border-color, --const-stoplight-alert, #c30000);\n    }\n    :host([has-error=\"false\"]) & {\n        border-color: transparent;\n    }\n}\n\n.tile-container {\n    &.left {\n        justify-content: start;\n    }\n    &.right {\n        justify-content: end;\n    }\n\n    .options-container {\n        gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n        justify-content: inherit;\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-radio-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n    @Prop({ reflect: true }) tileAlignment: 'left' | 'center' | 'right' = 'center';\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    /////// LIFECYCLE HOOK ///////\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    /////// OBSERVERS ///////\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    /// Methods ///\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    labelDOM() {\n        const { label, optional, readonly } = this;\n        let helpText = '';\n        if (readonly) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        } else if (optional) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n        }\n        return (\n            <Fragment>\n                {label && loc(label)}\n                {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n            </Fragment>\n        );\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = showLabel || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && <div class=\"group-legend\">{this.labelDOM()}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n}\n"],"version":3}
+{"file":"q2-radio-group.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,sgFAAsgF;;MCoB3gFA,cAAY;;;;;;IAerB,QAAG,GAAW,eAAe,UAAU,EAAE,EAAE,CAAC;IAO5C,uBAAkB,GAAG;MACjB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,IAAI,CAAC,eAAe,EAAE,CAAC;MACvB,IAAI,CAAC,eAAe,EAAE,CAAC;MACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C,CAAC;IAEF,uBAAkB,GAAG,CAAC,KAAkB;MACpC,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,IAAI,IAAI,CAAC,QAAQ;QAAE,OAAO;MAE1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;KACnD,CAAC;IAEF,uBAAkB,GAAG;;MAEjB,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,SAAS,CAAC;;MAGhG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,iBAAiB,EAAE;QACpC,IAAI,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC;OACxC;WAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,iBAAiB,EAAE;;QAE1C,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM;UAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;OACrE;KACJ,CAAC;;;oBA7C2C,KAAK;;;;;yBAKoB,QAAQ;oBACjC,KAAK;;;EASlD,IAAI,aAAa;IACb,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAyB,CAAC;GAC5F;;EA+BD,iBAAiB;IACb,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;GACpD;EAED,gBAAgB;IACZ,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC/D,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IACjC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC7B;;EAKD,YAAY,CAAC,MAAc;IACvB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,KAAK,CAAC,OAAO,GAAG,MAAM,KAAK,KAAK,CAAC,KAAK,CAAC;;MAEvC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;QAChB,KAAK,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;OACvB;WAAM,IAAI,KAAK,CAAC,OAAO,EAAE;QACtB,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;OACtB;KACJ,CAAC,CAAC;GACN;EAGD,WAAW;IACP,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC;KACtC,CAAC,CAAC;GACN;EAGD,eAAe;IACX,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;KACvC,CAAC,CAAC;GACN;EAGD,eAAe;IACX,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC;GACzE;EAGD,0BAA0B,CAAC,UAAmB;IAC1C,IAAI,OAAO,UAAU,KAAK,SAAS;MAAE,OAAO;IAC5C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC7B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;GAC/B;EAGD,iBAAiB,CAAC,UAAmB;IACjC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,KAAK,CAAC,eAAe,GAAG,UAAU,CAAC;KACtC,CAAC,CAAC;GACN;;;;;;;EASD,QAAQ,CAAC,KAAa;IAClB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK;MAC5B,IAAI,KAAK,KAAK,KAAK,CAAC,KAAK;QAAE,OAAO;MAClC,KAAK,CAAC,KAAK,EAAE,CAAC;KACjB,CAAC,CAAC;GACN;EAOD,mBAAmB,CAAC,KAAkB;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;MACnC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;OACnC;KACJ;GACJ;EAGD,aAAa,CAAC,KAAiB;IAC3B,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;MAAE,OAAO;IACzD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAChH,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;GACjD;EAGD,cAAc,CAAC,KAAoB;IAC/B,MAAM,YAAY,GAAI,KAAK,CAAC,MAAsB,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;IACvF,IAAI,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CACpC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,MAAM,IAAK,EAAkB,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,YAAY,CAC1F,CAAC;IACF,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,QAAQ,KAAK,CAAC,GAAG;MACb,KAAK,WAAW,CAAC;MACjB,KAAK,SAAS;QACV,IAAI,GAAG,CAAC,CAAC,CAAC;QACV,MAAM;MAEV,KAAK,YAAY,CAAC;MAClB,KAAK,WAAW;QACZ,IAAI,GAAG,CAAC,CAAC;QACT,MAAM;KACb;IAED,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,IAAI,KAAK,CAAC,EAAE;MAC5B,OAAO;KACV;IACD,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;IACvF,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;KAChD;IACD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;GACpE;EAED,QAAQ;IACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC3C,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,IAAI,QAAQ,EAAE;MACV,QAAQ,GAAG,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;KACvF;SAAM,IAAI,QAAQ,EAAE;MACjB,QAAQ,GAAG,YAAM,KAAK,EAAC,cAAc,IAAE,GAAG,CAAC,+BAA+B,CAAC,CAAQ,CAAC;KACvF;IACD,QACI,EAAC,QAAQ,QACJ,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC,EACnB,CAAC,CAAC,QAAQ,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,QAAQ,CAAQ,CACpD,EACb;GACL;EAED,MAAM;IACF,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC1B,MAAM,YAAY,GAAG,SAAS,IAAI,QAAQ,CAAC;IAC3C,QACI,EAAC,QAAQ,QACJ,YAAY,KACT,WAAK,KAAK,EAAC,WAAW,IACjB,SAAS,IAAI,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,EAAE,CAAO,EAC9D,QAAQ,KACL,eACI,IAAI,EAAC,OAAO,aACJ,WAAW,GACZ,CACd,CACC,CACT,EACD,gBACI,QAAQ,EAAE,IAAI,CAAC,kBAAkB,kBACnB,GAAG,IAAI,CAAC,QAAQ,EAAE,IAE/B,SAAS,IAAI,cAAQ,KAAK,EAAC,IAAI,IAAE,IAAI,CAAC,QAAQ,EAAE,CAAU,EAC1D,IAAI,CAAC,QAAQ,EAAE,CACT,CACJ,EACb;GACL;EAED,QAAQ;IACJ,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;MAC/B,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,aAAa,GAAG,QAAQ,CAAC;MACjG,QACI,WAAK,KAAK,EAAE,kBAAkB,SAAS,EAAE,IACrC,WAAK,KAAK,EAAC,mBAAmB,IAC1B,eAAQ,CACN,CACJ,EACR;KACL;SAAM;MACH,QACI,WAAK,KAAK,EAAC,mBAAmB,IAC1B,eAAQ,CACN,EACR;KACL;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Q2RadioGroup"],"sources":["./src/components/q2-radio-group/styles.scss?tag=q2-radio-group&encapsulation=shadow","./src/components/q2-radio-group/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    margin-top: var-list(--tct-scale-2, --app-scale-2x, 10px);\n}\n\nfieldset {\n    padding: 0;\n    margin: 0;\n    border: 0;\n    position: relative;\n}\n\n.label-row {\n    display: grid;\n    grid-template-columns: 1fr 24px;\n    grid-template-areas: 'label icon';\n    gap: var-list(--app-scale-1x, 5px);\n\n    q2-icon {\n        grid-area: icon;\n        margin-top: -2px;\n        margin-bottom: -2px;\n    }\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\n.optional-tag {\n    margin-left: var-list(var-prefixer(input-label-optional-margin-left), --tct-scale-1, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(input-label-optional-font-color),\n        --t-textA,\n        --t-a11y-gray-color,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(input-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(input-label-optional-font-weight), 400);\n}\n\n.tile-container {\n    &,\n    .options-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: wrap;\n        flex-grow: 1;\n    }\n}\n\n.options-container {\n    --comp-default-margin: #{var-list(--app-scale-1x, 5px)} 0;\n    --comp-options-margin: #{var-list(var-prefixer(radio-group-options-margin), --comp-default-margin, unquote('5px 0'))};\n    margin: var(--comp-options-margin);\n    padding: var-list(var-prefixer(radio-group-options-padding), --app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-border-radius-1, --app-border-radius-1, 2px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-input-error-border-color, --const-stoplight-alert, #c30000);\n    }\n    :host([has-error=\"false\"]) & {\n        border-color: transparent;\n    }\n}\n\n.tile-container {\n    &.left {\n        justify-content: start;\n    }\n    &.right {\n        justify-content: end;\n    }\n\n    .options-container {\n        gap: var-list(var-prefixer(radio-group-tile-gap), --app-scale-2x, 10px);\n        justify-content: inherit;\n    }\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-radio-group',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2RadioGroup implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ mutable: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true }) name: string;\n    @Prop({ reflect: true }) optional: boolean;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop({ reflect: true, mutable: true }) tileLayout: boolean;\n    @Prop({ reflect: true }) tileAlignment: 'left' | 'center' | 'right' = 'center';\n    @Prop({ reflect: true }) hasError: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) tilelayout: boolean;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\n    }\n\n    onMutationObserved = () => {\n        this.valueUpdated(this.value);\n        this.nameUpdated();\n        this.disabledUpdated();\n        this.readonlyUpdated();\n        this.tileLayoutUpdated(this.tileLayout);\n    };\n\n    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        this.change.emit({ value: event.detail.value });\n    };\n\n    checkedRadioExists = () => {\n        // Returns first checked individual q2-radio or undefined if none are set to checked={true}\n        const firstCheckedRadio = this.radioElements.find(radio => radio.checked === true) || undefined;\n\n        // Changes radio-group[\"value\"] if inital value is not set and if a any individual q2-radio is checked\n        if (!this.value && !!firstCheckedRadio) {\n            this.value = firstCheckedRadio.value;\n        } else if (!this.value && !firstCheckedRadio) {\n            // if no radios are meant to be checked, then assign first radio tabIndex of 0\n            if (this.radioElements.length) this.radioElements[0].tabIndex = 0;\n        }\n    };\n\n    /////// LIFECYCLE HOOK ///////\n    componentWillLoad() {\n        this.checkedRadioExists();\n        this.onMutationObserved();\n        this.handleDeprecatedTilelayout(this.tilelayout);\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n        this.checkedRadioExists();\n    }\n\n    /////// OBSERVERS ///////\n\n    @Watch('value')\n    valueUpdated(newVal: string) {\n        this.radioElements.forEach(radio => {\n            radio.checked = newVal === radio.value;\n            // Removes checked attribute from trailing radios, if multiple individual radio's are intially checked (checked={true}) at componentDidLoad\n            if (!radio.checked) {\n                radio.removeAttribute('checked');\n                radio.tabIndex = -1;\n            } else if (radio.checked) {\n                radio.tabIndex = 0;\n            }\n        });\n    }\n\n    @Watch('name')\n    nameUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.name = this.name || this._id;\n        });\n    }\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\n        });\n    }\n\n    @Watch('readonly')\n    readonlyUpdated() {\n        const readonly = this.readonly;\n        this.radioElements.forEach(radio => (radio.groupReadonly = readonly));\n    }\n\n    @Watch('tilelayout')\n    handleDeprecatedTilelayout(tilelayout: boolean) {\n        if (typeof tilelayout !== 'boolean') return;\n        this.tileLayout = tilelayout;\n        this.tilelayout = undefined;\n    }\n\n    @Watch('tileLayout')\n    tileLayoutUpdated(tileLayout: boolean) {\n        this.radioElements.forEach(radio => {\n            radio.groupTileLayout = tileLayout;\n        });\n    }\n\n    /// Methods ///\n    /**\n     * Emulates clicking the `<q2-radio>` option with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(value: string) {\n        this.radioElements.forEach(radio => {\n            if (value !== radio.value) return;\n            radio.click();\n        });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement) {\n            if (!this.hostElement.onchange) {\n                this.value = event.detail.value;\n            }\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');\n        radio?.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    @Listen('keydown')\n    keydownHandler(event: KeyboardEvent) {\n        const currentValue = (event.target as HTMLElement).getAttribute('value') || this.value;\n        let index = this.radioElements.findIndex(\n            el => el === event.target || (el as HTMLElement).getAttribute('value') === currentValue\n        );\n        let sign = 0;\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowUp':\n                sign = -1;\n                break;\n\n            case 'ArrowRight':\n            case 'ArrowDown':\n                sign = 1;\n                break;\n        }\n\n        if (index === -1 || sign === 0) {\n            return;\n        }\n        index += sign;\n        index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);\n        event.preventDefault();\n        if (!this.readonly) {\n            this.value = this.radioElements[index].value;\n        }\n        this.radioElements[index].dispatchEvent(new FocusEvent('focus'));\n    }\n\n    labelDOM() {\n        const { label, optional, readonly } = this;\n        let helpText = '';\n        if (readonly) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.readonly')}</span>;\n        } else if (optional) {\n            helpText = <span class=\"optional-tag\">{loc('tecton.element.input.optional')}</span>;\n        }\n        return (\n            <Fragment>\n                {label && loc(label)}\n                {!!helpText && <span class=\"optional-tag\">{helpText}</span>}\n            </Fragment>\n        );\n    }\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = showLabel || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && <div class=\"group-legend\">{this.labelDOM()}</div>}\n                        {hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerRadioChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {showLabel && <legend class=\"sr\">{this.labelDOM()}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    inputDom() {\n        if (this.tileLayout) {\n            const { tileAlignment } = this;\n            const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';\n            return (\n                <div class={`tile-container ${alignment}`}>\n                    <div class=\"options-container\">\n                        <slot />\n                    </div>\n                </div>\n            );\n        } else {\n            return (\n                <div class=\"options-container\">\n                    <slot />\n                </div>\n            );\n        }\n    }\n}\n"],"version":3}

package/dist/components/q2-radio.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createGuid, h as handleAriaLabel, o as overrideFocus, l as loc } from './index16.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.radio-container{--comp-radio-margin:var(--tct-radio-margin, var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px)) var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px)));margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(--tct-radio-label-color);font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494))}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:checked+label circle:nth-child(1){fill:var(--tct-radio-checked-background-fill, var(--tct-radio-checked-bg, transparent));stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25)}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-color);align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff)}.radio-tile input:checked+label{border-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));box-shadow:inset 0 0 0 2px #ffffff}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.radio-container{--comp-radio-margin:var(--tct-radio-margin, var(--tct-radio-margin-vertical, var(--tct-scale-2, 10px)) var(--tct-radio-margin-horizontal, var(--tct-scale-3, 15px)));margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(--tct-radio-label-color);font-weight:var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400));align-items:center;cursor:pointer;margin-right:1rem;display:grid;grid-template-columns:18px 1fr;gap:var(--tct-scale-1, var(--app-scale-1x, 5px))}.radio-container svg{border-radius:50%;transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));outline:0;width:100%}.radio-container circle:nth-child(1){stroke-width:2;stroke:var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));fill:var(--tct-radio-background-fill, transparent)}.radio-container input:checked+label circle:nth-child(1){fill:var(--tct-radio-checked-background-fill, var(--tct-radio-checked-bg, transparent));stroke:var(--tct-radio-checked-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:checked+label .label-content{font-weight:var(--tct-checkbox-selected-font-weight, 600);letter-spacing:var(--tct-checkbox-selected-letter-spacing, 0.25);color:var(--tct-radio-checked-label-color, inherit)}.radio-container input:checked+label circle:nth-child(2){fill:var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:hover+label circle:nth-child(1){fill:var(--tct-radio-hover-background-fill, transparent);stroke:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)))}.radio-container input:hover+label .label-content{color:var(--tct-radio-hover-label-color, inherit)}.radio-container input:focus+label svg{box-shadow:var(--const-double-focus-ring)}.radio-container input:focus+label circle:nth-child(1){fill:var(--tct-radio-focus-background-fill, transparent);stroke:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e)))}.radio-container input:focus+label .label-content{color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-color);align-items:center;border-radius:3px;border:2px solid var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494));background:var(--tct-radio-background-fill, transparent);cursor:pointer;display:block;padding:10px;position:relative;text-align:center;transition:border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease));white-space:nowrap}.radio-tile input:checked+label{border-color:var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));box-shadow:inset 0 0 0 2px #ffffff;background:var(--tct-radio-checked-background-fill, transparent);color:var(--tct-radio-checked-label-color, inherit)}.radio-tile input:checked+label:after{border-bottom-width:3px;border-bottom:5px solid var(--tct-radio-checked-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));border-left-width:5px;border-left:8px solid transparent;border-right-width:5px;border-right:8px solid transparent;bottom:0;content:\"\";height:0;left:50%;margin-left:-5px;position:absolute;width:0}.radio-tile input:hover+label{border-color:var(--tct-radio-hover-stroke-color, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));background:var(--tct-radio-hover-background-fill, transparent);color:var(--tct-radio-hover-label-color, var(--tct-radio-label-color, inherit))}.radio-tile input:focus+label,.radio-tile input:focus:checked+label{border-color:var(--tct-radio-focus-stroke-color, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));background:var(--tct-radio-focus-background-fill, transparent);box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}";
 
 const Q2Radio$1 = /*@__PURE__*/ proxyCustomElement(class Q2Radio extends HTMLElement {
   constructor() {

package/dist/components/q2-radio.js.map

@@ -1 +1 @@
-{"file":"q2-radio.js","mappings":"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","names":["Q2Radio"],"sources":["./src/components/q2-radio/styles.scss?tag=q2-radio&encapsulation=shadow","./src/components/q2-radio/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.radio-container {\n    --comp-radio-margin: #{var-list(\n            --tct-radio-margin,\n            unquote(\n                '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n            )\n        )};\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var-list(--tct-radio-label-color);\n        font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n        align-items: center;\n        cursor: pointer;\n        margin-right: 1rem;\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        outline: 0;\n        width: 100%;\n    }\n\n    circle:nth-child(1) {\n        stroke-width: 2;\n        stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n    }\n\n    input {\n        &:focus {\n            & + label svg {\n                box-shadow: var(--const-double-focus-ring);\n            }\n            & + label circle:nth-child(1) {\n                stroke: var-list(\n                    --tct-radio-focus-stroke-color,\n                    --tct-checkbox-check-stroke-color,\n                    --t-checkbox-fill,\n                    #2e2e2e\n                );\n            }\n        }\n\n        &:checked {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n                stroke: var-list(\n                    --tct-radio-checked-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                font-weight: var-list(--tct-checkbox-selected-font-weight, 600);\n                letter-spacing: var-list(--tct-checkbox-selected-letter-spacing, 0.25);\n            }\n            & + label circle:nth-child(2) {\n                fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n            }\n        }\n    }\n}\n\n.radio-tile {\n    flex-basis: 100px;\n    flex-grow: 0;\n    flex-wrap: wrap;\n\n    label[for] {\n        color: var-list(--tct-radio-label-color);\n        align-items: center;\n        border-radius: 3px;\n        border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        cursor: pointer;\n        display: block;\n        padding: 10px;\n        position: relative;\n        text-align: center;\n        transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        white-space: nowrap;\n    }\n\n    input {\n        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n        }\n\n        &:checked + label {\n            border-color: var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n            box-shadow: inset 0 0 0 2px #ffffff;\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid var-list(var-prefixer(checkbox-check-stroke-color), --t-checkbox-fill, #2e2e2e);\n                border-left-width: 5px;\n                border-left: 8px solid transparent;\n                border-right-width: 5px;\n                border-right: 8px solid transparent;\n                bottom: 0;\n                content: '';\n                height: 0;\n                left: 50%;\n                margin-left: -5px;\n                position: absolute;\n                width: 0;\n            }\n        }\n    }\n}\n\ninput:disabled + label[for] {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-radio',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Radio implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop() tabIndex: number = 0;\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) name: string;\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false }) groupDisabled: boolean = false;\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false }) groupReadonly: boolean = false;\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false }) groupTileLayout: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    @Event() change: EventEmitter;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        this.change.emit({ value: this.value });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-radio.js","mappings":"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","names":["Q2Radio"],"sources":["./src/components/q2-radio/styles.scss?tag=q2-radio&encapsulation=shadow","./src/components/q2-radio/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n}\n\n.radio-container {\n    --comp-radio-margin: #{var-list(\n            --tct-radio-margin,\n            unquote(\n                '#{var-list(--tct-radio-margin-vertical, --tct-scale-2, 10px)} #{var-list(--tct-radio-margin-horizontal, --tct-scale-3, 15px)}'\n            )\n        )};\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var-list(--tct-radio-label-color);\n        font-weight: var-list(--tct-radio-font-weight, --tct-checkbox-font-weight, 400);\n        align-items: center;\n        cursor: pointer;\n        margin-right: 1rem;\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var-list(--tct-scale-1, --app-scale-1x, 5px);\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: box-shadow var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        outline: 0;\n        width: 100%;\n    }\n\n    circle:nth-child(1) {\n        stroke-width: 2;\n        stroke: var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        fill: var-list(--tct-radio-background-fill, transparent);\n    }\n\n    input {\n        &:checked {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-checked-background-fill, --tct-radio-checked-bg, transparent);\n                stroke: var-list(\n                    --tct-radio-checked-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                font-weight: var-list(--tct-checkbox-selected-font-weight, 600);\n                letter-spacing: var-list(--tct-checkbox-selected-letter-spacing, 0.25);\n                color: var-list(--tct-radio-checked-label-color, inherit);\n            }\n            & + label circle:nth-child(2) {\n                fill: var-list(--tct-radio-checked-fill, --tct-checkbox-check-stroke-color, --t-checkbox-fill, #2e2e2e);\n            }\n        }\n\n        &:hover {\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-hover-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-hover-stroke-color,\n                    --tct-radio-stroke-color,\n                    --t-a11y-gray-color-AA,\n                    #949494\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-hover-label-color, inherit);\n            }\n        }\n\n        &:focus {\n            & + label svg {\n                box-shadow: var(--const-double-focus-ring);\n            }\n            & + label circle:nth-child(1) {\n                fill: var-list(--tct-radio-focus-background-fill, transparent);\n                stroke: var-list(\n                    --tct-radio-focus-stroke-color,\n                    --tct-checkbox-check-stroke-color,\n                    --t-checkbox-fill,\n                    #2e2e2e\n                );\n            }\n            & + label .label-content {\n                color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n            }\n        }\n    }\n}\n\n.radio-tile {\n    flex-basis: 100px;\n    flex-grow: 0;\n    flex-wrap: wrap;\n\n    label[for] {\n        color: var-list(--tct-radio-label-color);\n        align-items: center;\n        border-radius: 3px;\n        border: 2px solid var-list(--tct-radio-stroke-color, --t-a11y-gray-color-AA, #949494);\n        background: var-list(--tct-radio-background-fill, transparent);\n        cursor: pointer;\n        display: block;\n        padding: 10px;\n        position: relative;\n        text-align: center;\n        transition: border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n        white-space: nowrap;\n    }\n\n    input {\n        &:checked + label {\n            border-color: var-list(\n                --tct-radio-checked-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            box-shadow: inset 0 0 0 2px #ffffff;\n            background: var-list(--tct-radio-checked-background-fill, transparent);\n            color: var-list(--tct-radio-checked-label-color, inherit);\n\n            &:after {\n                border-bottom-width: 3px;\n                border-bottom: 5px solid\n                    var-list(\n                        --tct-radio-checked-stroke-color,\n                        var-prefixer(checkbox-check-stroke-color),\n                        --t-checkbox-fill,\n                        #2e2e2e\n                    );\n                border-left-width: 5px;\n                border-left: 8px solid transparent;\n                border-right-width: 5px;\n                border-right: 8px solid transparent;\n                bottom: 0;\n                content: '';\n                height: 0;\n                left: 50%;\n                margin-left: -5px;\n                position: absolute;\n                width: 0;\n            }\n        }\n\n        &:hover + label {\n            border-color: var-list(\n                --tct-radio-hover-stroke-color,\n                --tct-radio-stroke-color,\n                --t-a11y-gray-color-AA,\n                #949494\n            );\n            background: var-list(--tct-radio-hover-background-fill, transparent);\n            color: var-list(--tct-radio-hover-label-color, --tct-radio-label-color, inherit);\n        }\n\n        &:focus + label,\n        &:focus:checked + label {\n            border-color: var-list(\n                --tct-radio-focus-stroke-color,\n                var-prefixer(checkbox-check-stroke-color),\n                --t-checkbox-fill,\n                #2e2e2e\n            );\n            background: var-list(--tct-radio-focus-background-fill, transparent);\n            box-shadow: var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'));\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n    }\n}\n\ninput:disabled + label[for] {\n    cursor: not-allowed;\n    opacity: var-list(--tct-disabled-opacity, --app-disabled-opacity, 0.4);\n}\n","import { Component, Prop, h, Element, ComponentInterface, Listen, Watch, Event, EventEmitter } from '@stencil/core';\nimport { createGuid, handleAriaLabel, loc, overrideFocus } from 'src/utils';\n\n@Component({\n    tag: 'q2-radio',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Radio implements ComponentInterface {\n    @Prop({ reflect: true, mutable: true }) label: string;\n    @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n    @Prop({ reflect: true }) value: string;\n    @Prop({ reflect: true }) disabled: boolean = false;\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n    @Prop({ reflect: true }) readonly: boolean;\n    @Prop() tabIndex: number = 0;\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true }) name: string;\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false }) groupDisabled: boolean = false;\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false }) groupReadonly: boolean = false;\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false }) groupTileLayout: boolean = false;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    @Event() change: EventEmitter;\n\n    ////////// LIFECYCLE HOOKS ////////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        this.isLoaded = true;\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => {\n            this.inputField.focus();\n            this.inputField.click();\n        };\n    }\n\n    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('checked')\n    checkedObserver() {\n        if (!this.isLoaded) return;\n        if (!this.checked) return;\n        this.change.emit({ value: this.value });\n    }\n\n    /////// HOST ELEMENT EVENTS ///////\n    @Listen('click')\n    onHostClick(event: Event) {\n        if (this.disabled) {\n            event.stopImmediatePropagation();\n        } else if (this.groupReadonly) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            this.inputField.focus();\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (event.target === this.hostElement) {\n            this.inputField.focus();\n        }\n    }\n\n    inputChange = (event: Event) => {\n        event.stopPropagation();\n        if (this.disabled || this.readonly || this.groupReadonly || this.groupDisabled) {\n            event.preventDefault();\n            return false;\n        }\n\n        if (event.target instanceof HTMLInputElement) {\n            this.checked = event.target.checked;\n        }\n    };\n\n    render() {\n        return (\n            <div class={this.groupTileLayout ? 'radio-tile' : 'radio-container'}>\n                <input\n                    ref={el => (this.inputField = el)}\n                    class=\"sr\"\n                    id={this._id}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    disabled={this.disabled || this.groupDisabled}\n                    checked={this.checked}\n                    aria-label={this.label && this.hideLabel ? loc(this.label) : undefined}\n                    onChange={this.inputChange}\n                    test-id=\"q2RadioInnerRadioBox\"\n                ></input>\n\n                <label\n                    htmlFor={this._id}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"4\"\n                            />\n                        </svg>\n                    )}\n                    {!this.hideLabel && (\n                        <div class=\"label-content\">\n                            {(this.label && loc(this.label)) || ''}\n                            <slot></slot>\n                        </div>\n                    )}\n                </label>\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/components/q2-section.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$4 } from './index5.js';
 import { d as defineCustomElement$3 } from './index8.js';
 import { d as defineCustomElement$2 } from './index10.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)))}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;background:var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));color:var(--tct-section-font-color, var(--t-section-font-color, var(--t-text, #4d4d4d)));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 3px)));margin:var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)))}@media screen and (max-width: 767px){:host{--comp-default-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)))}}@media print{:host{--comp-default-print-margin:var(--app-scale-3x, 15px) 0;margin:var(--tct-section-print-margin, var(--comp-default-print-margin))}}.wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));--comp-default-wrapper-padding:var(--app-scale-1x, 5px) 0;display:block;padding:var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)))}.wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit))}:host([collapsible]) .wrapper{--comp-tween:var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)))}header{--comp-default-header-padding:0 var(--app-scale-3x, 15px);padding:var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));display:flex}@media print{header{padding:var(--tct-section-header-print-padding, 0)}}header.has-header{min-height:var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px))}.header-content{flex:1 1 100%;min-width:0;align-self:center}:host([collapsible]) .header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}q2-icon{transition:transform var(--comp-tween)}:host(:not([expanded])) q2-icon,:host([expanded=false]) q2-icon{transform:rotate(180deg)}.content-wrapper{height:auto}.content-wrapper.is-closed{display:none;overflow:hidden}.content-wrapper.is-transitioning{overflow:hidden}:host([collapsible]) .content-wrapper{transition:height var(--comp-tween)}.content{--comp-default-content-padding:var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)))}@media print{.content{padding:var(--tct-section-content-print-padding, 0)}}.content:focus{box-shadow:none}:host([collapsible]) :host(:not([expanded])) .content{visibility:hidden}";
 
 const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTMLElement {
   constructor() {

package/dist/components/q2-section.js.map

@@ -1 +1 @@
-{"file":"q2-section.js","mappings":"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","names":["Q2Section"],"sources":["./src/components/q2-section/styles.scss?tag=q2-section&encapsulation=shadow","./src/components/q2-section/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n    display: block;\n    background: var-list(\n        --tct-section-background,\n        var-prefixer(section-background-color),\n        var-prefixer(section-bg),\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n    border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 3px);\n    margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n\n    @media screen and (max-width: 767px) {\n        --comp-default-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n    }\n\n    @media print {\n        --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n    }\n}\n\n.wrapper {\n    --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n    --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n    display: block;\n    padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n    &:hover {\n        box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n    }\n\n    :host([collapsible]) & {\n        --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n    }\n}\n\nheader {\n    --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n    display: flex;\n\n    @media print {\n        padding: var-list(--tct-section-header-print-padding, 0);\n    }\n\n    &.has-header {\n        min-height: var-list(var-prefixer(section-header-min-height), 44px);\n    }\n}\n\n.header-content {\n    flex: 1 1 100%;\n    min-width: 0;\n    align-self: center;\n\n    :host([collapsible]) & {\n        cursor: pointer;\n    }\n}\n\n.title {\n    /* Need access to typography in elements */\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\nq2-icon {\n    transition: transform var(--comp-tween);\n\n    :host(:not([expanded])) &,\n    :host([expanded='false']) & {\n        transform: rotate(180deg);\n    }\n}\n\n.content-wrapper {\n    height: auto;\n\n    &.is-closed {\n        display: none;\n        overflow: hidden;\n    }\n\n    &.is-transitioning {\n        overflow: hidden;\n    }\n\n    :host([collapsible]) & {\n        transition: height var(--comp-tween);\n    }\n}\n\n.content {\n    --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n    @media print {\n        padding: var-list(--tct-section-content-print-padding, 0);\n    }\n\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([collapsible]) :host(:not([expanded])) & {\n        visibility: hidden;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Listen,\n    State,\n    Watch,\n    h,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({\n    tag: 'q2-section',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Section implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) collapsible: boolean;\n    @Prop({ reflect: true }) noCollapseIcon: boolean;\n    @Prop({ reflect: true, mutable: true }) expanded: boolean;\n\n    @Element() hostElement: HTMLElement;\n    @State() contentHeight: string;\n    @State() hideContent: boolean = false;\n    @State() hasYieldedHeader: boolean = false;\n\n    titleId: string = 'title';\n    contentId: string = 'content';\n    resizerFn: NodeJS.Timer | undefined;\n    headerSlotMutationObserver: MutationObserver;\n    contentSlotMutationObserver: MutationObserver;\n    contentContainer: HTMLDivElement;\n    headerSlotWrapper: HTMLDivElement;\n    headerSlot: HTMLSlotElement;\n    contentSlot: HTMLSlotElement;\n\n    componentWillLoad() {\n        this.onHeaderSlotChange();\n        const { collapsible, expanded } = this;\n        this.contentHeight = collapsible && expanded ? undefined : '0px';\n        this.hideContent = !expanded;\n    }\n\n    componentDidLoad() {\n        this.addHeaderSlotListener();\n        this.addContentSlotListener();\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.removeHeaderSlotListener();\n        this.removeContentSlotListener();\n    }\n\n    /// Listeners ///\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n            this.expanded = event.detail.expanded;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.contentContainer.focus();\n    }\n\n    /// Watchers ///\n    @Watch('expanded')\n    async expandedObserver(expanded: boolean) {\n        this.clearResizeInterval();\n        this.resizerFn = setInterval(resizeIframe, 5);\n\n        if (expanded) {\n            this.expandSection();\n        } else {\n            this.collapseSection();\n        }\n    }\n\n    async collapseSection() {\n        this.contentHeight = this.contentContainerHeight;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    async expandSection() {\n        this.hideContent = false;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    @Watch('collapsible')\n    collapsibleObserver() {\n        this.contentHeight = this.currentHeight;\n    }\n\n    /// Events ///\n    @Event() change: EventEmitter;\n\n    /// Event Handlers ///\n    onHeaderClick = () => {\n        this.change.emit({\n            expanded: !this.expanded,\n        });\n    };\n\n    onTransitionEnd = () => {\n        if (this.expanded) {\n            this.contentHeight = undefined;\n        } else {\n            this.hideContent = true;\n        }\n\n        setTimeout(() => {\n            // This gives enough time for all values to get passed over\n            // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n            // Will revisit in TCT-599\n            this.clearResizeInterval();\n        }, 1000);\n    };\n\n    onHeaderSlotChange = () => {\n        const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n        if (this.hasYieldedHeader !== hasSlotContent) {\n            this.hasYieldedHeader = !!hasSlotContent;\n        }\n    };\n\n    /// Getters ///\n    get currentHeight() {\n        const { collapsible, expanded } = this;\n        if (!collapsible) {\n            return null;\n        } else if (expanded) {\n            return this.contentContainerHeight;\n        } else {\n            return '0';\n        }\n    }\n\n    get contentContainerHeight() {\n        return `${this.contentContainer.offsetHeight || 0}px`;\n    }\n\n    /// Helpers ///\n    clearResizeInterval = () => {\n        this.resizerFn && clearInterval(this.resizerFn);\n    };\n\n    addHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        const observer = new MutationObserver(this.onHeaderSlotChange);\n        observer.observe(this.headerSlotWrapper, { childList: true });\n        this.headerSlotMutationObserver = observer;\n    };\n\n    removeHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        this.headerSlotMutationObserver.disconnect();\n    };\n\n    addContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.addEventListener('slotchange', resizeIframe);\n            return;\n        }\n\n        const observer = new MutationObserver(resizeIframe);\n        observer.observe(this.contentContainer, { childList: true, subtree: true });\n        this.contentSlotMutationObserver = observer;\n    };\n\n    removeContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.removeEventListener('slotchange', resizeIframe);\n            return;\n        }\n        this.contentSlotMutationObserver.disconnect();\n    };\n\n    render() {\n        const hasHeader = this.label || this.hasYieldedHeader;\n        const wrapperClasses = ['content-wrapper'];\n        const { collapsible, hideContent, contentHeight } = this;\n        if (collapsible) {\n            if (hideContent) wrapperClasses.push('is-closed');\n            else if (contentHeight) wrapperClasses.push('is-transitioning');\n        }\n\n        const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n        return (\n            <section class=\"wrapper\">\n                <header class={hasHeader ? 'has-header' : ''}>\n                    <div\n                        class=\"header-content\"\n                        id={this.titleId}\n                        onClick={this.collapsible && this.onHeaderClick}\n                    >\n                        {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n                        <div\n                            ref={el => (this.headerSlotWrapper = el)}\n                            class=\"header-slot-wrapper\"\n                        >\n                            <slot\n                                ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n                                name=\"q2-section-header\"\n                            />\n                        </div>\n                    </div>\n                    {this.collapsible && !this.noCollapseIcon && (\n                        <q2-btn\n                            label={loc(this.label || 'tecton.element.section.defaultToggleLabel')}\n                            ariaExpanded={`${!!this.expanded}`}\n                            ariaControls={this.contentId}\n                            test-id=\"toggleButton\"\n                            hide-label\n                            onClick={this.onHeaderClick}\n                        >\n                            <q2-icon type=\"chevron-up\" />\n                        </q2-btn>\n                    )}\n                </header>\n                <div\n                    class={wrapperClasses.join(' ')}\n                    id={this.contentId}\n                    aria-labelledby={this.titleId}\n                    role=\"region\"\n                    onTransitionEnd={this.onTransitionEnd}\n                    style={\n                        this.collapsible && {\n                            height: this.contentHeight,\n                        }\n                    }\n                >\n                    <div\n                        ref={el => (this.contentContainer = el)}\n                        class=\"content\"\n                        tabindex=\"-1\"\n                    >\n                        <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n                    </div>\n                </div>\n            </section>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-section.js","mappings":"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","names":["Q2Section"],"sources":["./src/components/q2-section/styles.scss?tag=q2-section&encapsulation=shadow","./src/components/q2-section/index.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions.scss';\n\n:host {\n    display: block;\n    background: var-list(\n        --tct-section-background,\n        var-prefixer(section-background-color),\n        var-prefixer(section-bg),\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(section-font-color), --t-text, #4d4d4d);\n    border-radius: var-list(var-prefixer(section-border-radius), --app-border-radius-1, 3px);\n    margin: var-list(var-prefixer(section-margin), --app-scale-3x, 15px);\n\n    @media screen and (max-width: 767px) {\n        --comp-default-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(var-prefixer(section-margin), --comp-default-margin);\n    }\n\n    @media print {\n        --comp-default-print-margin: var(--app-scale-3x, 15px) 0;\n        margin: var-list(--tct-section-print-margin, --comp-default-print-margin);\n    }\n}\n\n.wrapper {\n    --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-1, unquote('0.2s ease'))};\n    --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;\n    display: block;\n    padding: var-list(var-prefixer(section-wrapper-padding), --comp-default-wrapper-padding);\n\n    &:hover {\n        box-shadow: var-list(var-prefixer(section-wrapper-hover-box-shadow), inherit);\n    }\n\n    :host([collapsible]) & {\n        --comp-tween: #{var-list(var-prefixer(section-tween), --app-tween-2, unquote('0.4s ease'))};\n    }\n}\n\nheader {\n    --comp-default-header-padding: 0 var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-header-padding), --comp-default-header-padding);\n    display: flex;\n\n    @media print {\n        padding: var-list(--tct-section-header-print-padding, 0);\n    }\n\n    &.has-header {\n        min-height: var-list(var-prefixer(section-header-min-height), 44px);\n    }\n}\n\n.header-content {\n    flex: 1 1 100%;\n    min-width: 0;\n    align-self: center;\n\n    :host([collapsible]) & {\n        cursor: pointer;\n    }\n}\n\n.title {\n    /* Need access to typography in elements */\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\nq2-icon {\n    transition: transform var(--comp-tween);\n\n    :host(:not([expanded])) &,\n    :host([expanded='false']) & {\n        transform: rotate(180deg);\n    }\n}\n\n.content-wrapper {\n    height: auto;\n\n    &.is-closed {\n        display: none;\n        overflow: hidden;\n    }\n\n    &.is-transitioning {\n        overflow: hidden;\n    }\n\n    :host([collapsible]) & {\n        transition: height var(--comp-tween);\n    }\n}\n\n.content {\n    --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(section-content-padding), --comp-default-content-padding);\n\n    @media print {\n        padding: var-list(--tct-section-content-print-padding, 0);\n    }\n\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([collapsible]) :host(:not([expanded])) & {\n        visibility: hidden;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Listen,\n    State,\n    Watch,\n    h,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({\n    tag: 'q2-section',\n    shadow: true,\n    styleUrl: 'styles.scss',\n})\nexport class Q2Section implements ComponentInterface {\n    @Prop({ reflect: true }) label: string;\n    @Prop({ reflect: true }) collapsible: boolean;\n    @Prop({ reflect: true }) noCollapseIcon: boolean;\n    @Prop({ reflect: true, mutable: true }) expanded: boolean;\n\n    @Element() hostElement: HTMLElement;\n    @State() contentHeight: string;\n    @State() hideContent: boolean = false;\n    @State() hasYieldedHeader: boolean = false;\n\n    titleId: string = 'title';\n    contentId: string = 'content';\n    resizerFn: NodeJS.Timer | undefined;\n    headerSlotMutationObserver: MutationObserver;\n    contentSlotMutationObserver: MutationObserver;\n    contentContainer: HTMLDivElement;\n    headerSlotWrapper: HTMLDivElement;\n    headerSlot: HTMLSlotElement;\n    contentSlot: HTMLSlotElement;\n\n    componentWillLoad() {\n        this.onHeaderSlotChange();\n        const { collapsible, expanded } = this;\n        this.contentHeight = collapsible && expanded ? undefined : '0px';\n        this.hideContent = !expanded;\n    }\n\n    componentDidLoad() {\n        this.addHeaderSlotListener();\n        this.addContentSlotListener();\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        this.removeHeaderSlotListener();\n        this.removeContentSlotListener();\n    }\n\n    /// Listeners ///\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n            this.expanded = event.detail.expanded;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.contentContainer.focus();\n    }\n\n    /// Watchers ///\n    @Watch('expanded')\n    async expandedObserver(expanded: boolean) {\n        this.clearResizeInterval();\n        this.resizerFn = setInterval(resizeIframe, 5);\n\n        if (expanded) {\n            this.expandSection();\n        } else {\n            this.collapseSection();\n        }\n    }\n\n    async collapseSection() {\n        this.contentHeight = this.contentContainerHeight;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    async expandSection() {\n        this.hideContent = false;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    @Watch('collapsible')\n    collapsibleObserver() {\n        this.contentHeight = this.currentHeight;\n    }\n\n    /// Events ///\n    @Event() change: EventEmitter;\n\n    /// Event Handlers ///\n    onHeaderClick = () => {\n        this.change.emit({\n            expanded: !this.expanded,\n        });\n    };\n\n    onTransitionEnd = () => {\n        if (this.expanded) {\n            this.contentHeight = undefined;\n        } else {\n            this.hideContent = true;\n        }\n\n        setTimeout(() => {\n            // This gives enough time for all values to get passed over\n            // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n            // Will revisit in TCT-599\n            this.clearResizeInterval();\n        }, 1000);\n    };\n\n    onHeaderSlotChange = () => {\n        const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n        if (this.hasYieldedHeader !== hasSlotContent) {\n            this.hasYieldedHeader = !!hasSlotContent;\n        }\n    };\n\n    /// Getters ///\n    get currentHeight() {\n        const { collapsible, expanded } = this;\n        if (!collapsible) {\n            return null;\n        } else if (expanded) {\n            return this.contentContainerHeight;\n        } else {\n            return '0';\n        }\n    }\n\n    get contentContainerHeight() {\n        return `${this.contentContainer.offsetHeight || 0}px`;\n    }\n\n    /// Helpers ///\n    clearResizeInterval = () => {\n        this.resizerFn && clearInterval(this.resizerFn);\n    };\n\n    addHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        const observer = new MutationObserver(this.onHeaderSlotChange);\n        observer.observe(this.headerSlotWrapper, { childList: true });\n        this.headerSlotMutationObserver = observer;\n    };\n\n    removeHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        this.headerSlotMutationObserver.disconnect();\n    };\n\n    addContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.addEventListener('slotchange', resizeIframe);\n            return;\n        }\n\n        const observer = new MutationObserver(resizeIframe);\n        observer.observe(this.contentContainer, { childList: true, subtree: true });\n        this.contentSlotMutationObserver = observer;\n    };\n\n    removeContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.removeEventListener('slotchange', resizeIframe);\n            return;\n        }\n        this.contentSlotMutationObserver.disconnect();\n    };\n\n    render() {\n        const hasHeader = this.label || this.hasYieldedHeader;\n        const wrapperClasses = ['content-wrapper'];\n        const { collapsible, hideContent, contentHeight } = this;\n        if (collapsible) {\n            if (hideContent) wrapperClasses.push('is-closed');\n            else if (contentHeight) wrapperClasses.push('is-transitioning');\n        }\n\n        const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n        return (\n            <section class=\"wrapper\">\n                <header class={hasHeader ? 'has-header' : ''}>\n                    <div\n                        class=\"header-content\"\n                        id={this.titleId}\n                        onClick={this.collapsible && this.onHeaderClick}\n                    >\n                        {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n                        <div\n                            ref={el => (this.headerSlotWrapper = el)}\n                            class=\"header-slot-wrapper\"\n                        >\n                            <slot\n                                ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n                                name=\"q2-section-header\"\n                            />\n                        </div>\n                    </div>\n                    {this.collapsible && !this.noCollapseIcon && (\n                        <q2-btn\n                            label={loc(this.label || 'tecton.element.section.defaultToggleLabel')}\n                            ariaExpanded={`${!!this.expanded}`}\n                            ariaControls={this.contentId}\n                            test-id=\"toggleButton\"\n                            hide-label\n                            onClick={this.onHeaderClick}\n                        >\n                            <q2-icon type=\"chevron-up\" />\n                        </q2-btn>\n                    )}\n                </header>\n                <div\n                    class={wrapperClasses.join(' ')}\n                    id={this.contentId}\n                    aria-labelledby={this.titleId}\n                    role=\"region\"\n                    onTransitionEnd={this.onTransitionEnd}\n                    style={\n                        this.collapsible && {\n                            height: this.contentHeight,\n                        }\n                    }\n                >\n                    <div\n                        ref={el => (this.contentContainer = el)}\n                        class=\"content\"\n                        tabindex=\"-1\"\n                    >\n                        <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n                    </div>\n                </div>\n            </section>\n        );\n    }\n}\n"],"version":3}

package/dist/components/q2-select.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './index10.js';
 import { d as defineCustomElement$3 } from './index14.js';
 import { d as defineCustomElement$2 } from './index15.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));position:sticky;top:0;z-index:5;background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.multi-select-header legend{padding:0;float:left}.multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.multi-select-header input:checked+label,.multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-select-margin:var(--tct-select-margin, var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-4, 30px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-4, 30px))));display:block;margin:var(--comp-select-margin)}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px)}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 3px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus+label{box-shadow:var(--const-double-focus-ring)}";
 
 const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLElement {
   constructor() {
@@ -28,14 +28,25 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
       this.showSelected = false;
     };
     this.onMutationObserved = () => {
-      const slotContainer = this.hostElement.querySelector('.custom-display-content');
-      const displaySlot = this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');
+      const { hostElement, hasPopoverTop, hasPopoverBottom } = this;
+      const slotContainer = hostElement.querySelector('.custom-display-content');
+      const displaySlot = hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');
       const hasCustomDisplay = !!displaySlot
         ? displaySlot.assignedNodes().length > 0
         : slotContainer.children.length > 0;
       if (this.hasCustomDisplay !== hasCustomDisplay) {
         this.hasCustomDisplay = hasCustomDisplay;
       }
+      const popTopSlot = hostElement.shadowRoot.querySelector('slot[name="popover-top"]');
+      const topSlotHasNode = popTopSlot.assignedNodes().length > 0;
+      if (hasPopoverTop !== topSlotHasNode) {
+        this.hasPopoverTop = topSlotHasNode;
+      }
+      const popBottomSlot = hostElement.shadowRoot.querySelector('slot[name="popover-bottom"]');
+      const bottomSlotHasNode = popBottomSlot.assignedNodes().length > 0;
+      if (hasPopoverBottom !== bottomSlotHasNode) {
+        this.hasPopoverBottom = bottomSlotHasNode;
+      }
       this.checkSelectedOptions();
     };
     this.onOptionListChange = (event) => {
@@ -46,18 +57,28 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
       this.handleSelectionChanges(event.detail);
     };
     /// Event handlers ///
-    this.popoverStateChanged = ({ detail: { open } }) => {
+    this.onPopoverState = ({ detail: { open, action }, }) => {
+      if (!open || this.searchText) {
+        if (action !== 'select') {
+          this.optionList.setActiveElement(null);
+        }
+        this.inputField.focus();
+      }
       if (this.open === open)
         return;
       this.open = open;
-      if (open && !this.searchText)
-        return;
-      this.optionList.setActiveElement(null);
-      this.inputField.focus();
     };
     this.inputKeydownHandler = (event) => {
       if (this.readonly || this.disabled)
         return;
+      const key = event.key;
+      const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;
+      const isShiftTab = key === 'Tab' && event.shiftKey;
+      if (hasSlot && (key === 'Tab' || key === 'Enter' || isShiftTab))
+        return;
+      if (shouldShowActionSheet(this, event)) {
+        return this.executeActionSheet(event);
+      }
       const keysForOptionListToHandle = [
         'ArrowDown',
         'ArrowUp',
@@ -68,15 +89,12 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
         'Escape',
         'Tab',
       ];
-      if (shouldShowActionSheet(this, event)) {
-        return this.executeActionSheet(event);
-      }
-      if (this.searchable && !keysForOptionListToHandle.includes(event.key))
+      if (this.searchable && !keysForOptionListToHandle.includes(key))
         return;
       if (this.shouldClearSearchText(event))
         this.clearSearchText();
       // Prevent click event from firing when spacebar is pressed
-      if (event.key === ' ')
+      if (key === ' ')
         event.preventDefault();
       this.optionList.handleExternalKeydown(event);
     };
@@ -88,6 +106,9 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
         event.stopPropagation();
       if (isShiftTab) {
         event.stopPropagation();
+        // allows shift+tab keys to select the top slot when present
+        if (this.hasPopoverTop)
+          return;
         this.optionList.setDefaultActiveElement();
       }
     };
@@ -156,6 +177,8 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
     this.showSelected = false;
     this.searchText = '';
     this.hasCustomDisplay = false;
+    this.hasPopoverTop = false;
+    this.hasPopoverBottom = false;
     this.inputFocused = false;
     this.statusMessage = undefined;
     this.prioritizeSearch = false;
@@ -191,6 +214,10 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
     var _a, _b;
     return (_b = (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-field');
   }
+  get innerInputContainer() {
+    var _a, _b;
+    return (_b = (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-container');
+  }
   get badgeValue() {
     var _a, _b;
     if (!this.multiple)
@@ -269,13 +296,13 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
   }
   openChanged(isOpen) {
     this.scheduledAfterRender.push(() => {
-      const { multiple, multiSelectHeader, popoverElement } = this;
-      const height = (isOpen && multiple && (multiSelectHeader === null || multiSelectHeader === void 0 ? void 0 : multiSelectHeader.offsetHeight)) || 0;
+      const { popoverTopContainer, popoverElement } = this;
+      const height = (isOpen && (popoverTopContainer === null || popoverTopContainer === void 0 ? void 0 : popoverTopContainer.offsetHeight)) || 0;
       if (height) {
-        popoverElement.style.setProperty('--comp-multi-select-header-height', `${height}px`);
+        popoverElement.style.setProperty('--comp-popover-top-container-height', `${height}px`);
       }
       else {
-        popoverElement.style.removeProperty('--comp-multi-select-header-height');
+        popoverElement.style.removeProperty('--comp-popover-top-container-height');
       }
     });
   }
@@ -286,16 +313,34 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
     innerInputField === null || innerInputField === void 0 ? void 0 : innerInputField.focus();
     innerInputField.dispatchEvent(new FocusEvent('focus'));
   }
+  /**
+   * Emulates clicking the `<input>` to display the popover if it is hidden.
+   *
+   * @testOnly
+   */
   async openPopover() {
     if (this.open || this.disabled)
       return;
     this._togglePopover();
   }
+  /**
+   * Emulates clicking the `<input>` to hide the popover if it is visible.
+   *
+   * @testOnly
+   */
   async closePopover() {
     if (!this.open || this.disabled)
       return;
     this._togglePopover();
   }
+  /**
+   * Emulates clicking the `<input>` to display the popover and selecting the option(s) with the specified value(s).
+   *
+   * If the multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed
+   * after the option(s) are selected.
+   *
+   * @testOnly
+   */
   async setValue(values, options = { closePopover: true }) {
     const valuesSet = new Set(Array.isArray(values) ? values : [values]);
     if (!this.open) {
@@ -311,6 +356,14 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
       await waitForNextPaint();
     }
   }
+  /**
+   * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
+   *
+   * @warning
+   * Only applicable when the input is searchable.
+   *
+   * @testOnly
+   */
   searchOptions(query) {
     if (!this.searchable)
       return;
@@ -540,13 +593,13 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
         [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, placeholder: this.placeholder || undefined, hideLabel: this.hideLabel, ariaExpanded: `${this.open}`, ariaControls: "option-list", ariaHaspopup: "listbox", role: "combobox", pseudo: showAsPseudo, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, badgeValue: this.badgeValue, badgeTheme: this.inputFocused ? 'primary' : undefined }, this.renderCustomDisplay()), h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick }, h("slot", { name: "q2-select-display" })), this.optionsDropdown()));
   }
   optionsDropdown() {
-    return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputField, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, onPopoverStateChanged: this.popoverStateChanged, block: true }, h("div", { class: "popover-content", tabindex: "-1" }, h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, "aria-label": this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), this.multiple && this.visibilityToggle())));
+    return (h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, minHeight: this.popoverMinHeight, direction: this.popDirection, block: true }, h("div", { class: "popover-content" }, h("q2-option-list", { onPopoverState: this.onPopoverState, ref: el => (this.optionList = el), type: "listbox", id: "option-list", "show-selected": this.showSelected, label: this.listLabel, multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, onChange: this.onOptionListChange }, h("slot", null)), h("div", { class: "popover-top-container", ref: el => (this.popoverTopContainer = el), hidden: !this.multiple && !this.hasPopoverTop, tabindex: "-1" }, h("slot", { name: "popover-top" }), this.multiple && this.visibilityToggle())), h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, h("slot", { name: "popover-bottom" }))));
   }
   visibilityToggle() {
     var _a, _b;
     const selectedOptionsCount = (_b = (_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     const { showSelected } = this;
-    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, h("fieldset", null, h("legend", { "aria-label": loc('tecton.element.select.multiHeader.showing') }, loc('tecton.element.select.multiHeader.showing')), h("div", null, h("input", { class: "sr", type: "radio", id: "all", name: "viewDisplay", value: "all", checked: !showSelected, "aria-label": loc('tecton.element.select.multiHeader.allAriaLabel'), "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "all" }, loc('tecton.element.select.multiHeader.all'))), h("div", null, h("input", { class: "sr", type: "radio", id: "selected", disabled: selectedOptionsCount === 0, name: "viewDisplay", value: "selected", "aria-label": loc('tecton.element.select.multiHeader.selectedAriaLabel', [
+    return (h("div", { class: "multi-select-header" }, h("fieldset", null, h("legend", { "aria-label": loc('tecton.element.select.multiHeader.showing') }, loc('tecton.element.select.multiHeader.showing')), h("div", null, h("input", { class: "sr", type: "radio", id: "all", name: "viewDisplay", value: "all", checked: !showSelected, "aria-label": loc('tecton.element.select.multiHeader.allAriaLabel'), "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "all" }, loc('tecton.element.select.multiHeader.all'))), h("div", null, h("input", { class: "sr", type: "radio", id: "selected", disabled: selectedOptionsCount === 0, name: "viewDisplay", value: "selected", "aria-label": loc('tecton.element.select.multiHeader.selectedAriaLabel', [
         selectedOptionsCount,
       ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
   }
@@ -582,6 +635,8 @@ const Q2Select$1 = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLE
     "showSelected": [32],
     "searchText": [32],
     "hasCustomDisplay": [32],
+    "hasPopoverTop": [32],
+    "hasPopoverBottom": [32],
     "inputFocused": [32],
     "statusMessage": [32],
     "prioritizeSearch": [32],