q2-tecton-elements 1.67.2 → 1.68.0

package/dist/q2-tecton-elements/q2-radio-group.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-radio-group.entry.esm.js","sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n    padding: var(--tct-radio-group-fieldset-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    column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    color: var-list(--tct-radio-group-label-font-color, inherit);\n    font-size: var-list(--tct-radio-group-label-font-size, inherit);\n    font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n    text-transform: var-list(--tct-radio-group-label-text-transform, none);\n    letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\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\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(radio-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(radio-group-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-0x, 0px);\n    border-width: var-list(--tct-radio-group-border-width, 1px);\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\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, overrideFocus, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio Group\n * @category Forms\n * @summary Use for selecting exactly one option from a small set of choices.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\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    // #endregion\n    // #region Listeners\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    // #endregion\n    // #region Public Methods API\n\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    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\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('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    @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    // #endregion\n    // #region Local Methods\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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    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    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], { value: event.detail.value });\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    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = (showLabel && !this.hideLabel) || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</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={hasError ? `${hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-radio-group.entry.esm.js","sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n    padding: var(--tct-radio-group-fieldset-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    column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    color: var-list(--tct-radio-group-label-font-color, inherit);\n    font-size: var-list(--tct-radio-group-label-font-size, inherit);\n    font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n    text-transform: var-list(--tct-radio-group-label-text-transform, none);\n    letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\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\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(radio-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(radio-group-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-0x, 0px);\n    border-width: var-list(--tct-radio-group-border-width, 1px);\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\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, overrideFocus, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio Group\n * @category Forms\n * @summary Use for selecting exactly one option from a small set of choices.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\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    // #endregion\n    // #region Listeners\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    // #endregion\n    // #region Public Methods API\n\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    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\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('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    @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    // #endregion\n    // #region Local Methods\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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    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    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], { value: event.detail.value });\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    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = (showLabel && !this.hideLabel) || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</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={hasError ? `${hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

package/dist/q2-tecton-elements/q2-radio-group.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as r, h as i, F as a, g as o } from "./index-CGkHOjh1.js";
 
-import { c as e, o as n, i as s, r as d } from "./index-C4PILj1_.js";
+import { c as e, o as n, i as s, r as d } from "./index-C5gj0T_3.js";
 
 import { m as l } from "./mirror-emit-DUjY_ucm.js";
 

package/dist/q2-tecton-elements/q2-radio-group.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["q2RadioGroupCss","Q2RadioGroup","constructor","hostRef","this","_id","createGuid","disabled","hasError","tileAlignment","checkedRadioExists","firstCheckedRadio","radioElements","find","radio","checked","undefined","value","length","tabIndex","onInnerRadioChange","event","stopImmediatePropagation","readonly","mirrorEmit","detail","onMutationObserved","valueUpdated","nameUpdated","disabledUpdated","readonlyUpdated","tileLayoutUpdated","tileLayout","componentWillLoad","handleDeprecatedTilelayout","tilelayout","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","mutationObserver","overrideFocus","onHostElementChange","target","onchange","delegateFocus","isEventFromElement","querySelector","dispatchEvent","FocusEvent","keydownHandler","currentValue","getAttribute","index","findIndex","el","sign","key","Math","max","min","preventDefault","setValue","forEach","click","groupDisabled","name","groupReadonly","groupTileLayout","newVal","removeAttribute","inputId","Array","from","querySelectorAll","inputDom","alignment","includes","h","class","render","showLabel","label","optional","showLabelRow","hideLabel","Fragment","renderLabel","type","onChange"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n    padding: var(--tct-radio-group-fieldset-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    column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    color: var-list(--tct-radio-group-label-font-color, inherit);\n    font-size: var-list(--tct-radio-group-label-font-size, inherit);\n    font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n    text-transform: var-list(--tct-radio-group-label-text-transform, none);\n    letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\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\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(radio-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(radio-group-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-0x, 0px);\n    border-width: var-list(--tct-radio-group-border-width, 1px);\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\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, overrideFocus, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio Group\n * @category Forms\n * @summary Use for selecting exactly one option from a small set of choices.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\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    // #endregion\n    // #region Listeners\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    // #endregion\n    // #region Public Methods API\n\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    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\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('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    @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    // #endregion\n    // #region Local Methods\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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    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    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], { value: event.detail.value });\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    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = (showLabel && !this.hideLabel) || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</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={hasError ? `${hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2RadioGroupCss","Q2RadioGroup","constructor","hostRef","this","_id","createGuid","disabled","hasError","tileAlignment","checkedRadioExists","firstCheckedRadio","radioElements","find","radio","checked","undefined","value","length","tabIndex","onInnerRadioChange","event","stopImmediatePropagation","readonly","mirrorEmit","detail","onMutationObserved","valueUpdated","nameUpdated","disabledUpdated","readonlyUpdated","tileLayoutUpdated","tileLayout","componentWillLoad","handleDeprecatedTilelayout","tilelayout","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","mutationObserver","overrideFocus","onHostElementChange","target","onchange","delegateFocus","isEventFromElement","querySelector","dispatchEvent","FocusEvent","keydownHandler","currentValue","getAttribute","index","findIndex","el","sign","key","Math","max","min","preventDefault","setValue","forEach","click","groupDisabled","name","groupReadonly","groupTileLayout","newVal","removeAttribute","inputId","Array","from","querySelectorAll","inputDom","alignment","includes","h","class","render","showLabel","label","optional","showLabelRow","hideLabel","Fragment","renderLabel","type","onChange"],"sources":["src/components/q2-radio-group/q2-radio-group.scss?tag=q2-radio-group&encapsulation=shadow","src/components/q2-radio-group/q2-radio-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    --comp-default-radio-group-margin: #{var-list(var-prefixer(radio-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(radio-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-radio-group-margin, --comp-default-radio-group-margin);\n}\n\nfieldset {\n    padding: var(--tct-radio-group-fieldset-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    column-gap: var(--tct-radio-group-label-column-gap, var(--app-scale-2x, 10px));\n\n    color: var-list(--tct-radio-group-label-font-color, inherit);\n    font-size: var-list(--tct-radio-group-label-font-size, inherit);\n    font-weight: var-list(--tct-radio-group-label-font-weight, 600);\n    text-transform: var-list(--tct-radio-group-label-text-transform, none);\n    letter-spacing: var-list(--tct-radio-group-label-letter-spacing, inherit);\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\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-radio-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(radio-group-label-optional-color),\n        var-prefixer(a11y-color),\n        var-prefixer(a11y-gray-color),\n        var-prefixer(gray-7),\n        var-prefixer(gray-d1),\n        --app-gray-d1,\n        rgba(77, 77, 77, 0.77)\n    );\n    font-size: var-list(var-prefixer(radio-group-label-optional-font-size), 12px);\n    font-weight: var-list(var-prefixer(radio-group-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-0x, 0px);\n    border-width: var-list(--tct-radio-group-border-width, 1px);\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-radio-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-radio-group-error-border-color, --const-stoplight-alert, #d20a0a);\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, overrideFocus, renderLabel } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio Group\n * @category Forms\n * @summary Use for selecting exactly one option from a small set of choices.\n * @slot label - An optional slot to display a custom label.\n */\n@Component({ tag: 'q2-radio-group', shadow: true, styleUrl: 'q2-radio-group.scss' })\nexport class Q2RadioGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if all radios in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the group's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Text for the fieldset legend describing the radio group.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Identifier which ties all radios together for accessibility and DOM selection. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Appends \"(optional)\" to the group label, and sets `aria-required` on the nested input tag to `false`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all radios in the group can be focused, but not interacted with. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** Provides alignment direction for tile-style radio group. */\n    @Prop({ reflect: true })\n    tileAlignment: 'left' | 'center' | 'right' = 'center';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    tilelayout: boolean;\n\n    /** Show the radio group as a horizontal set of tiles. */\n    @Prop({ reflect: true, mutable: true })\n    tileLayout: boolean;\n\n    /** The `value` of the currently selected `q2-radio` within the `q2-radio-group`. */\n    @Prop({ mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the value of the radio group changes.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\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    // #endregion\n    // #region Listeners\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    // #endregion\n    // #region Public Methods API\n\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    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated() {\n        this.radioElements.forEach(radio => {\n            radio.groupDisabled = this.disabled;\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('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    @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    // #endregion\n    // #region Local Methods\n\n    get inputId() {\n        return this._id;\n    }\n\n    get radioElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-radio')) as HTMLQ2RadioElement[];\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    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    onInnerRadioChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        if (this.readonly) return;\n\n        mirrorEmit(this, ['change', 'tctChange'], { value: event.detail.value });\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    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const { hasError } = this;\n        const showLabelRow = (showLabel && !this.hideLabel) || hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</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={hasError ? `${hasError}` : undefined}\n                >\n                    {showLabel && <legend class=\"sr-only\">{renderLabel(this)}</legend>}\n                    {this.inputDom()}\n                </fieldset>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"q2-radio.entry.esm.js","sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.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\n    //Default State\n    --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n    --comp-big-circle-stroke: #{var-list(\n            --tct-radio-background-stroke,\n            --tct-radio-stroke-color,\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n    --comp-big-circle-transition: #{fill\n        var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n    --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n    --comp-label-content-color: #{var-list(\n            --tct-radio-label-color,\n            --tct-radio-label-font-color,\n            --tct-radio-label-color,\n            inherit\n        )};\n    --comp-label-content-font-weight: #{var-list(\n            --tct-radio-label-font-weight,\n            --tct-radio-font-weight,\n            --tct-checkbox-font-weight,\n            400\n        )};\n    --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n    --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n    --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n    --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n    --comp-svg-transition: #{box-shadow\n        var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n    //Checked State\n    --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-checked: #{var-list(\n            --tct-radio-select-fill-checked,\n            --tct-radio-checked-fill,\n            --tct-checkbox-check-stroke-color,\n            --t-checkbox-fill,\n            #2e2e2e\n        )};\n    --comp-label-content-font-weight-checked: #{var-list(\n            --tct-radio-label-font-weight-checked,\n            --tct-radio-checked-label-font-weight,\n            --tct-checkbox-selected-font-weight,\n            600\n        )};\n    --comp-label-content-letter-spacing-checked: #{var-list(\n            --tct-radio-label-letter-spacing-checked,\n            --tct-radio-checked-label-letter-spacing,\n            --tct-checkbox-selected-letter-spacing,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-checked: #{var-list(\n            --tct-radio-label-font-color-checked,\n            --tct-radio-checked-label-font-color,\n            --tct-radio-checked-label-color,\n            inherit\n        )};\n\n    // Active State\n    --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n    --comp-label-content-font-weight-active: #{var-list(\n            --tct-radio-label-font-weight-active,\n            --comp-label-content-font-weight\n        )};\n    --comp-label-content-letter-spacing-active: #{var-list(\n            --tct-radio-label-letter-spacing-active,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n    // Hover State\n    --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n    // Focus State\n    --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n    // Focus Visible\n    --comp-svg-box-shadow-focus-visible: #{var(\n            --tct-radio-box-shadow-focus-visible,\n            --tct-radio-focus-box-shadow,\n            --const-double-focus-ring\n        )};\n\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var(---comp-label-content-color);\n        font-weight: var(---comp-label-content-font-weight);\n        font-size: var(--tct-radio-label-font-size, 14px);\n        align-items: center;\n        cursor: pointer;\n        margin-right: var(---comp-label-content-margin-right);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var(--comp-label-content-gap);\n        letter-spacing: var(--comp-label-content-letter-spacing);\n\n        &.label-hidden {\n            grid-template-columns: var(--comp-label-hidden-columns);\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: var(--comp-svg-transition);\n        outline: 0;\n        width: 100%;\n        box-shadow: var(--comp-svg-box-shadow);\n    }\n\n    .big-circle {\n        fill: var(--comp-big-circle-fill);\n        stroke: var(--comp-big-circle-stroke);\n        stroke-width: var(--comp-big-circle-stroke-width);\n        transition: var(--comp-big-circle-transition);\n    }\n    .small-circle {\n        fill: var(--comp-small-circle-fill);\n    }\n\n    input {\n        &:checked {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-checked);\n                    stroke: var(--comp-big-circle-stroke-checked);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-checked);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-checked);\n                    letter-spacing: var(--comp-label-content-letter-spacing-checked);\n                    color: var(--comp-label-content-color-checked);\n                }\n            }\n        }\n\n        &:hover {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-hover);\n                    stroke: var(--comp-big-circle-stroke-hover);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-active);\n                    stroke: var(--comp-big-circle-stroke-active);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-active);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-active);\n                    letter-spacing: var(--comp-label-content-letter-spacing-active);\n                    color: var(--comp-label-content-color-active);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-focus);\n                    stroke: var(--comp-big-circle-stroke-focus);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-focus);\n                }\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-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 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        font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px);\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-tile-checked-stroke-color,\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-tile-checked-stroke-color,\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            --comp-radio-tile-focus-box-shadow-fallback: #{var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n            border-color: var-list(\n                --tct-radio-tile-focus-stroke-color,\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-list(--tct-radio-tile-focus-box-shadow, --comp-radio-tile-focus-box-shadow-fallback);\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n\n        &:focus:checked + label:after {\n            border-bottom: 5px solid var-list(\n                --tct-radio-tile-focus-stroke-color,\n                --tct-radio-focus-stroke-color,\n                #2e2e2e\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';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\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    // #endregion\n    // #region Listeners\n\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    // #endregion\n    // #region Watchers\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        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\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    // #endregion\n    // #region Render Methods\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                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                class=\"big-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                class=\"small-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    // #endregion\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,+sSAA+sS;;MCUrtS,OAAO,GAAA,MAAA;AADpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAII,QAAA,IAAA,CAAA,GAAG,GAAW,SAAS,UAAU,EAAE,EAAE;AAErC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAiBzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAIxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAE9B;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAE9B;;;AAGG;AAEH,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;;AA+BhC,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;;;AA6EpB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;YAC3B,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE;gBAC5E,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,OAAO,KAAK;;AAGhB,YAAA,IAAI,KAAK,CAAC,MAAM,YAAY,gBAAgB,EAAE;gBAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;;AAE3C,SAAC;AA2DJ;;;IAzHG,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;IAGzB,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAC/B,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACvB,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AAC3B,SAAC;;;;AAOL,IAAA,WAAW,CAAC,KAAY,EAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,KAAK,CAAC,wBAAwB,EAAE;;AAC7B,aAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YAC3B,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,wBAAwB,EAAE;AAChC,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;;;AAK/B,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;AACnC,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;;;;;IAQ/B,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;IAIzB,eAAe,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AACnB,QAAA,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;;;IAqBpE,MAAM,GAAA;AACF,QAAA,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,eAAe,GAAG,YAAY,GAAG,iBAAiB,EAAA,EAC/D,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,KAAK,EAAC,IAAI,EACV,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAC7C,OAAO,EAAE,IAAI,CAAC,OAAO,gBACT,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,EACtE,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAA,SAAA,EAClB,sBAAsB,EACzB,CAAA,EAET,CACI,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,SAAS,aAC1C,aAAa,EAAA,EAEpB,CAAC,IAAI,CAAC,eAAe,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAA,EACpB,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAClB,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACP,CAAA,EACF,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EACpB,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACP,CAAA,CACA,CACT,EACA,CAAC,IAAI,CAAC,SAAS,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACrB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACX,CACT,CACG,CACN;;;;;;;;;;;;"}
+{"version":3,"file":"q2-radio.entry.esm.js","sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\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\n    //Default State\n    --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n    --comp-big-circle-stroke: #{var-list(\n            --tct-radio-background-stroke,\n            --tct-radio-stroke-color,\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n    --comp-big-circle-transition: #{fill\n        var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n    --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n    --comp-label-content-color: #{var-list(\n            --tct-radio-label-color,\n            --tct-radio-label-font-color,\n            --tct-radio-label-color,\n            inherit\n        )};\n    --comp-label-content-font-weight: #{var-list(\n            --tct-radio-label-font-weight,\n            --tct-radio-font-weight,\n            --tct-checkbox-font-weight,\n            400\n        )};\n    --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n    --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n    --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n    --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n    --comp-svg-transition: #{box-shadow\n        var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n    //Checked State\n    --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-checked: #{var-list(\n            --tct-radio-select-fill-checked,\n            --tct-radio-checked-fill,\n            --tct-checkbox-check-stroke-color,\n            --t-checkbox-fill,\n            #2e2e2e\n        )};\n    --comp-label-content-font-weight-checked: #{var-list(\n            --tct-radio-label-font-weight-checked,\n            --tct-radio-checked-label-font-weight,\n            --tct-checkbox-selected-font-weight,\n            600\n        )};\n    --comp-label-content-letter-spacing-checked: #{var-list(\n            --tct-radio-label-letter-spacing-checked,\n            --tct-radio-checked-label-letter-spacing,\n            --tct-checkbox-selected-letter-spacing,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-checked: #{var-list(\n            --tct-radio-label-font-color-checked,\n            --tct-radio-checked-label-font-color,\n            --tct-radio-checked-label-color,\n            inherit\n        )};\n\n    // Active State\n    --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n    --comp-label-content-font-weight-active: #{var-list(\n            --tct-radio-label-font-weight-active,\n            --comp-label-content-font-weight\n        )};\n    --comp-label-content-letter-spacing-active: #{var-list(\n            --tct-radio-label-letter-spacing-active,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n    // Hover State\n    --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n    // Focus State\n    --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n    // Focus Visible\n    --comp-svg-box-shadow-focus-visible: #{var(\n            --tct-radio-box-shadow-focus-visible,\n            --tct-radio-focus-box-shadow,\n            --const-double-focus-ring\n        )};\n\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var(---comp-label-content-color);\n        font-weight: var(---comp-label-content-font-weight);\n        font-size: var(--tct-radio-label-font-size, 14px);\n        align-items: start;\n        cursor: pointer;\n        margin-right: var(---comp-label-content-margin-right);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var(--comp-label-content-gap);\n        letter-spacing: var(--comp-label-content-letter-spacing);\n\n        &.label-hidden {\n            grid-template-columns: var(--comp-label-hidden-columns);\n        }\n        .description-content {\n            grid-column: 2;\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: var(--comp-svg-transition);\n        outline: 0;\n        width: 100%;\n        box-shadow: var(--comp-svg-box-shadow);\n    }\n\n    .big-circle {\n        fill: var(--comp-big-circle-fill);\n        stroke: var(--comp-big-circle-stroke);\n        stroke-width: var(--comp-big-circle-stroke-width);\n        transition: var(--comp-big-circle-transition);\n    }\n    .small-circle {\n        fill: var(--comp-small-circle-fill);\n    }\n\n    input {\n        &:checked {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-checked);\n                    stroke: var(--comp-big-circle-stroke-checked);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-checked);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-checked);\n                    letter-spacing: var(--comp-label-content-letter-spacing-checked);\n                    color: var(--comp-label-content-color-checked);\n                }\n            }\n        }\n\n        &:hover {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-hover);\n                    stroke: var(--comp-big-circle-stroke-hover);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-active);\n                    stroke: var(--comp-big-circle-stroke-active);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-active);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-active);\n                    letter-spacing: var(--comp-label-content-letter-spacing-active);\n                    color: var(--comp-label-content-color-active);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-focus);\n                    stroke: var(--comp-big-circle-stroke-focus);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-focus);\n                }\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-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 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        font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px);\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-tile-checked-stroke-color,\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-tile-checked-stroke-color,\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            --comp-radio-tile-focus-box-shadow-fallback: #{var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n            border-color: var-list(\n                --tct-radio-tile-focus-stroke-color,\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-list(--tct-radio-tile-focus-box-shadow, --comp-radio-tile-focus-box-shadow-fallback);\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n\n        &:focus:checked + label:after {\n            border-bottom: 5px solid var-list(\n                --tct-radio-tile-focus-stroke-color,\n                --tct-radio-focus-stroke-color,\n                #2e2e2e\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';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hides the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\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    // #endregion\n    // #region Listeners\n\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    // #endregion\n    // #region Watchers\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        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\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    // #endregion\n    // #region Render Methods\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                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                class=\"big-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                class=\"small-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    // #endregion\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,6wSAA6wS;;MCUnxS,OAAO,GAAA,MAAA;AADpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAII,QAAA,IAAA,CAAA,GAAG,GAAW,SAAS,UAAU,EAAE,EAAE;AAErC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAiBzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAIxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEzB;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAE9B;;;AAGG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAE9B;;;AAGG;AAEH,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;;AA+BhC,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;;;AA6EpB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;YAC3B,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,EAAE;gBAC5E,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,OAAO,KAAK;;AAGhB,YAAA,IAAI,KAAK,CAAC,MAAM,YAAY,gBAAgB,EAAE;gBAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;;AAE3C,SAAC;AA2DJ;;;IAzHG,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;IAGzB,gBAAgB,GAAA;AACZ,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAC/B,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,MAAK;AAC1B,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACvB,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AAC3B,SAAC;;;;AAOL,IAAA,WAAW,CAAC,KAAY,EAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,KAAK,CAAC,wBAAwB,EAAE;;AAC7B,aAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YAC3B,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,wBAAwB,EAAE;AAChC,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;;;AAK/B,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;AACnC,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;;;;;IAQ/B,iBAAiB,GAAA;QACb,eAAe,CAAC,IAAI,CAAC;;IAIzB,eAAe,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AACnB,QAAA,UAAU,CAAC,IAAI,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;;;IAqBpE,MAAM,GAAA;AACF,QAAA,QACI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,eAAe,GAAG,YAAY,GAAG,iBAAiB,EAAA,EAC/D,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,KAAK,EAAC,IAAI,EACV,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAC7C,OAAO,EAAE,IAAI,CAAC,OAAO,gBACT,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS,EACtE,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAA,SAAA,EAClB,sBAAsB,EACzB,CAAA,EAET,CACI,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,SAAS,aAC1C,aAAa,EAAA,EAEpB,CAAC,IAAI,CAAC,eAAe,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAA,EACpB,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAClB,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACP,CAAA,EACF,CACI,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EACpB,MAAM,EAAC,MAAM,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACP,CAAA,CACA,CACT,EACA,CAAC,IAAI,CAAC,SAAS,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACrB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACX,CACT,CACG,CACN;;;;;;;;;;;;"}

package/dist/q2-tecton-elements/q2-radio.entry.js

@@ -1,10 +1,10 @@
 import { r as e, c as o, h as t, g as c } from "./index-CGkHOjh1.js";
 
-import { c as r, d as a, o as i, l } from "./index-C4PILj1_.js";
+import { c as r, d as a, o as i, l } from "./index-C5gj0T_3.js";
 
 import { m as n } from "./mirror-emit-DUjY_ucm.js";
 
-const s = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}: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)));--comp-big-circle-fill:var(--tct-radio-background-fill, transparent);--comp-big-circle-stroke:var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-big-circle-stroke-width:var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));--comp-big-circle-transition:fill var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease)));--comp-small-circle-fill:var(--tct-radio-select-fill-default, transparent);--comp-label-content-color:var(--tct-radio-label-color, inherit);--comp-label-content-font-weight:var(--tct-radio-label-font-weight, var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400)));--comp-label-content-letter-spacing:var(--tct-radio-label-letter-spacing, 0.25);--comp-label-content-margin-right:var(--tct-radio-label-margin-right, 1rem);--comp-label-content-gap:var(--tct-radio-label-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)));--comp-label-hidden-columns:var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr);--comp-svg-transition:box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));--comp-svg-box-shadow:var(--tct-radio-box-shadow, none);--comp-big-circle-fill-checked:var(--tct-radio-checked-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-checked:var(--tct-radio-checked-stroke-color, var(--comp-big-circle-stroke));--comp-small-circle-fill-checked:var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));--comp-label-content-font-weight-checked:var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, 600)));--comp-label-content-letter-spacing-checked:var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--comp-label-content-letter-spacing))));--comp-label-content-color-checked:var(--tct-radio-label-font-color-checked, var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit)));--comp-big-circle-fill-active:var(--tct-radio-background-fill-active, var(--comp-big-circle-fill));--comp-big-circle-stroke-active:var(--tct-radio-background-stroke-active, var(--comp-big-circle-stroke));--comp-small-circle-fill-active:var(--tct-radio-selected-fill-active, var(--comp-small-circle-fill-checked));--comp-label-content-font-weight-active:var(--tct-radio-label-font-weight-active, var(--comp-label-content-font-weight));--comp-label-content-letter-spacing-active:var(--tct-radio-label-letter-spacing-active, var(--comp-label-content-letter-spacing));--comp-label-content-color-active:var(--tct-radio-label-color-active, var(--comp-label-content-color));--comp-big-circle-fill-hover:var(--tct-radio-hover-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-hover:var(--tct-radio-hover-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-hover:var(--tct-radio-hover-label-color, var(--comp-label-content-color));--comp-big-circle-fill-focus:var(--tct-radio-focus-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-focus:var(--tct-radio-focus-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-focus:var(--tct-radio-focus-label-color, var(--comp-label-content-color));--comp-svg-box-shadow-focus-visible:var(--tct-radio-box-shadow-focus-visible, --tct-radio-focus-box-shadow, --const-double-focus-ring);margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(---comp-label-content-color);font-weight:var(---comp-label-content-font-weight);font-size:var(--tct-radio-label-font-size, 14px);align-items:center;cursor:pointer;margin-right:var(---comp-label-content-margin-right);display:grid;grid-template-columns:18px 1fr;gap:var(--comp-label-content-gap);letter-spacing:var(--comp-label-content-letter-spacing)}.radio-container label[for].label-hidden{grid-template-columns:var(--comp-label-hidden-columns)}.radio-container svg{border-radius:50%;transition:var(--comp-svg-transition);outline:0;width:100%;box-shadow:var(--comp-svg-box-shadow)}.radio-container .big-circle{fill:var(--comp-big-circle-fill);stroke:var(--comp-big-circle-stroke);stroke-width:var(--comp-big-circle-stroke-width);transition:var(--comp-big-circle-transition)}.radio-container .small-circle{fill:var(--comp-small-circle-fill)}.radio-container input:checked+label .big-circle{fill:var(--comp-big-circle-fill-checked);stroke:var(--comp-big-circle-stroke-checked)}.radio-container input:checked+label .small-circle{fill:var(--comp-small-circle-fill-checked)}.radio-container input:checked+label .label-content{font-weight:var(--comp-label-content-font-weight-checked);letter-spacing:var(--comp-label-content-letter-spacing-checked);color:var(--comp-label-content-color-checked)}.radio-container input:hover+label .big-circle{fill:var(--comp-big-circle-fill-hover);stroke:var(--comp-big-circle-stroke-hover)}.radio-container input:hover+label .label-content{color:var(--comp-label-content-color-hover)}.radio-container input:active+label .big-circle{fill:var(--comp-big-circle-fill-active);stroke:var(--comp-big-circle-stroke-active)}.radio-container input:active+label .small-circle{fill:var(--comp-small-circle-fill-active)}.radio-container input:active+label .label-content{font-weight:var(--comp-label-content-font-weight-active);letter-spacing:var(--comp-label-content-letter-spacing-active);color:var(--comp-label-content-color-active)}.radio-container input:focus+label .big-circle{fill:var(--comp-big-circle-fill-focus);stroke:var(--comp-big-circle-stroke-focus)}.radio-container input:focus+label .label-content{color:var(--comp-label-content-color-focus)}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));align-items:center;border-radius:var(--tct-radio-tile-border-radius, var(--app-border-radius-1, 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;font-size:var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, 14px));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-tile-checked-stroke-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-tile-checked-stroke-color, 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{--comp-radio-tile-focus-box-shadow-fallback:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);border-color:var(--tct-radio-tile-focus-stroke-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(--tct-radio-tile-focus-box-shadow, var(--comp-radio-tile-focus-box-shadow-fallback));color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}.radio-tile input:focus:checked+label:after{border-bottom:5px solid var(--tct-radio-tile-focus-stroke-color, var(--tct-radio-focus-stroke-color, #2e2e2e))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';
+const s = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}: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)));--comp-big-circle-fill:var(--tct-radio-background-fill, transparent);--comp-big-circle-stroke:var(--tct-radio-background-stroke, var(--tct-radio-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-big-circle-stroke-width:var(--tct-radio-background-stroke-width, var(--tct-radio-stroke-width, 2));--comp-big-circle-transition:fill var(--tct-radio-background-transition, var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease)));--comp-small-circle-fill:var(--tct-radio-select-fill-default, transparent);--comp-label-content-color:var(--tct-radio-label-color, inherit);--comp-label-content-font-weight:var(--tct-radio-label-font-weight, var(--tct-radio-font-weight, var(--tct-checkbox-font-weight, 400)));--comp-label-content-letter-spacing:var(--tct-radio-label-letter-spacing, 0.25);--comp-label-content-margin-right:var(--tct-radio-label-margin-right, 1rem);--comp-label-content-gap:var(--tct-radio-label-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)));--comp-label-hidden-columns:var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr);--comp-svg-transition:box-shadow var(--tct-radio-transition, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));--comp-svg-box-shadow:var(--tct-radio-box-shadow, none);--comp-big-circle-fill-checked:var(--tct-radio-checked-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-checked:var(--tct-radio-checked-stroke-color, var(--comp-big-circle-stroke));--comp-small-circle-fill-checked:var(--tct-radio-select-fill-checked, var(--tct-radio-checked-fill, var(--tct-checkbox-check-stroke-color, var(--t-checkbox-fill, #2e2e2e))));--comp-label-content-font-weight-checked:var(--tct-radio-label-font-weight-checked, var(--tct-radio-checked-label-font-weight, var(--tct-checkbox-selected-font-weight, 600)));--comp-label-content-letter-spacing-checked:var(--tct-radio-label-letter-spacing-checked, var(--tct-radio-checked-label-letter-spacing, var(--tct-checkbox-selected-letter-spacing, var(--comp-label-content-letter-spacing))));--comp-label-content-color-checked:var(--tct-radio-label-font-color-checked, var(--tct-radio-checked-label-font-color, var(--tct-radio-checked-label-color, inherit)));--comp-big-circle-fill-active:var(--tct-radio-background-fill-active, var(--comp-big-circle-fill));--comp-big-circle-stroke-active:var(--tct-radio-background-stroke-active, var(--comp-big-circle-stroke));--comp-small-circle-fill-active:var(--tct-radio-selected-fill-active, var(--comp-small-circle-fill-checked));--comp-label-content-font-weight-active:var(--tct-radio-label-font-weight-active, var(--comp-label-content-font-weight));--comp-label-content-letter-spacing-active:var(--tct-radio-label-letter-spacing-active, var(--comp-label-content-letter-spacing));--comp-label-content-color-active:var(--tct-radio-label-color-active, var(--comp-label-content-color));--comp-big-circle-fill-hover:var(--tct-radio-hover-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-hover:var(--tct-radio-hover-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-hover:var(--tct-radio-hover-label-color, var(--comp-label-content-color));--comp-big-circle-fill-focus:var(--tct-radio-focus-background-fill, var(--comp-big-circle-fill));--comp-big-circle-stroke-focus:var(--tct-radio-focus-stroke-color, var(--comp-big-circle-stroke));--comp-label-content-color-focus:var(--tct-radio-focus-label-color, var(--comp-label-content-color));--comp-svg-box-shadow-focus-visible:var(--tct-radio-box-shadow-focus-visible, --tct-radio-focus-box-shadow, --const-double-focus-ring);margin:var(--comp-radio-margin)}.radio-container label[for]{color:var(---comp-label-content-color);font-weight:var(---comp-label-content-font-weight);font-size:var(--tct-radio-label-font-size, 14px);align-items:start;cursor:pointer;margin-right:var(---comp-label-content-margin-right);display:grid;grid-template-columns:18px 1fr;gap:var(--comp-label-content-gap);letter-spacing:var(--comp-label-content-letter-spacing)}.radio-container label[for].label-hidden{grid-template-columns:var(--comp-label-hidden-columns)}.radio-container label[for] .description-content{grid-column:2}.radio-container svg{border-radius:50%;transition:var(--comp-svg-transition);outline:0;width:100%;box-shadow:var(--comp-svg-box-shadow)}.radio-container .big-circle{fill:var(--comp-big-circle-fill);stroke:var(--comp-big-circle-stroke);stroke-width:var(--comp-big-circle-stroke-width);transition:var(--comp-big-circle-transition)}.radio-container .small-circle{fill:var(--comp-small-circle-fill)}.radio-container input:checked+label .big-circle{fill:var(--comp-big-circle-fill-checked);stroke:var(--comp-big-circle-stroke-checked)}.radio-container input:checked+label .small-circle{fill:var(--comp-small-circle-fill-checked)}.radio-container input:checked+label .label-content{font-weight:var(--comp-label-content-font-weight-checked);letter-spacing:var(--comp-label-content-letter-spacing-checked);color:var(--comp-label-content-color-checked)}.radio-container input:hover+label .big-circle{fill:var(--comp-big-circle-fill-hover);stroke:var(--comp-big-circle-stroke-hover)}.radio-container input:hover+label .label-content{color:var(--comp-label-content-color-hover)}.radio-container input:active+label .big-circle{fill:var(--comp-big-circle-fill-active);stroke:var(--comp-big-circle-stroke-active)}.radio-container input:active+label .small-circle{fill:var(--comp-small-circle-fill-active)}.radio-container input:active+label .label-content{font-weight:var(--comp-label-content-font-weight-active);letter-spacing:var(--comp-label-content-letter-spacing-active);color:var(--comp-label-content-color-active)}.radio-container input:focus+label .big-circle{fill:var(--comp-big-circle-fill-focus);stroke:var(--comp-big-circle-stroke-focus)}.radio-container input:focus+label .label-content{color:var(--comp-label-content-color-focus)}.radio-tile{flex-basis:100px;flex-grow:0;flex-wrap:wrap}.radio-tile label[for]{color:var(--tct-radio-label-font-color, var(--tct-radio-label-color, inherit));align-items:center;border-radius:var(--tct-radio-tile-border-radius, var(--app-border-radius-1, 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;font-size:var(--tct-radio-tile-label-font-size, var(--tct-radio-label-font-size, 14px));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-tile-checked-stroke-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-tile-checked-stroke-color, 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{--comp-radio-tile-focus-box-shadow-fallback:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);border-color:var(--tct-radio-tile-focus-stroke-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(--tct-radio-tile-focus-box-shadow, var(--comp-radio-tile-focus-box-shadow-fallback));color:var(--tct-radio-focus-label-color, var(--tct-radio-checked-label-color, inherit))}.radio-tile input:focus:checked+label:after{border-bottom:5px solid var(--tct-radio-tile-focus-stroke-color, var(--tct-radio-focus-stroke-color, #2e2e2e))}input:disabled+label[for]{cursor:not-allowed;opacity:var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))}';
 
 const d = class {
   constructor(t) {
@@ -87,10 +87,10 @@ const d = class {
   // #region Render Methods
   render() {
     return t("div", {
-      key: "b3ff3221d679096f3fd42a318cfadb6233ab0ac5",
+      key: "699970d6bed602cbd0e6954d36ca3b03b2122fdc",
       class: this.groupTileLayout ? "radio-tile" : "radio-container"
     }, t("input", {
-      key: "ed9d41619e21af0927c1ebef5dedd3546683e677",
+      key: "edaaa6bbba5eb256fed9e02863b3cf3b706b4e73",
       ref: e => this.inputField = e,
       class: "sr",
       id: this._id,
@@ -103,15 +103,15 @@ const d = class {
       onChange: this.inputChange,
       "test-id": "q2RadioInnerRadioBox"
     }), t("label", {
-      key: "817d5260d720061908c803ff34dc826a9aa954e8",
+      key: "fd0c67c56535a53f3cbbeddd32f3817b430b9075",
       htmlFor: this._id,
       class: this.hideLabel ? "label-hidden" : undefined,
       "test-id": "radioButton"
     }, !this.groupTileLayout && t("svg", {
-      key: "aed6e01bca76e33bc6dda009cb78437b75da31df",
+      key: "2cfaa2fa7393ff369a319adb780f3667dc11194d",
       viewBox: "0 0 18 18"
     }, t("circle", {
-      key: "12b009b629c2f79b0ff9d973d91eee878680d5e2",
+      key: "157a1a5b430a0e63e695aec87bba111f60357444",
       class: "big-circle",
       stroke: "none",
       fill: "none",
@@ -119,7 +119,7 @@ const d = class {
       cy: "9",
       r: "8"
     }), t("circle", {
-      key: "bdb34bf3af2d9b05ac1a2f13d1ba68bc1be34379",
+      key: "4c4daede7d3414b1e7a9c037ba4d9e919300a9ca",
       class: "small-circle",
       stroke: "none",
       fill: "none",
@@ -127,10 +127,10 @@ const d = class {
       cy: "9",
       r: "4"
     })), !this.hideLabel && t("div", {
-      key: "67348d1852db1ab314e686a6208d3ab66216f002",
+      key: "e9b3ba9aceb316988bf570a3dd50cf99166fb248",
       class: "label-content"
     }, this.label && l(this.label) || "", t("slot", {
-      key: "ac58bd184195bc2c2ed79dcab60df89bc0accf62"
+      key: "a6ae2c01e62af90255f836a69458d530136daccb"
     }))));
   }
   get hostElement() {

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

@@ -1 +1 @@
-{"version":3,"names":["q2RadioCss","Q2Radio","constructor","hostRef","this","_id","createGuid","isLoaded","checked","disabled","groupDisabled","groupReadonly","groupTileLayout","tabIndex","inputChange","event","stopPropagation","readonly","preventDefault","target","HTMLInputElement","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","inputField","focus","onHostClick","stopImmediatePropagation","delegateFocus","ariaLabelObserver","checkedObserver","mirrorEmit","value","render","h","key","class","ref","el","id","type","name","label","hideLabel","loc","undefined","onChange","htmlFor","viewBox","stroke","fill","cx","cy","r"],"sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.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\n    //Default State\n    --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n    --comp-big-circle-stroke: #{var-list(\n            --tct-radio-background-stroke,\n            --tct-radio-stroke-color,\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n    --comp-big-circle-transition: #{fill\n        var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n    --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n    --comp-label-content-color: #{var-list(\n            --tct-radio-label-color,\n            --tct-radio-label-font-color,\n            --tct-radio-label-color,\n            inherit\n        )};\n    --comp-label-content-font-weight: #{var-list(\n            --tct-radio-label-font-weight,\n            --tct-radio-font-weight,\n            --tct-checkbox-font-weight,\n            400\n        )};\n    --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n    --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n    --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n    --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n    --comp-svg-transition: #{box-shadow\n        var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n    //Checked State\n    --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-checked: #{var-list(\n            --tct-radio-select-fill-checked,\n            --tct-radio-checked-fill,\n            --tct-checkbox-check-stroke-color,\n            --t-checkbox-fill,\n            #2e2e2e\n        )};\n    --comp-label-content-font-weight-checked: #{var-list(\n            --tct-radio-label-font-weight-checked,\n            --tct-radio-checked-label-font-weight,\n            --tct-checkbox-selected-font-weight,\n            600\n        )};\n    --comp-label-content-letter-spacing-checked: #{var-list(\n            --tct-radio-label-letter-spacing-checked,\n            --tct-radio-checked-label-letter-spacing,\n            --tct-checkbox-selected-letter-spacing,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-checked: #{var-list(\n            --tct-radio-label-font-color-checked,\n            --tct-radio-checked-label-font-color,\n            --tct-radio-checked-label-color,\n            inherit\n        )};\n\n    // Active State\n    --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n    --comp-label-content-font-weight-active: #{var-list(\n            --tct-radio-label-font-weight-active,\n            --comp-label-content-font-weight\n        )};\n    --comp-label-content-letter-spacing-active: #{var-list(\n            --tct-radio-label-letter-spacing-active,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n    // Hover State\n    --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n    // Focus State\n    --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n    // Focus Visible\n    --comp-svg-box-shadow-focus-visible: #{var(\n            --tct-radio-box-shadow-focus-visible,\n            --tct-radio-focus-box-shadow,\n            --const-double-focus-ring\n        )};\n\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var(---comp-label-content-color);\n        font-weight: var(---comp-label-content-font-weight);\n        font-size: var(--tct-radio-label-font-size, 14px);\n        align-items: center;\n        cursor: pointer;\n        margin-right: var(---comp-label-content-margin-right);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var(--comp-label-content-gap);\n        letter-spacing: var(--comp-label-content-letter-spacing);\n\n        &.label-hidden {\n            grid-template-columns: var(--comp-label-hidden-columns);\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: var(--comp-svg-transition);\n        outline: 0;\n        width: 100%;\n        box-shadow: var(--comp-svg-box-shadow);\n    }\n\n    .big-circle {\n        fill: var(--comp-big-circle-fill);\n        stroke: var(--comp-big-circle-stroke);\n        stroke-width: var(--comp-big-circle-stroke-width);\n        transition: var(--comp-big-circle-transition);\n    }\n    .small-circle {\n        fill: var(--comp-small-circle-fill);\n    }\n\n    input {\n        &:checked {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-checked);\n                    stroke: var(--comp-big-circle-stroke-checked);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-checked);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-checked);\n                    letter-spacing: var(--comp-label-content-letter-spacing-checked);\n                    color: var(--comp-label-content-color-checked);\n                }\n            }\n        }\n\n        &:hover {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-hover);\n                    stroke: var(--comp-big-circle-stroke-hover);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-active);\n                    stroke: var(--comp-big-circle-stroke-active);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-active);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-active);\n                    letter-spacing: var(--comp-label-content-letter-spacing-active);\n                    color: var(--comp-label-content-color-active);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-focus);\n                    stroke: var(--comp-big-circle-stroke-focus);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-focus);\n                }\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-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 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        font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px);\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-tile-checked-stroke-color,\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-tile-checked-stroke-color,\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            --comp-radio-tile-focus-box-shadow-fallback: #{var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n            border-color: var-list(\n                --tct-radio-tile-focus-stroke-color,\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-list(--tct-radio-tile-focus-box-shadow, --comp-radio-tile-focus-box-shadow-fallback);\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n\n        &:focus:checked + label:after {\n            border-bottom: 5px solid var-list(\n                --tct-radio-tile-focus-stroke-color,\n                --tct-radio-focus-stroke-color,\n                #2e2e2e\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';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\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    // #endregion\n    // #region Listeners\n\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    // #endregion\n    // #region Watchers\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        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\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    // #endregion\n    // #region Render Methods\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                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                class=\"big-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                class=\"small-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    // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAa;;MCUNC,IAAO;EADpB,WAAAC,CAAAC;;;;;QAIIC,KAAAC,MAAc,SAASC;IAEvBF,KAAQG,WAAY;0FAiBpBH,KAAOI,UAAY;2DAInBJ,KAAQK,WAAY;;;;eAOpBL,KAAaM,gBAAY;;;;eAOzBN,KAAaO,gBAAY;;;;eAOzBP,KAAeQ,kBAAY;uBA+B3BR,KAAQS,WAAW;;;QA6EnBT,KAAAU,cAAeC;MACXA,EAAMC;MACN,IAAIZ,KAAKK,YAAYL,KAAKa,YAAYb,KAAKO,iBAAiBP,KAAKM,eAAe;QAC5EK,EAAMG;QACN,OAAO;;MAGX,IAAIH,EAAMI,kBAAkBC,kBAAkB;QAC1ChB,KAAKI,UAAUO,EAAMI,OAAOX;;;AA6DvC;;;EAzHG,iBAAAa;IACIC,EAAgBlB;;EAGpB,gBAAAmB;IACInB,KAAKG,WAAW;IAChBiB,EAAcpB,KAAKqB;IACnBrB,KAAKqB,YAAYC,QAAQ;MACrBtB,KAAKuB,WAAWC;MAChBxB,KAAKuB,WAAWD;AAAO;;;;EAQ/B,WAAAG,CAAYd;IACR,IAAIX,KAAKK,UAAU;MACfM,EAAMe;WACH,IAAI1B,KAAKO,eAAe;MAC3BI,EAAMG;MACNH,EAAMe;MACN1B,KAAKuB,WAAWC;;;EAKxB,aAAAG,CAAchB;IACV,IAAIA,EAAMI,WAAWf,KAAKqB,aAAa;MACnCrB,KAAKuB,WAAWC;;;;;EAQxB,iBAAAI;IACIV,EAAgBlB;;EAIpB,eAAA6B;IACI,KAAK7B,KAAKG,UAAU;IACpB,KAAKH,KAAKI,SAAS;IACnB0B,EAAW9B,MAAM,EAAC,UAAU,eAAc;MAAE+B,OAAO/B,KAAK+B;;;;;EAqB5D,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAOnC,KAAKQ,kBAAkB,eAAe;OAC9CyB,EAAA;MAAAC,KAAA;MACIE,KAAKC,KAAOrC,KAAKuB,aAAac;MAC9BF,OAAM;MACNG,IAAItC,KAAKC;MACTsC,MAAK;MACLC,MAAMxC,KAAKwC;MACXT,OAAO/B,KAAK+B;MACZ1B,UAAUL,KAAKK,YAAYL,KAAKM;MAChCF,SAASJ,KAAKI;MAAO,cACTJ,KAAKyC,SAASzC,KAAK0C,YAAYC,EAAI3C,KAAKyC,SAASG;MAC7DC,UAAU7C,KAAKU;MAAW,WAClB;QAGZuB,EACI;MAAAC,KAAA;MAAAY,SAAS9C,KAAKC;MACdkC,OAAOnC,KAAK0C,YAAY,iBAAiBE;MAAS,WAC1C;QAEN5C,KAAKQ,mBACHyB,EAAK;MAAAC,KAAA;MAAAa,SAAQ;OACTd,EACI;MAAAC,KAAA;MAAAC,OAAM;MACNa,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;QAENnB,EACI;MAAAC,KAAA;MAAAC,OAAM;MACNa,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;UAIZpD,KAAK0C,aACHT,EAAK;MAAAC,KAAA;MAAAC,OAAM;OACLnC,KAAKyC,SAASE,EAAI3C,KAAKyC,UAAW,IACpCR,EAAA;MAAAC,KAAA","ignoreList":[]}
+{"version":3,"names":["q2RadioCss","Q2Radio","constructor","hostRef","this","_id","createGuid","isLoaded","checked","disabled","groupDisabled","groupReadonly","groupTileLayout","tabIndex","inputChange","event","stopPropagation","readonly","preventDefault","target","HTMLInputElement","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","inputField","focus","onHostClick","stopImmediatePropagation","delegateFocus","ariaLabelObserver","checkedObserver","mirrorEmit","value","render","h","key","class","ref","el","id","type","name","label","hideLabel","loc","undefined","onChange","htmlFor","viewBox","stroke","fill","cx","cy","r"],"sources":["src/components/q2-radio/q2-radio.scss?tag=q2-radio&encapsulation=shadow","src/components/q2-radio/q2-radio.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\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\n    //Default State\n    --comp-big-circle-fill: #{var-list(--tct-radio-background-fill, transparent)};\n    --comp-big-circle-stroke: #{var-list(\n            --tct-radio-background-stroke,\n            --tct-radio-stroke-color,\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-big-circle-stroke-width: #{var-list(--tct-radio-background-stroke-width, --tct-radio-stroke-width, 2)};\n    --comp-big-circle-transition: #{fill\n        var-list(--tct-radio-background-transition, --tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'))};\n    --comp-small-circle-fill: #{var-list(--tct-radio-select-fill-default, transparent)};\n    --comp-label-content-color: #{var-list(\n            --tct-radio-label-color,\n            --tct-radio-label-font-color,\n            --tct-radio-label-color,\n            inherit\n        )};\n    --comp-label-content-font-weight: #{var-list(\n            --tct-radio-label-font-weight,\n            --tct-radio-font-weight,\n            --tct-checkbox-font-weight,\n            400\n        )};\n    --comp-label-content-letter-spacing: #{var-list(--tct-radio-label-letter-spacing, 0.25)};\n    --comp-label-content-margin-right: #{var-list(--tct-radio-label-margin-right, 1rem)};\n    --comp-label-content-gap: #{var-list(--tct-radio-label-gap, --tct-scale-1, --app-scale-1x, 5px)};\n    --comp-label-hidden-columns: #{var(--tct-radio-hidden-columns, --tct-radio-label-hidden-columns, 18px 1fr)};\n    --comp-svg-transition: #{box-shadow\n        var-list(--tct-radio-transition, --tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-svg-box-shadow: #{var-list(--tct-radio-box-shadow, none)};\n\n    //Checked State\n    --comp-big-circle-fill-checked: #{var-list(--tct-radio-checked-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-checked: #{var-list(--tct-radio-checked-stroke-color, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-checked: #{var-list(\n            --tct-radio-select-fill-checked,\n            --tct-radio-checked-fill,\n            --tct-checkbox-check-stroke-color,\n            --t-checkbox-fill,\n            #2e2e2e\n        )};\n    --comp-label-content-font-weight-checked: #{var-list(\n            --tct-radio-label-font-weight-checked,\n            --tct-radio-checked-label-font-weight,\n            --tct-checkbox-selected-font-weight,\n            600\n        )};\n    --comp-label-content-letter-spacing-checked: #{var-list(\n            --tct-radio-label-letter-spacing-checked,\n            --tct-radio-checked-label-letter-spacing,\n            --tct-checkbox-selected-letter-spacing,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-checked: #{var-list(\n            --tct-radio-label-font-color-checked,\n            --tct-radio-checked-label-font-color,\n            --tct-radio-checked-label-color,\n            inherit\n        )};\n\n    // Active State\n    --comp-big-circle-fill-active: #{var-list(--tct-radio-background-fill-active, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-active: #{var-list(--tct-radio-background-stroke-active, --comp-big-circle-stroke)};\n    --comp-small-circle-fill-active: #{var-list(--tct-radio-selected-fill-active, --comp-small-circle-fill-checked)};\n    --comp-label-content-font-weight-active: #{var-list(\n            --tct-radio-label-font-weight-active,\n            --comp-label-content-font-weight\n        )};\n    --comp-label-content-letter-spacing-active: #{var-list(\n            --tct-radio-label-letter-spacing-active,\n            --comp-label-content-letter-spacing\n        )};\n    --comp-label-content-color-active: #{var-list(--tct-radio-label-color-active, --comp-label-content-color)};\n\n    // Hover State\n    --comp-big-circle-fill-hover: #{var-list(--tct-radio-hover-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-hover: #{var-list(--tct-radio-hover-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-hover: #{var-list(--tct-radio-hover-label-color, --comp-label-content-color)};\n\n    // Focus State\n    --comp-big-circle-fill-focus: #{var-list(--tct-radio-focus-background-fill, --comp-big-circle-fill)};\n    --comp-big-circle-stroke-focus: #{var-list(--tct-radio-focus-stroke-color, --comp-big-circle-stroke)};\n    --comp-label-content-color-focus: #{var-list(--tct-radio-focus-label-color, --comp-label-content-color)};\n\n    // Focus Visible\n    --comp-svg-box-shadow-focus-visible: #{var(\n            --tct-radio-box-shadow-focus-visible,\n            --tct-radio-focus-box-shadow,\n            --const-double-focus-ring\n        )};\n\n    margin: var(--comp-radio-margin);\n\n    label[for] {\n        color: var(---comp-label-content-color);\n        font-weight: var(---comp-label-content-font-weight);\n        font-size: var(--tct-radio-label-font-size, 14px);\n        align-items: start;\n        cursor: pointer;\n        margin-right: var(---comp-label-content-margin-right);\n        display: grid;\n        grid-template-columns: 18px 1fr;\n        gap: var(--comp-label-content-gap);\n        letter-spacing: var(--comp-label-content-letter-spacing);\n\n        &.label-hidden {\n            grid-template-columns: var(--comp-label-hidden-columns);\n        }\n        .description-content {\n            grid-column: 2;\n        }\n    }\n\n    svg {\n        border-radius: 50%;\n        transition: var(--comp-svg-transition);\n        outline: 0;\n        width: 100%;\n        box-shadow: var(--comp-svg-box-shadow);\n    }\n\n    .big-circle {\n        fill: var(--comp-big-circle-fill);\n        stroke: var(--comp-big-circle-stroke);\n        stroke-width: var(--comp-big-circle-stroke-width);\n        transition: var(--comp-big-circle-transition);\n    }\n    .small-circle {\n        fill: var(--comp-small-circle-fill);\n    }\n\n    input {\n        &:checked {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-checked);\n                    stroke: var(--comp-big-circle-stroke-checked);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-checked);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-checked);\n                    letter-spacing: var(--comp-label-content-letter-spacing-checked);\n                    color: var(--comp-label-content-color-checked);\n                }\n            }\n        }\n\n        &:hover {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-hover);\n                    stroke: var(--comp-big-circle-stroke-hover);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-active);\n                    stroke: var(--comp-big-circle-stroke-active);\n                }\n\n                .small-circle {\n                    fill: var(--comp-small-circle-fill-active);\n                }\n\n                .label-content {\n                    font-weight: var(--comp-label-content-font-weight-active);\n                    letter-spacing: var(--comp-label-content-letter-spacing-active);\n                    color: var(--comp-label-content-color-active);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .big-circle {\n                    fill: var(--comp-big-circle-fill-focus);\n                    stroke: var(--comp-big-circle-stroke-focus);\n                }\n                .label-content {\n                    color: var(--comp-label-content-color-focus);\n                }\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-font-color, --tct-radio-label-color, inherit);\n        align-items: center;\n        border-radius: var-list(--tct-radio-tile-border-radius, --app-border-radius-1, 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        font-size: var-list(--tct-radio-tile-label-font-size, --tct-radio-label-font-size, 14px);\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-tile-checked-stroke-color,\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-tile-checked-stroke-color,\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            --comp-radio-tile-focus-box-shadow-fallback: #{var(--const-double-focus-ring), var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n            border-color: var-list(\n                --tct-radio-tile-focus-stroke-color,\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-list(--tct-radio-tile-focus-box-shadow, --comp-radio-tile-focus-box-shadow-fallback);\n            color: var-list(--tct-radio-focus-label-color, --tct-radio-checked-label-color, inherit);\n        }\n\n        &:focus:checked + label:after {\n            border-bottom: 5px solid var-list(\n                --tct-radio-tile-focus-stroke-color,\n                --tct-radio-focus-stroke-color,\n                #2e2e2e\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';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Radio\n * @category Forms\n * @summary Use as a single option within a Radio Group.\n */\n@Component({ tag: 'q2-radio', shadow: true, styleUrl: 'q2-radio.scss' })\nexport class Q2Radio implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `radio-${createGuid()}`;\n    inputField: HTMLInputElement;\n    isLoaded: boolean = false;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the radio. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Disables the radio and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupDisabled: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make all options in the group readonly\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupReadonly: boolean = false;\n\n    /**\n     * Used by q2-radio-group to make the options display as tiles\n     * @private\n     */\n    @Prop({ reflect: false })\n    groupTileLayout: boolean = false;\n\n    /**\n     * Hides the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * The text that describes the individual radio option.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Used by q2-radio-group to apply a name to all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The radio is non-interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** @private */\n    @Prop()\n    tabIndex: number = 0;\n\n    /** The value that is returned in the `change` event that is emitted from the `q2-radio-group`. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the radio is checked.\n     * @deprecated Use 'tctChange' instead\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the radio is checked.\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\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    // #endregion\n    // #region Listeners\n\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    // #endregion\n    // #region Watchers\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        mirrorEmit(this, ['change', 'tctChange'], { value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\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    // #endregion\n    // #region Render Methods\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                    class={this.hideLabel ? 'label-hidden' : undefined}\n                    test-id=\"radioButton\"\n                >\n                    {!this.groupTileLayout && (\n                        <svg viewBox=\"0 0 18 18\">\n                            <circle\n                                class=\"big-circle\"\n                                stroke=\"none\"\n                                fill=\"none\"\n                                cx=\"9\"\n                                cy=\"9\"\n                                r=\"8\"\n                            />\n                            <circle\n                                class=\"small-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    // #endregion\n}\n"],"mappings":";;;;;;AAAA,MAAMA,IAAa;;MCUNC,IAAO;EADpB,WAAAC,CAAAC;;;;;QAIIC,KAAAC,MAAc,SAASC;IAEvBF,KAAQG,WAAY;0FAiBpBH,KAAOI,UAAY;2DAInBJ,KAAQK,WAAY;;;;eAOpBL,KAAaM,gBAAY;;;;eAOzBN,KAAaO,gBAAY;;;;eAOzBP,KAAeQ,kBAAY;uBA+B3BR,KAAQS,WAAW;;;QA6EnBT,KAAAU,cAAeC;MACXA,EAAMC;MACN,IAAIZ,KAAKK,YAAYL,KAAKa,YAAYb,KAAKO,iBAAiBP,KAAKM,eAAe;QAC5EK,EAAMG;QACN,OAAO;;MAGX,IAAIH,EAAMI,kBAAkBC,kBAAkB;QAC1ChB,KAAKI,UAAUO,EAAMI,OAAOX;;;AA6DvC;;;EAzHG,iBAAAa;IACIC,EAAgBlB;;EAGpB,gBAAAmB;IACInB,KAAKG,WAAW;IAChBiB,EAAcpB,KAAKqB;IACnBrB,KAAKqB,YAAYC,QAAQ;MACrBtB,KAAKuB,WAAWC;MAChBxB,KAAKuB,WAAWD;AAAO;;;;EAQ/B,WAAAG,CAAYd;IACR,IAAIX,KAAKK,UAAU;MACfM,EAAMe;WACH,IAAI1B,KAAKO,eAAe;MAC3BI,EAAMG;MACNH,EAAMe;MACN1B,KAAKuB,WAAWC;;;EAKxB,aAAAG,CAAchB;IACV,IAAIA,EAAMI,WAAWf,KAAKqB,aAAa;MACnCrB,KAAKuB,WAAWC;;;;;EAQxB,iBAAAI;IACIV,EAAgBlB;;EAIpB,eAAA6B;IACI,KAAK7B,KAAKG,UAAU;IACpB,KAAKH,KAAKI,SAAS;IACnB0B,EAAW9B,MAAM,EAAC,UAAU,eAAc;MAAE+B,OAAO/B,KAAK+B;;;;;EAqB5D,MAAAC;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAOnC,KAAKQ,kBAAkB,eAAe;OAC9CyB,EAAA;MAAAC,KAAA;MACIE,KAAKC,KAAOrC,KAAKuB,aAAac;MAC9BF,OAAM;MACNG,IAAItC,KAAKC;MACTsC,MAAK;MACLC,MAAMxC,KAAKwC;MACXT,OAAO/B,KAAK+B;MACZ1B,UAAUL,KAAKK,YAAYL,KAAKM;MAChCF,SAASJ,KAAKI;MAAO,cACTJ,KAAKyC,SAASzC,KAAK0C,YAAYC,EAAI3C,KAAKyC,SAASG;MAC7DC,UAAU7C,KAAKU;MAAW,WAClB;QAGZuB,EACI;MAAAC,KAAA;MAAAY,SAAS9C,KAAKC;MACdkC,OAAOnC,KAAK0C,YAAY,iBAAiBE;MAAS,WAC1C;QAEN5C,KAAKQ,mBACHyB,EAAK;MAAAC,KAAA;MAAAa,SAAQ;OACTd,EACI;MAAAC,KAAA;MAAAC,OAAM;MACNa,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;QAENnB,EACI;MAAAC,KAAA;MAAAC,OAAM;MACNa,QAAO;MACPC,MAAK;MACLC,IAAG;MACHC,IAAG;MACHC,GAAE;UAIZpD,KAAK0C,aACHT,EAAK;MAAAC,KAAA;MAAAC,OAAM;OACLnC,KAAKyC,SAASE,EAAI3C,KAAKyC,UAAW,IACpCR,EAAA;MAAAC,KAAA","ignoreList":[]}

package/dist/q2-tecton-elements/q2-relative-time.entry.js

@@ -2,7 +2,7 @@ import { r as e, h as t, F as i, g as s } from "./index-CGkHOjh1.js";
 
 import { d as a } from "./index-O1A-ZSZs.js";
 
-import { l as n } from "./index-C4PILj1_.js";
+import { l as n } from "./index-C5gj0T_3.js";
 
 const r = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline}";
 
@@ -141,7 +141,7 @@ const o = class {
   render() {
     const {shouldShow: e, displayedMessage: s} = this;
     return t(i, {
-      key: "368b5847fd62820031d367eaee690212fa655223"
+      key: "0d8c6b23a5af08e1fbb7e8d5c48248bf6676427a"
     }, e ? t("time", {
       dateTime: s
     }, s) : null);

package/dist/q2-tecton-elements/q2-section-container.entry.js

@@ -1,6 +1,6 @@
 import { r as e, h as t, g as n } from "./index-CGkHOjh1.js";
 
-import { h as s } from "./component-DVxzK3WH.js";
+import { h as s } from "./component-DaQM9u3s.js";
 
 const i = class {
   constructor(n) {