q2-tecton-elements 1.66.1 → 1.67.0

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

@@ -0,0 +1,482 @@
+import { r as e, c as t, h as o, g as c, F as r, H as a } from "./index-CGkHOjh1.js";
+
+import { c as i, d as s, o as h, i as l, l as d, w as n } from "./index-C4PILj1_.js";
+
+import { m as k } from "./mirror-emit-DUjY_ucm.js";
+
+import { s as b, a as v } from "./action-sheet-B7adb3xs.js";
+
+const p = '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-checkbox-padding:var(--tct-checkbox-padding, var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, 8px)) 0);display:block;position:relative;padding:var(--comp-checkbox-padding);--comp-default-checkbox-margin:var(--tct-checkbox-margin-top, var(--t-checkbox-margin-top, 0px)) 0 var(--tct-checkbox-margin-bottom, var(--t-checkbox-margin-bottom, 0px));margin:var(--tct-checkbox-margin, var(--comp-default-checkbox-margin))}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 24px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-track-fill:var(--tct-checkbox-toggle-track-fill, var(--tct-checkbox-toggle-track-color, transparent));--comp-checkbox-toggle-track-fill-active:var(--tct-checkbox-toggle-active-track-fill, var(--tct-checkbox-toggle-active-track-color, var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))));--comp-checkbox-toggle-track-fill-hover:var(--tct-checkbox-toggle-hover-track-fill, var(--tct-checkbox-toggle-hover-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error:var(--tct-checkbox-toggle-error-track-fill, var(--tct-checkbox-toggle-error-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error-hover:var(--tct-checkbox-toggle-error-hover-track-fill, var(--tct-checkbox-toggle-error-hover-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-track-fill-error-active:var(--tct-checkbox-toggle-error-active-track-fill, var(--tct-checkbox-toggle-error-active-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-fill-color:var(--tct-checkbox-checked-fill-color, var(--t-primary, #040404));--comp-checkbox-checked-color:var(--tct-checkbox-checked-stroke-color, var(--tct-white, var(--app-white, #FFFFFF)));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--comp-checkbox-bold-fallback-stroke-width:var(--tct-checkbox-bold-fallback-stroke-width, 0.7px);--comp-checkbox-stroke-width:var(--tct-checkbox-stroke-width, unset);--comp-checkbox-checked-stroke-width:var(--tct-checkbox-checked-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-hover-stroke-width:var(--tct-checkbox-hover-stroke-width, unset);--comp-checkbox-focused-stroke-width:var(--tct-checkbox-focused-stroke-width, unset);--comp-checkbox-checked-hover-stroke-width:var(--tct-checkbox-checked-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-checked-focused-stroke-width:var(--tct-checkbox-checked-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-stroke-width:var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-focused-stroke-width:var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-hover-stroke-width:var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));display:grid;grid-template-areas:"svg label" "svg description";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([hide-label]:not([hide-label=false])) .container{grid-template-areas:"svg";grid-template-columns:var(--comp-control-width)}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:"label svg" "description svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-stroke-width);text-stroke-width:var(--comp-checkbox-description-stroke-width)}:host([checked]:not([checked=false])) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-stroke-width);text-stroke-width:var(--comp-checkbox-checked-stroke-width)}:host(:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-hover-stroke-width);text-stroke-width:var(--comp-checkbox-hover-stroke-width)}:host(:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-focused-stroke-width);text-stroke-width:var(--comp-checkbox-focused-stroke-width)}:host([description]:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-hover-stroke-width);text-stroke-width:var(--comp-checkbox-description-hover-stroke-width)}:host([checked]:not([checked=false]):hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width);text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width)}:host([description]:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-focused-stroke-width);text-stroke-width:var(--comp-checkbox-description-focused-stroke-width)}:host([checked]:not([checked=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width);text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width)}:host(:active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-active-stroke-width, unset)}:host([checked]:not([checked=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset)}:host([has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset)}:host([has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset)}:host([has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset)}.label-text label{line-height:var(--tct-checkbox-label-line-height, 24px)}.label-text label .label-content{display:inline;font-size:var(--tct-checkbox-label-font-size, inherit)}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0;box-shadow:var(--tct-checkbox-box-shadow)}.checkbox-icon rect{transition:fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));box-shadow:var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow))}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host([has-error]:not([has-error=false]):not([type=favorite])[checked]:not([checked=false])) .checkbox-icon rect{fill:var(--tct-checkbox-error-checked-outer-fill-color)}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon{stroke:var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))))}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));box-shadow:var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))}:host(:hover:not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-focused-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host(:focus-within[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow))))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]:not([has-error=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error]:not([has-error=false])[type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{fill:none;stroke:var(--comp-checkbox-checked-color);stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-fill{stroke:var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);stroke-width:var(--tct-checkbox-error-checkmark-stroke-width, 2.5)}.checked-fill{stroke-dasharray:16;stroke-dashoffset:16;animation-name:draw-checkmark;animation-duration:var(--tct-checkbox-animation-duration, var(--t-tween-time-in-4, 300ms));animation-timing-function:var(--tct-checkbox-animation-timing-function, ease-out);animation-fill-mode:var(--tct-checkbox-animation-fill-mode, forwards)}@keyframes draw-checkmark{to{stroke-dashoffset:0}}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{--comp-default-track-box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);height:24px;width:38px;fill:var(--comp-checkbox-toggle-track-fill);border-radius:var(--app-border-radius-3, 12px);box-shadow:var(--tct-checkbox-toggle-track-box-shadow, var(--comp-default-track-box-shadow));transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{--comp-default-hover-track-box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color);box-shadow:var(--tct-checkbox-toggle-hover-track-box-shadow, var(--comp-default-hover-track-box-shadow));fill:var(--comp-checkbox-toggle-track-fill-hover)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--comp-checkbox-toggle-track-fill-active)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error-hover)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--comp-checkbox-toggle-track-fill-error-active)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-error-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset)}:host([checked]:not([checked=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-label-hover-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-label-active-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-error-label-hover-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-error-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-error-label-active-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset)}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}';
+
+const f = class {
+  constructor(o) {
+    e(this, o);
+    this.change = t(this, "change", 7);
+    this.tctChange = t(this, "tctChange", 7);
+    // #region Own Properties
+        this._id = `checkbox-${i()}`
+    /** The state of the checkbox. This modifies the visual appearance of the element. */;
+    this.checked = false;
+    /** Determines if the component should display in an errant state. */    this.hasError = false;
+    this.onInputClick = e => {
+      e.stopPropagation();
+      e.preventDefault();
+      const t = this.disabled || this.readonly || this.slotReadonly;
+      if (t) return;
+      if (!(e.target instanceof HTMLInputElement)) return;
+      const {value: o, checked: c} = e.target;
+      k(this, [ "change", "tctChange" ], {
+        value: o,
+        checked: c
+      });
+      this.inputElement.focus();
+    };
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    s(this);
+  }
+  componentDidLoad() {
+    h(this.hostElement);
+    this.hostElement.click = () => this.inputElement.click();
+  }
+  // #endregion
+  // #region Listeners
+  defaultChangeHandler(e) {
+    // We use setTimeout to give an opportunity to call preventDefault
+    setTimeout((() => this.handleChangeEvent(e)), 0);
+  }
+  delegateFocus(e) {
+    if (!l(e, this.hostElement)) return;
+    this.hostElement.shadowRoot.querySelector("input").focus();
+  }
+  // #endregion
+  // #region Watchers
+  ariaLabelObserver() {
+    s(this);
+  }
+  // #endregion
+  // #region Local Methods
+  get composedAriaLabel() {
+    const e = d(this.label) || undefined;
+    if (!this._tooltip && !e) return undefined;
+    if (!this._tooltip) return e;
+    if (!e) return this._tooltip;
+    return `${e} - ${this._tooltip}`;
+  }
+  handleChangeEvent(e) {
+    if (this.readonly || this.disabled || this.hostElement.onchange || e.defaultPrevented || e.target !== this.hostElement || !e.detail) {
+      return;
+    }
+    this.checked = e.detail.checked;
+  }
+  // #endregion
+  // #region Render Methods
+  renderCheckboxSVG() {
+    if (this.type === "favorite") {
+      return o("q2-icon", {
+        type: "star",
+        class: "checkbox-icon"
+      });
+    }
+    if (this.type === "toggle") {
+      return this.renderToggleSVG();
+    }
+    return o("svg", {
+      "aria-hidden": "true",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      class: "checkbox-icon",
+      focusable: "false"
+    }, o("rect", {
+      x: "1",
+      y: "1",
+      width: "18",
+      height: "18",
+      rx: "3"
+    }), (this.checked || this.indeterminate) && this.renderCheckBoxSVGFill());
+  }
+  renderCheckBoxSVGFill() {
+    if (this.indeterminate) {
+      return o("line", {
+        class: "checkbox-fill indeterminate-fill",
+        x1: "4",
+        y1: "10",
+        x2: "16",
+        y2: "10"
+      });
+    }
+    return o("polyline", {
+      class: "checkbox-fill checked-fill",
+      points: "5 11 8.5 14.5 15 6",
+      key: `checkmark-${this.checked}`
+    });
+  }
+  renderToggleSVG() {
+    return o("div", {
+      class: "toggle-svg-container"
+    }, o("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 38 24",
+      class: "toggle-track",
+      "test-id": "toggleTrack"
+    }, o("rect", {
+      width: "38",
+      height: "24",
+      rx: "12"
+    })), o("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
+      viewBox: "0 0 18 18",
+      class: "toggle-indicator",
+      "test-id": "toggleIndicator"
+    }, o("defs", null, o("mask", {
+      id: "xMask",
+      maskUnits: "userSpaceOnUse"
+    }, o("rect", {
+      width: "18",
+      height: "18",
+      fill: "white"
+    }), o("line", {
+      class: "toggle-icon",
+      x1: "6.5",
+      y1: "6.5",
+      x2: "11.5",
+      y2: "11.5",
+      stroke: "black",
+      "stroke-width": "2"
+    }), o("line", {
+      class: "toggle-icon",
+      x1: "6.5",
+      y1: "11.5",
+      x2: "11.5",
+      y2: "6.5",
+      stroke: "black",
+      "stroke-width": "2"
+    })), o("mask", {
+      id: "checkMask"
+    }, o("rect", {
+      width: "18",
+      height: "18",
+      fill: "white"
+    }), o("polyline", {
+      class: "toggle-icon",
+      points: "6,8.5 8.5,11 12.5,6.5",
+      fill: "none"
+    }))), o("circle", {
+      class: "toggle-circle",
+      cx: "9",
+      cy: "9",
+      r: "9",
+      mask: "url(#xMask)"
+    })));
+  }
+  render() {
+    const e = [ "label-text" ];
+    if (this.hideLabel) e.push("sr");
+    return o("div", {
+      key: "ef32fc123a8e6205ae9821781d4a74391d68761e",
+      class: "container"
+    }, o("input", {
+      key: "4d2e8c0e0a938a27a7252479ed462f14c286363e",
+      ref: e => this.inputElement = e,
+      "aria-describedby": this.description ? "description" : undefined,
+      "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`,
+      checked: this.indeterminate || this.checked || false,
+      class: "sr",
+      disabled: !!this.disabled || !!this.groupDisabled,
+      id: this._id,
+      name: this.name || this._id,
+      onClick: this.onInputClick,
+      "test-id": "q2CheckboxInnerCheckBox",
+      type: "checkbox",
+      value: this.value
+    }), o("label", {
+      key: "79b3f172df48a414ee1d612d73f1c3cbb89c6cc6",
+      htmlFor: this._id,
+      class: "label-control",
+      "test-id": "checkboxButton",
+      "aria-label": this.composedAriaLabel
+    }, this.renderCheckboxSVG()), o("div", {
+      key: "16ed427817793e7660fc6912cef776c1e3428468",
+      class: e.join(" ")
+    }, o("label", {
+      key: "cc58ac3186fc7052f11dafd92dc50837ebdf729d",
+      "test-id": "checkboxLabel",
+      htmlFor: this._id,
+      "aria-hidden": "true"
+    }, o("div", {
+      key: "62bf345f92850ea1e4e9f8dae1e88c739ef71a91",
+      class: "label-content"
+    }, d(this.label), o("slot", {
+      key: "c334401be83f977cd1b53ddf5b64182d528c1106"
+    })))), this.description && o("div", {
+      key: "2b71f3fb0ce8d4990319bc89a4b924ff4dd75018",
+      class: "description-text",
+      "test-id": "checkboxDescription",
+      id: "description"
+    }, d(this.description)));
+  }
+  get hostElement() {
+    return c(this);
+  }
+  static get watchers() {
+    return {
+      ariaLabel: [ "ariaLabelObserver" ]
+    };
+  }
+};
+
+f.style = p;
+
+const x = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-tag-margin, var(--t-tag-margin, var(--app-scale-2x, 10px)))}.tag-wrapper{--comp-tag-btn-size:var(--tct-tag-btn-size, var(--t-tag-btn-size, var(--app-scale-6x, 30px)));--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));--comp-tag-color:var(--tct-tag-color, var(--t-tag-color, var(--t-gray-3, #262626)));--comp-tag-border-color:var(--tct-tag-border-color, transparent);background:var(--comp-tag-background);color:var(--comp-tag-color);border-radius:var(--tct-tag-border-radius, var(--t-tag-border-radius, var(--app-border-radius-1, 4px)));border-width:var(--tct-tag-border-width, 0);border-style:var(--tct-tag-border-style, 0);border-color:var(--comp-tag-border-color);font-size:var(--tct-tag-font-size, inherit);font-weight:var(--tct-tag-font-weight, inherit);position:relative}:host([theme=primary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-primary-background, var(--t-primary, #0079c1));--comp-tag-color:var(--tct-tag-primary-font-color, var(--t-primary-text, #ffffff));--comp-tag-border-color:var(--tct-tag-primary-border-color, var(--t-primary, #0079c1))}:host([theme=secondary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-secondary-background, var(--t-secondary, #b3c2cc));--comp-tag-color:var(--tct-tag-secondary-font-color, var(--t-secondary-text, #141414));--comp-tag-border-color:var(--tct-tag-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([theme=tertiary]) .tag-wrapper{--comp-tag-background:var(--tct-tag-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-tag-color:var(--tct-tag-tertiary-font-color, var(--t-tertiary-text, #141414));--comp-tag-border-color:var(--tct-tag-tertiary-border-color, var(--t-tertiary, #e8f5fc))}.tag-wrapper:focus-visible{box-shadow:var(--tct-tag-focus-visible-box-shadow, var(--const-double-focus-ring))}.tag{display:flex;align-items:center;width:max-content;gap:6px;height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));line-height:var(--tct-tag-height, var(--t-tag-height, var(--app-scale-6x, 30px)));padding-inline:var(--tct-tag-padding-inline, var(--t-tag-padding-inline, var(--app-scale-3x, 15px)))}.tag ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-tag-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-decorator-icon-secondary-stroke)}:host([theme=primary]) .tag ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-tag-primary-decorator-icon-primary-stroke);--tct-icon-stroke-secondary:var(--tct-tag-primary-decorator-icon-secondary-stroke)}.tag ::slotted(q2-badge[slot=decorator]){--tct-badge-height:1em;--tct-badge-line-height:30px}.tag.has-options{padding-right:6px}.btn-wrapper{--comp-tag-clickable-size:var(--tct-tag-clickable-size, var(--t-tag-clickable-size, 44px));--comp-tag-btn-offset:calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);--comp-tag-background:var(--tct-tag-background, var(--t-tag-background, var(--t-gray-13, #e6e6e6)));height:var(--comp-tag-clickable-size);display:flex;align-items:center;justify-content:center;position:relative;right:var(--comp-tag-btn-offset);top:var(--comp-tag-btn-offset);cursor:pointer}button{height:var(--comp-tag-btn-size);stroke:var(--comp-tag-color);--tct-icon-stroke-primary:var(--comp-tag-color);cursor:pointer;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;padding-right:6px;--tct-icon-size:18px}";
+
+const g = class {
+  constructor(o) {
+    e(this, o);
+    this.click = t(this, "click", 7);
+    this.tctClick = t(this, "tctClick", 7);
+    var c;
+    // #endregion
+    // #region Public Property API
+    /**
+         * Instructs the component to use the action sheet workflow for displaying its options.
+         *
+         * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
+         */    this.hoist = !!((c = window.Tecton) === null || c === void 0 ? void 0 : c.useActionSheets);
+    /** Determines the label that is applied to the option list for accessibility purposes. */    this.optionListLabel = "options";
+    /** Aligns the popover dropdown to the left or right side of the input field. */    this.popoverAlignment = "right";
+    this.determineOptionCount = () => {
+      const e = this.hostElement.querySelectorAll("q2-option").length;
+      this.optionCount = e;
+    };
+    this.filterSlottedElements = () => {
+      if (!("HTMLSlotElement" in window)) return;
+      const e = this.hostElement.shadowRoot.querySelector('slot[name="decorator"]');
+      const t = Array.from((e === null || e === void 0 ? void 0 : e.assignedElements()) || []);
+      if (!t.length) return;
+      const o = [ "Q2-ICON", "Q2-BADGE" ];
+      t.forEach(((e, t) => {
+        if (!o.includes(e.tagName) || t > 0) {
+          e.remove();
+        }
+      }));
+    };
+    this.handleButtonFocusout = async e => {
+      var t;
+      const o = e.relatedTarget;
+      if ((t = this.popoverElement) === null || t === void 0 ? void 0 : t.contains(o)) return;
+      if (this.hostElement.contains(o)) return;
+      this.open = false;
+    };
+    this.handleChange = e => {
+      e.stopPropagation();
+      if (!this.optionCount) return;
+      const {value: t} = e.detail;
+      k(this, [ "click", "tctClick" ], {
+        value: t
+      });
+    };
+    this.handleClick = async e => {
+      e.stopPropagation();
+      this.popoverElement.controlElement = this.dropdownBtn;
+      if (b(this)) {
+        const {value: t} = await v(this, e);
+        this.dropdownBtn.focus();
+        k(this, [ "click", "tctClick" ], {
+          value: t
+        });
+      } else {
+        await this.popoverElement.toggle();
+      }
+    };
+    this.handleKeydown = async e => {
+      const t = e.metaKey || e.ctrlKey || e.key === "Tab";
+      if (t) return;
+      e.preventDefault();
+      this.popoverElement.controlElement = this.dropdownBtn;
+      if (b(this, e)) {
+        const {value: t} = await v(this, e);
+        this.dropdownBtn.focus();
+        k(this, [ "click", "tctClick" ], {
+          value: t
+        });
+      } else {
+        this.optionList.handleExternalKeydown(e);
+      }
+    };
+    this.handleWrapperClick = () => {
+      this.dropdownBtn.focus();
+      this.dropdownBtn.click();
+    };
+    this.initMutationObserver = () => {
+      if (!("MutationObserver" in window)) return;
+      const e = new MutationObserver(this.onMutationObserved);
+      e.observe(this.hostElement, {
+        childList: true,
+        attributes: true
+      });
+      this.mutationObserver = e;
+    };
+    this.onClickElsewhere = e => {
+      const t = e.target;
+      if (t.localName === "click-elsewhere") {
+        e.stopPropagation();
+        const {popoverElement: t} = this;
+        if (!t) return;
+        t.open = false;
+      }
+    };
+    this.onMutationObserved = () => {
+      this.determineOptionCount();
+      this.filterSlottedElements();
+    };
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var e;
+    (e = this.mutationObserver) === null || e === void 0 ? void 0 : e.disconnect();
+    this.mutationObserver = null;
+  }
+  componentWillLoad() {
+    this.initMutationObserver();
+    this.determineOptionCount();
+  }
+  componentDidLoad() {
+    h(this.hostElement);
+    this.filterSlottedElements();
+  }
+  // #endregion
+  // #region Listeners
+  delegateFocus(e) {
+    if (!l(e, this.hostElement)) return;
+    if (!this.optionCount) return;
+    this.dropdownBtn.focus();
+  }
+  popoverStateHandler({detail: {open: e}}) {
+    if (this.open !== e) this.open = e;
+    if (e) return;
+    this.optionList.setActiveElement(null);
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Emulates clicking the tag to close the popover when options are provided and the popover is open.
+     * @testonly
+     */
+  async closePopover() {
+    if (!this.optionCount || !this.open) return;
+    this._togglePopover();
+  }
+  /**
+     * Emulates clicking the tag to open the popover when options are provided and the popover is closed.
+     * @testonly
+     */  async openPopover() {
+    if (!this.optionCount || this.open) return;
+    this._togglePopover();
+  }
+  /**
+     * Emulates selecting an option matching the passed value.
+     *
+     * If the popover is closed, this will open it before selecting the option.
+     *
+     * If there are not options, or the passed value does not match any option's value, this method does nothing.
+     * @testonly
+     */  async selectOption(e) {
+    if (!this.optionCount) return;
+    await this.openPopover();
+    await n();
+    const t = await this.optionList.getOptions();
+    const o = t.find((t => t.value === e));
+    o === null || o === void 0 ? void 0 : o.click();
+  }
+  // #endregion
+  // #region Local Methods
+  _togglePopover() {
+    const {dropdownBtn: e} = this;
+    e === null || e === void 0 ? void 0 : e.click();
+    e === null || e === void 0 ? void 0 : e.focus();
+    e.dispatchEvent(new FocusEvent("focus"));
+  }
+  // #endregion
+  // #region Render Methods
+  renderHiddenElement() {
+    return o("div", {
+      id: "option-description",
+      class: "sr",
+      "aria-hidden": "true"
+    }, d("tecton.element.optionList.optionCount", [ this.optionCount ]));
+  }
+  render() {
+    const {open: e} = this;
+    const t = [ "tag" ];
+    if (this.optionCount) t.push("has-options");
+    const c = this.optionCount > 0;
+    return o(a, {
+      key: "664af4451fdb556b1746ec0f1a0a66de86642a7a"
+    }, o("click-elsewhere", {
+      key: "8da25535a510070733d25fa1d63dedfa0865b7ab",
+      onChange: this.onClickElsewhere
+    }, c ? o(r, null, o("div", {
+      class: "btn-wrapper",
+      onClick: this.handleWrapperClick
+    }, o("button", {
+      class: "tag-wrapper",
+      ref: e => this.dropdownBtn = e,
+      "test-id": "btn-control",
+      type: "button",
+      role: "combobox",
+      onClick: this.handleClick,
+      onKeyDown: this.handleKeydown,
+      onFocusout: this.handleButtonFocusout,
+      "aria-controls": "option-list",
+      "aria-expanded": e ? "true" : "false",
+      "aria-describedby": "option-description",
+      "aria-label": d(this.label)
+    }, o("div", {
+      class: t.join(" ")
+    }, d(this.label)), o("q2-icon", {
+      type: "options"
+    }))), this.renderHiddenElement()) : o("div", {
+      class: "tag-wrapper",
+      onClick: e => e.stopPropagation()
+    }, o("div", {
+      class: t.join(" ")
+    }, o("slot", {
+      name: "decorator"
+    }), d(this.label))), c && o("q2-popover", {
+      key: "28397ef79ce03d335959ad993a4de4278073a9ba",
+      ref: e => this.popoverElement = e,
+      controlElement: this.dropdownBtn,
+      open: this.open,
+      maxHeight: this.popoverMaxHeight,
+      minHeight: this.popoverMinHeight,
+      direction: this.popoverDirection,
+      align: this.popoverAlignment
+    }, o("q2-option-list", {
+      key: "3379d0003bde9036485c06ff696a2f08fc599451",
+      id: "option-list",
+      ref: e => this.optionList = e,
+      onChange: this.handleChange,
+      type: "menu",
+      align: "right",
+      label: d("tecton.element.optionList.label", [ this.optionListLabel ]),
+      "no-select": true
+    }, o("slot", {
+      key: "1cf6372351972e02563e74ba1e9cc79e261a9a2a"
+    })))));
+  }
+  get hostElement() {
+    return c(this);
+  }
+};
+
+g.style = x;
+
+export { f as q2_checkbox, g as q2_tag };
+//# sourceMappingURL=q2-checkbox.q2-tag.entry.esm.js.map
+//# sourceMappingURL=q2-checkbox_2.entry.js.map