q2-tecton-elements 1.68.0 → 1.68.1

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

@@ -1 +1 @@
-{"version":3,"names":["q2CheckboxCss","Q2Checkbox","constructor","hostRef","this","_id","createGuid","hasDescription","checked","hasError","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","slotReadonly","target","HTMLInputElement","value","mirrorEmit","inputElement","focus","disconnectedCallback","_a","descriptionObserver","disconnect","componentWillLoad","handleAriaLabel","checkForDescription","componentDidLoad","overrideFocus","hostElement","click","setupDescriptionObserver","defaultChangeHandler","setTimeout","handleChangeEvent","delegateFocus","isEventFromElement","shadowRoot","querySelector","ariaLabelObserver","ariaLabelledBy","hasLabel","loc","label","Array","from","childNodes","some","node","HTMLElement","getAttribute","textContent","trim","_tooltip","undefined","ids","push","labelId","tooltipId","join","description","onchange","defaultPrevented","detail","MutationObserver","observe","childList","subtree","renderCheckboxSVG","type","h","class","renderToggleSVG","width","height","viewBox","focusable","x","y","rx","indeterminate","renderCheckBoxSVGFill","x1","y1","x2","y2","points","key","id","maskUnits","fill","stroke","cx","cy","r","mask","render","textLabelClasses","hideLabel","ref","el","groupDisabled","name","onClick","htmlFor","q2TagCss","Q2Tag","hoist","window","Tecton","useActionSheets","optionListLabel","popoverAlignment","determineOptionCount","numberOfOptions","querySelectorAll","length","optionCount","filterSlottedElements","slot","assignedElements","approvedElements","forEach","element","index","includes","tagName","remove","handleButtonFocusout","async","relatedTarget","popoverElement","contains","open","handleChange","handleClick","controlElement","dropdownBtn","shouldShowActionSheet","showActionSheetList","toggle","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","optionList","handleExternalKeydown","handleWrapperClick","initMutationObserver","observer","onMutationObserved","attributes","mutationObserver","onClickElsewhere","localName","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","selectOption","waitForNextPaint","allOptions","getOptions","desiredOption","find","option","dispatchEvent","FocusEvent","renderHiddenElement","wrapperClassNames","shouldShowOptions","Host","onChange","Fragment","role","onKeyDown","onFocusout","e","maxHeight","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx","src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\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-fill-color: #{var-list(\n            --tct-checkbox-checked-fill-color,\n            --t-primary,\n            #040404\n        )};\n    --comp-checkbox-checked-color: #{var-list(\n            --tct-checkbox-checked-stroke-color,\n            --tct-white,\n            --app-white,\n           #FFFFFF\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    --comp-checkbox-toggle-circle-fill-active: #{var-list(\n            --tct-checkbox-toggle-active-fill,\n            --tct-checkbox-toggle-active-color,\n            --comp-checkbox-toggle-color\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: start;\n    gap: var(--comp-checkbox-gap);\n    grid-template-columns: var(--comp-control-width) calc(\n            100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n        );\n\n    :host([hide-label]:not([hide-label='false'])) & {\n        grid-template-areas: 'svg';\n        grid-template-columns: var(--comp-control-width);\n    }\n\n    :host([type='toggle']) & {\n        --comp-control-width: var(--comp-checkbox-toggle-width);\n    }\n\n    :host([alignment='right']) &,\n    :host([type='toggle']:not([alignment])) & {\n        grid-template-areas:\n            'label svg'\n            'description svg';\n        grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n                --comp-control-width\n            );\n    }\n}\n\n.label-control {\n    align-items: center;\n    display: flex;\n}\n\n.label-text {\n    grid-area: label;\n\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    :host(:active) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);\n    }\n    :host([checked]:not([checked='false']):active) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);\n    }\n    :host([has-error]:not([has-error='false']):hover) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);\n    }\n    :host([has-error]:not([has-error='false']):focus-within) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);\n    }\n    :host([has-error]:not([has-error='false']):active) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);\n    }\n    :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):hover) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);\n    }\n    :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):focus-within) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);\n    }\n    :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):active) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);\n    }\n\n    label {\n        line-height: var-list(--tct-checkbox-label-line-height, 24px);\n        .label-content {\n            display: inline;\n            font-size: var(--tct-checkbox-label-font-size, inherit);\n        }\n    }\n}\n\n.description-text {\n    grid-area: description;\n    font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n    :host(:hover) & {\n        font-weight: var-list(\n            --tct-checkbox-hover-description-font-weight,\n            var-prefixer(checkbox-description-font-weight),\n            400\n        );\n    }\n}\n\nlabel {\n    color: var-list(--tct-checkbox-label-color);\n    cursor: pointer;\n    hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n    word-break: var-list(--tct-checkbox-label-word-break, break-word);\n    word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n.checkbox-icon {\n    width: var(--comp-checkbox-size);\n    height: var(--comp-checkbox-size);\n    border-radius: var-list(\n        var-prefixer(checkbox-outer-border-radius),\n        --tct-border-radius-1,\n        --app-border-radius-1,\n        4px\n    );\n    stroke: var(--comp-checkbox-outer-stroke-color);\n    fill: var(--comp-checkbox-outer-fill-color);\n    stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n    flex-shrink: 0;\n    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(\n            --comp-checkbox-checked-fill-color,\n            var-prefixer(checkbox-checked-outer-stroke-color),\n            --comp-checkbox-outer-stroke-color\n        );\n\n        rect {\n            fill: var(--comp-checkbox-checked-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([has-error]:not([has-error='false']):not([type='favorite'])[checked]:not([checked='false'])) & {\n        rect {\n            fill: var-list(--tct-checkbox-error-checked-outer-fill-color);\n        }\n    }\n\n    :host([indeterminate]:not([indeterminate='false']):not([type='favorite'])) & {\n        stroke: var-list(\n            --comp-checkbox-checked-fill-color,\n            var-prefixer(checkbox-checked-outer-stroke-color),\n            --comp-checkbox-outer-stroke-color\n        );\n\n        rect {\n            fill: var(--comp-checkbox-checked-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-outer-stroke-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(--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    :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n        stroke: var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);\n        stroke-width: var(--tct-checkbox-error-checkmark-stroke-width, 2.5);\n    }\n}\n\n.checked-fill {\n    stroke-dasharray: 16;\n    stroke-dashoffset: 16;\n    animation-name: draw-checkmark;\n    animation-duration: var-list(--tct-checkbox-animation-duration, --t-tween-time-in-4, 300ms);\n    animation-timing-function: var-list(--tct-checkbox-animation-timing-function, ease-out);\n    animation-fill-mode: var-list(--tct-checkbox-animation-fill-mode, forwards);\n}\n\n@keyframes draw-checkmark {\n    to {\n        stroke-dashoffset: 0;\n    }\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            .label-text {\n                color: var(--tct-checkbox-label-hover-color, inherit);\n            }\n            .description-text {\n                color: var(--tct-checkbox-description-hover-color, inherit);\n                -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n                text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n            }\n        }\n        :active {\n            .toggle-circle {\n                fill: var(--comp-checkbox-toggle-track-fill-active);\n            }\n            .label-text {\n                color: var(--tct-checkbox-label-active-color, inherit);\n            }\n            .description-text {\n                color: var(--tct-checkbox-description-active-color, inherit);\n                -webkit-text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);\n                text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);\n            }\n            .toggle-circle {\n                fill: var(--comp-checkbox-toggle-circle-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                .label-text {\n                    color: var(--tct-checkbox-label-hover-color, inherit);\n                }\n                .description-text {\n                    color: var(--tct-checkbox-description-hover-color, inherit);\n                    -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n                    text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\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                .label-text {\n                    color: var(--tct-checkbox-error-label-active-color, inherit);\n                }\n                .description-text {\n                    color: var(--tct-checkbox-error-description-active-color, inherit);\n                    -webkit-text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);\n                    text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);\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            .label-text {\n                color: var(--tct-checkbox-checked-label-hover-color, inherit);\n            }\n            .description-text {\n                color: var(--tct-checkbox-checked-description-hover-color, inherit);\n                -webkit-text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);\n                text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);\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            .label-text {\n                color: var(--tct-checkbox-checked-label-active-color, inherit);\n            }\n            .description-text {\n                color: var(--tct-checkbox-checked-description-active-color, inherit);\n                -webkit-text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);\n                text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);\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                .label-text {\n                    color: var(--tct-checkbox-checked-error-label-hover-color, inherit);\n                }\n                .description-text {\n                    color: var(--tct-checkbox-checked-error-description-hover-color, inherit);\n                    -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);\n                    text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);\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                .label-text {\n                    color: var(--tct-checkbox-checked-error-label-active-color, inherit);\n                }\n                .description-text {\n                    color: var(--tct-checkbox-checked-error-description-active-color, inherit);\n                    -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);\n                    text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);\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 {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Checkbox\n * @category Forms\n * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.\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    descriptionObserver: MutationObserver;\n    inputElement: HTMLInputElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasDescription: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\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     * @deprecated Use 'tctChange' instead\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.descriptionObserver?.disconnect();\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.checkForDescription();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n        this.setupDescriptionObserver();\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    get ariaLabelledBy(): string | undefined {\n        const hasLabel =\n            !!loc(this.label) ||\n            !!this.hostElement.querySelector('[slot=\"label\"]') ||\n            Array.from(this.hostElement.childNodes).some(\n                node => !(node instanceof HTMLElement && node.getAttribute('slot')) && !!node.textContent?.trim()\n            );\n        if (!hasLabel && !this._tooltip) return undefined;\n        const ids = [];\n        if (hasLabel) ids.push(this.labelId);\n        if (this._tooltip) ids.push(this.tooltipId);\n        return ids.join(' ');\n    }\n\n    get labelId(): string {\n        return `label-${this._id}`;\n    }\n\n    get tooltipId(): string {\n        return `tooltip-${this._id}`;\n    }\n\n    checkForDescription() {\n        this.hasDescription = !!this.description || !!this.hostElement.querySelector('[slot=\"description\"]');\n    }\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    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        mirrorEmit(this, ['change', 'tctChange'], {\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    setupDescriptionObserver() {\n        this.descriptionObserver = new MutationObserver(() => {\n            this.checkForDescription();\n        });\n\n        this.descriptionObserver.observe(this.hostElement, {\n            childList: true,\n            subtree: true,\n        });\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                key={`checkmark-${this.checked}`}\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        return (\n            <div class=\"container\">\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.hasDescription ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    aria-labelledby={this.ariaLabelledBy}\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-hidden=\"true\"\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div class={textLabelClasses.join(' ')}>\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                        id={this.labelId}\n                    >\n                        <div class=\"label-content\">\n                            {loc(this.label)}\n                            <slot />\n                            <slot name=\"label\" />\n                        </div>\n                    </label>\n                </div>\n                {this._tooltip && (\n                    <span\n                        id={this.tooltipId}\n                        class=\"sr\"\n                        test-id=\"checkboxTooltipText\"\n                    >\n                        {this._tooltip}\n                    </span>\n                )}\n                {this.hasDescription && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                        <slot name=\"description\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    --comp-tag-border-color: #{var-list(--tct-tag-border-color, transparent)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    border-width: var-list(--tct-tag-border-width, 0);\n    border-style: var-list(--tct-tag-border-style, none);\n    border-color: var(--comp-tag-border-color);\n    font-size: var(--tct-tag-font-size, inherit);\n    font-weight: var(--tct-tag-font-weight, inherit);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n        --comp-tag-border-color: #{var-list(--tct-tag-primary-border-color, --t-primary, #0079c1)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-secondary-border-color, --t-secondary, #b3c2cc)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-tertiary-border-color, --t-tertiary, #e8f5fc)};\n    }\n\n    &:focus-visible {\n        box-shadow: var-list(--tct-tag-focus-visible-box-shadow, --const-double-focus-ring);\n    }\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    gap: 6px;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n\n    ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-size: 1em;\n        --tct-icon-stroke-primary: var(--tct-tag-decorator-icon-primary-stroke);\n        --tct-icon-stroke-secondary: var(--tct-tag-decorator-icon-secondary-stroke);\n    }\n\n    :host([theme=\"primary\"]) & ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-stroke-primary: var(--tct-tag-primary-decorator-icon-primary-stroke);\n        --tct-icon-stroke-secondary: var(--tct-tag-primary-decorator-icon-secondary-stroke);\n    }\n\n    ::slotted(q2-badge[slot='decorator']) {\n        --tct-badge-height: 1em;\n        --tct-badge-line-height: 30px;\n    }\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @name Tag\n * @category Display\n * @summary Use for displaying metadata labels or categories on content.\n * @slot decorator - An optional slot that supports either an [Icon](https://tecton.q2developer.com/design-system/q2-icon) or [Badge](https://tecton.q2developer.com/design-system/q2-badge) to be displayed with the tag content.\n * This is **not** available when using [Multiple Options](https://tecton.q2developer.com/design-system/q2-tag#multiple-options).\n */\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    tctClick: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        mirrorEmit(this, ['click', 'tctClick'], { value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                    aria-label={loc(this.label)}\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["q2CheckboxCss","Q2Checkbox","constructor","hostRef","this","_id","createGuid","hasDescription","hasMultilineLabel","checked","hasError","onInputClick","event","stopPropagation","preventDefault","isNotInteractive","disabled","readonly","slotReadonly","target","HTMLInputElement","value","mirrorEmit","inputElement","focus","queueLabelLayoutUpdate","schedule","requestAnimationFrame","setTimeout","updateLabelLayout","disconnectedCallback","_a","descriptionObserver","disconnect","_b","labelResizeObserver","componentWillLoad","handleAriaLabel","checkForDescription","componentDidLoad","overrideFocus","hostElement","click","setupDescriptionObserver","setupLabelResizeObserver","defaultChangeHandler","handleChangeEvent","delegateFocus","isEventFromElement","shadowRoot","querySelector","ariaLabelObserver","descriptionWatcher","labelWatcher","ariaLabelledBy","hasLabel","loc","label","Array","from","childNodes","some","node","HTMLElement","getAttribute","textContent","trim","_tooltip","undefined","ids","push","labelId","tooltipId","join","description","onchange","defaultPrevented","detail","MutationObserver","observe","childList","subtree","labelTextElement","ResizeObserver","labelElement","lineHeight","parseFloat","getComputedStyle","labelHeight","getBoundingClientRect","height","renderCheckboxSVG","type","h","class","renderToggleSVG","width","viewBox","focusable","x","y","rx","indeterminate","renderCheckBoxSVGFill","x1","y1","x2","y2","points","key","id","maskUnits","fill","stroke","cx","cy","r","mask","render","containerClasses","textLabelClasses","hideLabel","ref","el","groupDisabled","name","onClick","htmlFor","onSlotchange","q2TagCss","Q2Tag","hoist","window","Tecton","useActionSheets","optionListLabel","popoverAlignment","determineOptionCount","numberOfOptions","querySelectorAll","length","optionCount","filterSlottedElements","slot","assignedElements","approvedElements","forEach","element","index","includes","tagName","remove","handleButtonFocusout","async","relatedTarget","popoverElement","contains","open","handleChange","handleClick","controlElement","dropdownBtn","shouldShowActionSheet","showActionSheetList","toggle","handleKeydown","isTabMetaOrCtrl","metaKey","ctrlKey","optionList","handleExternalKeydown","handleWrapperClick","initMutationObserver","observer","onMutationObserved","attributes","mutationObserver","onClickElsewhere","localName","popoverStateHandler","setActiveElement","closePopover","_togglePopover","openPopover","selectOption","waitForNextPaint","allOptions","getOptions","desiredOption","find","option","dispatchEvent","FocusEvent","renderHiddenElement","wrapperClassNames","shouldShowOptions","Host","onChange","Fragment","role","onKeyDown","onFocusout","e","maxHeight","popoverMaxHeight","minHeight","popoverMinHeight","direction","popoverDirection","align"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx","src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\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-label-line-height: #{var-list(--tct-checkbox-label-line-height, 24px)};\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-control-height: var(--comp-checkbox-size);\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-fill-color: #{var-list(\n            --tct-checkbox-checked-fill-color,\n            --t-primary,\n            #040404\n        )};\n    --comp-checkbox-checked-color: #{var-list(\n            --tct-checkbox-checked-stroke-color,\n            --tct-white,\n            --app-white,\n           #FFFFFF\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    --comp-checkbox-toggle-circle-fill-active: #{var-list(\n            --tct-checkbox-toggle-active-fill,\n            --tct-checkbox-toggle-active-color,\n            --comp-checkbox-toggle-color\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: 'svg label';\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    &.has-description {\n        grid-template-areas:\n            'svg label'\n            '. description';\n        align-items: start;\n    }\n\n    &.has-multiline-label {\n        align-items: start;\n    }\n\n    &.has-description,\n    &.has-multiline-label {\n        .label-control {\n            margin-top: calc((var(--comp-checkbox-label-line-height) - var(--comp-control-height)) / 2);\n        }\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        --comp-control-height: 30px;\n    }\n\n    :host([alignment='right']) &,\n    :host([type='toggle']:not([alignment])) & {\n        grid-template-areas: 'label 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        &.has-description {\n            grid-template-areas:\n                'label svg'\n                'description .';\n        }\n    }\n}\n\n.label-control {\n    align-items: center;\n    display: flex;\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    :host(:active) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-active-stroke-width, unset);\n    }\n    :host([checked]:not([checked='false']):active) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-checked-active-stroke-width, unset);\n    }\n    :host([has-error]:not([has-error='false']):hover) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-error-hover-stroke-width, unset);\n    }\n    :host([has-error]:not([has-error='false']):focus-within) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-error-focused-stroke-width, unset);\n    }\n    :host([has-error]:not([has-error='false']):active) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-error-active-stroke-width, unset);\n    }\n    :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):hover) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-checked-error-hover-stroke-width, unset);\n    }\n    :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):focus-within) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-checked-error-focused-stroke-width, unset);\n    }\n    :host([checked]:not([checked='false'])[has-error]:not([has-error='false']):active) & {\n        -webkit-text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);\n        text-stroke-width: var(--tct-checkbox-checked-error-active-stroke-width, unset);\n    }\n\n    label {\n        line-height: var(--comp-checkbox-label-line-height);\n        .label-content {\n            display: inline;\n            font-size: var(--tct-checkbox-label-font-size, inherit);\n        }\n    }\n}\n\n.description-text {\n    grid-area: description;\n    font-weight: var-list(var-prefixer(checkbox-description-font-weight), 400);\n\n    :host(:hover) & {\n        font-weight: var-list(\n            --tct-checkbox-hover-description-font-weight,\n            var-prefixer(checkbox-description-font-weight),\n            400\n        );\n    }\n}\n\nlabel {\n    color: var-list(--tct-checkbox-label-color);\n    cursor: pointer;\n    hyphens: var-list(--tct-checkbox-label-hyphens, auto);\n    word-break: var-list(--tct-checkbox-label-word-break, break-word);\n    word-wrap: var-list(--tct-checkbox-label-word-wrap, break-word);\n}\n\n.checkbox-icon {\n    width: var(--comp-checkbox-size);\n    height: var(--comp-checkbox-size);\n    border-radius: var-list(\n        var-prefixer(checkbox-outer-border-radius),\n        --tct-border-radius-1,\n        --app-border-radius-1,\n        4px\n    );\n    stroke: var(--comp-checkbox-outer-stroke-color);\n    fill: var(--comp-checkbox-outer-fill-color);\n    stroke-width: var-list(var-prefixer(checkbox-outer-stroke-width), 2);\n    flex-shrink: 0;\n    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(\n            --comp-checkbox-checked-fill-color,\n            var-prefixer(checkbox-checked-outer-stroke-color),\n            --comp-checkbox-outer-stroke-color\n        );\n\n        rect {\n            fill: var(--comp-checkbox-checked-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([has-error]:not([has-error='false']):not([type='favorite'])[checked]:not([checked='false'])) & {\n        rect {\n            fill: var-list(--tct-checkbox-error-checked-outer-fill-color);\n        }\n    }\n\n    :host([indeterminate]:not([indeterminate='false']):not([type='favorite'])) & {\n        stroke: var-list(\n            --comp-checkbox-checked-fill-color,\n            var-prefixer(checkbox-checked-outer-stroke-color),\n            --comp-checkbox-outer-stroke-color\n        );\n\n        rect {\n            fill: var(--comp-checkbox-checked-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-outer-stroke-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(--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    :host([has-error]:not([has-error='false']):not([type='favorite'])) & {\n        stroke: var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);\n        stroke-width: var(--tct-checkbox-error-checkmark-stroke-width, 2.5);\n    }\n}\n\n.checked-fill {\n    stroke-dasharray: 16;\n    stroke-dashoffset: 16;\n    animation-name: draw-checkmark;\n    animation-duration: var-list(--tct-checkbox-animation-duration, --t-tween-time-in-4, 300ms);\n    animation-timing-function: var-list(--tct-checkbox-animation-timing-function, ease-out);\n    animation-fill-mode: var-list(--tct-checkbox-animation-fill-mode, forwards);\n}\n\n@keyframes draw-checkmark {\n    to {\n        stroke-dashoffset: 0;\n    }\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            .label-text {\n                color: var(--tct-checkbox-label-hover-color, inherit);\n            }\n            .description-text {\n                color: var(--tct-checkbox-description-hover-color, inherit);\n                -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n                text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n            }\n        }\n        :active {\n            .toggle-circle {\n                fill: var(--comp-checkbox-toggle-track-fill-active);\n            }\n            .label-text {\n                color: var(--tct-checkbox-label-active-color, inherit);\n            }\n            .description-text {\n                color: var(--tct-checkbox-description-active-color, inherit);\n                -webkit-text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);\n                text-stroke-width: var(--tct-checkbox-description-active-stroke-width, unset);\n            }\n            .toggle-circle {\n                fill: var(--comp-checkbox-toggle-circle-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                .label-text {\n                    color: var(--tct-checkbox-label-hover-color, inherit);\n                }\n                .description-text {\n                    color: var(--tct-checkbox-description-hover-color, inherit);\n                    -webkit-text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\n                    text-stroke-width: var(--tct-checkbox-description-hover-stroke-width, unset);\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                .label-text {\n                    color: var(--tct-checkbox-error-label-active-color, inherit);\n                }\n                .description-text {\n                    color: var(--tct-checkbox-error-description-active-color, inherit);\n                    -webkit-text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);\n                    text-stroke-width: var(--tct-checkbox-error-description-active-stroke-width, unset);\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            .label-text {\n                color: var(--tct-checkbox-checked-label-hover-color, inherit);\n            }\n            .description-text {\n                color: var(--tct-checkbox-checked-description-hover-color, inherit);\n                -webkit-text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);\n                text-stroke-width: var(--tct-checkbox-checked-description-hover-stroke-width, unset);\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            .label-text {\n                color: var(--tct-checkbox-checked-label-active-color, inherit);\n            }\n            .description-text {\n                color: var(--tct-checkbox-checked-description-active-color, inherit);\n                -webkit-text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);\n                text-stroke-width: var(--tct-checkbox-checked-description-active-stroke-width, unset);\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                .label-text {\n                    color: var(--tct-checkbox-checked-error-label-hover-color, inherit);\n                }\n                .description-text {\n                    color: var(--tct-checkbox-checked-error-description-hover-color, inherit);\n                    -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);\n                    text-stroke-width: var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);\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                .label-text {\n                    color: var(--tct-checkbox-checked-error-label-active-color, inherit);\n                }\n                .description-text {\n                    color: var(--tct-checkbox-checked-error-description-active-color, inherit);\n                    -webkit-text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);\n                    text-stroke-width: var(--tct-checkbox-checked-error-description-active-stroke-width, unset);\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 {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Listen,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\n\n/**\n * @name Checkbox\n * @category Forms\n * @summary Use as a single binary choice; nest within a Checkbox Group for grouped selection.\n * @slot default - Additional content displayed adjacent to the label.\n * @slot label - Custom label content displayed adjacent to the label.\n * @slot description - Custom description content displayed beneath the label.\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    descriptionObserver: MutationObserver;\n    inputElement: HTMLInputElement;\n    labelResizeObserver: ResizeObserver;\n    labelTextElement: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasDescription: boolean = false;\n\n    @State()\n    hasMultilineLabel: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * @private\n     * Tooltip text set by a parent q2-tooltip component for accessibility.\n     */\n    @Prop()\n    _tooltip: string;\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     * @deprecated Use 'tctChange' instead\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; checked: boolean }>;\n\n    /**\n     * Emitted when the checkbox is toggled.\n     * @legacyEvent\n     */\n    @Event()\n    tctChange: EventEmitter<{ value: string; checked: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback(): void {\n        this.descriptionObserver?.disconnect();\n        this.labelResizeObserver?.disconnect();\n    }\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.checkForDescription();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.hostElement.click = () => this.inputElement.click();\n        this.setupDescriptionObserver();\n        this.setupLabelResizeObserver();\n        this.updateLabelLayout();\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    @Watch('description')\n    descriptionWatcher() {\n        this.checkForDescription();\n    }\n\n    @Watch('label')\n    labelWatcher() {\n        this.queueLabelLayoutUpdate();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get ariaLabelledBy(): string | undefined {\n        const hasLabel =\n            !!loc(this.label) ||\n            !!this.hostElement.querySelector('[slot=\"label\"]') ||\n            Array.from(this.hostElement.childNodes).some(\n                node => !(node instanceof HTMLElement && node.getAttribute('slot')) && !!node.textContent?.trim()\n            );\n        if (!hasLabel && !this._tooltip) return undefined;\n        const ids = [];\n        if (hasLabel) ids.push(this.labelId);\n        if (this._tooltip) ids.push(this.tooltipId);\n        return ids.join(' ');\n    }\n\n    get labelId(): string {\n        return `label-${this._id}`;\n    }\n\n    get tooltipId(): string {\n        return `tooltip-${this._id}`;\n    }\n\n    checkForDescription() {\n        this.hasDescription = !!this.description || !!this.hostElement.querySelector('[slot=\"description\"]');\n    }\n\n    handleChangeEvent(event: CustomEvent<{ checked: boolean; value: string }>) {\n        if (\n            this.readonly ||\n            this.disabled ||\n            this.hostElement.onchange ||\n            event.defaultPrevented ||\n            event.target !== this.hostElement ||\n            !event.detail\n        ) {\n            return;\n        }\n        this.checked = event.detail.checked;\n    }\n\n    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        mirrorEmit(this, ['change', 'tctChange'], {\n            value,\n            checked,\n        });\n        this.inputElement.focus();\n    };\n\n    queueLabelLayoutUpdate = () => {\n        const schedule = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : setTimeout;\n        schedule(() => this.updateLabelLayout());\n    };\n\n    setupDescriptionObserver() {\n        this.descriptionObserver = new MutationObserver(() => {\n            this.checkForDescription();\n            this.queueLabelLayoutUpdate();\n        });\n\n        this.descriptionObserver.observe(this.hostElement, {\n            childList: true,\n            subtree: true,\n        });\n    }\n\n    setupLabelResizeObserver() {\n        if (!this.labelTextElement || typeof ResizeObserver !== 'function') return;\n        this.labelResizeObserver = new ResizeObserver(() => {\n            this.updateLabelLayout();\n        });\n\n        this.labelResizeObserver.observe(this.labelTextElement);\n    }\n\n    updateLabelLayout() {\n        if (!this.labelTextElement) return;\n        const labelElement = this.labelTextElement.querySelector('label');\n        if (!labelElement) return;\n        const lineHeight = parseFloat(getComputedStyle(labelElement).lineHeight) || 24;\n        const labelHeight = labelElement.getBoundingClientRect().height;\n\n        if (!labelHeight) return;\n        this.hasMultilineLabel = labelHeight > lineHeight * 1.5;\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                key={`checkmark-${this.checked}`}\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 containerClasses = ['container'];\n        const textLabelClasses = ['label-text'];\n        if (this.hasDescription) containerClasses.push('has-description');\n        if (this.hasMultilineLabel) containerClasses.push('has-multiline-label');\n        if (this.hideLabel) textLabelClasses.push('sr');\n        return (\n            <div class={containerClasses.join(' ')}>\n                <input\n                    ref={el => (this.inputElement = el)}\n                    aria-describedby={this.hasDescription ? 'description' : undefined}\n                    aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n                    aria-labelledby={this.ariaLabelledBy}\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-hidden=\"true\"\n                >\n                    {this.renderCheckboxSVG()}\n                </label>\n                <div\n                    class={textLabelClasses.join(' ')}\n                    ref={el => (this.labelTextElement = el)}\n                >\n                    <label\n                        test-id=\"checkboxLabel\"\n                        htmlFor={this._id}\n                        id={this.labelId}\n                    >\n                        <div class=\"label-content\">\n                            {loc(this.label)}\n                            <slot onSlotchange={this.queueLabelLayoutUpdate} />\n                            <slot\n                                name=\"label\"\n                                onSlotchange={this.queueLabelLayoutUpdate}\n                            />\n                        </div>\n                    </label>\n                </div>\n                {this._tooltip && (\n                    <span\n                        id={this.tooltipId}\n                        class=\"sr\"\n                        test-id=\"checkboxTooltipText\"\n                    >\n                        {this._tooltip}\n                    </span>\n                )}\n                {this.hasDescription && (\n                    <div\n                        class=\"description-text\"\n                        test-id=\"checkboxDescription\"\n                        id=\"description\"\n                    >\n                        {loc(this.description)}\n                        <slot name=\"description\" />\n                    </div>\n                )}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n","@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './variables';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    --comp-tag-border-color: #{var-list(--tct-tag-border-color, transparent)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    border-width: var-list(--tct-tag-border-width, 0);\n    border-style: var-list(--tct-tag-border-style, none);\n    border-color: var(--comp-tag-border-color);\n    font-size: var(--tct-tag-font-size, inherit);\n    font-weight: var(--tct-tag-font-weight, inherit);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n        --comp-tag-border-color: #{var-list(--tct-tag-primary-border-color, --t-primary, #0079c1)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-secondary-border-color, --t-secondary, #b3c2cc)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n        --comp-tag-border-color: #{var-list(--tct-tag-tertiary-border-color, --t-tertiary, #e8f5fc)};\n    }\n\n    &:focus-visible {\n        box-shadow: var-list(--tct-tag-focus-visible-box-shadow, --const-double-focus-ring);\n    }\n}\n\n.tag {\n    display: flex;\n    align-items: center;\n    width: max-content;\n    gap: 6px;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n\n    ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-size: 1em;\n        --tct-icon-stroke-primary: var(--tct-tag-decorator-icon-primary-stroke);\n        --tct-icon-stroke-secondary: var(--tct-tag-decorator-icon-secondary-stroke);\n    }\n\n    :host([theme=\"primary\"]) & ::slotted(q2-icon[slot='decorator']) {\n        --tct-icon-stroke-primary: var(--tct-tag-primary-decorator-icon-primary-stroke);\n        --tct-icon-stroke-secondary: var(--tct-tag-primary-decorator-icon-secondary-stroke);\n    }\n\n    ::slotted(q2-badge[slot='decorator']) {\n        --tct-badge-height: 1em;\n        --tct-badge-line-height: 30px;\n    }\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n/**\n * @name Tag\n * @category Display\n * @summary Use for displaying metadata labels or categories on content.\n * @slot decorator - An optional slot that supports either an [Icon](https://tecton.q2developer.com/design-system/q2-icon) or [Badge](https://tecton.q2developer.com/design-system/q2-badge) to be displayed with the tag content.\n * This is **not** available when using [Multiple Options](https://tecton.q2developer.com/design-system/q2-tag#multiple-options).\n */\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     * @deprecated Use 'tctClick' instead\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    tctClick: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.initMutationObserver();\n        this.determineOptionCount();\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.filterSlottedElements();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the tag to close the popover when options are provided and the popover is open.\n     * @testonly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.\n     * @testonly\n     */\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates selecting an option matching the passed value.\n     *\n     * If the popover is closed, this will open it before selecting the option.\n     *\n     * If there are not options, or the passed value does not match any option's value, this method does nothing.\n     * @testonly\n     */\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    filterSlottedElements = () => {\n        if (!('HTMLSlotElement' in window)) return;\n        const slot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const assignedElements = Array.from(slot?.assignedElements() || []);\n        if (!assignedElements.length) return;\n\n        const approvedElements = ['Q2-ICON', 'Q2-BADGE'];\n        assignedElements.forEach((element, index) => {\n            if (!approvedElements.includes(element.tagName) || index > 0) {\n                element.remove();\n            }\n        });\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        mirrorEmit(this, ['click', 'tctClick'], { value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.dropdownBtn.focus();\n            mirrorEmit(this, ['click', 'tctClick'], { value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.determineOptionCount();\n        this.filterSlottedElements();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { open } = this;\n        const wrapperClassNames = ['tag'];\n        if (this.optionCount) wrapperClassNames.push('has-options');\n        const shouldShowOptions = this.optionCount > 0;\n\n        return (\n            <Host>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {shouldShowOptions ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                    aria-label={loc(this.label)}\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{loc(this.label)}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>\n                                <slot name=\"decorator\" />\n                                {loc(this.label)}\n                            </div>\n                        </div>\n                    )}\n\n                    {shouldShowOptions && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as o } from "./index-CGkHOjh1.js";
 
-import { h as n } from "./index-C5gj0T_3.js";
+import { h as n } from "./index-CSlW4ulM.js";
 
 const r = '*{box-sizing:border-box}:host([hidden]){display:none}:host{--tct-item-body-color:var(--tct-context-color, var(--tct-text));display:block;background:var(--tct-context-background, var(--t-tertiary, #e8f5fc));box-shadow:var(--tct-context-box-shadow, none);backdrop-filter:var(--tct-context-backdrop-filter, none);border-radius:var(--tct-context-border-radius, var(--app-border-radius-2, 8px));padding:var(--tct-context-padding, 10px);width:var(--tct-context-width);border-width:var(--tct-context-border-width, 0px);border-style:var(--tct-context-border-style, solid);border-color:var(--tct-context-border-color, transparent)}.context-wrapper{display:flex;flex-direction:column;gap:var(--tct-context-gap, 10px)}.context-item{--tct-item-bullet-padding-top:0;--tct-item-action-align-items:start;--tct-item-action-icon-height:24px;--tct-item-action-icon-width:24px;--tct-item-action-icon-size:24px;--tct-item-avatar-height:44px;--tct-item-avatar-width:44px}.context-body slot:not(:first-child)::before{content:" "}.context-body ::slotted(*){display:inline}.separator{margin:var(--tct-context-separator-margin, 0);border-bottom:1px solid var(--tct-context-separator-color, var(--t-gray-12, #d9d9d9))}.action-group{--tct-action-group-margin:0}::slotted(q2-dropdown){--tct-btn-icon-border-radius:var(--app-border-radius-1, 4px)}::slotted(q2-link){--tct-link-border-radius:var(--app-border-radius-1, 4px);--tct-icon-stroke-primary:var(--t-primary, #6a4a9e);--tct-icon-stroke-secondary:var(--t-primary, #6a4a9e)}';
 

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

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

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

@@ -1,6 +1,6 @@
 import { r as t, h as e, g as i } from "./index-CGkHOjh1.js";
 
-import { h as l, l as a } from "./index-C5gj0T_3.js";
+import { h as l, l as a } from "./index-CSlW4ulM.js";
 
 const o = "*{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}::slotted([slot]){display:flex;align-items:center;--tct-icon-size:var(--tct-detail-label-icon-size, 16px)}.detail{column-gap:var(--tct-detail-gap-column, var(--app-scale-1x, 5px));row-gap:var(--tct-detail-gap-row, 0px)}.detail-block{display:flex;width:100%}.detail-inline{display:flex}.detail-horizontal{align-items:var(--tct-detail-vertical-alignment, baseline);flex-direction:row}.detail-stacked{flex-direction:column}.detail-stacked-alignment-left{align-items:flex-start}.detail-stacked-alignment-right{align-items:flex-end}.detail-stacked-alignment-center{align-items:center}.label{flex:1;text-align:left;line-height:1.5;color:var(--tct-detail-label-font-color, #141430)}.label-size-xsmall{color:var(--tct-detail-label-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-label-xsmall-font-size, 14px);font-weight:var(--tct-detail-label-xsmall-font-weight, 400)}.label-size-small{color:var(--tct-detail-label-small-font-color);font-size:var(--tct-detail-label-small-font-size, 14px);font-weight:var(--tct-detail-label-small-font-weight, 400)}.label-size-medium{color:var(--tct-detail-label-medium-font-color);font-size:var(--tct-detail-label-medium-font-size, 14px);font-weight:var(--tct-detail-label-medium-font-weight, 400)}.label-size-large{color:var(--tct-detail-label-large-font-color);font-size:var(--tct-detail-label-large-font-size, 16px);font-weight:var(--tct-detail-label-large-font-weight, 400)}.label-size-xlarge{color:var(--tct-detail-label-xlarge-font-color);font-size:var(--tct-detail-label-xlarge-font-size, 18px);font-weight:var(--tct-detail-label-xlarge-font-weight, 400)}.label-size-inline{font-size:var(--tct-detail-label-inline-font-size, 1em);font-weight:var(--tct-detail-label-inline-font-weight, 400);color:inherit}.description{flex:1;display:flex;align-items:center;line-height:1.5;color:var(--tct-detail-description-font-color, #141430);column-gap:var(--tct-detail-description-gap-column, var(--app-scale-1x, 5px))}.description-alignment-right{justify-content:flex-end}.description-size-xsmall{color:var(--tct-detail-description-xsmall-font-color, #6f6f82);font-size:var(--tct-detail-description-xsmall-font-size, 14px);font-weight:var(--tct-detail-description-xsmall-font-weight, 400)}.description-size-small{color:var(--tct-detail-description-small-font-color);font-size:var(--tct-detail-description-small-font-size, 14px);font-weight:var(--tct-detail-description-small-font-weight, 400)}.description-size-medium{color:var(--tct-detail-description-medium-font-color);font-size:var(--tct-detail-description-medium-font-size, 24px);font-weight:var(--tct-detail-description-medium-font-weight, 600)}.description-size-large{color:var(--tct-detail-description-large-font-color);font-size:var(--tct-detail-description-large-font-size, 28px);font-weight:var(--tct-detail-description-large-font-weight, 600)}.description-size-xlarge{color:var(--tct-detail-description-xlarge-font-color);font-size:var(--tct-detail-description-xlarge-font-size, 32px);font-weight:var(--tct-detail-description-xlarge-font-weight, 700)}.description-size-inline{font-size:var(--tct-detail-description-inline-font-size, 1em);color:inherit}";
 

package/dist/q2-tecton-elements/q2-dropdown-item.entry.js

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

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

@@ -2,7 +2,7 @@ import { r as t, h as o, F as e, g as i } from "./index-CGkHOjh1.js";
 
 import { s as n, a as s } from "./action-sheet-B7adb3xs.js";
 
-import { o as r, i as d, w as a, b as l, d as h, l as c } from "./index-C5gj0T_3.js";
+import { o as r, i as d, w as a, b as l, d as h, l as c } from "./index-CSlW4ulM.js";
 
 const p = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-flex}:host([block]){display:block}:host([full-width]:not([full-width=false])){display:inline-flex;justify-content:center;width:100%}::slotted([slot=popover-top]){padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}::slotted([slot=popover-bottom]){padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width));--tct-popover-padding:var(--tct-dropdown-content-padding)}";
 

