npm - q2-tecton-elements - Versions diffs - 1.67.1 → 1.67.2 - Mend

q2-tecton-elements 1.67.1 → 1.67.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (251) hide show

package/dist/components/q2-checkbox2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"q2-checkbox2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-checkbox-padding: #{var-list(\n --tct-checkbox-padding,\n unquote('#{var-list(var-prefixer(checkbox-vertical-padding), 8px)} 0')\n )};\n\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), 0px) 0\n var-list(var-prefixer(checkbox-margin-bottom), 0px)};\n margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 24px)};\n --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n --comp-checkbox-default-row-gap: 0;\n --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n\n --comp-checkbox-toggle-track-fill: #{var-list(\n --tct-checkbox-toggle-track-fill,\n --tct-checkbox-toggle-track-color,\n transparent\n )};\n --comp-checkbox-toggle-track-fill-active: #{var-list(\n --tct-checkbox-toggle-active-track-fill,\n --tct-checkbox-toggle-active-track-color,\n --tct-checkbox-toggle-active-color,\n --t-primary-l1,\n #7755af\n )};\n --comp-checkbox-toggle-track-fill-hover: #{var-list(\n --tct-checkbox-toggle-hover-track-fill,\n --tct-checkbox-toggle-hover-track-color,\n --comp-checkbox-toggle-track-fill\n )};\n --comp-checkbox-toggle-track-fill-error: #{var-list(\n --tct-checkbox-toggle-error-track-fill,\n --tct-checkbox-toggle-error-track-color,\n --comp-checkbox-toggle-track-fill\n )};\n --comp-checkbox-toggle-track-fill-error-hover: #{var-list(\n --tct-checkbox-toggle-error-hover-track-fill,\n --tct-checkbox-toggle-error-hover-track-color,\n --comp-checkbox-toggle-track-fill-error\n )};\n --comp-checkbox-toggle-track-fill-error-active: #{var-list(\n --tct-checkbox-toggle-error-active-track-fill,\n --tct-checkbox-toggle-error-active-track-color,\n --comp-checkbox-toggle-track-fill-error\n )};\n\n --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n --comp-checkbox-outer-stroke-color: #{var-list(\n var-prefixer(checkbox-outer-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-outer-fill-color: #{var-list(\n var-prefixer(checkbox-outer-fill-color),\n --tct-white,\n --app-white,\n #ffffff\n )};\n --comp-checkbox-checked-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 :host([type='favorite']) & {\n --comp-checkbox-favorite-stroke-color: #{var-list(\n var-prefixer(checkbox-favorite-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-favorite-fill-color: #{var-list(var-prefixer(checkbox-favorite-fill-color), #db7d24)};\n }\n\n display: grid;\n grid-template-areas:\n 'svg label'\n 'svg description';\n align-items: center;\n gap: var(--comp-checkbox-gap);\n grid-template-columns: var(--comp-control-width) calc(\n 100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)\n );\n\n :host([hide-label]:not([hide-label='false'])) & {\n grid-template-areas: 'svg';\n grid-template-columns: var(--comp-control-width);\n }\n\n :host([type='toggle']) & {\n --comp-control-width: var(--comp-checkbox-toggle-width);\n }\n\n :host([alignment='right']) &,\n :host([type='toggle']:not([alignment])) & {\n grid-template-areas:\n 'label svg'\n 'description svg';\n grid-template-columns: calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(\n --comp-control-width\n );\n }\n}\n\n.label-control {\n align-items: center;\n display: flex;\n}\n\n.label-text {\n grid-area: label;\n\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 }\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 { Component, ComponentInterface, Prop, Element, Listen, Watch, Event, EventEmitter, h } 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 inputElement: HTMLInputElement;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /\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 componentWillLoad() {\n handleAriaLabel(this);\n }\n\n componentDidLoad(): void {\n overrideFocus(this.hostElement);\n this.hostElement.click = () => this.inputElement.click();\n }\n\n // #endregion\n // #region Listeners\n\n @Listen('change')\n defaultChangeHandler(event: CustomEvent) {\n // We use setTimeout to give an opportunity to call preventDefault\n setTimeout(() => this.handleChangeEvent(event), 0);\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n if (!isEventFromElement(event, this.hostElement)) return;\n this.hostElement.shadowRoot.querySelector('input').focus();\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n // #endregion\n // #region Local Methods\n\n get composedAriaLabel(): string \| undefined {\n const baseText = loc(this.label) \|\| undefined;\n if (!this._tooltip && !baseText) return undefined;\n if (!this._tooltip) return baseText;\n if (!baseText) return this._tooltip;\n return `${baseText} - ${this._tooltip}`;\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 // #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.description ? 'description' : undefined}\n aria-invalid={this.hasError === undefined ? undefined : `${this.hasError}`}\n checked={this.indeterminate \|\| this.checked \|\| false}\n class=\"sr\"\n disabled={!!this.disabled \|\| !!this.groupDisabled}\n id={this._id}\n name={this.name \|\| this._id}\n onClick={this.onInputClick}\n test-id=\"q2CheckboxInnerCheckBox\"\n type=\"checkbox\"\n value={this.value}\n />\n <label\n htmlFor={this._id}\n class=\"label-control\"\n test-id=\"checkboxButton\"\n aria-label={this.composedAriaLabel}\n >\n {this.renderCheckboxSVG()}\n </label>\n <div class={textLabelClasses.join(' ')}>\n <label\n test-id=\"checkboxLabel\"\n htmlFor={this._id}\n aria-hidden=\"true\"\n >\n <div class=\"label-content\">\n {loc(this.label)}\n <slot />\n </div>\n </label>\n </div>\n {this.description && (\n <div\n class=\"description-text\"\n test-id=\"checkboxDescription\"\n id=\"description\"\n >\n {loc(this.description)}\n </div>\n )}\n </div>\n );\n }\n\n // #endregion\n}\n"],"version":3}
1	+ {"file":"q2-checkbox2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/q2-checkbox/q2-checkbox.scss?tag=q2-checkbox&encapsulation=shadow","src/components/q2-checkbox/q2-checkbox.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n --comp-checkbox-padding: #{var-list(\n --tct-checkbox-padding,\n unquote('#{var-list(var-prefixer(checkbox-vertical-padding), 8px)} 0')\n )};\n\n display: block;\n position: relative;\n padding: var(--comp-checkbox-padding);\n --comp-default-checkbox-margin: #{var-list(var-prefixer(checkbox-margin-top), 0px) 0\n var-list(var-prefixer(checkbox-margin-bottom), 0px)};\n margin: var-list(--tct-checkbox-margin, --comp-default-checkbox-margin);\n}\n\n.container {\n --comp-checkbox-size: #{var-list(var-prefixer(checkbox-size), 24px)};\n --comp-checkbox-default-column-gap: var(--app-scale-2x, 10px);\n --comp-checkbox-default-row-gap: 0;\n --comp-checkbox-default-gap: #{var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap)};\n --comp-checkbox-tween: #{var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'))};\n --comp-checkbox-toggle-width: #{var-list(var-prefixer(checkbox-toggle-width), 38px)};\n\n --comp-checkbox-toggle-track-fill: #{var-list(\n --tct-checkbox-toggle-track-fill,\n --tct-checkbox-toggle-track-color,\n transparent\n )};\n --comp-checkbox-toggle-track-fill-active: #{var-list(\n --tct-checkbox-toggle-active-track-fill,\n --tct-checkbox-toggle-active-track-color,\n --tct-checkbox-toggle-active-color,\n --t-primary-l1,\n #7755af\n )};\n --comp-checkbox-toggle-track-fill-hover: #{var-list(\n --tct-checkbox-toggle-hover-track-fill,\n --tct-checkbox-toggle-hover-track-color,\n --comp-checkbox-toggle-track-fill\n )};\n --comp-checkbox-toggle-track-fill-error: #{var-list(\n --tct-checkbox-toggle-error-track-fill,\n --tct-checkbox-toggle-error-track-color,\n --comp-checkbox-toggle-track-fill\n )};\n --comp-checkbox-toggle-track-fill-error-hover: #{var-list(\n --tct-checkbox-toggle-error-hover-track-fill,\n --tct-checkbox-toggle-error-hover-track-color,\n --comp-checkbox-toggle-track-fill-error\n )};\n --comp-checkbox-toggle-track-fill-error-active: #{var-list(\n --tct-checkbox-toggle-error-active-track-fill,\n --tct-checkbox-toggle-error-active-track-color,\n --comp-checkbox-toggle-track-fill-error\n )};\n\n --comp-checkbox-toggle-error-color: #{var-list(--tct-checkbox-toggle-error-color, --comp-checkbox-error-color)};\n --comp-checkbox-toggle-color: #{var-list(--tct-checkbox-toggle-color, --t-gray-8, #808080)};\n --comp-checkbox-gap: #{var-list(var-prefixer(checkbox-gap), --comp-checkbox-default-gap)};\n --comp-checkbox-outer-stroke-color: #{var-list(\n var-prefixer(checkbox-outer-stroke-color),\n --t-a11y-gray-color-AA,\n #949494\n )};\n --comp-checkbox-outer-fill-color: #{var-list(\n var-prefixer(checkbox-outer-fill-color),\n --tct-white,\n --app-white,\n #ffffff\n )};\n --comp-checkbox-checked-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"],"version":3}

