q2-tecton-elements 1.55.3 → 1.56.0

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

@@ -1 +1 @@
-{"version":3,"names":["q2CheckboxGroupCss","Q2CheckboxGroupStyle0","Q2CheckboxGroup","this","_id","createGuid","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","onMutationObserved","updateValue","updateDisabled","updateReadonly","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","subtree","onHostElementChange","target","onchange","detail","setValue","values","valuesSet","Set","Array","isArray","has","click","disabledObserver","readonlyObserver","valueObserver","from","querySelectorAll","inputId","protectedValue","inputDom","h","class","groupDisabled","disabled","checkbox","slotReadonly","readonly","hasOwnProperty","render","showLabel","label","optional","showLabelRow","hideLabel","hasError","Fragment","key","renderLabel","type","onChange","undefined"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-checkbox-group-margin: #{var-list(var-prefixer(checkbox-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(checkbox-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-checkbox-group-margin, --comp-default-checkbox-group-margin);\n}\n\n::slotted(q2-checkbox) {\n    --tct-checkbox-margin: #{var-list(--tct-checkbox-group-checkbox-margin, --app-scale-0x, 0)};\n    --tct-checkbox-padding: #{var-list(--tct-checkbox-group-checkbox-padding, --app-scale-2x, 10px)};\n}\n\nfieldset {\n    padding: var(--tct-checkbox-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-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));\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.slot-container {\n    margin: var(--app-scale-1x, 5px) 0;\n    padding: var(--app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-checkbox-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-checkbox-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-checkbox-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(checkbox-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(--tct-checkbox-group-label-optional-font-size, 12px);\n    font-weight: var(--tct-checkbox-group-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-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 checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean;\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     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true })\n    value: object;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get inputId() {\n        return this._id;\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    inputDom() {\n        return (\n            <div class=\"slot-container\">\n                <slot />\n            </div>\n        );\n    }\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {this.hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={this.hasError ? `${this.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":";;;;AAAA,MAAMA,IAAqB;;AAC3B,MAAAC,IAAeD;;MCeFE,IAAe;;;;;QAGxBC,KAAAC,MAAc,kBAAkBC;IA4JhCF,KAAAG,wBAAyBC;MACrBA,EAAMC;MACN,MAAMC,IAAa;MACnBC,YAAW;QACPP,KAAKQ,iBAAiBC,SAAQC;UAC1BJ,EAAWI,EAAMC,WAAWD,EAAME;AAAO;QAE7CZ,KAAKa,OAAOC,KAAKR;AAAW,UAC7B;AAAE;IAGTN,KAAAe,qBAAqB;MACjBf,KAAKgB;MACLhB,KAAKiB;MACLjB,KAAKkB;AAAgB;;;;;;;;;;;EAnGzB,oBAAAC;IACI,IAAInB,KAAKoB,kBAAkB;MACvBpB,KAAKoB,iBAAiBC;MACtBrB,KAAKoB,mBAAmB;;;EAIhC,iBAAAE;IACItB,KAAKkB;;EAGT,gBAAAK;IACI,MAAMC,IAAW,IAAIC,iBAAiBzB,KAAKe;IAC3CS,EAASE,QAAQ1B,KAAK2B,aAAa;MAAEC,WAAW;MAAMC,SAAS;;IAC/D7B,KAAKoB,mBAAmBI;IACxBxB,KAAKe;;;;EAOT,mBAAAe,CAAoB1B;IAChB,IAAIA,EAAM2B,WAAW/B,KAAK2B,gBAAgB3B,KAAK2B,YAAYK,UAAU;MACjEhC,KAAKW,QAAQP,EAAM6B;;;;;;;;;;EAa3B,QAAAC,CAASC;IACL,MAAMC,IAAY,IAAIC,IAAIC,MAAMC,QAAQJ,KAAUA,IAAS,EAACA;IAC5DnC,KAAKQ,iBAAiBC,SAAQC;MAC1B,IAAI0B,EAAUI,IAAI9B,EAAMC,QAAQD,EAAM+B;AAAO;;;;EAQrD,gBAAAC;IACI1C,KAAKiB;;EAIT,gBAAA0B;IACI3C,KAAKkB;;EAIT,aAAA0B;IACI5C,KAAKgB;;;;EAMT,oBAAIR;IACA,OAAO8B,MAAMO,KAAK7C,KAAK2B,YAAYmB,iBAAiB;;EAGxD,WAAIC;IACA,OAAO/C,KAAKC;;EAGhB,kBAAI+C;IACA,OAAOhD,KAAKW,SAAS;;EAGzB,QAAAsC;IACI,OACIC,EAAA;MAAKC,OAAM;OACPD,EAAA;;EAsBZ,cAAAjC;IACI,MAAMmC,IAAgBpD,KAAKqD;IAC3BrD,KAAKQ,iBAAiBC,SAAQ6C;MAC1BA,EAASF,gBAAgBA;AAAa;;EAI9C,cAAAlC;IACI,MAAMqC,IAAevD,KAAKwD;IAC1BxD,KAAKQ,iBAAiBC,SAAQ6C;MAC1BA,EAASC,eAAeA;AAAY;;EAI5C,WAAAvC;IACI,IAAIhB,KAAKwD,UAAU;IACnBxD,KAAKQ,iBAAiBC,SAAQC;MAC1B,IAAIV,KAAKgD,eAAeS,eAAe/C,EAAMC,QAAQ;QACjDD,EAAME,UAAUZ,KAAKW,MAAMD,EAAMC;;;;;;EAQ7C,MAAA+C;IACI,MAAMC,IAAY3D,KAAK4D,SAAS5D,KAAK6D,YAAY7D,KAAKwD;IACtD,MAAMM,IAAgBH,MAAc3D,KAAK+D,aAAc/D,KAAKgE;IAC5D,OACId,EAACe,GAAQ;MAAAC,KAAA;OACJJ,KACGZ,EAAA;MAAAgB,KAAA;MAAKf,OAAM;OACNQ,MAAc3D,KAAK+D,aAAab,EAAA;MAAAgB,KAAA;MAAKf,OAAM;OAAgBgB,EAAYnE,QACvEA,KAAKgE,YACFd,EAAA;MAAAgB,KAAA;MACIE,MAAK;MAAO,WACJ;SAKxBlB,EAAA;MAAAgB,KAAA;MACIG,UAAUrE,KAAKG;MAAqB,gBACtBH,KAAKgE,WAAW,GAAGhE,KAAKgE,aAAaM;OAElDX,KAAaT,EAAA;MAAAgB,KAAA;MAAQf,OAAM;OAAWgB,EAAYnE,QAClDA,KAAKiD"}
+{"version":3,"names":["q2CheckboxGroupCss","Q2CheckboxGroupStyle0","Q2CheckboxGroup","this","_id","createGuid","onInnerCheckboxChange","event","stopImmediatePropagation","groupValue","setTimeout","checkboxElements","forEach","check","value","checked","change","emit","onMutationObserved","updateValue","updateDisabled","updateReadonly","disconnectedCallback","mutationObserver","disconnect","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","hostElement","childList","subtree","onHostElementChange","target","onchange","detail","setValue","values","valuesSet","Set","Array","isArray","has","click","disabledObserver","readonlyObserver","valueObserver","from","querySelectorAll","inputId","protectedValue","inputDom","h","class","groupDisabled","disabled","checkbox","slotReadonly","readonly","hasOwnProperty","render","showLabel","label","optional","showLabelRow","hideLabel","hasError","Fragment","key","renderLabel","type","onChange","undefined"],"sources":["src/components/q2-checkbox-group/q2-checkbox-group.scss?tag=q2-checkbox-group&encapsulation=shadow","src/components/q2-checkbox-group/q2-checkbox-group.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-checkbox-group-margin: #{var-list(var-prefixer(checkbox-group-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(checkbox-group-margin-bottom), --app-scale-5x, 25px)};\n    display: block;\n    margin: var-list(--tct-checkbox-group-margin, --comp-default-checkbox-group-margin);\n}\n\nfieldset {\n    padding: var(--tct-checkbox-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-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));\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.slot-container {\n    margin: var(--app-scale-1x, 5px) 0;\n    padding: var(--app-scale-1x, 5px);\n    border-width: 1px;\n    border-color: transparent;\n    border-style: solid;\n    border-radius: var-list(--tct-checkbox-group-border-radius, --app-border-radius-1, 4px);\n\n    :host([has-error]) & {\n        border-color: var-list(--tct-checkbox-group-error-border-color, --const-stoplight-alert, #d20a0a);\n    }\n    :host([has-error='false']) & {\n        border-color: transparent;\n    }\n}\n\n.optional-tag {\n    margin-left: var-list(--tct-checkbox-group-label-optional-margin-left, --app-scale-1x, 5px);\n    color: var-list(\n        var-prefixer(checkbox-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(--tct-checkbox-group-label-optional-font-size, 12px);\n    font-weight: var(--tct-checkbox-group-label-optional-font-weight, 400);\n}\n\n.flexed {\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n}\n.flexed.left {\n    justify-content: left;\n}\n","import {\n    Component,\n    Prop,\n    Element,\n    h,\n    Listen,\n    EventEmitter,\n    Event,\n    ComponentInterface,\n    Watch,\n    Method,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, renderLabel } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-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 checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean;\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     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true })\n    optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /**\n     * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.\n     *\n     * **Example:**\n     * @snippet\n     * element.value = {\n     *   'checkbox-value-1': true,\n     *   'checkbox-value-2': false,\n     *   'checkbox-value-3': true,\n     * };\n     *\n     * // Also accepts partial values\n     * element.value = {\n     *   'checkbox-value-2': false,\n     * }\n     */\n    @Prop({ mutable: true })\n    value: object;\n\n    // #endregion\n    // #region Events\n\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    componentWillLoad() {\n        this.updateReadonly();\n    }\n\n    componentDidLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        this.onMutationObserved();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail;\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<q2-checkbox>` option(s) with the provided value.\n     *\n     * @testOnly\n     */\n    @Method()\n    setValue(values: string | string[]) {\n        const valuesSet = new Set(Array.isArray(values) ? values : [values]);\n        this.checkboxElements.forEach(check => {\n            if (valuesSet.has(check.value)) check.click();\n        });\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get inputId() {\n        return this._id;\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    inputDom() {\n        return (\n            <div class=\"slot-container\">\n                <slot />\n            </div>\n        );\n    }\n\n    onInnerCheckboxChange = (event: CustomEvent) => {\n        event.stopImmediatePropagation();\n        const groupValue = {};\n        setTimeout(() => {\n            this.checkboxElements.forEach(check => {\n                groupValue[check.value] = !!check.checked;\n            });\n            this.change.emit(groupValue);\n        }, 0);\n    };\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\n    };\n\n    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        const slotReadonly = this.readonly;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.slotReadonly = slotReadonly;\n        });\n    }\n\n    updateValue() {\n        if (this.readonly) return;\n        this.checkboxElements.forEach(check => {\n            if (this.protectedValue.hasOwnProperty(check.value)) {\n                check.checked = this.value[check.value];\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;\n        return (\n            <Fragment>\n                {showLabelRow && (\n                    <div class=\"label-row\">\n                        {showLabel && !this.hideLabel && <div class=\"group-legend\">{renderLabel(this)}</div>}\n                        {this.hasError && (\n                            <q2-icon\n                                type=\"error\"\n                                test-id=\"iconError\"\n                            ></q2-icon>\n                        )}\n                    </div>\n                )}\n                <fieldset\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={this.hasError ? `${this.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":";;;;AAAA,MAAMA,IAAqB;;AAC3B,MAAAC,IAAeD;;MCeFE,IAAe;;;;;QAGxBC,KAAAC,MAAc,kBAAkBC;IA4JhCF,KAAAG,wBAAyBC;MACrBA,EAAMC;MACN,MAAMC,IAAa;MACnBC,YAAW;QACPP,KAAKQ,iBAAiBC,SAAQC;UAC1BJ,EAAWI,EAAMC,WAAWD,EAAME;AAAO;QAE7CZ,KAAKa,OAAOC,KAAKR;AAAW,UAC7B;AAAE;IAGTN,KAAAe,qBAAqB;MACjBf,KAAKgB;MACLhB,KAAKiB;MACLjB,KAAKkB;AAAgB;;;;;;;;;;;EAnGzB,oBAAAC;IACI,IAAInB,KAAKoB,kBAAkB;MACvBpB,KAAKoB,iBAAiBC;MACtBrB,KAAKoB,mBAAmB;;;EAIhC,iBAAAE;IACItB,KAAKkB;;EAGT,gBAAAK;IACI,MAAMC,IAAW,IAAIC,iBAAiBzB,KAAKe;IAC3CS,EAASE,QAAQ1B,KAAK2B,aAAa;MAAEC,WAAW;MAAMC,SAAS;;IAC/D7B,KAAKoB,mBAAmBI;IACxBxB,KAAKe;;;;EAOT,mBAAAe,CAAoB1B;IAChB,IAAIA,EAAM2B,WAAW/B,KAAK2B,gBAAgB3B,KAAK2B,YAAYK,UAAU;MACjEhC,KAAKW,QAAQP,EAAM6B;;;;;;;;;;EAa3B,QAAAC,CAASC;IACL,MAAMC,IAAY,IAAIC,IAAIC,MAAMC,QAAQJ,KAAUA,IAAS,EAACA;IAC5DnC,KAAKQ,iBAAiBC,SAAQC;MAC1B,IAAI0B,EAAUI,IAAI9B,EAAMC,QAAQD,EAAM+B;AAAO;;;;EAQrD,gBAAAC;IACI1C,KAAKiB;;EAIT,gBAAA0B;IACI3C,KAAKkB;;EAIT,aAAA0B;IACI5C,KAAKgB;;;;EAMT,oBAAIR;IACA,OAAO8B,MAAMO,KAAK7C,KAAK2B,YAAYmB,iBAAiB;;EAGxD,WAAIC;IACA,OAAO/C,KAAKC;;EAGhB,kBAAI+C;IACA,OAAOhD,KAAKW,SAAS;;EAGzB,QAAAsC;IACI,OACIC,EAAA;MAAKC,OAAM;OACPD,EAAA;;EAsBZ,cAAAjC;IACI,MAAMmC,IAAgBpD,KAAKqD;IAC3BrD,KAAKQ,iBAAiBC,SAAQ6C;MAC1BA,EAASF,gBAAgBA;AAAa;;EAI9C,cAAAlC;IACI,MAAMqC,IAAevD,KAAKwD;IAC1BxD,KAAKQ,iBAAiBC,SAAQ6C;MAC1BA,EAASC,eAAeA;AAAY;;EAI5C,WAAAvC;IACI,IAAIhB,KAAKwD,UAAU;IACnBxD,KAAKQ,iBAAiBC,SAAQC;MAC1B,IAAIV,KAAKgD,eAAeS,eAAe/C,EAAMC,QAAQ;QACjDD,EAAME,UAAUZ,KAAKW,MAAMD,EAAMC;;;;;;EAQ7C,MAAA+C;IACI,MAAMC,IAAY3D,KAAK4D,SAAS5D,KAAK6D,YAAY7D,KAAKwD;IACtD,MAAMM,IAAgBH,MAAc3D,KAAK+D,aAAc/D,KAAKgE;IAC5D,OACId,EAACe,GAAQ;MAAAC,KAAA;OACJJ,KACGZ,EAAA;MAAAgB,KAAA;MAAKf,OAAM;OACNQ,MAAc3D,KAAK+D,aAAab,EAAA;MAAAgB,KAAA;MAAKf,OAAM;OAAgBgB,EAAYnE,QACvEA,KAAKgE,YACFd,EAAA;MAAAgB,KAAA;MACIE,MAAK;MAAO,WACJ;SAKxBlB,EAAA;MAAAgB,KAAA;MACIG,UAAUrE,KAAKG;MAAqB,gBACtBH,KAAKgE,WAAW,GAAGhE,KAAKgE,aAAaM;OAElDX,KAAaT,EAAA;MAAAgB,KAAA;MAAQf,OAAM;OAAWgB,EAAYnE,QAClDA,KAAKiD"}

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

@@ -1,12 +1,12 @@
 import { r as e, c as o, h as t, g as c } from "./index-7a5365e2.js";
 
-import { c as r, a, o as i, i as s, l } from "./index-f2a66217.js";
+import { c as r, a, o as i, i as s, l } from "./index-c215e8ef.js";
 
-const h = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, var(--app-scale-5x, 25px)));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color));stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{height:24px;width:38px;fill:transparent;border-radius:var(--app-border-radius-3, 12px);box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}';
+const h = '*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, 8px)) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 24px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label;font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400))}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]:not([checked=false])) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}:host(:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host(:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 400)))}:host([description]:hover) .label-text{font-weight:var(--tct-checkbox-hover-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):hover) .label-text{font-weight:var(--tct-checkbox-checked-hover-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}:host([description]:focus-within) .label-text{font-weight:var(--tct-checkbox-focused-label-font-weight, var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600)))}:host([checked]:not([checked=false]):focus-within) .label-text{font-weight:var(--tct-checkbox-checked-focused-label-font-weight, var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600)))}.label-text label{line-height:var(--tct-checkbox-label-line-height, 24px);display:inline-block}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host([has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-error-box-shadow)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-hover-box-shadow)}:host(:hover[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--comp-checkbox-focused-box-shadow)}:host(:focus-within[has-error]:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error][type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{stroke:var(--tct-checkbox-checkmark-stroke-color, var(--comp-checkbox-checked-color));stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{height:24px;width:38px;fill:transparent;border-radius:var(--app-border-radius-3, 12px);box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}';
 
 const d = h;
 