package/dist/q2-tecton-elements/q2-editable-field.entry.js

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

package/dist/q2-tecton-elements/q2-file-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as i, F as r, g as o } from "./index-CGkHOjh1.js";
 
-import { l as a, h as s } from "./index-C5gj0T_3.js";
+import { l as a, h as s } from "./index-CSlW4ulM.js";
 
 const n = "*{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}*{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}@keyframes growFromCenterFadeIn{from{transform:scaleX(0.75) scaleY(0.75);opacity:0}to{transform:scaleX(1) scaleY(1);opacity:1}}@keyframes shrinkToCenterFadeOut{from{transform:scaleX(1) scaleY(1);opacity:1}to{transform:scaleX(0.75) scaleY(0.75);opacity:0}}:host{--comp-default-file-picker-margin:var(--tct-file-picker-margin-top, var(--t-file-picker-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-file-picker-margin-bottom, var(--t-file-picker-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-file-picker-margin, var(--comp-default-file-picker-margin))}.browse{text-align:left}.drop-zone-text{--tct-link-font-weight:var(--tct-file-picker-browse-link-font-weight, 700);color:var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4d4d4d));font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-browse-link-font-weight, 700);margin-bottom:0;margin-top:var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px))}.description{color:var(--tct-file-picker-description-text-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-description-font-weight, 400);text-align:var(--tct-file-picker-description-text-align, left)}.drop-zone{--tct-icon-stroke-primary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-file-picker-drop-zone-icon-color, var(--t-text, #4d4d4d));align-items:center;background-color:var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #e8f5fc));border-color:var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));border-radius:var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));border-style:var(--tct-file-picker-drop-zone-border-style, dashed);border-width:var(--tct-file-picker-drop-zone-border-width, 2px);color:var(--tct-file-picker-drop-zone-color, #747474);display:flex;flex-direction:column;font-size:var(--tct-file-picker-drop-zone-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-drop-zone-font-weight, 400);height:var(--tct-file-picker-drop-zone-height, 150px);justify-content:center;max-width:var(--tct-file-picker-drop-zone-max-width, 640px);min-width:var(--tct-file-picker-drop-zone-min-width, 320px);padding:var(--tct-file-picker-drop-zone-padding, 20px);text-align:center;width:var(--tct-file-picker-drop-zone-width, 100%)}.drop-zone-highlighted{background-color:var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #bee1f6));border-color:var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080))}.drop-zone-disabled{opacity:var(--tct-file-picker-drop-zone-disabled-opacity, var(--app-disabled-opacity, 0.4));cursor:not-allowed}.fade-in{animation-fill-mode:both;animation-play-state:running;animation:growFromCenterFadeIn 0.2s ease-in}.fade-out{animation:shrinkToCenterFadeOut 0.1s ease-out;animation-play-state:running;animation-fill-mode:both}.file-item{--tct-btn-icon-border-radius:var(--tct-file-picker-item-close-btn-border-radius, 4px);--tct-btn-neutral-text-active-font-color:var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-focus-visible-outer-ring-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-font-color:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-btn-neutral-text-hover-outer-ring-color:var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0d0d0d));--tct-btn-icon-padding:0;--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0d0d0d));--tct-item-body-font-size:var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));--tct-item-body-font-weight:var(--tct-file-picker-item-font-weight, 400);--tct-item-border-radius:var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));--tct-item-border:var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));--tct-item-header-color:var(--tct-file-picker-item-name-color, var(--t-gray-1, #0d0d0d));--tct-item-header-font-size:var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));--tct-item-header-font-weight:var(--tct-file-picker-item-name-font-weight, 400);--tct-item-padding:var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));text-align:left}.file-item-info{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.file-item-loading{font-size:var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));margin-bottom:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);margin-left:calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2)}.file-list{--tct-list-item-gap:var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px))}.file-list-container{max-height:var(--tct-file-picker-list-max-height, 190px);max-width:var(--tct-file-picker-drop-zone-max-width, 640px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent}.file-picker{display:flex;flex-direction:column;gap:var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px))}.heading{display:flex;flex-direction:column;gap:var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));justify-content:space-between}.icon-success,.icon-error{--tct-icon-size:var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));--tct-icon-stroke-width:2px}.label{color:var(--tct-file-picker-label-color, var(--t-gray-1, #0d0d0d));display:inline-block;font-size:var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));font-weight:var(--tct-file-picker-label-font-weight, 600);text-align:var(--tct-file-picker-label-text-align, left)}.loading{font-size:var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px))}.loading-file{color:var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-file-font-weight, 400);margin:0}.loading-message{color:var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0d0d0d));font-size:var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-file-picker-loading-message-font-weight, 700);margin-bottom:var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));margin-top:var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px))}.dismiss-button{height:30px;width:30px}.dismiss-button:hover{--tct-icon-stroke-primary:var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0d0d0d))}[slot=action]{display:flex;align-items:center}";