package/dist/components/q2-context.js CHANGED Viewed

@@ -121,7 +121,7 @@ const Q2Context$1 = /*@__PURE__*/ proxyCustomElement(class Q2Context extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e5721a07d072dc6fa3db22edfd50c5787946ff9a', class: "context-wrapper" }, h("q2-item", { key: 'f7591f8009e1f28d3e0fffb57dc280bd53a5cafe', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '74215ffc70d4a19a00c921869391843539f28a6a', name: "decorator", slot: "decorator" })), h("div", { key: 'c1f51789a6cdbe7a12a055da39e2a3747639aff3', class: "context-body", slot: "body" }, h("slot", { key: 'a3d4fc206925aa9f23bba1d785b2df9b74cef2a5', name: "header" }), h("slot", { key: '5e4bd0a3f595c52b1a8d60ff2a06b4333919719f', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '26891e4fd22716ff431df7c98814d3086fa7a48e', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: '6f5102f66edfa4bdc043e4907d09e22d70218b7d', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: 'a01f3f19278f94ec67fa21a34a5f8d26823a1000', class: "action-group", orientation: "horizontal" }, h("slot", { key: '86051221e06ac1c4b68bf31228f68724e67474e0', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: 'f12d517e123e1cc7ef3c85fb53e5d227a82f3132', name: "footer" })));
+        return (h("div", { key: '8bd2bf977388c552b749af93f1682eb5b491b241', class: "context-wrapper" }, h("q2-item", { key: '38c657ce812b32b18acd97cfac8aa50c8c904587', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '7816474bd52a207930abfd8cf6d37a7eab5348a3', name: "decorator", slot: "decorator" })), h("div", { key: 'e19e91cf7181beb57e1790313e46010208573017', class: "context-body", slot: "body" }, h("slot", { key: '9f7eee48cfe8993cea5f001e6096330fdff91f42', name: "header" }), h("slot", { key: 'a50f7afcaca2907254eac06b30edba31a96b248b', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '00b35f4f191919c971a25f20c7771d787d52603a', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: 'db2ba58244c8040cd73e30c69abd0068f8573e42', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: 'c530b882cda2655633efaaf3088c878b96fa3ccb', class: "action-group", orientation: "horizontal" }, h("slot", { key: '3aff5167bf8d7707181af5874fffbf7f94485405', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: 'b47f8995b3f027dc726772c82edb6981ff4ae757', name: "footer" })));
     }
     get hostElement() { return this; }
     static get style() { return q2ContextCss; }

package/dist/components/q2-currency.js CHANGED Viewed

@@ -142,7 +142,7 @@ const Q2Currency$1 = /*@__PURE__*/ proxyCustomElement(class Q2Currency extends H
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, signDisplay, isNegativeAmount, } = this;
-        return (h("div", { key: '53d88008437b187887c49fcfd41d7f9d8c6bb587', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: 'efce7009afdc9aa7d368f545a118806502801b28' }, '('), hasPlusMinusSign && h("span", { key: '452052007a26cfd879e4ded8540c9f825ebafb14' }, plusMinusSign), currencyIsFront && h("span", { key: '236e79e2e5612ee67d22f44947996d634056abcf', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: 'c69146375af1d37aac010be7fcd41da050c8802e' }, amountCore), h("span", { key: 'd9fe34e10fe29a0ccaee6a6d1fcea0f52aebd0b3', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '741effd6b2ef88b22e38638c100f6d29195ffcb3', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: 'ee2fd9317e37ac484e6bbc9d458e988d360abe2e' }, ')')));
+        return (h("div", { key: 'a600525cc214be0a670d8faa90c22583bb142a5a', "test-id": "q2CurrencyInner", class: currencyClasses, "aria-label": readableCurrency }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '40a2b4736c8afc5b7939391fe90600d79d584c66' }, '('), hasPlusMinusSign && h("span", { key: '6f5755d3e4681168e523c9549a0fa2ce60ad49fc' }, plusMinusSign), currencyIsFront && h("span", { key: '006b2ab6a62e7f1f5bf413ce767763d1c8b6fa57', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), h("span", { key: '96b0d7262fa2bcf8b9039fba828d937e88c0fc00' }, amountCore), h("span", { key: 'fa848c80fe88cff6de78a1386c4473413f0cda18', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && h("span", { key: '0a39e489c17f33846af1587603a2e9ae21bd5f78', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '9e088b3f70a82bb7bb0ab1d8a59e1eadd837178a' }, ')')));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-data-table.js CHANGED Viewed

@@ -413,7 +413,7 @@ const Q2DataTable$1 = /*@__PURE__*/ proxyCustomElement(class Q2DataTable extends
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (h("div", { key: 'c60810b5cc26058b94829ee4f7942df9804403e9', class: "container" }, h("table", { key: '5fab9778577ef7b24955e3219a1bc054db6703f9' }, caption && h("caption", { key: 'daa8d4647859d4eeace2b9f4103bd73e5494b633', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: 'ee7b81a0e49d8be037696fb1e275f90fe5547f8b', class: "container" }, h("table", { key: 'a5ee5ad79d6ed0b5e911611f9e15fb2130c69894' }, caption && h("caption", { key: 'ba4ea123b1b9fe1bda5734dcd789889db8d992b9', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)

package/dist/components/q2-detail.js CHANGED Viewed

@@ -105,7 +105,7 @@ const Q2Detail$1 = /*@__PURE__*/ proxyCustomElement(class Q2Detail extends HTMLE
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'd92d66fcec6add5b649aa45fd11c5c778d5be0b3', class: this.detailClasses }, this.hasLabel && (h("div", { key: 'c4538e909b1c4ac9e298a9ec25240e56eba42cfd', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'f6ce65ea2ad6b1d6c64d0ff69a66bd1fa5aa868d', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
+        return (h("div", { key: 'e9fe9f1d23de26052a90b499865c30908942d90e', class: this.detailClasses }, this.hasLabel && (h("div", { key: '74575c0c28fd5493cec9b04e4693f66812863946', class: this.labelClasses, "aria-describedby": !!this.description ? 'label-description' : undefined }, !!this.label ? loc(this.label) : this.hasLabelSlotContent ? h("slot", { name: "label" }) : '')), this.hasDescripiton && (h("div", { key: 'd9bef4e29bfc54e6149d57322833f6184572b863', id: "label-description", class: this.descriptionClasses }, !!this.description ? loc(this.description) : this.hasDefaultSlotContent ? h("slot", null) : ''))));
     }
     get hostElement() { return this; }
     static get style() { return q2DetailCss; }

package/dist/components/q2-dropdown.js CHANGED Viewed

@@ -371,7 +371,7 @@ const Q2Dropdown$1 = /*@__PURE__*/ proxyCustomElement(class Q2Dropdown extends H
     // #region Render Methods
     render() {
         const btnProps = this.toggleButtonProps;
-        return (h("click-elsewhere", { key: '23504511d2b87c3159647349f905de98de329db5', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: 'dc0b8de4939d8ac3414c470b329e775342a4879d', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '25345315dc70726e152793271c446ed34a4fcc0c', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '4c885f96ce096b0a1a2a743892531910c82cfa5c', name: "popover-top" }), h("q2-option-list", { key: 'c4a045130b22ce5e5c462811cb8980310b16d50e', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '9b5955c327df96213e10971fef01aadcc253a1d5' })), h("slot", { key: 'ac3d4f37bfdbef9239e389401cdfc4dfadf497dc', name: "popover-bottom" }))));
+        return (h("click-elsewhere", { key: 'b6e82a77840792da2ab918048abf38578ec4ccb3', class: this.open ? 'dropdown-open' : '', onChange: this.onClickElsewhere, "test-id": "dropdownContainer" }, h("q2-btn", { key: '5c26f1d198bd92ba61ac51080a3f8e2769d07b01', tabIndex: 0, ref: el => (this.controlElement = el), class: btnProps.className, onClick: this.onToggleClick, onKeyDown: this.onToggleKeydown, fab: btnProps.fab, intent: btnProps.intent, onFocusout: this.handleFocusOut, active: btnProps.active, disabled: btnProps.disabled, ariaExpanded: `${!!btnProps.ariaExpanded}`, label: this.hideLabel && this.label ? loc(this.label) : undefined, hideLabel: this.hideLabel, ariaHasPopup: "menu", "test-id": "dropdownButton", block: this.block, description: loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount]) }, this.hasCustomControl ? (h("div", { "test-id": "dropdownControl", class: btnProps.custom ? '' : 'hidden' }, h("slot", { name: "control" }))) : (h(Fragment, null, this.label && !this.hideLabel && (h("span", { class: "dropdown-button-text" }, loc(this.label))), this.icon ? h("q2-icon", { type: this.icon }) : ' '))), h("q2-popover", { key: '4db48630a62011863293587a76a17448a503df9d', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, "max-height": this.popoverMaxHeight, onFocusout: this.handleFocusOut, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: this.block }, h("slot", { key: '20cf54aca49692025c64ca230433366e14a242df', name: "popover-top" }), h("q2-option-list", { key: 'f2f8b61de7682fda8b18ddee17995fbbe1529ff7', onPopoverState: this.onPopoverState, id: "option-list", ref: el => (this.optionList = el), type: "menu", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '380049eda306cad1283f509977cfc32924f86d22' })), h("slot", { key: 'bc02de04e8e0ca08205425ced651183535a80c78', name: "popover-bottom" }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-editable-field.js CHANGED Viewed

@@ -216,7 +216,7 @@ const Q2EditableField$1 = /*@__PURE__*/ proxyCustomElement(class Q2EditableField
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '2a71fc720f0f0ea686e34509d3a78a86a9100bd9' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
+        return (h("div", { key: 'bd5759fc666e43c948cf4826e2075ba5566038cc' }, this.generateEditStateDOM(), this.generateReadStateDOM()));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-example.js CHANGED Viewed

@@ -127,7 +127,7 @@ const Q2Example$1 = /*@__PURE__*/ proxyCustomElement(class Q2Example extends HTM
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: 'dbe4a678c04f60cc08aabd47cc9fa3871265e0f0', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: '6ffb94ccdcae5f6a0762f80b2d022997345f5cc0', attribute: "navigation" }, this.renderMenuInner());
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/q2-form.js CHANGED Viewed

@@ -14,7 +14,7 @@ const Q2Form$1 = /*@__PURE__*/ proxyCustomElement(class Q2Form extends HTMLEleme
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '773e56276df2f42dd330167ffba2a9d08a90f2f7', class: "container" }, h("slot", { key: '4d92e4844684a5418edb39c18674042cba90ba58' })));
+        return (h("div", { key: '6720d1cf81a23420db41de84fce56398ff932018', class: "container" }, h("slot", { key: '48165fa24f2eb15d66fdfa63b6c122c0dc320714' })));
     }
     static get style() { return q2FormCss; }
 }, [1, "q2-form", {

package/dist/components/q2-formatted-text.js CHANGED Viewed

@@ -72,7 +72,7 @@ const Q2FormattedText$1 = /*@__PURE__*/ proxyCustomElement(class Q2FormattedText
     // #region Render Methods
     render() {
         const { formattedTextClasses } = this;
-        return (h("div", { key: 'b9fc58891cbcec6ea19bc8c0b2514df003697f02', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: '1b4e77284dc329065a281e7b2f2fce22e6cfc01a' }, this.formattedValue)));
+        return (h("div", { key: '0e3cb56f89a3ab403b45b411a4cd38ec267ed58b', class: formattedTextClasses, "aria-label": this.formattedValue }, h("span", { key: 'a9bb42690d67bce14debcb99db50c63582c6ba63' }, this.formattedValue)));
     }
     static get watchers() { return {
         "value": ["propsUpdated"],

package/dist/components/q2-input2.js CHANGED Viewed

@@ -3576,7 +3576,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (h(Host, { key: 'a52558bdbfb0af1b8c326d4b5b45995342864f1f', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: 'cdad28a61dab48bc95a2aeb4999882ab236cbaf0', class: this.wrapperClasses }, h("div", { key: '7e935a86fda4632f5caf3250d567da0b4f3dc467', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
+        return (h(Host, { key: '5cd0ac01d09732c81c59519cd04a998ff99e4dea', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, h("div", { key: '3907d95e0564a7e5f53148f6bdd02f0d51dcc8b6', class: this.wrapperClasses }, h("div", { key: '73857901c65827a40b17a56e8a1ac4d1d9c4faf7', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-item2.js CHANGED Viewed

@@ -107,7 +107,7 @@ const Q2Item = /*@__PURE__*/ proxyCustomElement(class Q2Item extends HTMLElement
     // #region Render Methods
     render() {
         const { clickable } = this;
-        return (h("div", { key: '9d9c2b041d9e1813b5df96ae96a4efc0a8573e1b', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: 'e6af6612a3856a83c831be21de0c85148b3ad349', class: this.decoratorClasses }, h("slot", { key: '919dfa25724858eb1c81d0d9de9dc0e672be57f1', name: "decorator" }, h("slot", { key: 'ac57ea70bc6ba07e0ba931dbcccc7c7d0f70c293', name: "bullet" })))), h("div", { key: '62ff508897f031fab005787d56c10655903dec99', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: 'c5d3ef40bdf9c241705117864202d050d5a99646', class: "header" }, h("slot", { key: '3036d8dad872c9be20879c8128ecf3a3a443b305', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '4b95df71025cf46d4026cb42b6c5e06156cd5100', class: "body" }, h("slot", { key: '55a339bbf42143b034f69ac9cdc65f9b74d77b1e', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '2b1ba9dd4ea25d7f168389358563efd93a14b9fc', class: this.actionClasses }, h("slot", { key: '0aa65030b6db7c641ad346040eaa4835596d35e9', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: 'b2544bdff69493915f4b10789f2b609eaa2176ad', class: this.footerClasses }, h("slot", { key: 'b5417cf58a68cee1a2abdd0cb51a4d1973b1ae38', name: "footer" })))));
+        return (h("div", { key: '3bd899fe8e37940635740451ebcf07407103e5e8', "test-id": "itemContainer", class: this.itemClasses, ref: el => (this.itemElement = el), role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, this.hasDecoratorSlotContent && (h("div", { key: '57a84cb0e340658499cfc3283f65d425519fcfcb', class: this.decoratorClasses }, h("slot", { key: 'ef0b095c055d0ceed0fe18ecb4d1b2565f3bdb82', name: "decorator" }, h("slot", { key: 'ec695f3ab95be46331cec70b270a1f0434444fff', name: "bullet" })))), h("div", { key: '263e6a9ebe842c2430cb263fe8ea1e523f286a17', class: this.mainClasses }, this.hasHeaderSlotContent && (h("div", { key: '6340f074d8b489e37f21b57b89038f323e5a2533', class: "header" }, h("slot", { key: '2ec1a529cd639a520a4b873d2898b88470a2c16a', name: "header" }))), this.hasBodySlotContent && (h("div", { key: '1d38f6795a8ee607eb93e1ff31ddab54dcd41c79', class: "body" }, h("slot", { key: '73fe582085a453608301236160cd260474d338c5', name: "body" })))), this.hasActionSlotContent && (h("div", { key: '0fd2164d9ab710b54655e325aa328d4e236a7bd7', class: this.actionClasses }, h("slot", { key: 'ce2cb3c08a76f136858a1e8ce2db30b822e17b82', name: "action" }))), this.hasFooterSlotContent && (h("div", { key: '700c9f3faa4dc6f5c0e22d18470614c028c6c8d5', class: this.footerClasses }, h("slot", { key: 'b3fe3d2477936abcf950c8a7565372456023462f', name: "footer" })))));
     }
     get hostElement() { return this; }
     static get style() { return q2ItemCss; }

package/dist/components/q2-legend2.js CHANGED Viewed

@@ -118,7 +118,7 @@ const Q2Legend = /*@__PURE__*/ proxyCustomElement(class Q2Legend extends HTMLEle
     // #endregion
     // #region Render Methods
     render() {
-        return (h("click-elsewhere", { key: '4d2152f5506fd3c000cd13a10d7cb21191fd4a35', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: '80a3258fc7fa73aadd20ad7eb0beeb5cee6f47f8' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
+        return (h("click-elsewhere", { key: 'ab6f88f29a37f3b48c7bee9bc1263142d9376b3c', onChange: () => this.onClickElsewhere(this) }, h("ul", { key: 'aa6443ae74f0d89965963195c479aab4f95fa667' }, this.dataWithClasses.map(item => (h("li", { class: "item" }, h("button", { "test-id": "item", "aria-label": `${item.name} ${this.formatValue(item.value)}`, class: item.classes, onClick: event => this.onClick(event, item), onMouseEnter: event => this.onMouseEnter(event, item), onMouseLeave: event => this.onMouseLeave(event, item) }, h("span", { "test-id": "itemColor", class: "item-color-indicator", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { "test-id": "itemName", class: "item-name" }, item.name), h("span", { id: `item-${item.id}`, "test-id": "itemValue", class: "item-value" }, this.formatValue(item.value)))))))));
     }
     static get watchers() { return {
         "hoveredItemId": ["watchHoveredItemId"],

package/dist/components/q2-list2.js CHANGED Viewed

@@ -69,7 +69,7 @@ const Q2List = /*@__PURE__*/ proxyCustomElement(class Q2List extends HTMLElement
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'f4eef6a9600afff93d1c66833138eb88a81edba3', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: 'a84cb093f8c32752c3b968fc346727e5128a0bf6', class: this.headerClasses }, h("div", { key: '9f0632191b686ad4eb2f7dac0c5fd6c0fbe3f345', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: 'f66033fc4039ed99278e0b7978de57bba6b73fb6', name: "filter" }))), h("div", { key: 'bd58bea54efd17e135f1894fe0ed43e3371abe3e', role: "list" }, h("slot", { key: '73df8c2367d93a4a2df07ff0bf3ecc2078e35a6a' }))));
+        return (h("div", { key: '5602927af6da7b334c38f7d2cc207633d6089f7c', class: this.listClasses, ref: el => (this.listElement = el) }, (this.hasFilterSlot || this.hasLabelContent) && (h("div", { key: '23ae73b5b842f17d45f9f82b06db79e8ea5c1796', class: this.headerClasses }, h("div", { key: '428117b7ffeadbfe4a53d39bf95d16cae1c26148', class: "label" }, this.label), this.hasFilterSlot && h("slot", { key: '3c5c29226478ba20fbe691b4265a2966b43f3fcb', name: "filter" }))), h("div", { key: '358b66a87ce56416c1dd42b8cc8a480996e2bdaf', role: "list" }, h("slot", { key: '8eabad8c7f15fac806588c651abf4ee400994d52' }))));
     }
     get hostElement() { return this; }
     static get style() { return q2ListCss; }

package/dist/components/q2-message2.js CHANGED Viewed

@@ -68,7 +68,7 @@ const Q2Message = /*@__PURE__*/ proxyCustomElement(class Q2Message extends HTMLE
         const addDivForAriaLive = !isFirefox && this.presentToggle;
         const { description } = this;
         const messageLabel = loc(`tecton.element.message.type.${this.type ? this.type : 'info'}`);
-        return (h("div", { key: '18638881b4ef7a62a3681181d2a4339bcb76d0de', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: '891ef403fa0d485c83e585d5a3225e39c39b7123', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: 'fdef50ee27ac0da34438995a985310bcdaeb2338', class: "sr" }), h("div", { key: '111869893bfbea57491ac365247890444602a0c4', class: "sr message-label" }, messageLabel), h("div", { key: '44b73f49446eaada25bf4b05ac32e88c2bfd1cb2', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '09003ab82d44a89c00c06e42d916cd3f7fa930ed' }))));
+        return (h("div", { key: 'b65f9feaee320f96a3f745eb4231510eab67aba6', tabindex: "-1", class: "message", role: description ? undefined : 'alert', "aria-live": description ? undefined : 'assertive', "aria-atomic": description ? undefined : 'true', "aria-relevant": description && addAriaHiddenForAriaLive ? undefined : 'all', "test-id": "messageContainer" }, h("div", { key: '66b9440bf994341ff365766a1241f56556fffe57', class: "bar", "test-id": "bar" }), this.appearance === 'standard' ? this.messageIcon(this.type) : '', addDivForAriaLive && h("div", { key: '47269ca27bc9c952249f574ab98e45d026125228', class: "sr" }), h("div", { key: '63a91696622f38741d5d403fe81262e2d5458328', class: "sr message-label" }, messageLabel), h("div", { key: '544cecc85e943f0156b63489cc78a42bec02f7c9', class: "message-content", "aria-hidden": addAriaHiddenForAriaLive ? 'true' : undefined }, h("slot", { key: '36ff0e64df72018818fd8452e847c522ea4c4039' }))));
     }
     get hostElement() { return this; }
     static get style() { return q2MessageCss; }

package/dist/components/q2-meter.js CHANGED Viewed

@@ -116,7 +116,7 @@ const Q2Meter$1 = /*@__PURE__*/ proxyCustomElement(class Q2Meter extends HTMLEle
     }
     render() {
         const [completed, suggested] = this.convertToPercentage(this.completedValue, this.suggestedValue, this.maxValue);
-        return (h("div", { key: '114be4db946db69c97b2a9980f8bcd4757653f95', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: 'dfc5eda2e024fa1c1d6ba204e8e2cfa68329a0a6', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'a54ca24a734890632c07f209ad35d30e2f3c9bc5', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: 'fa7cc14c41ba679ade93ed7d81cddd2d52bb0319', class: "legends" }, h("div", { key: '9327c024866ccc780916981b899c5e47d8bb61e4', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: 'a010c391768b966bfcefd828cd57bbca82414da4', class: "right" }, h("div", { key: 'eae86a6c446ce32bbc32c22724c9ac18362a4e10', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
+        return (h("div", { key: '656e8a53bbaf26529db53e535efcad7a22b9ee01', class: "meter-container", "aria-label": this.ariaLabel, role: "group" }, this.label && (h("div", { key: '25d53f9a1d387d4b839507239454484d9678061f', class: "label", "aria-label": loc(this.label) }, loc(this.label))), this.description && (h("div", { key: 'd5786b4e65ab5b262b82f107bb310ca27b34c4ed', class: "description", "aria-label": loc(this.description) }, loc(this.description))), this.renderBar(completed, suggested), h("div", { key: '015cc474c3113ff248982d64656218a79744e09e', class: "legends" }, h("div", { key: '1af88cd2386058a8c20f3a82d0e40ffafffc4c38', class: "left" }, this.completedValue || this.completedLabel ? (h("div", { class: "completed" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.completedValue, " ", loc(this.completedLabel)))) : (''), this.suggestedValue || this.suggestedLabel ? (h("div", { class: "suggested" }, h("div", { class: "dot" }), h("div", { class: "legend-label" }, this.suggestedValue, " ", loc(this.suggestedLabel)))) : ('')), h("div", { key: '22eb4ec7a86114f3f109e4adfb0acbcea9509de8', class: "right" }, h("div", { key: 'b9384865d0ef8c81569243b40ccf320efcd208ec', class: "max" }, this.maxValue, " ", loc(this.maxLabel))))));
     }
     get hostElement() { return this; }
     static get style() { return q2MeterCss; }

package/dist/components/q2-modal.js CHANGED Viewed

@@ -144,7 +144,7 @@ const Q2Modal$1 = /*@__PURE__*/ proxyCustomElement(class Q2Modal extends HTMLEle
     render() {
         const interiorClasses = `interior`;
         const renderStatus = `${this.renderStatus || ''}`;
-        return (h("dialog", { key: '1bccb63a37166885ac3fe684141f8c8751569554', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: '2e9005f0bd4f93aa0e4e4b5868fddc8e9b2ce267', class: interiorClasses }, this.title && (h("header", { key: '4dc2c5b20e6e766084a300a6b747ccd9bf482d74' }, this.title && h("h2", { key: 'c93f7a66309307761bc2a0b41b94cf17363dc877', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: 'aa3e5f3fa4f63055f36a8bfbc048f8262c29648b', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: 'ab8c726d5d6522f2fc41ef8272bd704b27a31739', type: "close" }))))), h("div", { key: 'f259da2c00afb066a3aa30bc04641ee760591e37', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: 'ecdf6189b3fa6021e6749f92e03fd89327859bb2', class: "icon" }, h("q2-icon", { key: '36b7977b295ceef5471e6b25ff42583bceed87d1', type: this.icon }))), this.imageSrc && (h("div", { key: 'ea9d269d8ced711dc47b8c358e324058a2b00f48', class: "image" }, h("img", { key: 'ecce6985f6f7de5f92f9c2d5f2773c5371735e40', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: '6d7f025c0f001d8b2b790bfadb7da9f8afc4b414', name: "content" }), this.description && h("p", { key: '1483ddcbdd4bc12c8d16649ee828335e9fc47c20', class: "description" }, this.description), this.customMarkup && (h("p", { key: 'dd6c85ec7f0496221e0dccde4da15ff0d237908d', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: '0a263f6a30c3210f02ea8f54717049d17b30e7d7' }, h("q2-action-group", { key: 'd040e253ed0fd0f38f06719131f006730d588858', "full-width": true }, h("slot", { key: '2b7326223c8dd79de652f8661af2253f19f74a27', name: "action" }))))));
+        return (h("dialog", { key: 'e7c16406478e632f39057feb8ab86029c2b6ddd7', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick }, h("div", { key: 'b59510c6a97ac4f8e4820465919e364a924b82e1', class: interiorClasses }, this.title && (h("header", { key: '714904259d422f663d13aa27b715a2de9ab3b12b' }, this.title && h("h2", { key: '69e2f5f487b73fc84ff6e0ca1e9710d7c5f80938', class: "title" }, this.title), !!this.closable && (h("q2-btn", { key: 'e9258c375fd6f077f296a496a6a67903a39f3d8c', class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.modal.close", "hide-label": true }, h("q2-icon", { key: '4c07c70736c25e12d08d6f066507326bc333ad61', type: "close" }))))), h("div", { key: 'a40c63b069c6f8c03682d8626f9a359cb5f7f7fa', class: "content", ref: el => (this.contentElement = el) }, this.icon && (h("div", { key: '95bf4a48929080493ed1f375648aa8630931e3be', class: "icon" }, h("q2-icon", { key: '8e7d34940323c625e61eea7509d829d298af82a0', type: this.icon }))), this.imageSrc && (h("div", { key: '9f6fbbd59c14cc5ee93601db161dd7c748e3b5a6', class: "image" }, h("img", { key: 'd97eb1d2dae996c2bcacddf840b984f1ffe05847', src: this.imageSrc }))), hasSlotContent(this.hostElement, 'content') && h("slot", { key: 'b7b66ddb181aa333fb88496984a6f35a34077baf', name: "content" }), this.description && h("p", { key: '54dc54b11c8c351b760afc35c714d35277b3e463', class: "description" }, this.description), this.customMarkup && (h("p", { key: '11e8922a3e277f6bb21c8cbcaf1be19de07d3a54', class: "customMarkup", innerHTML: sanitizeHTMLString(this.customMarkup) }))), h("footer", { key: 'f90f8a5569be4c1660c25388a9082e2e40a3e11d' }, h("q2-action-group", { key: '34254d2e03a6093e53324c3d98b0eb2ede3b14f2', "full-width": true }, h("slot", { key: 'a34ad5fa37fc258bd2863f2fd191acdac05de9cb', name: "action" }))))));
     }
     get hostElement() { return this; }
     static get style() { return q2ModalCss; }

package/dist/components/q2-month-picker.js CHANGED Viewed

@@ -145,10 +145,10 @@ const Q2MonthPicker$1 = /*@__PURE__*/ proxyCustomElement(class Q2MonthPicker ext
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'b7429b5ed21f7cda666f140a9a93ee643176979c', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '802900b16d0efa602df89edb22e174329736dca4', class: "navigation" }, h("q2-btn", { key: '0a318088ab2eb826620c056246599f5b7803c51e', class: "year-btn", onClick: () => this.viewChange.emit({
+        return (h("div", { key: 'c80017d8e2998167716488b46dd52cecfc47dcc5', class: "month-container", onKeyDown: this.onMonthKeydown }, h("div", { key: '7f14b1eac6019175522e7c5fc4b5b5b0b2967723', class: "navigation" }, h("q2-btn", { key: '4cc17ededea2f273f45b27e4ddee49cd6ac5b412', class: "year-btn", onClick: () => this.viewChange.emit({
                 view: 'year',
                 selectedYear: this.year,
-            }) }, h("span", { key: '02018f884cb7b48fb581597fc7d5a2a323497668', class: "year" }, this.year), h("q2-icon", { key: '9ab23a381d4fedb5aca2ecee19eb975d76ff4465', class: "year-icon off", type: "chevron-down" })), h("div", { key: '79dd4cd0864d051a4252c21ebbd697e0e75b0ec3', class: "month-controller" }, h("div", { key: 'd94ad2ebfc317206bfff5b16861c52507a168e09', class: "cal-year-prev-next" }, h("q2-btn", { key: '4d8b12fde9825bd5dca90012d42e73453f2cb777', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '428b2feb8854e145bdbc88bdd2c6a2c25a3a50ce', type: "arrow-left" })), h("q2-btn", { key: '2f7ef439402c9788ae002a199813387a370e0ed3', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: '5931c20eac7a2268c6b945b336f44e143e9fe484', type: "arrow-right" }))))), h("div", { key: '9e18ae0e86a741201eb2a8c6ff04b9007899cbae', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '8dfee8bcf4ee9b4137c9c8644be7f38f5794bf4d', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
+            }) }, h("span", { key: '8165df4a38cfe5793689cb45bca424aaf6bcbf64', class: "year" }, this.year), h("q2-icon", { key: '827073a13b6d003b328a0fd8f8525b9b2a013ff2', class: "year-icon off", type: "chevron-down" })), h("div", { key: '5b46832d6adc2f00e5a7db0f43446b9c6b89ecad', class: "month-controller" }, h("div", { key: '8d25fa53c29f394461217255b6feb0ccd35ff884', class: "cal-year-prev-next" }, h("q2-btn", { key: '7c9b873b8111b50fe82d138e9f826c3cf3bbfff7', label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", "test-id": "previousYearButton", onClick: () => this.selectYear(this.year - 1) }, h("q2-icon", { key: '5b1f1906753a8b759c0b620deb49869834193035', type: "arrow-left" })), h("q2-btn", { key: 'dac82b2f5d88ecdc6d7fb0566fd4847615269949', label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", "test-id": "nextYearButton", onClick: () => this.selectYear(this.year + 1) }, h("q2-icon", { key: 'db889911237e7655047f33e8e19b845de8203f57', type: "arrow-right" }))))), h("div", { key: '4a4740d1513e1f970ef2754a1a7ac24299e1683c', class: "month-list", onClick: this.onMonthSelection }, this.months.map((month, index) => (h("div", { class: "month" }, h("span", { role: "button", class: "month-button", "data-index": index, "aria-label": month.label, tabindex: index === this.focusedIndex ? 0 : -1 }, month.abbr))))), this.today && (h("div", { key: '26ac01a5dc62b4c1f97701f19bd81e8d6569e9f1', class: "today-label" }, loc('tecton.element.calendar.today'), ": ", this.today))));
     }
     get hostElement() { return this; }
     static get style() { return q2MonthPickerCss; }

package/dist/components/q2-mutation-observer.js CHANGED Viewed

@@ -92,7 +92,7 @@ const Q2MutationObserver$1 = /*@__PURE__*/ proxyCustomElement(class Q2MutationOb
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'a7a47f38488edeb403658d1ad7464e79ef254709', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: '63a71ae4a0e7d69ea2aaec1244ff89c6d47d6a81', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-optgroup2.js CHANGED Viewed

@@ -56,7 +56,7 @@ const Q2Optgroup = /*@__PURE__*/ proxyCustomElement(class Q2Optgroup extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '1193ca6f02dab8603a148059edfd6b3f01e55556', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '5731f04b1976e5e1f96ab37f577ead3889b80e8c', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'a52522a81176e91855514da0f051058c740ee4b6', class: "q2-optgroup-options" }, h("slot", { key: '8b0c0e1f18f3b8ca76cd3c00e28e5cef73457ca6' }))));
+        return (h("div", { key: '6f4564d3db59c64b76abc47ceee3663e277b6f55', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: 'bd28cae7d3893142c8154286d28fb79448e5ca39', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '63eba11bbca923ca6c22281ba31476fb89a709ca', class: "q2-optgroup-options" }, h("slot", { key: '1c27562418e4075f2843e0ec080a138a14d5f191' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-pagination.js CHANGED Viewed

@@ -317,7 +317,7 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 total,
             });
         }
-        return (h("nav", { key: '642369130b2d57d4e6a89927608636a4da87f11d', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'e988b3374cec5bb1a73dfbcc705899fb3a3474d6', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '0947c1d04f042cb5f096d74146cc700e7993f277', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '6da46e6c76dffa66026057e53c7515bcf00576e0', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -326,10 +326,10 @@ const Q2Pagination$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pagination exten
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '8ac5316082ab9fcc03fd6c605e56e31124f5d5dc', class: "controls" }, h("div", { key: 'c7e99c77f10d0d587d31af19b3bd39ba2d64aeb7', class: "btn-group" }, h("q2-btn", { key: 'ba7cc1e9b1eee9d0db75e7f653c74974e06435a6', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '90b82dd3b935af151d517c997086e5779e51bd3c', type: "chevron-double-left" })), h("q2-btn", { key: '179b59d1c5cebff1897d5e0a3e825e969da90719', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: 'b23b78e56fc5df453036c07c055f2bc7bf10da11', type: "chevron-left" }))), h("div", { key: '5ac4941af9479fe7c2644cfe56fb1bf3f4e2c968', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'f748874515ec184a25bc2f10f16f1031b4ed5583', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '2e870838a5ca57ccfd80f648f8eaf6f895c950be', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: '3c765b872520ae12cf6d86789a5dfb56fe140d97', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
+            })), h("div", { key: '35963f235d6b549eedb8c9a443ecde053ecd8682', class: "controls" }, h("div", { key: '7016ffd2c95a76d34fd7ca112472a2a1067d7012', class: "btn-group" }, h("q2-btn", { key: 'a2a826b5ed84cedf548eaaf8aa2a8f95ad5085e6', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7ebc8f748c55786954292287b4f593841a367e28', type: "chevron-double-left" })), h("q2-btn", { key: 'dfd853b3bee34fe837dc9c621829fa59c44bc81c', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '519ef8ea441d04291b4393ba1ab03cd2198e88b3', type: "chevron-left" }))), h("div", { key: 'fd9d2f84689b857d134babd6d7d38de5f347488d', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'c8a48d708096badc6796a9caef840c807aa06db7', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '1e9965fa782cdf724e261294ad22eb34305c1c69', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'e61dc0d32f806ffbee54736755f8c2c8fb3dc2a4', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '1fad0a391c7b5b2bac9439b7116674d43d205a95', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '52dc5be6a7deae84418c2cfbf108b68451c3db5b', class: "btn-group" }, h("q2-btn", { key: 'b1aa2468c227ad4f251736eee6596a0525f620dd', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '689bc3f2f90724c53ff67d9724d17cc303af716c', type: "chevron-right" })), h("q2-btn", { key: 'bb1bb9cbbbc58454e6f811fcaa5359d561d79042', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'd271e5fd48c58f95f0b8d2d45af6f48c335038e8', type: "chevron-double-right" })))), h("div", { key: 'cc2ac1c470e2034b242079c44ecf4435cb42548e', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: 'ea7d626698765518e2e5dcd2118b20106413134d', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'eb93f6858f18c382d5ebe97007c7de6a3313e6cf', class: "btn-group" }, h("q2-btn", { key: '0ab9275fbfbc3514571f2fb308b1a15345816cf5', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '9968130c79eaaa564f1ca47ccc9e09a0d9ec564b', type: "chevron-right" })), h("q2-btn", { key: '08c3ebf15360ba2f1ccf56d2b12c458a2ebdb71e', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '83351e90f2645f9c2e8854ff46a684a9f43f339b', type: "chevron-double-right" })))), h("div", { key: 'dcdb653d221e0a92910a6ece5e234126e66c8410', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-pill.js CHANGED Viewed

@@ -377,7 +377,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: 'e967de8b2086ebf86f51cc927c3430c07ad37636', onChange: this.onClickElsewhere }, h("div", { key: '38c871229f1f80d49b003d5c6f7895c335a9eed8', class: wrapperClassNames.join(' ') }, h("div", { key: '8dd9a60999c49de096f8f8f67adccffba0f9a80a', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '1d485d62c6acfaee927e1fa1aa0bc9401c7f2c98', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": `${this.buttonContent}${!optionCount && active ? ` ${loc('tecton.element.pill.active')}` : ''}`, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '05ca8c8195186b220364ee67198d6210bbe34455', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'e1eb81bfc0489fd9450975eee632fb59830cce54', class: "popover-content" }, h("div", { key: 'a101a2d7f88fdb18f2a859737f1bca96742bad7e', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '752c27b869d1dd91f5d369e7f1675554e48a4554', name: "popover-top" })), h("q2-option-list", { key: '2f70d1533c8733721326b02a47531a7feb47ab7e', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '5ffddd45ce88c535a5bb4481f34a74690cb8d46f' })), h("div", { key: '1c5ae3722ea7caace731239ac0d91d4fcbe7eb8b', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: 'afa0d457a65303d7a4e50fa9e633e9fa609922e8', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '1f6a917d21078d5007387acd85fb7c03736db6ae', onChange: this.onClickElsewhere }, h("div", { key: '346b5d9651e27827e304377f9009edd50a141102', class: wrapperClassNames.join(' ') }, h("div", { key: 'c261c06b88781ea9af6f2b0f0a335476c0c7e89a', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'b717af900dc54f65de00aef3ee59dade83f6da21', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": `${this.buttonContent}${!optionCount && active ? ` ${loc('tecton.element.pill.active')}` : ''}`, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '4d415fbec7b43fe7f2b8abff0e3a02467028cdb4', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '75e71787bad82eb4a5682a2315d7f5dcbd3c3b82', class: "popover-content" }, h("div", { key: '5de5d4a2f606e4b936ee46fda3aded8b09e17854', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '6d971654eb266bd5a3c37e04cde81dd7d6876ca5', name: "popover-top" })), h("q2-option-list", { key: '670e99d6859d673e781eba1e6eee87ee8ac728b4', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: 'fde147d6d4c6deca9952ebdd5f022f0d348bf75e' })), h("div", { key: 'f8704bee883058f635b936fe03e888eaa9b3ce35', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '6761a2e76fbba5410a974eb0a24110c0c135b84e', name: "popover-bottom" })))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {