q2-tecton-elements 1.46.0 → 1.47.0

package/dist/esm/q2-checkbox-group.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e1ce94e.js';
-import { c as createGuid, e as labelDOM } from './index-0a702dd6.js';
+import { c as createGuid, e as labelDOM } from './index-3c5cd75e.js';
 
 const q2CheckboxGroupCss = "*{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{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgb(255, 255, 255))))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
 const Q2CheckboxGroupStyle0 = q2CheckboxGroupCss;
@@ -57,8 +57,9 @@ const Q2CheckboxGroup = class {
         });
     }
     updateReadonly() {
+        const slotReadonly = this.readonly;
         this.checkboxElements.forEach(checkbox => {
-            checkbox.readonly = this.readonly;
+            checkbox.slotReadonly = slotReadonly;
         });
     }
     ///// LIFECYCLE HOOK ///////
@@ -106,7 +107,7 @@ const Q2CheckboxGroup = class {
     }
     render() {
         const showLabel = this.label || this.optional || this.readonly;
-        return (h("div", { key: 'e2a894896f93d34c078e6b5bdd1423ac00a3a262' }, showLabel && !this.hideLabel && h("div", { key: 'b620faf1987d2a1dad738e8e55a41d698315b461', class: "group-legend" }, labelDOM(this)), h("fieldset", { key: '0d1584ba4e5fc05fc4ccb0e1bbcb7cc6440c0190', class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange, "aria-invalid": `${this.hasError}` }, this.label || this.optional ? h("legend", { class: "sr-only" }, labelDOM(this)) : '', this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
+        return (h("div", { key: '6b4c836a5d3c97b6271a5feeac64dfe58b692b25' }, showLabel && !this.hideLabel && h("div", { key: '09840d56ff72f32cb1bf3fc9fce63e8565aa5ea7', class: "group-legend" }, labelDOM(this)), h("fieldset", { key: 'd7307cee9962d82e242547ab15d275832be3424f', class: `q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerCheckboxChange, "aria-invalid": `${this.hasError}` }, this.label || this.optional ? h("legend", { class: "sr-only" }, labelDOM(this)) : '', this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` }, h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''), this.inputDom())));
     }
     inputDom() {
         return h("slot", null);

package/dist/esm/q2-checkbox-group.entry.js.map

@@ -1 +1 @@
-{"file":"q2-checkbox-group.entry.js","mappings":"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","names":[],"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\n:host {\n    margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n    padding: var(--tct-input-error-padding, 0);\n    margin: 0;\n    border: 0;\n}\n\nfieldset.has-error {\n    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n    position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n    top: 8px;\n    right: 8px;\n    position: absolute;\n    width: 40%;\n    text-align: right;\n    background: linear-gradient(\n        to right,\n        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n    );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n    top: 28px;\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n    color: var(\n        --tct-input-label-optional-font-color,\n        var(\n            --tct-a11y-color,\n            var(\n                --t-a11y-gray-color,\n                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n            )\n        )\n    );\n    font-size: var(--tct-input-label-optional-font-size, 12px);\n    font-weight: var(--tct-input-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} from '@stencil/core';\nimport { createGuid, labelDOM } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) 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 }) hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true }) optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true }) 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 }) value: object;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get inputId() {\n        return this._id;\n    }\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\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    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    updateDisabled() {\n        const groupDisabled = this.disabled;\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.groupDisabled = groupDisabled;\n        });\n    }\n\n    updateReadonly() {\n        this.checkboxElements.forEach(checkbox => {\n            checkbox.readonly = this.readonly;\n        });\n    }\n\n    ///// LIFECYCLE HOOK ///////\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    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    /// Methods ///\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    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\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    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        return (\n            <div>\n                {showLabel && !this.hideLabel && <div class=\"group-legend\">{labelDOM(this)}</div>}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? <legend class=\"sr-only\">{labelDOM(this)}</legend> : ''}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"],"version":3}
+{"file":"q2-checkbox-group.entry.js","mappings":"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","names":[],"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\n:host {\n    margin-top: var(--tct-scale-2, var(--app-scale-2x, 10px));\n}\n\nfieldset {\n    padding: var(--tct-input-error-padding, 0);\n    margin: 0;\n    border: 0;\n}\n\nfieldset.has-error {\n    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));\n    position: relative;\n}\n\nfieldset.has-error .error-icon-container {\n    top: 8px;\n    right: 8px;\n    position: absolute;\n    width: 40%;\n    text-align: right;\n    background: linear-gradient(\n        to right,\n        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),\n        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))\n    );\n}\n\nfieldset.has-error legend + div.error-icon-container.no-label {\n    top: 28px;\n}\n\n.group-legend {\n    font-weight: 600;\n}\n\nlegend.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    border: 0;\n}\n\n.optional-tag {\n    margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));\n    color: var(\n        --tct-input-label-optional-font-color,\n        var(\n            --tct-a11y-color,\n            var(\n                --t-a11y-gray-color,\n                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))\n            )\n        )\n    );\n    font-size: var(--tct-input-label-optional-font-size, 12px);\n    font-weight: var(--tct-input-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} from '@stencil/core';\nimport { createGuid, labelDOM } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox-group', shadow: true, styleUrl: 'q2-checkbox-group.scss' })\nexport class Q2CheckboxGroup implements ComponentInterface {\n    /** Determines if all checkboxes in the group are put into a `disabled` state. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) 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 }) hideLabel: boolean;\n\n    /**\n     * The label that displays above all the checkboxes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /** Determines if the component is marked as `optional`. */\n    @Prop({ reflect: true }) optional: boolean;\n\n    /** Determines if all the checkboxes are marked as `readonly`. */\n    @Prop({ reflect: true }) 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 }) value: object;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-group-${createGuid()}`;\n    mutationObserver: MutationObserver;\n\n    get inputId() {\n        return this._id;\n    }\n\n    get checkboxElements() {\n        return Array.from(this.hostElement.querySelectorAll('q2-checkbox')) as HTMLQ2CheckboxElement[];\n    }\n\n    get protectedValue(): object {\n        return this.value || {};\n    }\n\n    onMutationObserved = () => {\n        this.updateValue();\n        this.updateDisabled();\n        this.updateReadonly();\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    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    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    ///// LIFECYCLE HOOK ///////\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    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateValue();\n    }\n\n    @Watch('disabled')\n    disabledObserver() {\n        this.updateDisabled();\n    }\n\n    @Watch('readonly')\n    readonlyObserver() {\n        this.updateReadonly();\n    }\n\n    /// Methods ///\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    ///// HOST ELEMENT EVENTS ///////\n\n    @Event() change: EventEmitter;\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    render() {\n        const showLabel = this.label || this.optional || this.readonly;\n        return (\n            <div>\n                {showLabel && !this.hideLabel && <div class=\"group-legend\">{labelDOM(this)}</div>}\n                <fieldset\n                    class={`q2-checkbox-fieldset ${this.hasError ? 'has-error' : ''}`}\n                    onChange={this.onInnerCheckboxChange}\n                    aria-invalid={`${this.hasError}`}\n                >\n                    {this.label || this.optional ? <legend class=\"sr-only\">{labelDOM(this)}</legend> : ''}\n                    {this.hasError ? (\n                        <div class={`error-icon-container ${this.label || this.optional ? '' : 'no-label'}`}>\n                            <q2-icon\n                                class=\"h(4) w(4) mrg-b(2)\"\n                                type=\"error\"\n                            ></q2-icon>\n                        </div>\n                    ) : (\n                        ''\n                    )}\n                    {this.inputDom()}\n                </fieldset>\n            </div>\n        );\n    }\n\n    inputDom() {\n        return <slot />;\n    }\n}\n"],"version":3}

package/dist/esm/q2-checkbox.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e1ce94e.js';
-import { c as createGuid, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index-0a702dd6.js';
+import { c as createGuid, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement, l as loc } from './index-3c5cd75e.js';
 
 const q2CheckboxCss = "*{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)}.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, 46px));--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)}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.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, 3px))));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))}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]:not([checked=false])) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}:host([has-error]) .toggle-track{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]:not([checked=false])) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]:not([checked=false])) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host([has-error]) .toggle-circle,:host([has-error]:focus-within) .toggle-circle,:host([has-error]:hover) .toggle-circle{fill:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}.toggle-hover-circle{stroke-width:0}:host(:focus-within) .toggle-hover-circle,:host(:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:is(:not([checked]),[checked=false]):focus-within) .toggle-hover-circle,:host(:is(:not([checked]),[checked=false]):hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([has-error]) .toggle-hover-circle,:host([has-error]:focus-within) .toggle-hover-circle,:host([has-error]:hover) .toggle-hover-circle{stroke:var(--tct-checkbox-toggle-error-color, var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a)))}:host([checked]:not([checked=false])) .off,:host(:is(:not([checked]),[checked=false])) .on{opacity:0}";
 const Q2CheckboxStyle0 = q2CheckboxCss;
@@ -13,7 +13,7 @@ const Q2Checkbox = class {
         this.onInputClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            const isNotInteractive = this.disabled || this.readonly;
+            const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;
             if (isNotInteractive)
                 return;
             if (!(event.target instanceof HTMLInputElement))
@@ -35,6 +35,7 @@ const Q2Checkbox = class {
         this.label = undefined;
         this.name = undefined;
         this.readonly = undefined;
+        this.slotReadonly = undefined;
         this.type = undefined;
         this.value = undefined;
         this.groupDisabled = undefined;
@@ -78,7 +79,7 @@ const Q2Checkbox = class {
         const textLabelClasses = ['label-text'];
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (h("div", { key: '8a47f38a9e71f309758382f3401ab8f8caeecade', class: "container" }, h("input", { key: '1473a55f6ad4984616e9f527120e083ed2ffc71a', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '35e9a47c70c9b6ce91a767fad50ab0f3182ef924', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { key: '71805bb7b3d2aa466fcd8f717cebe54dca237ffd', class: textLabelClasses.join(' ') }, h("label", { key: '3b625b7cde8282a1b91dc5da0ce38fafef94253e', "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", { key: 'e18745bcde6f545c42d1bb83ee8e58488b755df5' }))), this.description && (h("div", { key: 'c8440ff5ba14bb03bc34de02102179b3e260f89f', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
+        return (h("div", { key: 'f71504e3c4a400cc2793d5db532637bb04989bb8', class: "container" }, h("input", { key: 'aa1fbc10ed45975184fa3b0e571c8d651fc548cc', ref: el => (this.inputElement = el), "aria-describedby": this.description ? 'description' : undefined, "aria-invalid": `${this.hasError}`, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), h("label", { key: '57a9f3ad41317c6c1804179cd81caf11d18038a2', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton" }, this.generateCheckboxSVG()), h("div", { key: 'a36286a3e670e3de961b8a0191b4509caedbb78e', class: textLabelClasses.join(' ') }, h("label", { key: '7e0894a98ccbb7f1101384f0d256160a70db8c36', "test-id": "checkboxLabel", htmlFor: this._id }, loc(this.label), h("slot", { key: 'cc3171e6df7743d3e80757267a336b6e2b99020d' }))), this.description && (h("div", { key: 'cde56109f516026ee00ca00857897c5766cc0459', class: "description-text", "test-id": "checkboxDescription", id: "description" }, loc(this.description)))));
     }
     generateCheckboxSVG() {
         if (this.type === 'favorite') {

package/dist/esm/q2-checkbox.entry.js.map

@@ -1 +1 @@
-{"file":"q2-checkbox.entry.js","mappings":"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","names":[],"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}\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), 46px)};\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:host([disabled]:not([disabled='false'])),\n:host([group-disabled]) {\n    opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n\n    label {\n        cursor: not-allowed;\n    }\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        3px\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}\n\n.checked-fill {\n    stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    :host([type='toggle']) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-icon-stroke), --tct-white, --app-white, #ffffff);\n        transition: opacity var(--comp-checkbox-tween);\n    }\n    :host([type='toggle'][checked]:not([checked='false'])) & {\n        stroke: var-list(\n            var-prefixer(checkbox-toggle-checked-icon-stroke),\n            --t-checkbox-text,\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n    }\n}\n\n.indeterminate-fill {\n    stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg {\n    height: 30px;\n    width: var(--comp-checkbox-toggle-width);\n    position: relative;\n    text-align: initial;\n}\n\n.toggle-track,\n.toggle-indicator {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.toggle-track {\n    fill: var-list(\n        var-prefixer(checkbox-toggle-track-color),\n        var-prefixer(gray-11),\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    height: 14px;\n    width: 46px;\n\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        opacity: 0.5;\n    }\n    :host([has-error]) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n        opacity: 0.5;\n    }\n}\n\n.toggle-indicator {\n    transition: left var(--comp-checkbox-tween);\n    height: 30px;\n    width: 30px;\n    left: 0;\n    border-radius: 50%;\n\n    :host([checked]:not([checked='false'])) & {\n        left: 21px;\n    }\n}\n\n.toggle-circle {\n    fill: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n.toggle-hover-circle {\n    stroke-width: 0;\n\n    :host(:focus-within) &,\n    :host(:hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        stroke-width: 10px;\n        stroke-opacity: 0.5;\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n:host([checked]:not([checked='false'])) .off,\n:host(:is(:not([checked]), [checked='false'])) .on {\n    opacity: 0;\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    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true }) alignment: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true }) description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) 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 }) 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 }) 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 }) label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true }) name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true }) type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true }) groupDisabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    ////////// LIFECYCLE HOOKS ////////\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    //////// Host Element Events ////////\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    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    ///// Event ////////\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n    ///// Actions ////////\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly;\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    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    /////// View Methods ///////\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}`}\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.generateCheckboxSVG()}\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    generateCheckboxSVG() {\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.generateToggleSVG();\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.generateCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    generateCheckBoxSVGFill() {\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    generateToggleSVG() {\n        return (\n            <div class=\"toggle-svg\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 46 14\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"36\"\n                        height=\"14\"\n                        rx=\"7\"\n                        x=\"5\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 30 30\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-hover-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <circle\n                        class=\"toggle-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"18\"\n                        x2=\"18\"\n                        y2=\"12\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"12\"\n                        x2=\"18\"\n                        y2=\"18\"\n                    />\n                    <polyline\n                        class=\"on checked-fill\"\n                        points=\"11,16 14,19 18,12 14,19\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-checkbox.entry.js","mappings":"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","names":[],"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}\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), 46px)};\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:host([disabled]:not([disabled='false'])),\n:host([group-disabled]) {\n    opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n\n    label {\n        cursor: not-allowed;\n    }\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        3px\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}\n\n.checked-fill {\n    stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n\n    :host([type='toggle']) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-icon-stroke), --tct-white, --app-white, #ffffff);\n        transition: opacity var(--comp-checkbox-tween);\n    }\n    :host([type='toggle'][checked]:not([checked='false'])) & {\n        stroke: var-list(\n            var-prefixer(checkbox-toggle-checked-icon-stroke),\n            --t-checkbox-text,\n            --tct-white,\n            --app-white,\n            #ffffff\n        );\n    }\n}\n\n.indeterminate-fill {\n    stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg {\n    height: 30px;\n    width: var(--comp-checkbox-toggle-width);\n    position: relative;\n    text-align: initial;\n}\n\n.toggle-track,\n.toggle-indicator {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.toggle-track {\n    fill: var-list(\n        var-prefixer(checkbox-toggle-track-color),\n        var-prefixer(gray-11),\n        --tct-gray-l1,\n        --app-gray-l1,\n        #cccccc\n    );\n    height: 14px;\n    width: 46px;\n\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        opacity: 0.5;\n    }\n    :host([has-error]) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n        opacity: 0.5;\n    }\n}\n\n.toggle-indicator {\n    transition: left var(--comp-checkbox-tween);\n    height: 30px;\n    width: 30px;\n    left: 0;\n    border-radius: 50%;\n\n    :host([checked]:not([checked='false'])) & {\n        left: 21px;\n    }\n}\n\n.toggle-circle {\n    fill: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    :host([checked]:not([checked='false'])) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        fill: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        fill: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n.toggle-hover-circle {\n    stroke-width: 0;\n\n    :host(:focus-within) &,\n    :host(:hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-checked-color), --comp-checkbox-checked-color);\n        stroke-width: 10px;\n        stroke-opacity: 0.5;\n    }\n\n    :host(:is(:not([checked]), [checked='false']):focus-within) &,\n    :host(:is(:not([checked]), [checked='false']):hover) & {\n        stroke: var-list(var-prefixer(checkbox-toggle-circle-color), --t-a11y-gray-color-AA, #949494);\n    }\n    :host([has-error]) &,\n    :host([has-error]:focus-within) &,\n    :host([has-error]:hover) & {\n        stroke: var-list(--tct-checkbox-toggle-error-color, --tct-stoplight-error, --const-stoplight-alert, #d20a0a);\n    }\n}\n\n:host([checked]:not([checked='false'])) .off,\n:host(:is(:not([checked]), [checked='false'])) .on {\n    opacity: 0;\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    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true }) alignment: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true }) description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true }) 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 }) 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 }) 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 }) label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true }) name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true }) 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 }) type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true }) value: string;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true }) groupDisabled: boolean;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    ////////// LIFECYCLE HOOKS ////////\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    //////// Host Element Events ////////\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    ////////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    ///// Event ////////\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event() change: EventEmitter<{ value: string; checked: boolean }>;\n\n    ///// Actions ////////\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    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    /////// View Methods ///////\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}`}\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.generateCheckboxSVG()}\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    generateCheckboxSVG() {\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.generateToggleSVG();\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.generateCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    generateCheckBoxSVGFill() {\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    generateToggleSVG() {\n        return (\n            <div class=\"toggle-svg\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 46 14\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"36\"\n                        height=\"14\"\n                        rx=\"7\"\n                        x=\"5\"\n                    />\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 30 30\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <circle\n                        class=\"toggle-hover-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <circle\n                        class=\"toggle-circle\"\n                        width=\"20\"\n                        height=\"20\"\n                        cx=\"15\"\n                        cy=\"15\"\n                        r=\"10\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"18\"\n                        x2=\"18\"\n                        y2=\"12\"\n                    />\n                    <line\n                        class=\"off checked-fill\"\n                        x1=\"12\"\n                        y1=\"12\"\n                        x2=\"18\"\n                        y2=\"18\"\n                    />\n                    <polyline\n                        class=\"on checked-fill\"\n                        points=\"11,16 14,19 18,12 14,19\"\n                    />\n                </svg>\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/q2-currency.entry.js

@@ -117,7 +117,7 @@ const Q2Currency = class {
     /// DOM ///
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, } = this;
-        return (h("div", { key: '0a730d73b23a578257b44dc2eb1f8360707cd87b', class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: 'c7b69e0f685fbbbe814a50413fb533b36105453b' }, plusMinusSign), currencyIsFront && h("span", { key: 'b7d8aa7ae7f3f48f762fc16932ff4da60beb57db', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '2c4bbf98fa2fbbafb0cf273b4c3a28b906981e2f' }, amountCore), h("span", { key: '1ed2482e9dfd9bda22395877c105651ddcd4e6e5', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: 'dedd3638fea31a7f985f553c4b14be358c031318', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
+        return (h("div", { key: 'd9b2f20577fe671cd6f6acb53878923bf3290efd', class: currencyClasses, "aria-label": readableCurrency }, hasPlusMinusSign && h("span", { key: '1037c60e29cc33818ec14448b2129881bc09e4ea' }, plusMinusSign), currencyIsFront && h("span", { key: '718b443ad761455137821deaaf2e6ceaa0fe3c7c', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '5d3c31b8698c0cf647fdeb2a4d7149dd4860ec45' }, amountCore), h("span", { key: '752dbb9d1d12255c3e5c6f49f3000973c8f026c7', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '9f13a2deadf0f9fd6dc2a6997599dd32766b6ebe', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)));
     }
     static get watchers() { return {
         "amount": ["propsUpdated"],

package/dist/esm/q2-data-table.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-1e1ce94e.js';
-import { r as resizeIframe, l as loc } from './index-0a702dd6.js';
+import { r as resizeIframe, l as loc } from './index-3c5cd75e.js';
 
 const q2DataTableCss = "*{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, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.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, 0 2px 4px rgba(0, 0, 0, 0.3))))}: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)}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.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([bordered]:not([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 Q2DataTableStyle0 = q2DataTableCss;
@@ -263,7 +263,7 @@ const Q2DataTable = class {
     /// DOM ///
     render() {
         const { caption } = this;
-        return (h("div", { key: '80254b3be363aec5becf47304fd9b317744bd17c', class: "container" }, h("table", { key: 'd70888844091f555b18ebed88ed788cd8e1b8cd5' }, caption && h("caption", { key: 'df58d2ac5af6c24ef2415eb894bd89f2d631607f', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: 'd1de84188f5da69359c6c9f04d0a6ecf8190883b', class: "container" }, h("table", { key: '9b8d3e02d2417c005ed2ee6e0495dec2355476b1' }, caption && h("caption", { key: 'b3545a27ae848672c2f0604f89d22558a59cd066', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderTableColGroup() {
         const { serializedHeaders: headers, selectable, clickable, hasExpandableRows, hasDropdowns } = this;

package/dist/esm/q2-detail.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-1e1ce94e.js';
-import { f as hasSlotContent, l as loc } from './index-0a702dd6.js';
+import { f as hasSlotContent, l as loc } from './index-3c5cd75e.js';
 
 const q2DetailCss = "*{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}::slotted([slot]){display:flex;align-items:center;--tct-icon-size:var(--tct-detail-label-icon-size, 16px)}.detail{column-gap:var(--tct-detail-gap-column, var(--app-scale-1x, 5px));row-gap:var(--tct-detail-gap-row, 0px)}.detail-block{display:flex;width:100%}.detail-inline{display:flex}.detail-horizontal{align-items:var(--tct-detail-vertical-alignment, baseline);flex-direction:row}.detail-stacked{flex-direction:column}.detail-stacked-alignment-left{align-items:flex-start}.detail-stacked-alignment-right{align-items:flex-end}.label{flex:1;text-align:left;line-height:1.5;color:var(--tct-detail-label-font-color, #141430)}.label-size-xsmall{color:var(--tct-detail-label-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-label-xsmall-font-size, 14px)}.label-size-small{color:var(--tct-detail-label-small-font-color);font-size:var(--tct-detail-label-small-font-size, 14px)}.label-size-medium{color:var(--tct-detail-label-medium-font-color);font-size:var(--tct-detail-label-medium-font-size, 14px)}.label-size-large{color:var(--tct-detail-label-large-font-color);font-size:var(--tct-detail-label-large-font-size, 16px)}.label-size-xlarge{color:var(--tct-detail-label-xlarge-font-color);font-size:var(--tct-detail-label-xlarge-font-size, 18px)}.label-size-inline{font-size:var(--tct-detail-label-inline-font-size, 1em);color:inherit}.description{flex:1;display:flex;align-items:center;line-height:1.5;color:var(--tct-detail-description-font-color, #141430);column-gap:var(--tct-detail-description-gap-column, var(--app-scale-1x, 5px))}.description-alignment-right{justify-content:flex-end}.description-size-xsmall{color:var(--tct-detail-description-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-description-xsmall-font-size, 14px)}.description-size-small{color:var(--tct-detail-description-small-font-color);font-size:var(--tct-detail-description-small-font-size, 14px)}.description-size-medium{color:var(--tct-detail-description-medium-font-color);font-size:var(--tct-detail-description-medium-font-size, 24px)}.description-size-large{color:var(--tct-detail-description-large-font-color);font-size:var(--tct-detail-description-large-font-size, 28px)}.description-size-xlarge{color:var(--tct-detail-description-xlarge-font-color);font-size:var(--tct-detail-description-xlarge-font-size, 32px)}.description-size-inline{font-size:var(--tct-detail-description-inline-font-size, 1em);color:inherit}";
 const Q2DetailStyle0 = q2DetailCss;
@@ -92,7 +92,7 @@ const Q2Detail = class {
     // #endregion
     // #region Render methods
     render() {
-        return (h("div", { key: 'ff464dcdf7be8800fcc4498da0dd5fe6ccfed319', class: this.detailClasses }, this.hasLabel && (h("div", { key: 'bda6274a4ef7c0c5538bd7b4eedd462eb5281cb7', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'c09e67c7baa5cfbca603aece0de20e403fa805a5', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: '2473cb27afe7744a1e5aac06df18bf5b5c7f2dbe', class: this.detailClasses }, this.hasLabel && (h("div", { key: '00bec97971994b9012d23e2cbf46b422a270c0d3', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'cc9b5aac087660022fd20043507859fa5eafcbfd', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/q2-dropdown-item.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-1e1ce94e.js';
-import { h as handleAriaLabel, l as loc } from './index-0a702dd6.js';
+import { h as handleAriaLabel, l as loc } from './index-3c5cd75e.js';
 
 const q2DropdownItemCss = "*{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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background:var(--tct-dropdown-item-background, var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff))))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background:var(--tct-dropdown-item-hover-background, var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2))))))));color:var(--tct-dropdown-item-hover-color, var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit)))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";
 const Q2DropdownItemStyle0 = q2DropdownItemCss;
@@ -93,7 +93,7 @@ const Q2DropdownItem = class {
         return (h("div", { class: "dropdown-separator", role: "separator", "test-id": "dropdownItemSeparator" }));
     }
     itemDOM() {
-        return (h("div", { class: "dropdown-item-wrapper" }, h("q2-btn", { class: "dropdown-item", label: this.innerLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-content" }, h("slot", null))), !!this.removable ? (h("q2-btn", { class: "remove-dropdown-item", label: this.removeLabel, "hide-label": true, disabled: !!this.disabled, role: "menuitem", onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" }))) : ('')));
+        return (h("div", { class: "dropdown-item-wrapper" }, h("q2-btn", { class: "dropdown-item", label: this.innerLabel, "hide-label": true, disabled: !!this.disabled, _role: "menuitem", onClick: this.onItemClick, onKeyDown: this.onItemKeydown, onFocus: this.onItemFocus, "test-id": "dropdownItem" }, h("div", { class: "dropdown-item-content" }, h("slot", null))), !!this.removable && (h("q2-btn", { class: "remove-dropdown-item", label: this.removeLabel, "hide-label": true, disabled: !!this.disabled, _role: "menuitem", onClick: this.onRemoveBtnClick, onKeyDown: this.onRemoveBtnKeydown, onFocus: this.onRemoveBtnFocus, "test-id": "removeDropdownItem" }, h("q2-icon", { type: "close" })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/q2-dropdown-item.entry.js.map

@@ -1 +1 @@
-{"file":"q2-dropdown-item.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,05EAA05E,CAAC;AACr7E,6BAAe,iBAAiB;;MCInB,cAAc;;;QA6EvB,gBAAW,GAAG,CAAC,KAAiB;YAC5B,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,CAAC,aAAa,CAC1B,IAAI,WAAW,CAAC,OAAO,EAAE;gBACrB,MAAM,EAAE;oBACJ,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;iBAC1B;gBACD,OAAO,EAAE,IAAI;aAChB,CAAC,CACL,CAAC;SACL,CAAC;QAEF,kBAAa,GAAG,CAAC,KAAoB;YACjC,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAC7C,IAAI,CAAC,cAAc,EAAE,CAAC;aACzB;SACJ,CAAC;QAEF,gBAAW,GAAG,CAAC,KAAiB;YAC5B,KAAK,CAAC,eAAe,EAAE,CAAC;SAC3B,CAAC;QAEF,qBAAgB,GAAG,CAAC,KAAiB;YACjC,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,IAAI,CAAC,WAAW,CAAC,aAAa,CAC1B,IAAI,WAAW,CAAC,OAAO,EAAE;gBACrB,MAAM,EAAE;oBACJ,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;iBAC1B;gBACD,OAAO,EAAE,IAAI;aAChB,CAAC,CACL,CAAC;SACL,CAAC;QAEF,uBAAkB,GAAG,CAAC,KAAoB;YACtC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAC3C,IAAI,CAAC,SAAS,EAAE,CAAC;aACpB;SACJ,CAAC;QAEF,qBAAgB,GAAG,CAAC,KAAiB;YACjC,KAAK,CAAC,eAAe,EAAE,CAAC;SAC3B,CAAC;;;;;;;;;IAzFF,iBAAiB;QACb,eAAe,CAAC,IAAI,CAAC,CAAC;KACzB;;IAKD,iBAAiB;QACb,eAAe,CAAC,IAAI,CAAC,CAAC;KACzB;IAED,IAAI,WAAW;QACX,OAAO,GAAG,CAAC,oCAAoC,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;KACxE;IAED,IAAI,eAAe;QACf,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;KACtE;IAED,IAAI,UAAU;QACV,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;KACrD;IAED,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;KAC7E;;IAID,kBAAkB;QACd,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,EAAE;YACnC,IAAI,CAAC,SAAS,EAAE,CAAC;SACpB;KACJ;;IAGD,SAAS;QACL,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;KACnF;IAED,cAAc;QACV,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;KAC/F;IAiDD,MAAM;QACF,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;SAC9B;QAED,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;KACzB;IAED,YAAY;QACR,QACI,WACI,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,WAAW,aACR,uBAAuB,GACjC,EACJ;KACL;IAED,OAAO;QACH,QACI,WAAK,KAAK,EAAC,uBAAuB,IAC9B,cACI,KAAK,EAAC,eAAe,EACrB,KAAK,EAAE,IAAI,CAAC,UAAU,sBAEtB,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EACzB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,aACjB,cAAc,IAEtB,WAAK,KAAK,EAAC,uBAAuB,IAC9B,eAAQ,CACN,CACD,EACR,CAAC,CAAC,IAAI,CAAC,SAAS,IACb,cACI,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAE,IAAI,CAAC,WAAW,sBAEvB,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,EACzB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAClC,OAAO,EAAE,IAAI,CAAC,gBAAgB,aACtB,oBAAoB,IAE5B,eAAS,IAAI,EAAC,OAAO,GAAG,CACnB,KAET,EAAE,CACL,CACC,EACR;KACL;;;;;;;;;;","names":[],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item {\n    min-height: 44px;\n    flex: 1 1 100%;\n    padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n    --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n    text-align: left;\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    transition: background-color\n        var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n    background: var-list(\n        --tct-dropdown-item-hover-background,\n        var-prefixer(dropdown-item-selected-bg),\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        --t-base,\n        #f2f2f2\n    );\n    color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n    margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` emitting on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true }) removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true }) separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.label || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    ///////// Host Element Events //////\n    @Listen('focus')\n    onHostElementFocus() {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    ///////// Actions /////////\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (['ArrowRight', 'Right'].includes(event.key)) {\n            this.focusRemoveBtn();\n        }\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (['ArrowLeft', 'Left'].includes(event.key)) {\n            this.focusItem();\n        }\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    render() {\n        if (!!this.separator) {\n            return this.separatorDOM();\n        }\n\n        return this.itemDOM();\n    }\n\n    separatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    itemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    disabled={!!this.disabled}\n                    role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable ? (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                ) : (\n                    ''\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}
+{"file":"q2-dropdown-item.entry.js","mappings":"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","names":[],"sources":["src/components/q2-dropdown-item/q2-dropdown-item.scss?tag=q2-dropdown-item&encapsulation=shadow","src/components/q2-dropdown-item/q2-dropdown-item.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n.dropdown-separator {\n    --comp-default-separator-margin: 0 #{var-list(--tct-scale-1, --app-scale-3x, 15px)};\n    margin: var-list(var-prefixer(dropdown-separator-margin), --comp-default-separator-margin);\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(dropdown-item-separator-color),\n            var-prefixer(gray-11),\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n}\n\n.dropdown-item-wrapper {\n    display: flex;\n}\n\n.dropdown-item {\n    min-height: 44px;\n    flex: 1 1 100%;\n    padding: var-list(var-prefixer(dropdown-item-padding), 2px);\n}\n\n.dropdown-item-content {\n    --comp-default-content-padding: 12px var(--app-scale-3x, 15px);\n    padding: var-list(var-prefixer(dropdown-item-content-padding), --comp-default-content-padding);\n    text-align: left;\n    background: var-list(\n        --tct-dropdown-item-background,\n        var-prefixer(dropdown-item-bg),\n        --tct-white,\n        --t-base,\n        --app-white,\n        #ffffff\n    );\n    color: var-list(var-prefixer(dropdown-item-font-color), inherit);\n    transition: background-color\n        var-list(var-prefixer(dropdown-item-content-tween), --tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n}\n\n:host(:not([disabled])) .dropdown-item-content:hover,\n:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content {\n    background: var-list(\n        --tct-dropdown-item-hover-background,\n        var-prefixer(dropdown-item-selected-bg),\n        var-prefixer(gray-14),\n        --tct-gray-l3,\n        --app-gray-l3,\n        --t-base,\n        #f2f2f2\n    );\n    color: var-list(--tct-dropdown-item-hover-color, var-prefixer(dropdown-item-selected-font-color), inherit);\n}\n\n.remove-dropdown-item {\n    flex: 0 0 44px;\n    margin: 2px;\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, h } from '@stencil/core';\nimport { loc, handleAriaLabel } from 'src/utils';\nimport { JSX } from '../../components';\n\n@Component({ tag: 'q2-dropdown-item', shadow: true, styleUrl: 'q2-dropdown-item.scss' })\nexport class Q2DropdownItem implements ComponentInterface {\n    /** Disables interaction with the item and blocks its click event. */\n    @Prop({ reflect: true }) disabled: boolean;\n\n    /**\n     * The text that appears within the dropdown item.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true }) label: string;\n\n    /**\n     * Renders an icon button in the item.\n     * Clicking on this button will change the `type` emitting on the item's click event detail to \"remove\".\n     */\n    @Prop({ reflect: true }) removable: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true }) separator: boolean;\n\n    /** A static reference value for the item. This value is returned in the click event detail. */\n    @Prop({ reflect: true }) value: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n    @Element() hostElement: HTMLElement;\n\n    /////// LIFECYCLE HOOKS //////\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    //////// OBSERVERS //////////\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    get removeLabel(): string {\n        return loc('tecton.element.dropdownItem.remove', [this.label || '']);\n    }\n\n    get dropdownItemBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.dropdown-item');\n    }\n\n    get innerLabel(): string {\n        return this.label || this.hostElement.textContent;\n    }\n\n    get removeBtn(): HTMLQ2BtnElement {\n        return this.hostElement.shadowRoot.querySelector('.remove-dropdown-item');\n    }\n\n    ///////// Host Element Events //////\n    @Listen('focus')\n    onHostElementFocus() {\n        if (event.target === this.hostElement) {\n            this.focusItem();\n        }\n    }\n\n    ///////// Actions /////////\n    focusItem() {\n        this.dropdownItemBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    focusRemoveBtn() {\n        this.removeBtn && this.removeBtn.dispatchEvent(new FocusEvent('focus', { bubbles: false }));\n    }\n\n    onItemClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'select',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onItemKeydown = (event: KeyboardEvent) => {\n        if (['ArrowRight', 'Right'].includes(event.key)) {\n            this.focusRemoveBtn();\n        }\n    };\n\n    onItemFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    onRemoveBtnClick = (event: MouseEvent) => {\n        event.stopImmediatePropagation();\n\n        this.hostElement.dispatchEvent(\n            new CustomEvent('click', {\n                detail: {\n                    type: 'remove',\n                    value: this.value || '',\n                },\n                bubbles: true,\n            })\n        );\n    };\n\n    onRemoveBtnKeydown = (event: KeyboardEvent) => {\n        if (['ArrowLeft', 'Left'].includes(event.key)) {\n            this.focusItem();\n        }\n    };\n\n    onRemoveBtnFocus = (event: FocusEvent) => {\n        event.stopPropagation();\n    };\n\n    render() {\n        if (!!this.separator) {\n            return this.separatorDOM();\n        }\n\n        return this.itemDOM();\n    }\n\n    separatorDOM(): JSX.IntrinsicElements {\n        return (\n            <div\n                class=\"dropdown-separator\"\n                role=\"separator\"\n                test-id=\"dropdownItemSeparator\"\n            />\n        );\n    }\n\n    itemDOM(): JSX.IntrinsicElements {\n        return (\n            <div class=\"dropdown-item-wrapper\">\n                <q2-btn\n                    class=\"dropdown-item\"\n                    label={this.innerLabel}\n                    hide-label\n                    disabled={!!this.disabled}\n                    _role=\"menuitem\"\n                    onClick={this.onItemClick}\n                    onKeyDown={this.onItemKeydown}\n                    onFocus={this.onItemFocus}\n                    test-id=\"dropdownItem\"\n                >\n                    <div class=\"dropdown-item-content\">\n                        <slot />\n                    </div>\n                </q2-btn>\n                {!!this.removable && (\n                    <q2-btn\n                        class=\"remove-dropdown-item\"\n                        label={this.removeLabel}\n                        hide-label\n                        disabled={!!this.disabled}\n                        _role=\"menuitem\"\n                        onClick={this.onRemoveBtnClick}\n                        onKeyDown={this.onRemoveBtnKeydown}\n                        onFocus={this.onRemoveBtnFocus}\n                        test-id=\"removeDropdownItem\"\n                    >\n                        <q2-icon type=\"close\" />\n                    </q2-btn>\n                )}\n            </div>\n        );\n    }\n}\n"],"version":3}

package/dist/esm/q2-dropdown.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-1e1ce94e.js';
-import { w as waitForNextPaint, a as handleRenamedProp, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus, l as loc } from './index-0a702dd6.js';
+import { w as waitForNextPaint, a as handleRenamedProp, h as handleAriaLabel, i as isEventFromElement, o as overrideFocus, l as loc } from './index-3c5cd75e.js';
 
 const q2DropdownCss = "*{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-flex}:host([block]){display:block}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width))}";
 const Q2DropdownStyle0 = q2DropdownCss;
@@ -286,7 +286,7 @@ const Q2Dropdown = class {
     /// DOM ///
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: 'f6f0b6c404fbb9040e08e6ec1a17a9ae7a6e10fd', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'f8c88762e98fe78cf144eddde787810dc49cb023', ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", _role: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("q2-popover", { key: 'b17bbd6349ff1ef2aec3f0845923da4a61d610c1', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: '77f1a6ad2523f063ead322b227f74faed3decf87', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown }, h("slot", { key: '78e513900d75e8a1f012f1d22aabc7dada672acf' }), this.open && (h("q2-btn", { key: '1f5f2c6a7d7ce88a3340dfe80d5766d3bb21faf9', class: "sr close-dropdown", onFocus: this.closeDropdown }))))));
+        return (h("click-elsewhere", { key: 'f6f0b6c404fbb9040e08e6ec1a17a9ae7a6e10fd', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '7e7115046cbeb548012b55d5b7ba2dc1672f1e39', ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomButton ? (h("div", { "test-id": "dropdownCustom", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "custom-dropdown-button" }))) : (h(Fragment, null, this.icon ? h("q2-icon", { type: this.icon }) : ' ', this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label)))))), h("q2-popover", { key: '0f74367791e5d8217ed62aa0b113c0548fd8a37b', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("div", { key: '5e5a5bbd0f48419738317750d320f4be0a5cbe11', onClick: this.onDropdownMenuClick, onKeyDown: this.onDropdownMenuKeydown, role: "menu", "aria-label": loc(this.label) || undefined }, h("slot", { key: 'a8fabf9f2df4c37bb2fcb75b0d292a38043c2feb' })), this.open && (h("q2-btn", { key: '352beb299f771fa0e64812075c17c542e6815da1', class: "sr close-dropdown", onFocus: this.closeDropdown })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {