q2-tecton-elements 1.63.1 → 1.64.0

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

@@ -1 +1 @@
-{"file":"q2-checkbox.entry.cjs.js","mappings":"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","names":["createGuid","handleAriaLabel","overrideFocus","isEventFromElement","h","loc"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-checkbox-padding: #{var-list(\n            --tct-checkbox-padding,\n            unquote('#{var-list(var-prefixer(checkbox-vertical-padding), 8px)} 0')\n        )};\n\n    display: block;\n    position: relative;\n    padding: var(--comp-checkbox-padding);\n    --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), 0px) 0\n        var-list(var-prefixer(checkbox-margin-bottom), 0px)};\n    margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n    --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 24px)};\n    --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n    --comp-checkbox-default-row-gap: 0;\n    --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n    --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n    --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n    --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n    --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n    --comp-checkbox-outer-stroke-color: #{var-list(\n            var-prefixer(checkbox-outer-stroke-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-checkbox-outer-fill-color: #{var-list(\n            var-prefixer(checkbox-outer-fill-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        )};\n    --comp-checkbox-checked-color: #{var-list(\n            var-prefixer(checkbox-check-stroke-color),\n            --t-checkbox-fill,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    --comp-control-width: var(--comp-checkbox-size);\n    --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n    --comp-checkbox-bold-fallback-stroke-width: #{var-list(--tct-checkbox-bold-fallback-stroke-width, 0.7px)};\n    --comp-checkbox-stroke-width: #{var-list(--tct-checkbox-stroke-width, unset)};\n    --comp-checkbox-checked-stroke-width: #{var-list(\n            --tct-checkbox-checked-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-hover-stroke-width: #{var-list(--tct-checkbox-hover-stroke-width, unset)};\n    --comp-checkbox-focused-stroke-width: #{var-list(--tct-checkbox-focused-stroke-width, unset)};\n    --comp-checkbox-checked-hover-stroke-width: #{var-list(\n            --tct-checkbox-checked-hover-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-checked-focused-stroke-width: #{var-list(\n            --tct-checkbox-checked-focused-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-description-stroke-width: #{var-list(\n            --tct-checkbox-description-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-description-focused-stroke-width: #{var-list(\n            --tct-checkbox-description-focused-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-description-hover-stroke-width: #{var-list(\n            --tct-checkbox-description-hover-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\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    cursor: pointer;\n}\n\n.label-text {\n    grid-area: label;\n\n    :host([description]) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-description-stroke-width);\n        text-stroke-width: var(--comp-checkbox-description-stroke-width);\n    }\n    :host([checked]:not([checked='false'])) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n        text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n    }\n    :host(:hover) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n        text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n    }\n    :host(:focus-within) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n        text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n    }\n    :host([description]:hover) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n        text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n    }\n    :host([checked]:not([checked='false']):hover) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n        text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n    }\n    :host([description]:focus-within) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n        text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n    }\n    :host([checked]:not([checked='false']):focus-within) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n        text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n    }\n\n    label {\n        line-height: var-list(--tct-checkbox-label-line-height, 24px);\n        .label-content {\n            display: inline-block;\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    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    :host(:not([type='toggle'])) & {\n        cursor: pointer;\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        4px\n    );\n    stroke: var(--comp-checkbox-outer-stroke-color);\n    fill: var(--comp-checkbox-outer-fill-color);\n    stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n    flex-shrink: 0;\n    box-shadow: var(--tct-checkbox-box-shadow);\n\n    rect {\n        transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n    }\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\n        rect {\n            fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n        }\n    }\n\n    :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n        box-shadow: var-list(--tct-checkbox-error-box-shadow, --tct-checkbox-box-shadow);\n\n        rect {\n            fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n        }\n    }\n\n    :host(:hover:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n        box-shadow: var-list(--tct-checkbox-hover-box-shadow, --tct-checkbox-box-shadow);\n        rect {\n            fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n        }\n    }\n    :host(:hover[has-error]:not([has-error='false']):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        box-shadow: var-list(\n            --tct-checkbox-error-hover-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --tct-checkbox-hover-box-shadow,\n            --tct-checkbox-box-shadow\n        );\n        rect {\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        }\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-list(\n            --tct-checkbox-focused-box-shadow,\n            --tct-checkbox-box-shadow,\n            --comp-checkbox-focused-box-shadow\n        );\n    }\n    :host(:focus-within[has-error]:not([has-error='false']):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            --tct-checkbox-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]:not([has-error='false'])[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n    :host([has-error]:not([has-error='false'])[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    fill: none;\n    stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n    stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.indeterminate-fill {\n    stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg-container {\n    height: 30px;\n    width: var(--comp-checkbox-toggle-width);\n    position: relative;\n    text-align: initial;\n}\n\n.toggle-indicator,\n.toggle-track {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n}\n.toggle-indicator {\n    transition:\n        left var(--comp-checkbox-tween),\n        height var(--comp-checkbox-tween),\n        width var(--comp-checkbox-tween);\n    height: 16px;\n    width: 16px;\n    left: 4px;\n    border-radius: 50%;\n}\n\n.toggle-track {\n    --comp-default-track-box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);\n    height: 24px;\n    width: 38px;\n    fill: var-list(--tct-checkbox-toggle-track-color, transparent);\n    border-radius: var(--app-border-radius-3, 12px);\n    box-shadow: var-list(--tct-checkbox-toggle-track-box-shadow, --comp-default-track-box-shadow);\n    transition:\n        fill var(--comp-checkbox-tween),\n        box-shadow var(--comp-checkbox-tween);\n}\n\n.toggle-circle {\n    mask: url(#xMask);\n    fill: var(--comp-checkbox-toggle-color);\n    transition: fill var(--comp-checkbox-tween);\n}\n\n.toggle-icon {\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-width: var(--tct-checkbox-toggle-icon-stroke-width, 2);\n    stroke: black;\n}\n\n:host(:is(:not([checked]), [checked='false'])) {\n    &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n        :hover,\n        :focus-within {\n            .toggle-track {\n                --comp-default-hover-track-box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);\n                box-shadow: var-list(\n                    --tct-checkbox-toggle-hover-track-box-shadow,\n                    --comp-default-hover-track-box-shadow\n                );\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n            .toggle-circle {\n                fill: var-list(--tct-checkbox-toggle-hover-circle-color, --t-primary-d1, --t-gray-6, #4d4d4d);\n            }\n        }\n        :active {\n            .toggle-circle {\n                fill: var-list(--tct-checkbox-toggle-active-color, --t-primary-l1, #7755af);\n            }\n        }\n    }\n\n    &:host([has-error]:not([has-error='false'])) {\n        .toggle-track {\n            box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);\n        }\n        .toggle-circle {\n            fill: var(--comp-checkbox-toggle-error-color);\n        }\n\n        &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n            :hover,\n            :focus-within {\n                .toggle-track {\n                    box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);\n                }\n                .toggle-circle {\n                    fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n                }\n            }\n            :active {\n                .toggle-circle {\n                    fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\n                }\n            }\n        }\n    }\n}\n\n:host([checked]:not([checked='false'])) {\n    .toggle-indicator {\n        left: 18px;\n    }\n\n    .toggle-track {\n        fill: var-list(--tct-checkbox-toggle-checked-track-color, --t-primary, #6a4a9e);\n        border: none;\n    }\n    .toggle-circle {\n        mask: url(#checkMask);\n        fill: var-list(--tct-checkbox-toggle-checked-circle-color, --t-base, #ffffff);\n    }\n\n    &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n        :hover,\n        :focus-within {\n            .toggle-track {\n                fill: var-list(--tct-checkbox-toggle-checked-hover-track-color, --t-primary-d1, #5f438e);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n        }\n\n        :active {\n            .toggle-track {\n                fill: var-list(--tct-checkbox-toggle-checked-active-track-color, --t-primary-l1, #7755af);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n        }\n    }\n\n    &:host([has-error]:not([has-error='false'])) {\n        .toggle-track {\n            fill: var-list(--tct-checkbox-toggle-checked-error-track-color, --comp-checkbox-toggle-error-color);\n        }\n        &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n            :hover,\n            :focus-within {\n                .toggle-track {\n                    fill: var-list(\n                        --tct-checkbox-toggle-checked-error-hover-track-color,\n                        --comp-checkbox-toggle-error-color\n                    );\n                }\n            }\n\n            :active {\n                .toggle-track {\n                    fill: var-list(\n                        --tct-checkbox-toggle-checked-error-active-track-color,\n                        --comp-checkbox-toggle-error-color\n                    );\n                }\n            }\n        }\n    }\n}\n\n:host(:is([disabled]:not([disabled='false']), [group-disabled]:not([group-disabled='false']))) {\n    cursor: not-allowed;\n    opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    label {\n        cursor: not-allowed;\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true })\n    alignment: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    groupDisabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true })\n    indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true })\n    type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.renderToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.renderCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    renderCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    renderToggleSVG() {\n        return (\n            <div class=\"toggle-svg-container\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 38 24\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"38\"\n                        height=\"24\"\n                        rx=\"12\"\n                    ></rect>\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 18 18\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <defs>\n                        {/* Mask for the X icon */}\n                        <mask\n                            id=\"xMask\"\n                            maskUnits=\"userSpaceOnUse\"\n                        >\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            ></rect>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"6.5\"\n                                x2=\"11.5\"\n                                y2=\"11.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"11.5\"\n                                x2=\"11.5\"\n                                y2=\"6.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                        </mask>\n                        {/* Mask for the checkmark icon */}\n                        <mask id=\"checkMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <polyline\n                                class=\"toggle-icon\"\n                                points=\"6,8.5 8.5,11 12.5,6.5\"\n                                fill=\"none\"\n                            />\n                        </mask>\n                    </defs>\n                    <circle\n                        class=\"toggle-circle\"\n                        cx=\"9\"\n                        cy=\"9\"\n                        r=\"9\"\n                        mask=\"url(#xMask)\"\n                    ></circle>\n                </svg>\n            </div>\n        );\n    }\n\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        const labelId = this.type === 'toggle' ? this._id + '-content' : this._id;\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                    aria-label={loc(this.label)}\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={labelId}\n                        aria-hidden=\"true\"\n                    >\n                        <div\n                            class=\"label-content\"\n                            id={labelId}\n                        >\n                            {loc(this.label)}\n                            <slot />\n                        </div>\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-checkbox.entry.cjs.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,+1qBAA+1qB;;MCIx2qB,UAAU,GAAA,MAAA;AADvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAII,QAAA,IAAA,CAAA,GAAG,GAAW,YAAYA,kBAAU,EAAE,EAAE;;AAsBxC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAsBxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA8GzB,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,KAAY,KAAI;YAC5B,KAAK,CAAC,eAAe,EAAE;YACvB,KAAK,CAAC,cAAc,EAAE;AAEtB,YAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;AAC5E,YAAA,IAAI,gBAAgB;gBAAE;AACtB,YAAA,IAAI,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,CAAC;gBAAE;YACjD,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM;AAEvC,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACb,KAAK;gBACL,OAAO;AACV,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AAC7B,SAAC;AAoMJ;;;IAnQG,iBAAiB,GAAA;QACbC,uBAAe,CAAC,IAAI,CAAC;;IAGzB,gBAAgB,GAAA;AACZ,QAAAC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC;AAC/B,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;;;;AAO5D,IAAA,oBAAoB,CAAC,KAAkB,EAAA;;AAEnC,QAAA,UAAU,CAAC,MAAM,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;;AAItD,IAAA,aAAa,CAAC,KAAiB,EAAA;QAC3B,IAAI,CAACC,0BAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE;AAClD,QAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE;;;;IAO9D,iBAAiB,GAAA;QACbF,uBAAe,CAAC,IAAI,CAAC;;;;AAMzB,IAAA,iBAAiB,CAAC,KAAuD,EAAA;QACrE,IACI,IAAI,CAAC,QAAQ;AACb,YAAA,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,WAAW,CAAC,QAAQ;AACzB,YAAA,KAAK,CAAC,gBAAgB;AACtB,YAAA,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW;AACjC,YAAA,CAAC,KAAK,CAAC,MAAM,EACf;YACE;;QAEJ,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;;;;IAsBvC,iBAAiB,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AAC1B,YAAA,QACIG,OACI,CAAA,SAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,eAAe,EACvB,CAAA;;AAIV,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AACxB,YAAA,OAAO,IAAI,CAAC,eAAe,EAAE;;AAGjC,QAAA,QACIA,gCACgB,MAAM,EAClB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,eAAe,EACrB,SAAS,EAAC,OAAO,EAAA,EAEjBA,OAAA,CAAA,MAAA,EAAA,EACI,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,GAAG,EACR,CAAA,EACD,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,qBAAqB,EAAE,CACnE;;IAId,qBAAqB,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,QACIA,kBACI,KAAK,EAAC,kCAAkC,EACxC,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACT,CAAA;;AAGV,QAAA,QACIA,OACI,CAAA,UAAA,EAAA,EAAA,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,oBAAoB,EAC7B,CAAA;;IAIV,eAAe,GAAA;AACX,QAAA,QACIA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAC7BA,OAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,cAAc,aACZ,aAAa,EAAA,EAErBA,OAAA,CAAA,MAAA,EAAA,EACI,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,EAAE,EAAC,IAAI,EAAA,CACH,CACN,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACgB,MAAM,EAClB,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,kBAAkB,aAChB,iBAAiB,EAAA,EAEzBA,OAAA,CAAA,MAAA,EAAA,IAAA,EAEIA,OAAA,CAAA,MAAA,EAAA,EACI,EAAE,EAAC,OAAO,EACV,SAAS,EAAC,gBAAgB,EAAA,EAE1BA,OACI,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,OAAO,EACR,CAAA,EACRA,OACI,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,MAAM,EAAC,OAAO,EACD,cAAA,EAAA,GAAG,EACZ,CAAA,EACRA,OACI,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACnB,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,KAAK,EACR,MAAM,EAAC,OAAO,EAAA,cAAA,EACD,GAAG,EAAA,CACZ,CACL,EAEPA,OAAM,CAAA,MAAA,EAAA,EAAA,EAAE,EAAC,WAAW,EAAA,EAChBA,OACI,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,IAAI,EAAC,OAAO,EACd,CAAA,EACFA,OAAA,CAAA,UAAA,EAAA,EACI,KAAK,EAAC,aAAa,EACnB,MAAM,EAAC,uBAAuB,EAC9B,IAAI,EAAC,MAAM,EAAA,CACb,CACC,CACJ,EACPA,OACI,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EACrB,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACL,IAAI,EAAC,aAAa,EACZ,CAAA,CACR,CACJ;;IAId,MAAM,GAAA;AACF,QAAA,MAAM,gBAAgB,GAAG,CAAC,YAAY,CAAC;QACvC,IAAI,IAAI,CAAC,SAAS;AAAE,YAAA,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,GAAG,GAAG,UAAU,GAAG,IAAI,CAAC,GAAG;AACzE,QAAA,QACIA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EAClBA,OACI,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EAAA,kBAAA,EACjB,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,kBAChD,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,SAAS,GAAG,CAAG,EAAA,IAAI,CAAC,QAAQ,EAAE,EAC1E,OAAO,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,EACpD,KAAK,EAAC,IAAI,EACV,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,EACjD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,aAClB,yBAAyB,EACjC,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACnB,CAAA,EACFA,OACI,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,GAAG,EACjB,KAAK,EAAC,eAAe,EACb,SAAA,EAAA,gBAAgB,gBACZC,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAE1B,IAAI,CAAC,iBAAiB,EAAE,CACrB,EACRD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAA,EAClCA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAA,EACY,eAAe,EACvB,OAAO,EAAE,OAAO,iBACJ,MAAM,EAAA,EAElBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,eAAe,EACrB,EAAE,EAAE,OAAO,EAAA,EAEVC,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAChBD,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACF,CACN,EACL,IAAI,CAAC,WAAW,KACbA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,kBAAkB,EAChB,SAAA,EAAA,qBAAqB,EAC7B,EAAE,EAAC,aAAa,EAAA,EAEfC,WAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CACpB,CACT,CACC;;;;;;;;;;;","names":["createGuid","handleAriaLabel","overrideFocus","isEventFromElement","h","loc"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    --comp-checkbox-padding: #{var-list(\n            --tct-checkbox-padding,\n            unquote('#{var-list(var-prefixer(checkbox-vertical-padding), 8px)} 0')\n        )};\n\n    display: block;\n    position: relative;\n    padding: var(--comp-checkbox-padding);\n    --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), 0px) 0\n        var-list(var-prefixer(checkbox-margin-bottom), 0px)};\n    margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n    --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 24px)};\n    --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n    --comp-checkbox-default-row-gap: 0;\n    --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n    --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n    --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n\n    --comp-checkbox-toggle-track-fill: #{var-list(\n            --tct-checkbox-toggle-track-fill,\n            --tct-checkbox-toggle-track-color,\n            transparent\n        )};\n    --comp-checkbox-toggle-track-fill-active: #{var-list(\n            --tct-checkbox-toggle-active-track-fill,\n            --tct-checkbox-toggle-active-track-color,\n            --tct-checkbox-toggle-active-color,\n            --t-primary-l1,\n            #7755af\n        )};\n    --comp-checkbox-toggle-track-fill-hover: #{var-list(\n            --tct-checkbox-toggle-hover-track-fill,\n            --tct-checkbox-toggle-hover-track-color,\n            --comp-checkbox-toggle-track-fill\n        )};\n    --comp-checkbox-toggle-track-fill-error: #{var-list(\n            --tct-checkbox-toggle-error-track-fill,\n            --tct-checkbox-toggle-error-track-color,\n            --comp-checkbox-toggle-track-fill\n        )};\n    --comp-checkbox-toggle-track-fill-error-hover: #{var-list(\n            --tct-checkbox-toggle-error-hover-track-fill,\n            --tct-checkbox-toggle-error-hover-track-color,\n            --comp-checkbox-toggle-track-fill-error\n        )};\n    --comp-checkbox-toggle-track-fill-error-active: #{var-list(\n            --tct-checkbox-toggle-error-active-track-fill,\n            --tct-checkbox-toggle-error-active-track-color,\n            --comp-checkbox-toggle-track-fill-error\n        )};\n\n    --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n    --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n    --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n    --comp-checkbox-outer-stroke-color: #{var-list(\n            var-prefixer(checkbox-outer-stroke-color),\n            --t-a11y-gray-color-AA,\n            #949494\n        )};\n    --comp-checkbox-outer-fill-color: #{var-list(\n            var-prefixer(checkbox-outer-fill-color),\n            --tct-white,\n            --app-white,\n            #ffffff\n        )};\n    --comp-checkbox-checked-color: #{var-list(\n            var-prefixer(checkbox-check-stroke-color),\n            --t-checkbox-fill,\n            --t-a11y-active-gray-color-AA,\n            #404040\n        )};\n    --comp-control-width: var(--comp-checkbox-size);\n    --comp-checkbox-error-color: #{var-list(--tct-stoplight-error, --const-stoplight-alert, #d20a0a)};\n\n    --comp-checkbox-bold-fallback-stroke-width: #{var-list(--tct-checkbox-bold-fallback-stroke-width, 0.7px)};\n    --comp-checkbox-stroke-width: #{var-list(--tct-checkbox-stroke-width, unset)};\n    --comp-checkbox-checked-stroke-width: #{var-list(\n            --tct-checkbox-checked-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-hover-stroke-width: #{var-list(--tct-checkbox-hover-stroke-width, unset)};\n    --comp-checkbox-focused-stroke-width: #{var-list(--tct-checkbox-focused-stroke-width, unset)};\n    --comp-checkbox-checked-hover-stroke-width: #{var-list(\n            --tct-checkbox-checked-hover-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-checked-focused-stroke-width: #{var-list(\n            --tct-checkbox-checked-focused-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-description-stroke-width: #{var-list(\n            --tct-checkbox-description-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-description-focused-stroke-width: #{var-list(\n            --tct-checkbox-description-focused-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\n    --comp-checkbox-description-hover-stroke-width: #{var-list(\n            --tct-checkbox-description-hover-stroke-width,\n            --comp-checkbox-bold-fallback-stroke-width\n        )};\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    cursor: pointer;\n}\n\n.label-text {\n    grid-area: label;\n\n    :host([description]) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-description-stroke-width);\n        text-stroke-width: var(--comp-checkbox-description-stroke-width);\n    }\n    :host([checked]:not([checked='false'])) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n        text-stroke-width: var(--comp-checkbox-checked-stroke-width);\n    }\n    :host(:hover) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n        text-stroke-width: var(--comp-checkbox-hover-stroke-width);\n    }\n    :host(:focus-within) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n        text-stroke-width: var(--comp-checkbox-focused-stroke-width);\n    }\n    :host([description]:hover) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n        text-stroke-width: var(--comp-checkbox-description-hover-stroke-width);\n    }\n    :host([checked]:not([checked='false']):hover) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n        text-stroke-width: var(--comp-checkbox-checked-hover-stroke-width);\n    }\n    :host([description]:focus-within) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n        text-stroke-width: var(--comp-checkbox-description-focused-stroke-width);\n    }\n    :host([checked]:not([checked='false']):focus-within) & {\n        -webkit-text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n        text-stroke-width: var(--comp-checkbox-checked-focused-stroke-width);\n    }\n\n    label {\n        line-height: var-list(--tct-checkbox-label-line-height, 24px);\n        .label-content {\n            display: inline;\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    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    :host(:not([type='toggle'])) & {\n        cursor: pointer;\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        4px\n    );\n    stroke: var(--comp-checkbox-outer-stroke-color);\n    fill: var(--comp-checkbox-outer-fill-color);\n    stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n    flex-shrink: 0;\n    box-shadow: var(--tct-checkbox-box-shadow);\n\n    rect {\n        transition: fill var-list(--tct-checkbox-tween, --app-tween-2, unquote('0.4s ease'));\n    }\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\n        rect {\n            fill: var-list(var-prefixer(checkbox-checked-outer-fill-color), --comp-checkbox-outer-fill-color);\n        }\n    }\n\n    :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-error-outer-stroke-color, --comp-checkbox-error-color);\n        box-shadow: var-list(--tct-checkbox-error-box-shadow, --tct-checkbox-box-shadow);\n\n        rect {\n            fill: var-list(--tct-checkbox-error-outer-fill-color, --comp-checkbox-outer-fill-color);\n        }\n    }\n\n    :host(:hover:not([type='favorite'])) & {\n        stroke: var-list(--tct-checkbox-hover-outer-stroke-color, --comp-checkbox-outer-stroke-color);\n        box-shadow: var-list(--tct-checkbox-hover-box-shadow, --tct-checkbox-box-shadow);\n        rect {\n            fill: var-list(--tct-checkbox-hover-outer-fill-color, --comp-checkbox-outer-fill-color);\n        }\n    }\n    :host(:hover[has-error]:not([has-error='false']):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        box-shadow: var-list(\n            --tct-checkbox-error-hover-box-shadow,\n            --tct-checkbox-error-box-shadow,\n            --tct-checkbox-hover-box-shadow,\n            --tct-checkbox-box-shadow\n        );\n        rect {\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        }\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-list(\n            --tct-checkbox-focused-box-shadow,\n            --tct-checkbox-box-shadow,\n            --comp-checkbox-focused-box-shadow\n        );\n    }\n    :host(:focus-within[has-error]:not([has-error='false']):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            --tct-checkbox-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]:not([has-error='false'])[type='favorite']) & {\n        --tct-icon-stroke-primary: #{var-list(--tct-checkbox-favorite-error-stroke-color, --comp-checkbox-error-color)};\n    }\n    :host([has-error]:not([has-error='false'])[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    fill: none;\n    stroke: var-list(--tct-checkbox-checkmark-stroke-color, --comp-checkbox-checked-color);\n    stroke-width: var-list(var-prefixer(checkbox-check-stroke-width), 2.5);\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}\n\n.indeterminate-fill {\n    stroke-width: var-list(var-prefixer(checkbox-indeterminate-stroke-width), 3.5);\n}\n\n.toggle-svg-container {\n    height: 30px;\n    width: var(--comp-checkbox-toggle-width);\n    position: relative;\n    text-align: initial;\n}\n\n.toggle-indicator,\n.toggle-track {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n}\n.toggle-indicator {\n    transition:\n        left var(--comp-checkbox-tween),\n        height var(--comp-checkbox-tween),\n        width var(--comp-checkbox-tween);\n    height: 16px;\n    width: 16px;\n    left: 4px;\n    border-radius: 50%;\n}\n\n.toggle-track {\n    --comp-default-track-box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-color);\n    height: 24px;\n    width: 38px;\n    fill: var(--comp-checkbox-toggle-track-fill);\n    border-radius: var(--app-border-radius-3, 12px);\n    box-shadow: var-list(--tct-checkbox-toggle-track-box-shadow, --comp-default-track-box-shadow);\n    transition:\n        fill var(--comp-checkbox-tween),\n        box-shadow var(--comp-checkbox-tween);\n}\n\n.toggle-circle {\n    mask: url(#xMask);\n    fill: var(--comp-checkbox-toggle-color);\n    transition: fill var(--comp-checkbox-tween);\n}\n\n.toggle-icon {\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-width: var(--tct-checkbox-toggle-icon-stroke-width, 2);\n    stroke: black;\n}\n\n:host(:is(:not([checked]), [checked='false'])) {\n    &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n        :hover,\n        :focus-within {\n            .toggle-track {\n                --comp-default-hover-track-box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-color);\n                box-shadow: var-list(\n                    --tct-checkbox-toggle-hover-track-box-shadow,\n                    --comp-default-hover-track-box-shadow\n                );\n                fill: var(--comp-checkbox-toggle-track-fill-hover);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n            .toggle-circle {\n                fill: var-list(--tct-checkbox-toggle-hover-circle-color, --t-primary-d1, --t-gray-6, #4d4d4d);\n            }\n        }\n        :active {\n            .toggle-circle {\n                fill: var(--comp-checkbox-toggle-track-fill-active);\n            }\n        }\n    }\n\n    &:host([has-error]:not([has-error='false'])) {\n        .toggle-track {\n            box-shadow: inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);\n            fill: var(--comp-checkbox-toggle-track-fill-error);\n        }\n        .toggle-circle {\n            fill: var(--comp-checkbox-toggle-error-color);\n        }\n\n        &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n            :hover,\n            :focus-within {\n                .toggle-track {\n                    box-shadow: inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);\n                    fill: var(--comp-checkbox-toggle-track-fill-error-hover);\n                }\n                .toggle-circle {\n                    fill: var-list(--tct-checkbox-toggle-error-hover-color, --comp-checkbox-toggle-error-color);\n                }\n            }\n            :active {\n                .toggle-track {\n                    fill: var(--comp-checkbox-toggle-track-fill-error-active);\n                }\n                .toggle-circle {\n                    fill: var-list(--tct-checkbox-toggle-error-active-color, --comp-checkbox-toggle-error-color);\n                }\n            }\n        }\n    }\n}\n\n:host([checked]:not([checked='false'])) {\n    .toggle-indicator {\n        left: 18px;\n    }\n\n    .toggle-track {\n        fill: var-list(--tct-checkbox-toggle-checked-track-color, --t-primary, #6a4a9e);\n        border: none;\n    }\n    .toggle-circle {\n        mask: url(#checkMask);\n        fill: var-list(--tct-checkbox-toggle-checked-circle-color, --t-base, #ffffff);\n    }\n\n    &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n        :hover,\n        :focus-within {\n            .toggle-track {\n                fill: var-list(--tct-checkbox-toggle-checked-hover-track-color, --t-primary-d1, #5f438e);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n        }\n\n        :active {\n            .toggle-track {\n                fill: var-list(--tct-checkbox-toggle-checked-active-track-color, --t-primary-l1, #7755af);\n            }\n            .toggle-indicator {\n                height: 18px;\n                width: 18px;\n            }\n        }\n    }\n\n    &:host([has-error]:not([has-error='false'])) {\n        .toggle-track {\n            fill: var-list(--tct-checkbox-toggle-checked-error-track-color, --comp-checkbox-toggle-error-color);\n        }\n        &:host(:is(:not([disabled]), [disabled='false']):is(:not([group-disabled]), [group-disabled='false'])) {\n            :hover,\n            :focus-within {\n                .toggle-track {\n                    fill: var-list(\n                        --tct-checkbox-toggle-checked-error-hover-track-color,\n                        --comp-checkbox-toggle-error-color\n                    );\n                }\n            }\n\n            :active {\n                .toggle-track {\n                    fill: var-list(\n                        --tct-checkbox-toggle-checked-error-active-track-color,\n                        --comp-checkbox-toggle-error-color\n                    );\n                }\n            }\n        }\n    }\n}\n\n:host(:is([disabled]:not([disabled='false']), [group-disabled]:not([group-disabled='false']))) {\n    cursor: not-allowed;\n    opacity: var-list(var-prefixer(checkbox-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n    label {\n        cursor: not-allowed;\n    }\n}\n","import { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n@Component({ tag: 'q2-checkbox', shadow: true, styleUrl: 'q2-checkbox.scss' })\nexport class Q2Checkbox implements ComponentInterface {\n    // #region Own Properties\n\n    _id: string = `checkbox-${createGuid()}`;\n    inputElement: HTMLInputElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine which side of the label the checkbox will render on. */\n    @Prop({ reflect: true })\n    alignment: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** The state of the checkbox. This modifies the visual appearance of the element. */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /**\n     * Populates a description that is displayed beneath the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    description: string;\n\n    /** Disables the checkbox and prevents interaction. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by q2-checkbox-group to disable all checkboxes in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    groupDisabled: boolean;\n\n    /** Determines if the component should display in an errant state. */\n    @Prop({ reflect: true })\n    hasError: boolean = false;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     *\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Used on a parent checkbox in a checkbox group (e.g. \"Select All\") to indicate that some, but not all, checkboxes in a group are checked.\n     *\n     * When `true`, the \"indeterminate\" selection style is applied.\n     * To apply the standard \"checked\" selection style, `checked` must be true, and `indeterminate` must be `false`.\n     */\n    @Prop({ reflect: true })\n    indeterminate: boolean;\n\n    /**\n     * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes.\n     * Yielded content will be adjacent to this text.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /** A static string used to establish a symbolic relationship between checkboxes. */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    readonly: boolean;\n\n    /** The field is not interactive, but remains focusable. */\n    @Prop({ reflect: true })\n    slotReadonly: boolean;\n\n    /** The visual style of the checkbox. This does not need to be defined for a standard checkbox. */\n    @Prop({ reflect: true })\n    type: 'favorite' | 'toggle';\n\n    /** A static reference value for the checkbox. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        // We use setTimeout to give an opportunity to call preventDefault\n        setTimeout(() => this.handleChangeEvent(event), 0);\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.hostElement.shadowRoot.querySelector('input').focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    onInputClick = (event: Event) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        const isNotInteractive = this.disabled || this.readonly || this.slotReadonly;\n        if (isNotInteractive) return;\n        if (!(event.target instanceof HTMLInputElement)) return;\n        const { value, checked } = event.target;\n\n        this.change.emit({\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderCheckboxSVG() {\n        if (this.type === 'favorite') {\n            return (\n                <q2-icon\n                    type=\"star\"\n                    class=\"checkbox-icon\"\n                />\n            );\n        }\n\n        if (this.type === 'toggle') {\n            return this.renderToggleSVG();\n        }\n\n        return (\n            <svg\n                aria-hidden=\"true\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                class=\"checkbox-icon\"\n                focusable=\"false\"\n            >\n                <rect\n                    x=\"1\"\n                    y=\"1\"\n                    width=\"18\"\n                    height=\"18\"\n                    rx=\"3\"\n                />\n                {(this.checked || this.indeterminate) && this.renderCheckBoxSVGFill()}\n            </svg>\n        );\n    }\n\n    renderCheckBoxSVGFill() {\n        if (this.indeterminate) {\n            return (\n                <line\n                    class=\"checkbox-fill indeterminate-fill\"\n                    x1=\"4\"\n                    y1=\"10\"\n                    x2=\"16\"\n                    y2=\"10\"\n                />\n            );\n        }\n        return (\n            <polyline\n                class=\"checkbox-fill checked-fill\"\n                points=\"5 11 8.5 14.5 15 6\"\n            />\n        );\n    }\n\n    renderToggleSVG() {\n        return (\n            <div class=\"toggle-svg-container\">\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 38 24\"\n                    class=\"toggle-track\"\n                    test-id=\"toggleTrack\"\n                >\n                    <rect\n                        width=\"38\"\n                        height=\"24\"\n                        rx=\"12\"\n                    ></rect>\n                </svg>\n                <svg\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    viewBox=\"0 0 18 18\"\n                    class=\"toggle-indicator\"\n                    test-id=\"toggleIndicator\"\n                >\n                    <defs>\n                        {/* Mask for the X icon */}\n                        <mask\n                            id=\"xMask\"\n                            maskUnits=\"userSpaceOnUse\"\n                        >\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            ></rect>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"6.5\"\n                                x2=\"11.5\"\n                                y2=\"11.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                            <line\n                                class=\"toggle-icon\"\n                                x1=\"6.5\"\n                                y1=\"11.5\"\n                                x2=\"11.5\"\n                                y2=\"6.5\"\n                                stroke=\"black\"\n                                stroke-width=\"2\"\n                            ></line>\n                        </mask>\n                        {/* Mask for the checkmark icon */}\n                        <mask id=\"checkMask\">\n                            <rect\n                                width=\"18\"\n                                height=\"18\"\n                                fill=\"white\"\n                            />\n                            <polyline\n                                class=\"toggle-icon\"\n                                points=\"6,8.5 8.5,11 12.5,6.5\"\n                                fill=\"none\"\n                            />\n                        </mask>\n                    </defs>\n                    <circle\n                        class=\"toggle-circle\"\n                        cx=\"9\"\n                        cy=\"9\"\n                        r=\"9\"\n                        mask=\"url(#xMask)\"\n                    ></circle>\n                </svg>\n            </div>\n        );\n    }\n\n    render() {\n        const textLabelClasses = ['label-text'];\n        if (this.hideLabel) textLabelClasses.push('sr');\n        const labelId = this.type === 'toggle' ? this._id + '-content' : this._id;\n        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.description ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    checked={this.indeterminate || this.checked || false}\n                    class=\"sr\"\n                    disabled={!!this.disabled || !!this.groupDisabled}\n                    id={this._id}\n                    name={this.name || this._id}\n                    onClick={this.onInputClick}\n                    test-id=\"q2CheckboxInnerCheckBox\"\n                    type=\"checkbox\"\n                    value={this.value}\n                />\n                <label\n                    htmlFor={this._id}\n                    class=\"label-control\"\n                    test-id=\"checkboxButton\"\n                    aria-label={loc(this.label)}\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={labelId}\n                        aria-hidden=\"true\"\n                    >\n                        <div\n                            class=\"label-content\"\n                            id={labelId}\n                        >\n                            {loc(this.label)}\n                            <slot />\n                        </div>\n                    </label>\n                </div>\n                {this.description && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

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

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

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

@@ -3,7 +3,7 @@
 var index = require('./index-BYXz4owL.js');
 var index$1 = require('./index-CyqXtdz-.js');
 
-const q2DataTableCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));backdrop-filter:var(--tct-data-table-backdrop-filter, none);caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.expandable{--tct-btn-icon-hover-background:transparent}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2))}tr.striped-even{background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped-even.expanded{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.striped-even.expandable:hover{background:var(--tct-data-table-expandable-row-even-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.striped-odd{background:var(--tct-data-table-row-odd-background, transparent)}tr.striped-odd.expanded{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}tr.striped-odd.expandable:hover{background:var(--tct-data-table-expandable-row-odd-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}.striped-odd+tr.expandable-row{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}.striped-even+tr.expandable-row{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}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 q2DataTableCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}:host([sticky]:not([sticky=false])) .container{overflow:unset}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)));backdrop-filter:var(--tct-data-table-backdrop-filter, none);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))}:host([sticky]:not([sticky=false])) thead{position:sticky;top:var(--tct-data-table-sticky-header-top, 0px);background:var(--tct-data-table-sticky-header-background, var(--tct-table-background, var(--t-base, #ffffff)))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.expandable{--tct-btn-icon-hover-background:transparent}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2))}tr.striped-even{background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped-even.expanded{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.striped-even.expandable:hover{background:var(--tct-data-table-expandable-row-even-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.striped-odd{background:var(--tct-data-table-row-odd-background, transparent)}tr.striped-odd.expanded{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}tr.striped-odd.expandable:hover{background:var(--tct-data-table-expandable-row-odd-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}.striped-odd+tr.expandable-row{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}.striped-even+tr.expandable-row{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}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 Q2DataTable = class {
     constructor(hostRef) {
@@ -62,7 +62,7 @@ const Q2DataTable = class {
         };
         this.onSelectRow = (event, row) => {
             event.stopPropagation();
-            const { selectMode, serializedRows, selectedRows: currentlySelectedRows } = this;
+            const { selectMode, serializedRows, selectedRows: currentlySelectedRows = [] } = this;
             const { checked } = event.detail;
             const selectedRow = Object.assign(Object.assign({}, row), { selected: checked });
             let selectedRows;
@@ -112,6 +112,17 @@ const Q2DataTable = class {
             });
         };
     }
+    /**
+     * Returns selected rows.
+     * @readonly
+     */
+    get selectedRows() {
+        var _a;
+        return ((_a = this.serializedRows) === null || _a === void 0 ? void 0 : _a.filter(({ selected }) => !!selected)) || [];
+    }
+    set selectedRows(_) {
+        console.error('Direct assignment to selectedRows is not allowed.');
+    }
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
@@ -309,12 +320,6 @@ const Q2DataTable = class {
             (this.hasExpandableRows ? 1 : 0) +
             (this.hasDropdowns ? 1 : 0));
     }
-    get selectedRow() {
-        return this.selectedRows.find(({ selected }) => !!selected);
-    }
-    get selectedRows() {
-        return this.serializedRows.filter(({ selected }) => selected);
-    }
     getSelectRowLabel(row) {
         const { selectAriaLabel, cells } = row;
         if (typeof selectAriaLabel === 'string') {
@@ -353,7 +358,7 @@ const Q2DataTable = class {
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (index.h("div", { key: '4fea1e90fb31439532b0c21282ea48f9dad59c1a', class: "container" }, index.h("table", { key: '9eacd521fb43832d653682e97dba45a2e6cfbcef' }, caption && index.h("caption", { key: 'e772f4c4c1cc012c489b5723e64c72887cffddd8', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (index.h("div", { key: '88535bc93fa681e707ea7ffd29179464d6e741dc', class: "container" }, index.h("table", { key: '6c2f2c4552e29ab9df84bd197cd97eb4d6c18eeb' }, caption && index.h("caption", { key: '069628e04b8b85bf2341d838a4ff1fd504f83a97', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)
@@ -425,7 +430,7 @@ const Q2DataTable = class {
         let isSelectDisabled = false;
         let selectedRow;
         if (selectMode === 'single') {
-            selectedRow = this.selectedRow;
+            selectedRow = this.serializedRows.find(({ selected }) => !!selected);
             isSelectDisabled = !!selectedRow;
         }
         const clickableClasses = [];