-const b = class {
+const n = class {
   constructor(t) {
     e(this, t);
     this.change = o(this, "change", 7);
@@ -174,10 +174,10 @@ const b = class {
     const e = [ "label-text" ];
     if (this.hideLabel) e.push("sr");
     return t("div", {
-      key: "8cb9c126a850022c4e4305cbc62eaf036b41fc85",
+      key: "430044e68fc4512d2f1ee8a20ab132c316ad1683",
       class: "container"
     }, t("input", {
-      key: "3c7bc46662dfc50ce3da872ac082930018c6c1f0",
+      key: "4034224e568f92d79d3a472c60aa4ec26b8f74ec",
       ref: e => this.inputElement = e,
       "aria-describedby": this.description ? "description" : undefined,
       "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`,
@@ -191,21 +191,21 @@ const b = class {
       type: "checkbox",
       value: this.value
     }), t("label", {
-      key: "7e79d168122d18aa644bfae0f63b5556a5c1f4cf",
+      key: "79cfa6506c98714f9f6ec22a8927bf90dd73653d",
       htmlFor: this._id,
       class: "label-control",
       "test-id": "checkboxButton"
     }, this.renderCheckboxSVG()), t("div", {
-      key: "f0fb5ebd65dfd865a6a2874b223a1104b5dd38df",
+      key: "0121fd3f2cbf5cd9c0e76442582eed69bc99cb90",
       class: e.join(" ")
     }, t("label", {
-      key: "e9451e5975f6e6be66c395ec2bd45bc8aa3e3407",
+      key: "8141cff679d3bbf67e8702a996517e6f8f1d0a18",
       "test-id": "checkboxLabel",
       htmlFor: this._id
     }, l(this.label), t("slot", {
-      key: "4f7d5eeaba7c621d0863cf18a45499eb692b1f9d"
+      key: "564e4ed078041622e472b05699da098d0e8a3363"
     }))), this.description && t("div", {
-      key: "644d733eaaed63f83147e102735b08f7e50d6457",
+      key: "6aafc6d11406d6d9d4f7fb898322eff2aa7c770a",
       class: "description-text",
       "test-id": "checkboxDescription",
       id: "description"
@@ -221,7 +221,7 @@ const b = class {
   }
 };
 
-b.style = d;
+n.style = d;
 
-export { b as q2_checkbox };
+export { n as q2_checkbox };
 //# sourceMappingURL=q2-checkbox.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["q2CheckboxCss","Q2CheckboxStyle0","Q2Checkbox","this","_id","createGuid","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","slotReadonly","target","HTMLInputElement","value","checked","change","emit","inputElement","focus","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","defaultChangeHandler","setTimeout","handleChangeEvent","delegateFocus","isEventFromElement","shadowRoot","querySelector","ariaLabelObserver","onchange","defaultPrevented","detail","renderCheckboxSVG","type","h","class","renderToggleSVG","width","height","viewBox","focusable","x","y","rx","indeterminate","renderCheckBoxSVGFill","x1","y1","x2","y2","points","id","fill","cx","cy","r","mask","render","textLabelClasses","hideLabel","push","key","ref","el","description","undefined","hasError","groupDisabled","name","onClick","htmlFor","join","loc","label"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-checkbox-padding: #{var-list(\n            --tct-checkbox-padding,\n            unquote('#{var-list(var-prefixer(checkbox-vertical-padding), --tct-scale-2, --app-scale-2x, 10px)} 0')\n        )};\n    display: block;\n    position: relative;\n    padding: var(--comp-checkbox-padding);\n    --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(checkbox-margin-bottom), --app-scale-5x, 25px)};\n    margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n    --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 20px)};\n    --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n    --comp-checkbox-default-row-gap: 0;\n    --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n    --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n    --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n    --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n    --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n    --comp-checkbox-outer-stroke-color: #{var-list(\n            var-prefixer(checkbox-outer-stroke-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-checkbox-outer-fill-color: #{var-list(\n            var-prefixer(checkbox-outer-fill-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        )};\n    --comp-checkbox-checked-color: #{var-list(\n            var-prefixer(checkbox-check-stroke-color),\n            --t-checkbox-fill,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    --comp-control-width: var(--comp-checkbox-size);\n    --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n    :host([type='favorite']) & {\n        --comp-checkbox-favorite-stroke-color: #{var-list(\n                var-prefixer(checkbox-favorite-stroke-color),\n                --t-a11y-gray-color-AA,\n                #949494\n            )};\n        --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n    }\n\n    display: grid;\n    grid-template-areas:\n        'svg label'\n        'svg description';\n    align-items: center;\n    gap: var(--comp-checkbox-gap);\n    grid-template-columns: var(--comp-control-width) calc(\n            100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n        );\n\n    :host([hide-label]:not([hide-label='false'])) & {\n        grid-template-areas: 'svg';\n        grid-template-columns: var(--comp-control-width);\n    }\n\n    :host([type='toggle']) & {\n        --comp-control-width: var(--comp-checkbox-toggle-width);\n    }\n\n    :host([alignment='right']) &,\n    :host([type='toggle']:not([alignment])) & {\n        grid-template-areas:\n            'label svg'\n            'description svg';\n        grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n                --comp-control-width\n            );\n    }\n}\n\n.label-control {\n    align-items: center;\n    display: flex;\n}\n\n.label-text {\n    grid-area: label;\n    font-weight: var-list(var-prefixer(checkbox-label-font-weight), 400);\n\n    :host([description]) & {\n        font-weight: var-list(var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false'])) & {\n        font-weight: var-list(var-prefixer(checkbox-checked-label-font-weight), 600);\n    }\n    :host(:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host(:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host([description]:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):hover) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-hover-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n    :host([description]:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):focus-within) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-focused-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n}\n\n.description-text {\n    grid-area: description;\n    font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n    :host(:hover) & {\n        font-weight: var-list(\n            --tct-checkbox-hover-description-font-weight,\n            var-prefixer(checkbox-description-font-weight),\n            400\n        );\n    }\n}\n\nlabel {\n    color: var-list(--tct-checkbox-label-color);\n    cursor: pointer;\n    hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n    word-break: var-list(--tct-checkbox-label-word-break, break-word);\n    word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n.checkbox-icon {\n    width: var(--comp-checkbox-size);\n    height: var(--comp-checkbox-size);\n    border-radius: var-list(\n        var-prefixer(checkbox-outer-border-radius),\n        --tct-border-radius-1,\n        --app-border-radius-1,\n        4px\n    );\n    stroke: var(--comp-checkbox-outer-stroke-color);\n    fill: var(--comp-checkbox-outer-fill-color);\n    stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n    flex-shrink: 0;\n\n    :host([checked]:not([checked='false']):not([type='favorite'])) & {\n        stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n        fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n    }\n\n    :host([has-error]:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n        fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-error-box-shadow);\n    }\n\n    :host(:hover:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n        fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-hover-box-shadow);\n    }\n    :host(:hover[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-hover-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-hover-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-hover-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --tct-checkbox-hover-box-shadow\n        );\n    }\n\n    :host(:focus-within:not([type='favorite'])) & {\n        --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n            var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n        stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\n        fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--comp-checkbox-focused-box-shadow);\n    }\n    :host(:focus-within[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-focused-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-focused-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-focused-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --comp-checkbox-focused-box-shadow\n        );\n    }\n\n    // Favorite\n    :host([type='favorite']) & {\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n        --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host(:hover[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    // Checked favorite\n    :host([checked]:not([checked='false'])[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-stroke-color,\n                --tct-checkbox-favorite-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:hover) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-hover-stroke-color,\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-fill-primary: #{var-list(\n                --tct-checkbox-favorite-checked-fill-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-focused-stroke-color,\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([has-error][type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n    :host([has-error][type='favorite'][checked]:not([checked='false'])) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n}\n\n.checkbox-fill {\n    stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n    stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.indeterminate-fill {\n    stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg-container {\n    height: 30px;\n    width: var(--comp-checkbox-toggle-width);\n    position: relative;\n    text-align: initial;\n}\n\n.toggle-indicator,\n.toggle-track {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n}\n.toggle-indicator {\n    transition:\n        left var(--comp-checkbox-tween),\n        height var(--comp-checkbox-tween),\n        width var(--comp-checkbox-tween);\n    height: 16px;\n    width: 16px;\n    left: 4px;\n    border-radius: 50%;\n}\n\n.toggle-track {\n    height: 24px;\n    width: 38px;\n    fill: transparent;\n    border-radius: var(--app-border-radius-3, 12px);\n    box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);\n    transition:\n        fill var(--comp-checkbox-tween),\n        box-shadow var(--comp-checkbox-tween);\n}\n\n.toggle-circle {\n    mask: url(#xMask);\n    fill: var(--comp-checkbox-toggle-color);\n    transition: fill var(--comp-checkbox-tween);\n}\n\n.toggle-icon {\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-width: var(--tct-checkbox-toggle-icon-stroke-width, 2);\n    stroke: black;\n}\n\n:host(:is(:not([checked]), [checked='false'])) {\n    &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n        :hover,\n        :focus-within {\n            .toggle-track {\n                box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n            .toggle-circle {\n                fill: var-list(--tct-checkbox-toggle-hover-circle-color, --t-primary-d1, --t-gray-6, #4d4d4d);\n            }\n        }\n        :active {\n            .toggle-circle {\n                fill: var-list(--tct-checkbox-toggle-active-color, --t-primary-l1, #7755af);\n            }\n        }\n    }\n\n    &:host([has-error]:not([has-error='false'])) {\n        .toggle-track {\n            box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);\n        }\n        .toggle-circle {\n            fill: var(--comp-checkbox-toggle-error-color);\n        }\n\n        &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n            :hover,\n            :focus-within {\n                .toggle-track {\n                    box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);\n                }\n                .toggle-circle {\n                    fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n                }\n            }\n            :active {\n                .toggle-circle {\n                    fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\n                }\n            }\n        }\n    }\n}\n\n:host([checked]:not([checked='false'])) {\n    &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n        .toggle-track {\n            fill: var-list(--tct-checkbox-toggle-checked-track-color, --t-primary, #6a4a9e);\n            border: none;\n        }\n        .toggle-indicator {\n            left: 18px;\n        }\n        .toggle-circle {\n            mask: url(#checkMask);\n            fill: var-list(--tct-checkbox-toggle-checked-circle-color, --t-base, #ffffff);\n        }\n\n        :hover,\n        :focus-within {\n            .toggle-track {\n                fill: var-list(--tct-checkbox-toggle-checked-hover-track-color, --t-primary-d1, #5f438e);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n        }\n\n        :active {\n            .toggle-track {\n                fill: var-list(--tct-checkbox-toggle-checked-active-track-color, --t-primary-l1, #7755af);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n        }\n    }\n\n    &:host([has-error]:not([has-error='false'])) {\n        .toggle-track {\n            fill: var-list(--tct-checkbox-toggle-checked-error-track-color, --comp-checkbox-toggle-error-color);\n        }\n        &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n            :hover,\n            :focus-within {\n                .toggle-track {\n                    fill: var-list(\n                        --tct-checkbox-toggle-checked-error-hover-track-color,\n                        --comp-checkbox-toggle-error-color\n                    );\n                }\n            }\n\n            :active {\n                .toggle-track {\n                    fill: var-list(\n                        --tct-checkbox-toggle-checked-error-active-track-color,\n                        --comp-checkbox-toggle-error-color\n                    );\n                }\n            }\n        }\n    }\n}\n\n:host(:is([disabled]:not([disabled='false']), [group-disabled]:not([group-disabled='false']))) {\n    cursor: not-allowed;\n    opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    label {\n        cursor: not-allowed;\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true })\n    alignment: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    groupDisabled: boolean;\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 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     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true })\n    indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true })\n    type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.renderToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.renderCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    renderCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    renderToggleSVG() {\n        return (\n            <div class=\"toggle-svg-container\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 38 24\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <defs>\n                        {/* Mask for the X icon */}\n                        <mask id=\"xMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"6.5\"\n                                x2=\"11.5\"\n                                y2=\"11.5\"\n                            />\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"11.5\"\n                                x2=\"11.5\"\n                                y2=\"6.5\"\n                            />\n                        </mask>\n\n                        {/* Mask for the checkmark icon */}\n                        <mask id=\"checkMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <polyline\n                                class=\"toggle-icon\"\n                                points=\"6,8.5 8.5,11 12.5,6.5\"\n                                fill=\"none\"\n                            />\n                        </mask>\n                    </defs>\n                    <rect\n                        width=\"38\"\n                        height=\"24\"\n                        rx=\"12\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 18 18\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-circle\"\n                        cx=\"9\"\n                        cy=\"9\"\n                        r=\"9\"\n                        mask=\"url(#xMask)\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                    >\n                        {loc(this.label)}\n                        <slot />\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2CheckboxCss","Q2CheckboxStyle0","Q2Checkbox","this","_id","createGuid","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","slotReadonly","target","HTMLInputElement","value","checked","change","emit","inputElement","focus","componentWillLoad","handleAriaLabel","componentDidLoad","overrideFocus","hostElement","click","defaultChangeHandler","setTimeout","handleChangeEvent","delegateFocus","isEventFromElement","shadowRoot","querySelector","ariaLabelObserver","onchange","defaultPrevented","detail","renderCheckboxSVG","type","h","class","renderToggleSVG","width","height","viewBox","focusable","x","y","rx","indeterminate","renderCheckBoxSVGFill","x1","y1","x2","y2","points","id","fill","cx","cy","r","mask","render","textLabelClasses","hideLabel","push","key","ref","el","description","undefined","hasError","groupDisabled","name","onClick","htmlFor","join","loc","label"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-checkbox-padding: #{var-list(\n            --tct-checkbox-padding,\n            unquote('#{var-list(var-prefixer(checkbox-vertical-padding), 8px)} 0')\n        )};\n    display: block;\n    position: relative;\n    padding: var(--comp-checkbox-padding);\n    --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), 0px) 0\n        var-list(var-prefixer(checkbox-margin-bottom), 0px)};\n    margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n    --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 24px)};\n    --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n    --comp-checkbox-default-row-gap: 0;\n    --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n    --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n    --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n    --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n    --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n    --comp-checkbox-outer-stroke-color: #{var-list(\n            var-prefixer(checkbox-outer-stroke-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-checkbox-outer-fill-color: #{var-list(\n            var-prefixer(checkbox-outer-fill-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        )};\n    --comp-checkbox-checked-color: #{var-list(\n            var-prefixer(checkbox-check-stroke-color),\n            --t-checkbox-fill,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    --comp-control-width: var(--comp-checkbox-size);\n    --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n    :host([type='favorite']) & {\n        --comp-checkbox-favorite-stroke-color: #{var-list(\n                var-prefixer(checkbox-favorite-stroke-color),\n                --t-a11y-gray-color-AA,\n                #949494\n            )};\n        --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n    }\n\n    display: grid;\n    grid-template-areas:\n        'svg label'\n        'svg description';\n    align-items: center;\n    gap: var(--comp-checkbox-gap);\n    grid-template-columns: var(--comp-control-width) calc(\n            100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n        );\n\n    :host([hide-label]:not([hide-label='false'])) & {\n        grid-template-areas: 'svg';\n        grid-template-columns: var(--comp-control-width);\n    }\n\n    :host([type='toggle']) & {\n        --comp-control-width: var(--comp-checkbox-toggle-width);\n    }\n\n    :host([alignment='right']) &,\n    :host([type='toggle']:not([alignment])) & {\n        grid-template-areas:\n            'label svg'\n            'description svg';\n        grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n                --comp-control-width\n            );\n    }\n}\n\n.label-control {\n    align-items: center;\n    display: flex;\n}\n\n.label-text {\n    grid-area: label;\n    font-weight: var-list(var-prefixer(checkbox-label-font-weight), 400);\n\n    :host([description]) & {\n        font-weight: var-list(var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false'])) & {\n        font-weight: var-list(var-prefixer(checkbox-checked-label-font-weight), 600);\n    }\n    :host(:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host(:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 400);\n    }\n    :host([description]:hover) & {\n        font-weight: var-list(--tct-checkbox-hover-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):hover) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-hover-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n    :host([description]:focus-within) & {\n        font-weight: var-list(--tct-checkbox-focused-label-font-weight, var-prefixer(checkbox-label-font-weight), 600);\n    }\n    :host([checked]:not([checked='false']):focus-within) & {\n        font-weight: var-list(\n            --tct-checkbox-checked-focused-label-font-weight,\n            var-prefixer(checkbox-checked-label-font-weight),\n            600\n        );\n    }\n\n    label {\n        line-height: var-list(--tct-checkbox-label-line-height, 24px);\n        display: inline-block;\n    }\n}\n\n.description-text {\n    grid-area: description;\n    font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n    :host(:hover) & {\n        font-weight: var-list(\n            --tct-checkbox-hover-description-font-weight,\n            var-prefixer(checkbox-description-font-weight),\n            400\n        );\n    }\n}\n\nlabel {\n    color: var-list(--tct-checkbox-label-color);\n    cursor: pointer;\n    hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n    word-break: var-list(--tct-checkbox-label-word-break, break-word);\n    word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n.checkbox-icon {\n    width: var(--comp-checkbox-size);\n    height: var(--comp-checkbox-size);\n    border-radius: var-list(\n        var-prefixer(checkbox-outer-border-radius),\n        --tct-border-radius-1,\n        --app-border-radius-1,\n        4px\n    );\n    stroke: var(--comp-checkbox-outer-stroke-color);\n    fill: var(--comp-checkbox-outer-fill-color);\n    stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n    flex-shrink: 0;\n\n    :host([checked]:not([checked='false']):not([type='favorite'])) & {\n        stroke: var-list(var-prefixer(checkbox-checked-outer-stroke-color), --comp-checkbox-outer-stroke-color);\n        fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n    }\n\n    :host([has-error]:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n        fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-error-box-shadow);\n    }\n\n    :host(:hover:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n        fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--tct-checkbox-hover-box-shadow);\n    }\n    :host(:hover[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-hover-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-hover-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-hover-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --tct-checkbox-hover-box-shadow\n        );\n    }\n\n    :host(:focus-within:not([type='favorite'])) & {\n        --comp-checkbox-focused-box-shadow: #{var(--const-double-focus-ring),\n            var-list(--tct-global-focus, unquote('0 0 0 2px #33b4ff'))};\n\n        stroke: var-list(var-prefixer(checkbox-focused-outer-stroke-color), --comp-checkbox-checked-color);\n        fill: var-list(--tct-checkbox-focused-outer-fill-color, --comp-checkbox-outer-fill-color);\n        box-shadow: var(--comp-checkbox-focused-box-shadow);\n    }\n    :host(:focus-within[has-error]:not([type='favorite'])) & {\n        stroke: var-list(\n            --tct-checkbox-error-focused-outer-stroke-color,\n            --tct-checkbox-error-outer-stroke-color,\n            --comp-checkbox-error-color\n        );\n        fill: var-list(\n            --tct-checkbox-error-focused-outer-fill-color,\n            --tct-checkbox-error-outer-fill-color,\n            --comp-checkbox-outer-fill-color\n        );\n        box-shadow: var-list(\n            --tct-checkbox-error-focused-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --comp-checkbox-focused-box-shadow\n        );\n    }\n\n    // Favorite\n    :host([type='favorite']) & {\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-stroke-width), 1)};\n        --tct-icon-stroke-primary: var(--comp-checkbox-favorite-stroke-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host(:hover[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    // Checked favorite\n    :host([checked]:not([checked='false'])[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-stroke-color,\n                --tct-checkbox-favorite-stroke-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        fill: var-list(--tct-checkbox-favorite-checked-fill-color, --comp-checkbox-favorite-fill-color);\n        transition:\n            fill var(--comp-checkbox-tween),\n            color var(--comp-checkbox-tween),\n            stroke var(--comp-checkbox-tween);\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:hover) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-hover-stroke-color,\n                --tct-checkbox-favorite-hover-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-fill-primary: #{var-list(\n                --tct-checkbox-favorite-checked-fill-color,\n                --comp-checkbox-favorite-fill-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([checked]:not([checked='false'])[type='favorite']:focus-within) & {\n        --tct-icon-stroke-primary: #{var-list(\n                --tct-checkbox-favorite-checked-focused-stroke-color,\n                --tct-checkbox-favorite-focused-stroke-color,\n                --comp-checkbox-favorite-stroke-color\n            )};\n        --tct-icon-stroke-width: #{var-list(var-prefixer(checkbox-favorite-hover-stroke-width), 2)};\n    }\n\n    :host([has-error][type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n    :host([has-error][type='favorite'][checked]:not([checked='false'])) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n}\n\n.checkbox-fill {\n    stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n    stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.indeterminate-fill {\n    stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg-container {\n    height: 30px;\n    width: var(--comp-checkbox-toggle-width);\n    position: relative;\n    text-align: initial;\n}\n\n.toggle-indicator,\n.toggle-track {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n}\n.toggle-indicator {\n    transition:\n        left var(--comp-checkbox-tween),\n        height var(--comp-checkbox-tween),\n        width var(--comp-checkbox-tween);\n    height: 16px;\n    width: 16px;\n    left: 4px;\n    border-radius: 50%;\n}\n\n.toggle-track {\n    height: 24px;\n    width: 38px;\n    fill: transparent;\n    border-radius: var(--app-border-radius-3, 12px);\n    box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);\n    transition:\n        fill var(--comp-checkbox-tween),\n        box-shadow var(--comp-checkbox-tween);\n}\n\n.toggle-circle {\n    mask: url(#xMask);\n    fill: var(--comp-checkbox-toggle-color);\n    transition: fill var(--comp-checkbox-tween);\n}\n\n.toggle-icon {\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-width: var(--tct-checkbox-toggle-icon-stroke-width, 2);\n    stroke: black;\n}\n\n:host(:is(:not([checked]), [checked='false'])) {\n    &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n        :hover,\n        :focus-within {\n            .toggle-track {\n                box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n            .toggle-circle {\n                fill: var-list(--tct-checkbox-toggle-hover-circle-color, --t-primary-d1, --t-gray-6, #4d4d4d);\n            }\n        }\n        :active {\n            .toggle-circle {\n                fill: var-list(--tct-checkbox-toggle-active-color, --t-primary-l1, #7755af);\n            }\n        }\n    }\n\n    &:host([has-error]:not([has-error='false'])) {\n        .toggle-track {\n            box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);\n        }\n        .toggle-circle {\n            fill: var(--comp-checkbox-toggle-error-color);\n        }\n\n        &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n            :hover,\n            :focus-within {\n                .toggle-track {\n                    box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);\n                }\n                .toggle-circle {\n                    fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n                }\n            }\n            :active {\n                .toggle-circle {\n                    fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\n                }\n            }\n        }\n    }\n}\n\n:host([checked]:not([checked='false'])) {\n    &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n        .toggle-track {\n            fill: var-list(--tct-checkbox-toggle-checked-track-color, --t-primary, #6a4a9e);\n            border: none;\n        }\n        .toggle-indicator {\n            left: 18px;\n        }\n        .toggle-circle {\n            mask: url(#checkMask);\n            fill: var-list(--tct-checkbox-toggle-checked-circle-color, --t-base, #ffffff);\n        }\n\n        :hover,\n        :focus-within {\n            .toggle-track {\n                fill: var-list(--tct-checkbox-toggle-checked-hover-track-color, --t-primary-d1, #5f438e);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n        }\n\n        :active {\n            .toggle-track {\n                fill: var-list(--tct-checkbox-toggle-checked-active-track-color, --t-primary-l1, #7755af);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n        }\n    }\n\n    &:host([has-error]:not([has-error='false'])) {\n        .toggle-track {\n            fill: var-list(--tct-checkbox-toggle-checked-error-track-color, --comp-checkbox-toggle-error-color);\n        }\n        &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n            :hover,\n            :focus-within {\n                .toggle-track {\n                    fill: var-list(\n                        --tct-checkbox-toggle-checked-error-hover-track-color,\n                        --comp-checkbox-toggle-error-color\n                    );\n                }\n            }\n\n            :active {\n                .toggle-track {\n                    fill: var-list(\n                        --tct-checkbox-toggle-checked-error-active-track-color,\n                        --comp-checkbox-toggle-error-color\n                    );\n                }\n            }\n        }\n    }\n}\n\n:host(:is([disabled]:not([disabled='false']), [group-disabled]:not([group-disabled='false']))) {\n    cursor: not-allowed;\n    opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    label {\n        cursor: not-allowed;\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true })\n    alignment: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    groupDisabled: boolean;\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 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     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true })\n    indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true })\n    type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.renderToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.renderCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    renderCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    renderToggleSVG() {\n        return (\n            <div class=\"toggle-svg-container\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 38 24\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <defs>\n                        {/* Mask for the X icon */}\n                        <mask id=\"xMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"6.5\"\n                                x2=\"11.5\"\n                                y2=\"11.5\"\n                            />\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"11.5\"\n                                x2=\"11.5\"\n                                y2=\"6.5\"\n                            />\n                        </mask>\n\n                        {/* Mask for the checkmark icon */}\n                        <mask id=\"checkMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <polyline\n                                class=\"toggle-icon\"\n                                points=\"6,8.5 8.5,11 12.5,6.5\"\n                                fill=\"none\"\n                            />\n                        </mask>\n                    </defs>\n                    <rect\n                        width=\"38\"\n                        height=\"24\"\n                        rx=\"12\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 18 18\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-circle\"\n                        cx=\"9\"\n                        cy=\"9\"\n                        r=\"9\"\n                        mask=\"url(#xMask)\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                    >\n                        {loc(this.label)}\n                        <slot />\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { r, h as t, g as e } from "./index-7a5365e2.js";
 
-const s = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}.currency{color:var(--tct-currency-color, inherit);font-size:var(--tct-currency-font-size, inherit);font-weight:var(--tct-currency-font-weight, inherit)}.currency-small{color:var(--tct-currency-small-color, inherit);font-size:var(--tct-currency-small-font-size, 24px);font-weight:var(--tct-currency-small-font-weight, 600)}.currency-small .superscript{vertical-align:super;color:var(--tct-currency-small-superscript-color, inherit);font-size:var(--tct-currency-small-superscript-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-currency-small-superscript-font-weight, 700)}.currency-medium{color:var(--tct-currency-medium-color, inherit);font-size:var(--tct-currency-medium-font-size, 42px);font-weight:var(--tct-currency-medium-font-weight, 600)}.currency-medium .superscript{vertical-align:super;color:var(--tct-currency-medium-superscript-color, inherit);font-size:var(--tct-currency-medium-superscript-font-size, 16px);font-weight:var(--tct-currency-medium-superscript-font-weight, 700)}.currency-large{color:var(--tct-currency-large-color, inherit);font-size:var(--tct-currency-large-font-size, 70px);font-weight:var(--tct-currency-large-font-weight, 700)}.currency-large .superscript{vertical-align:super;color:var(--tct-currency-large-superscript-color, inherit);font-size:var(--tct-currency-large-superscript-font-size, 28px);font-weight:var(--tct-currency-large-superscript-font-weight, 800)}";
+const s = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}.currency{color:var(--tct-currency-color, inherit);font-size:var(--tct-currency-font-size, inherit);font-weight:var(--tct-currency-font-weight, inherit)}.currency-small{color:var(--tct-currency-small-color, inherit);font-size:var(--tct-currency-small-font-size, 24px);font-weight:var(--tct-currency-small-font-weight, 600)}.currency-small .superscript{vertical-align:super;color:var(--tct-currency-small-superscript-color, inherit);font-size:var(--tct-currency-small-superscript-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-currency-small-superscript-font-weight, 700)}.currency-medium{color:var(--tct-currency-medium-color, inherit);font-size:var(--tct-currency-medium-font-size, 42px);font-weight:var(--tct-currency-medium-font-weight, 600)}.currency-medium .superscript{vertical-align:super;color:var(--tct-currency-medium-superscript-color, inherit);font-size:var(--tct-currency-medium-superscript-font-size, 21px);font-weight:var(--tct-currency-medium-superscript-font-weight, 700)}.currency-large{color:var(--tct-currency-large-color, inherit);font-size:var(--tct-currency-large-font-size, 70px);font-weight:var(--tct-currency-large-font-weight, 700)}.currency-large .superscript{vertical-align:super;color:var(--tct-currency-large-superscript-color, inherit);font-size:var(--tct-currency-large-superscript-font-size, 35px);font-weight:var(--tct-currency-large-superscript-font-weight, 800)}";
 
 const n = s;
 
@@ -113,22 +113,22 @@ const i = class {
   render() {
     const {hasPlusMinusSign: r, plusMinusSign: e, currencyIsFront: s, currencySymbol: n, shouldSuperscriptSymbol: i, amountCore: c, fraction: o, shouldSuperscriptFraction: a, readableCurrency: u, currencyClasses: l} = this;
     return t("div", {
-      key: "85d715e4a420d06562d2d64f389ea0a5929cdc98",
+      key: "05cef20cb37aab1708a363b7fc3e50a2a4fb4e73",
       "test-id": "q2CurrencyInner",
       class: l,
       "aria-label": u
     }, r && t("span", {
-      key: "ee6691d5e476d0f3d7285ecf8b5f251a6a6e417b"
+      key: "7523d78cef6759dd48ba989386e29024301d44ab"
     }, e), s && t("span", {
-      key: "ed8e2a1bea42bfd3e3d218dd5831ef15ceb75502",
+      key: "740365f48e34b508f2d24a03dbf2813946829693",
       class: i ? "superscript" : ""
     }, n), t("span", {
-      key: "f9aa62f179a5d9c67b154df4f28113d4993a3ec3"
+      key: "58c0c7282b91ea8d4a08563000b53556d29909c0"
     }, c), t("span", {
-      key: "9049169b8d30ff721ba251a13c63c599dc9491aa",
+      key: "009739b541d73d15a220a8ae8344bd915e6b8723",
       class: a ? "superscript" : ""
     }, o), !s && t("span", {
-      key: "e1cd352956a793cb4626d9f8f72b3ca759a471e6",
+      key: "7fd6e0007464fd9826e42d28110b216882566e62",
       class: i ? "superscript" : ""
     }, n));
   }

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

@@ -1 +1 @@
-{"version":3,"names":["q2CurrencyCss","Q2CurrencyStyle0","Q2Currency","document","documentElement","lang","componentWillLoad","this","formatCurrency","displayedMessageValue","currency","hostElement","shadowRoot","querySelector","ariaLabel","propsUpdated","amountCore","formattedParts","shouldSuperscriptFraction","amount","part","type","value","length","slice","trimEnd","currencyClasses","classes","sizeClass","size","slotSize","push","join","currencyIsFront","index","findIndex","currencySymbol","currencyIndex","symbol","fraction","find","hasPlusMinusSign","some","plusMinusSign","sign","fractionIndex","commaBeforeFraction","sizeValue","sizeProvided","shouldSuperscriptSymbol","formatOptions","Intl","NumberFormat","locale","style","signDisplay","formatToParts","readableCurrency","format","render","h","key","class"],"sources":["src/components/q2-currency/q2-currency.scss?tag=q2-currency&encapsulation=shadow","src/components/q2-currency/q2-currency.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.currency {\n    color: var-list(--tct-currency-color, inherit);\n    font-size: var-list(--tct-currency-font-size, inherit);\n    font-weight: var-list(--tct-currency-font-weight, inherit);\n}\n\n.currency-small {\n    color: var-list(--tct-currency-small-color, inherit);\n    font-size: var-list(--tct-currency-small-font-size, 24px);\n    font-weight: var-list(--tct-currency-small-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-small-superscript-color, inherit);\n        font-size: var-list(--tct-currency-small-superscript-font-size, --app-font-size-small, 12px);\n        font-weight: var-list(--tct-currency-small-superscript-font-weight, 700);\n    }\n}\n\n.currency-medium {\n    color: var-list(--tct-currency-medium-color, inherit);\n    font-size: var-list(--tct-currency-medium-font-size, 42px);\n    font-weight: var-list(--tct-currency-medium-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-medium-superscript-color, inherit);\n        font-size: var-list(--tct-currency-medium-superscript-font-size, 16px);\n        font-weight: var-list(--tct-currency-medium-superscript-font-weight, 700);\n    }\n}\n\n.currency-large {\n    color: var-list(--tct-currency-large-color, inherit);\n    font-size: var-list(--tct-currency-large-font-size, 70px);\n    font-weight: var-list(--tct-currency-large-font-weight, 700);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-large-superscript-color, inherit);\n        font-size: var-list(--tct-currency-large-superscript-font-size, 28px);\n        font-weight: var-list(--tct-currency-large-superscript-font-weight, 800);\n    }\n}\n","import { Component, Prop, Watch, h, ComponentInterface, Element, Method } from '@stencil/core';\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The parts of the formatted number. */\n    formattedParts: Intl.NumberFormatPart[];\n    /** @private The full currency for aria-label purposes. */\n    readableCurrency: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The amount you want formatted.  */\n    @Prop({ reflect: true })\n    amount: number;\n\n    /** Formats the `amount` to a specific currency. */\n    @Prop({ reflect: true })\n    currency: string = 'USD';\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative numbers only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async displayedMessageValue() {\n        const currency = this.hostElement.shadowRoot.querySelector('[test-id=\"q2CurrencyInner\"]');\n        return currency?.ariaLabel;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('amount')\n    @Watch('currency')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    propsUpdated() {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get amountCore(): string {\n        const { formattedParts, shouldSuperscriptFraction } = this;\n        let amount: string = '';\n\n        for (const part of formattedParts) {\n            if (\n                part.type === 'integer' ||\n                part.type === 'decimal' ||\n                part.type === 'group' ||\n                part.type === 'literal'\n            ) {\n                amount += part.value;\n            }\n        }\n\n        // removes trailing decimal point if superscripting the fraction\n        if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n        // removes end whitespace that breaks formatting\n        amount = amount.trimEnd();\n\n        return amount;\n    }\n\n    get currencyClasses(): string {\n        const classes = ['currency'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n\n        if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n        return classes.join(' ');\n    }\n\n    get currencyIsFront(): boolean {\n        const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        if (index === 0 || index === 1) return true;\n        return false;\n    }\n\n    get currencySymbol(): string {\n        const { formattedParts, currencyIsFront } = this;\n        const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        const symbol = formattedParts[currencyIndex].value;\n        return currencyIsFront ? symbol : ' ' + symbol;\n    }\n\n    get fraction(): string {\n        const { formattedParts } = this;\n        const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        if (!fraction) return;\n\n        return fraction.value;\n    }\n\n    get hasPlusMinusSign(): boolean {\n        return this.formattedParts.some(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n    }\n\n    get plusMinusSign(): string {\n        const { formattedParts, hasPlusMinusSign } = this;\n        if (!hasPlusMinusSign) return;\n\n        const sign = formattedParts.find(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n        return sign.value;\n    }\n\n    get shouldSuperscriptFraction(): boolean {\n        const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        const commaBeforeFraction = this.formattedParts[fractionIndex - 1].value === ',';\n\n        if (commaBeforeFraction || !this.currencyIsFront || this.sizeValue === 'small' || !this.sizeProvided)\n            return false;\n\n        return true;\n    }\n\n    get shouldSuperscriptSymbol(): boolean {\n        if (!this.currencyIsFront || this.sizeProvided) return true;\n\n        return false;\n    }\n\n    get sizeProvided(): boolean {\n        return !!this.size || !!this.slotSize;\n    }\n\n    get sizeValue(): string {\n        return this.size ? this.size : this.slotSize;\n    }\n\n    formatCurrency() {\n        const formatOptions = new Intl.NumberFormat(this.locale, {\n            style: 'currency',\n            currency: this.currency,\n            signDisplay: this.signDisplay,\n        });\n        this.formattedParts = formatOptions.formatToParts(this.amount);\n        this.readableCurrency = formatOptions.format(this.amount);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const {\n            hasPlusMinusSign,\n            plusMinusSign,\n            currencyIsFront,\n            currencySymbol,\n            shouldSuperscriptSymbol,\n            amountCore,\n            fraction,\n            shouldSuperscriptFraction,\n            readableCurrency,\n            currencyClasses,\n        } = this;\n\n        return (\n            <div\n                test-id=\"q2CurrencyInner\"\n                class={currencyClasses}\n                aria-label={readableCurrency}\n            >\n                {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n                {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n                <span>{amountCore}</span>\n                <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n                {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}
+{"version":3,"names":["q2CurrencyCss","Q2CurrencyStyle0","Q2Currency","document","documentElement","lang","componentWillLoad","this","formatCurrency","displayedMessageValue","currency","hostElement","shadowRoot","querySelector","ariaLabel","propsUpdated","amountCore","formattedParts","shouldSuperscriptFraction","amount","part","type","value","length","slice","trimEnd","currencyClasses","classes","sizeClass","size","slotSize","push","join","currencyIsFront","index","findIndex","currencySymbol","currencyIndex","symbol","fraction","find","hasPlusMinusSign","some","plusMinusSign","sign","fractionIndex","commaBeforeFraction","sizeValue","sizeProvided","shouldSuperscriptSymbol","formatOptions","Intl","NumberFormat","locale","style","signDisplay","formatToParts","readableCurrency","format","render","h","key","class"],"sources":["src/components/q2-currency/q2-currency.scss?tag=q2-currency&encapsulation=shadow","src/components/q2-currency/q2-currency.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n}\n\n.currency {\n    color: var-list(--tct-currency-color, inherit);\n    font-size: var-list(--tct-currency-font-size, inherit);\n    font-weight: var-list(--tct-currency-font-weight, inherit);\n}\n\n.currency-small {\n    color: var-list(--tct-currency-small-color, inherit);\n    font-size: var-list(--tct-currency-small-font-size, 24px);\n    font-weight: var-list(--tct-currency-small-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-small-superscript-color, inherit);\n        font-size: var-list(--tct-currency-small-superscript-font-size, --app-font-size-small, 12px);\n        font-weight: var-list(--tct-currency-small-superscript-font-weight, 700);\n    }\n}\n\n.currency-medium {\n    color: var-list(--tct-currency-medium-color, inherit);\n    font-size: var-list(--tct-currency-medium-font-size, 42px);\n    font-weight: var-list(--tct-currency-medium-font-weight, 600);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-medium-superscript-color, inherit);\n        font-size: var-list(--tct-currency-medium-superscript-font-size, 21px);\n        font-weight: var-list(--tct-currency-medium-superscript-font-weight, 700);\n    }\n}\n\n.currency-large {\n    color: var-list(--tct-currency-large-color, inherit);\n    font-size: var-list(--tct-currency-large-font-size, 70px);\n    font-weight: var-list(--tct-currency-large-font-weight, 700);\n\n    .superscript {\n        vertical-align: super;\n        color: var-list(--tct-currency-large-superscript-color, inherit);\n        font-size: var-list(--tct-currency-large-superscript-font-size, 35px);\n        font-weight: var-list(--tct-currency-large-superscript-font-weight, 800);\n    }\n}\n","import { Component, Prop, Watch, h, ComponentInterface, Element, Method } from '@stencil/core';\n@Component({ tag: 'q2-currency', shadow: true, styleUrl: 'q2-currency.scss' })\nexport class Q2Currency implements ComponentInterface {\n    // #region Own Properties\n\n    /** @private The parts of the formatted number. */\n    formattedParts: Intl.NumberFormatPart[];\n    /** @private The full currency for aria-label purposes. */\n    readableCurrency: string;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The amount you want formatted.  */\n    @Prop({ reflect: true })\n    amount: number;\n\n    /** Formats the `amount` to a specific currency. */\n    @Prop({ reflect: true })\n    currency: string = 'USD';\n\n    /** Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks. */\n    @Prop({ reflect: true })\n    locale: string | string[] = document.documentElement.lang || 'en-US';\n\n    /**\n     * Determine how the positive or negative sign should display.\n     *\n     * Behavior:\n     * - `always`: Always display the sign.\n     * - `auto`: Sign displays for negative numbers only, including negative zero.\n     * - `exceptZero`: Sign displays for positive and negative numbers, but not zero.\n     * - `never`: Never display the sign.\n     */\n    @Prop({ reflect: true })\n    signDisplay: 'never' | 'auto' | 'always' | 'exceptZero' = 'auto';\n\n    /** Applies styling based on the size provided. If no size is provided, it will display as inline text. */\n    @Prop({ reflect: true })\n    size: 'small' | 'medium' | 'large';\n\n    /** @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.  */\n    @Prop({ reflect: true })\n    slotSize: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void | Promise<void> {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async displayedMessageValue() {\n        const currency = this.hostElement.shadowRoot.querySelector('[test-id=\"q2CurrencyInner\"]');\n        return currency?.ariaLabel;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('amount')\n    @Watch('currency')\n    @Watch('locale')\n    @Watch('size')\n    @Watch('slotSize')\n    @Watch('signDisplay')\n    propsUpdated() {\n        this.formatCurrency();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get amountCore(): string {\n        const { formattedParts, shouldSuperscriptFraction } = this;\n        let amount: string = '';\n\n        for (const part of formattedParts) {\n            if (\n                part.type === 'integer' ||\n                part.type === 'decimal' ||\n                part.type === 'group' ||\n                part.type === 'literal'\n            ) {\n                amount += part.value;\n            }\n        }\n\n        // removes trailing decimal point if superscripting the fraction\n        if (shouldSuperscriptFraction && amount[amount.length - 1] === '.') amount = amount.slice(0, -1);\n        // removes end whitespace that breaks formatting\n        amount = amount.trimEnd();\n\n        return amount;\n    }\n\n    get currencyClasses(): string {\n        const classes = ['currency'];\n        const sizeClass = this.size ? this.size : this.slotSize;\n\n        if (!!sizeClass) classes.push(`currency-${sizeClass}`);\n\n        return classes.join(' ');\n    }\n\n    get currencyIsFront(): boolean {\n        const index = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        if (index === 0 || index === 1) return true;\n        return false;\n    }\n\n    get currencySymbol(): string {\n        const { formattedParts, currencyIsFront } = this;\n        const currencyIndex = formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'currency');\n        const symbol = formattedParts[currencyIndex].value;\n        return currencyIsFront ? symbol : ' ' + symbol;\n    }\n\n    get fraction(): string {\n        const { formattedParts } = this;\n        const fraction = formattedParts.find((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        if (!fraction) return;\n\n        return fraction.value;\n    }\n\n    get hasPlusMinusSign(): boolean {\n        return this.formattedParts.some(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n    }\n\n    get plusMinusSign(): string {\n        const { formattedParts, hasPlusMinusSign } = this;\n        if (!hasPlusMinusSign) return;\n\n        const sign = formattedParts.find(\n            (part: Intl.NumberFormatPart) => part.type === 'minusSign' || part.type === 'plusSign'\n        );\n        return sign.value;\n    }\n\n    get shouldSuperscriptFraction(): boolean {\n        const fractionIndex = this.formattedParts.findIndex((part: Intl.NumberFormatPart) => part.type === 'fraction');\n        const commaBeforeFraction = this.formattedParts[fractionIndex - 1].value === ',';\n\n        if (commaBeforeFraction || !this.currencyIsFront || this.sizeValue === 'small' || !this.sizeProvided)\n            return false;\n\n        return true;\n    }\n\n    get shouldSuperscriptSymbol(): boolean {\n        if (!this.currencyIsFront || this.sizeProvided) return true;\n\n        return false;\n    }\n\n    get sizeProvided(): boolean {\n        return !!this.size || !!this.slotSize;\n    }\n\n    get sizeValue(): string {\n        return this.size ? this.size : this.slotSize;\n    }\n\n    formatCurrency() {\n        const formatOptions = new Intl.NumberFormat(this.locale, {\n            style: 'currency',\n            currency: this.currency,\n            signDisplay: this.signDisplay,\n        });\n        this.formattedParts = formatOptions.formatToParts(this.amount);\n        this.readableCurrency = formatOptions.format(this.amount);\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const {\n            hasPlusMinusSign,\n            plusMinusSign,\n            currencyIsFront,\n            currencySymbol,\n            shouldSuperscriptSymbol,\n            amountCore,\n            fraction,\n            shouldSuperscriptFraction,\n            readableCurrency,\n            currencyClasses,\n        } = this;\n\n        return (\n            <div\n                test-id=\"q2CurrencyInner\"\n                class={currencyClasses}\n                aria-label={readableCurrency}\n            >\n                {hasPlusMinusSign && <span>{plusMinusSign}</span>}\n                {currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n                <span>{amountCore}</span>\n                <span class={shouldSuperscriptFraction ? 'superscript' : ''}>{fraction}</span>\n                {!currencyIsFront && <span class={shouldSuperscriptSymbol ? 'superscript' : ''}>{currencySymbol}</span>}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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"}

package/dist/q2-tecton-elements/q2-data-table.entry.js

@@ -1,8 +1,8 @@
 import { r as t, c as e, h as a, F as o, g as r } from "./index-7a5365e2.js";
 
-import { m as l, l as n } from "./index-f2a66217.js";
+import { m as l, l as n } from "./index-c215e8ef.js";
 
-const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{--tct-checkbox-padding:0;--tct-checkbox-margin:0}";
+const c = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.striped:nth-child(even){background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped:nth-child(odd){background:var(--tct-data-table-row-odd-background, transparent)}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--tct-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";
 
 const d = c;