q2-tecton-elements 1.62.5 → 1.63.0

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

@@ -1,8 +1,8 @@
 import { r as o, c as e, h as c, g as t } from "./index-CGkHOjh1.js";
 
-import { c as r, e as a, o as i, a as s, l as h } from "./index-LNnzUeDP.js";
+import { c as r, d as a, o as i, i as s, l as h } from "./index-YJ5sXwiE.js";
 
-const l = '*{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-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-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--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)}.label-text label{line-height:var(--tct-checkbox-label-line-height, 24px)}.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(--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(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-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(: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-checked-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(--tct-checkbox-checkmark-stroke-color, 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}.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(--tct-checkbox-toggle-track-color, transparent);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))}: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])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}: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)}: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)}: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])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}: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])) :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([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])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}: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 l = '*{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-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-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--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;cursor:pointer}.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)}.label-text label{line-height:var(--tct-checkbox-label-line-height, 24px)}.label-text label .label-content{display:inline-block}.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);hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}:host(:not([type=toggle])) label{cursor:pointer}.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(--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(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-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(: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-checked-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(--tct-checkbox-checkmark-stroke-color, 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}.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(--tct-checkbox-toggle-track-color, transparent);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))}: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])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))}: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)}: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)}: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])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}: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])) :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([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])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}: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 d = class {
   constructor(c) {
@@ -164,11 +164,12 @@ const d = class {
   render() {
     const o = [ "label-text" ];
     if (this.hideLabel) o.push("sr");
+    const e = this.type === "toggle" ? this._id + "-content" : this._id;
     return c("div", {
-      key: "8465026ca4e85c09098832ad9f24a44e837de859",
+      key: "35f6ed3f9cc58eb0991d3de462e560fde10533bb",
       class: "container"
     }, c("input", {
-      key: "428a6605cdef65840decdd2397c7fbb7e325ce5a",
+      key: "9fa19176ecf44588464903ba8e9dfd5552fc47cc",
       ref: o => this.inputElement = o,
       "aria-describedby": this.description ? "description" : undefined,
       "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`,
@@ -182,25 +183,27 @@ const d = class {
       type: "checkbox",
       value: this.value
     }), c("label", {
-      key: "a325ada8e89c0c1079c5904449b67091127f0205",
+      key: "8e302aacc2287752aba3aa622d6da5f983c59d49",
       htmlFor: this._id,
       class: "label-control",
       "test-id": "checkboxButton",
       "aria-label": h(this.label)
     }, this.renderCheckboxSVG()), c("div", {
-      key: "e5c851632c21e9ee6740aa216dfa2888a80e373c",
+      key: "303c038be8313f6d487edd74556671141b2eada3",
       class: o.join(" ")
     }, c("label", {
-      key: "e99331d0b4d936ece5c3d1a6e7095858c084d77f",
+      key: "d1ecec2a712c3abb36390e54be33088d3ba429d8",
       "test-id": "checkboxLabel",
-      htmlFor: this._id,
+      htmlFor: e,
       "aria-hidden": "true"
     }, c("div", {
-      key: "290e1b6975622a1ccbed492706468308797b38c3"
+      key: "ce16e3f923bcef7061bdaafd19e0ea0ff4546f2b",
+      class: "label-content",
+      id: e
     }, h(this.label), c("slot", {
-      key: "eadde083ef8baafefbfa10e2f71d0baf06e4e545"
+      key: "7ef5224d0531c3ea84d502174d9a7dd72e9f91c9"
     })))), this.description && c("div", {
-      key: "cf5e7088d98acf5327468bbf6add8bdea0d8332d",
+      key: "b65a6dd80feec93847348fa7268f4dd2a00cdae5",
       class: "description-text",
       "test-id": "checkboxDescription",
       id: "description"

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"q2-context.entry.esm.js","sources":["src/components/q2-context/q2-context.scss?tag=q2-context&encapsulation=shadow","src/components/q2-context/q2-context.tsx"],"sourcesContent":["@import '../../styles/functions';\n\n* {\n    box-sizing: border-box;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host {\n    display: block;\n    background: var-list(--tct-context-background, --t-tertiary, #e8f5fc);\n    box-shadow: var-list(--tct-context-box-shadow, none);\n    backdrop-filter: var-list(--tct-context-backdrop-filter, none);\n    border-radius: var-list(--tct-context-border-radius, --app-border-radius-2, 8px);\n    padding: var(--tct-context-padding, 10px);\n    width: var(--tct-context-width, 100%);\n    border-width: var-list(--tct-context-border-width, 0px);\n    border-style: var-list(--tct-context-border-style, solid);\n    border-color: var-list(--tct-context-border-color, transparent);\n}\n\n.context-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-context-gap, 10px);\n}\n\n.context-item {\n    --tct-item-bullet-padding-top: 0;\n    --tct-item-action-align-items: start;\n    --tct-item-action-icon-height: 24px;\n    --tct-item-action-icon-width: 24px;\n    --tct-item-action-icon-size: 24px;\n    --tct-item-avatar-height: 44px;\n    --tct-item-avatar-width: 44px;\n}\n\n.context-body {\n    slot:not(:first-child)::before {\n        content: ' ';\n    }\n\n    ::slotted(*) {\n        display: inline;\n    }\n}\n\n.separator {\n    margin: var(--tct-context-separator-margin, 0);\n    border-bottom: 1px solid var-list(--tct-context-separator-color, --t-gray-12, #d9d9d9);\n}\n\n.action-group {\n    --tct-action-group-margin: 0;\n}\n\n::slotted(q2-dropdown) {\n    // slotted affordance dropdown\n    --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);\n}\n\n::slotted(q2-link) {\n    // slotted action-group links\n    --tct-link-border-radius: var(--app-border-radius-1, 4px);\n    --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);\n    --tct-icon-stroke-secondary: var(--t-primary, #6a4a9e);\n}\n","import { hasSlotContent } from '@/utils';\nimport { Component, h, ComponentInterface, Element, Prop } from '@stencil/core';\n\n/**\n * @slot decorator - An optional slot that supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this as a visual aid for the context being provided.\n *\n * @slot header - A **required** slot that must be a single `<h4>` element. Use this to indicate the purpose or subject of the context being provided.\n *\n * @slot description - A **required** slot. Use this to provide the bulk of the context you wish to convey to the user.\n *\n * @slot affordance - An optional slot that supports either a [Button](https://tecton.q2developer.com/design-system/q2-btn/) or a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/).\n * Use this to provide an affordance such as a dismiss button, or a dropdown kebab menu for the user.\n *\n * @slot action-group - An optional slot that supports up to two elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group/).\n * Use this to provide the user with actions related to the context description.\n *\n * @slot footer - An optional slot to display additional HTML content.\n */\n@Component({ tag: 'q2-context', shadow: true, styleUrl: 'q2-context.scss' })\nexport class Q2Context implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Renders a horizontal line between the description and the action-group/footer slots. */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidRender(): void {\n        this.handleActionGroupElements();\n        this.handleAffordanceElement();\n        this.handleDecoratorElement();\n        this.handleHeaderElement();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasActionGroupSlotContent() {\n        return hasSlotContent(this.hostElement, 'action-group');\n    }\n\n    get hasAffordanceSlotContent() {\n        return hasSlotContent(this.hostElement, 'affordance');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    handleActionGroupElements() {\n        if (!('HTMLSlotElement' in window)) return;\n        const actionGroupSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action-group\"]');\n        const actionGroupElements = actionGroupSlot?.assignedElements({ flatten: true }) || [];\n        actionGroupElements.forEach((el: HTMLElement, index) => {\n            if (index > 1) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only two elements allowed in the action-group slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (el.getAttribute('size') !== 'small') {\n                    el.setAttribute('size', 'small');\n                    console.warn('Q2-CONTEXT: action-group slot buttons must be size=\"small\".');\n                }\n                if (!['neutral', 'workflow-escape'].includes(el.getAttribute('intent'))) {\n                    el.setAttribute('intent', 'neutral');\n                    console.warn(\n                        'Q2-CONTEXT: action-group slot buttons must have intent=\"neutral\" or intent=\"workflow-escape\".'\n                    );\n                }\n            }\n        });\n    }\n\n    handleAffordanceElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const affordanceSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"affordance\"]');\n        const affordanceElements = affordanceSlot?.assignedElements({ flatten: true }) || [];\n        affordanceElements.forEach((el: HTMLElement, index) => {\n            if (!['Q2-BTN', 'Q2-DROPDOWN'].includes(el.tagName) || index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one supported element is allowed in the affordance slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (!el.getAttribute('label')) el.setAttribute('label', 'Dismiss');\n                if (!el.getAttribute('hide-label')) el.setAttribute('hide-label', 'true');\n            }\n\n            if (el.tagName === 'Q2-DROPDOWN') {\n                if (el.getAttribute('type') !== 'icon') el.setAttribute('type', 'icon');\n                if (el.getAttribute('icon') !== 'options') el.setAttribute('icon', 'options');\n                if (el.getAttribute('popover-alignment') !== 'right') el.setAttribute('popover-alignment', 'right');\n            }\n        });\n    }\n\n    handleDecoratorElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const decoratorSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const decoratorElements = decoratorSlot?.assignedElements({ flatten: true }) || [];\n        decoratorElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element is allowed in the decorator slot.');\n                return;\n            }\n\n            if (!['Q2-ICON', 'Q2-AVATAR'].includes(el.tagName)) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only Q2-ICON or Q2-AVATAR are allowed in the decorator slot.');\n                return;\n            }\n        });\n    }\n\n    handleHeaderElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const headerSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"header\"]');\n        const headerElements = headerSlot?.assignedElements({ flatten: true }) || [];\n        headerElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element allowed in the header slot.');\n            }\n\n            if (el.tagName !== 'H4') {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only H4 elements are allowed in the header slot.');\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"context-wrapper\">\n                <q2-item class=\"context-item\">\n                    {this.hasDecoratorSlotContent && (\n                        <slot\n                            name=\"decorator\"\n                            slot=\"bullet\"\n                        />\n                    )}\n                    <div\n                        class=\"context-body\"\n                        slot=\"body\"\n                    >\n                        <slot name=\"header\" />\n                        <slot name=\"description\" />\n                    </div>\n                    {this.hasAffordanceSlotContent && (\n                        <slot\n                            name=\"affordance\"\n                            slot=\"action\"\n                        />\n                    )}\n                </q2-item>\n                {this.separator && (\n                    <div\n                        class=\"separator\"\n                        role=\"separator\"\n                    />\n                )}\n                {this.hasActionGroupSlotContent && (\n                    <q2-action-group\n                        class=\"action-group\"\n                        orientation=\"horizontal\"\n                    >\n                        <slot name=\"action-group\" />\n                    </q2-action-group>\n                )}\n                {this.hasFooterSlotContent && <slot name=\"footer\" />}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"q2-context.entry.esm.js","sources":["src/components/q2-context/q2-context.scss?tag=q2-context&encapsulation=shadow","src/components/q2-context/q2-context.tsx"],"sourcesContent":["@import '../../styles/functions';\n\n* {\n    box-sizing: border-box;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host {\n    display: block;\n    background: var-list(--tct-context-background, --t-tertiary, #e8f5fc);\n    box-shadow: var-list(--tct-context-box-shadow, none);\n    backdrop-filter: var-list(--tct-context-backdrop-filter, none);\n    border-radius: var-list(--tct-context-border-radius, --app-border-radius-2, 8px);\n    padding: var(--tct-context-padding, 10px);\n    width: var(--tct-context-width);\n    border-width: var-list(--tct-context-border-width, 0px);\n    border-style: var-list(--tct-context-border-style, solid);\n    border-color: var-list(--tct-context-border-color, transparent);\n}\n\n.context-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-context-gap, 10px);\n}\n\n.context-item {\n    --tct-item-bullet-padding-top: 0;\n    --tct-item-action-align-items: start;\n    --tct-item-action-icon-height: 24px;\n    --tct-item-action-icon-width: 24px;\n    --tct-item-action-icon-size: 24px;\n    --tct-item-avatar-height: 44px;\n    --tct-item-avatar-width: 44px;\n}\n\n.context-body {\n    slot:not(:first-child)::before {\n        content: ' ';\n    }\n\n    ::slotted(*) {\n        display: inline;\n    }\n}\n\n.separator {\n    margin: var(--tct-context-separator-margin, 0);\n    border-bottom: 1px solid var-list(--tct-context-separator-color, --t-gray-12, #d9d9d9);\n}\n\n.action-group {\n    --tct-action-group-margin: 0;\n}\n\n::slotted(q2-dropdown) {\n    // slotted affordance dropdown\n    --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);\n}\n\n::slotted(q2-link) {\n    // slotted action-group links\n    --tct-link-border-radius: var(--app-border-radius-1, 4px);\n    --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);\n    --tct-icon-stroke-secondary: var(--t-primary, #6a4a9e);\n}\n","import { hasSlotContent } from '@/utils';\nimport { Component, h, ComponentInterface, Element, Prop } from '@stencil/core';\n\n/**\n * @slot decorator - An optional slot that supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this as a visual aid for the context being provided.\n *\n * @slot header - A **required** slot that must be a single `<h4>` element. Use this to indicate the purpose or subject of the context being provided.\n *\n * @slot description - A **required** slot. Use this to provide the bulk of the context you wish to convey to the user.\n *\n * @slot affordance - An optional slot that supports either a [Button](https://tecton.q2developer.com/design-system/q2-btn/) or a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/).\n * Use this to provide an affordance such as a dismiss button, or a dropdown kebab menu for the user.\n *\n * @slot action-group - An optional slot that supports up to two elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group/).\n * Use this to provide the user with actions related to the context description.\n *\n * @slot footer - An optional slot to display additional HTML content.\n */\n@Component({ tag: 'q2-context', shadow: true, styleUrl: 'q2-context.scss' })\nexport class Q2Context implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Renders a horizontal line between the description and the action-group/footer slots. */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidRender(): void {\n        this.handleActionGroupElements();\n        this.handleAffordanceElement();\n        this.handleDecoratorElement();\n        this.handleHeaderElement();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasActionGroupSlotContent() {\n        return hasSlotContent(this.hostElement, 'action-group');\n    }\n\n    get hasAffordanceSlotContent() {\n        return hasSlotContent(this.hostElement, 'affordance');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    handleActionGroupElements() {\n        if (!('HTMLSlotElement' in window)) return;\n        const actionGroupSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action-group\"]');\n        const actionGroupElements = actionGroupSlot?.assignedElements({ flatten: true }) || [];\n        actionGroupElements.forEach((el: HTMLElement, index) => {\n            if (index > 1) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only two elements allowed in the action-group slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (el.getAttribute('size') !== 'small') {\n                    el.setAttribute('size', 'small');\n                    console.warn('Q2-CONTEXT: action-group slot buttons must be size=\"small\".');\n                }\n                if (!['neutral', 'workflow-escape'].includes(el.getAttribute('intent'))) {\n                    el.setAttribute('intent', 'neutral');\n                    console.warn(\n                        'Q2-CONTEXT: action-group slot buttons must have intent=\"neutral\" or intent=\"workflow-escape\".'\n                    );\n                }\n            }\n        });\n    }\n\n    handleAffordanceElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const affordanceSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"affordance\"]');\n        const affordanceElements = affordanceSlot?.assignedElements({ flatten: true }) || [];\n        affordanceElements.forEach((el: HTMLElement, index) => {\n            if (!['Q2-BTN', 'Q2-DROPDOWN'].includes(el.tagName) || index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one supported element is allowed in the affordance slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (!el.getAttribute('label')) el.setAttribute('label', 'Dismiss');\n                if (!el.getAttribute('hide-label')) el.setAttribute('hide-label', 'true');\n            }\n\n            if (el.tagName === 'Q2-DROPDOWN') {\n                if (el.getAttribute('type') !== 'icon') el.setAttribute('type', 'icon');\n                if (el.getAttribute('icon') !== 'options') el.setAttribute('icon', 'options');\n                if (el.getAttribute('popover-alignment') !== 'right') el.setAttribute('popover-alignment', 'right');\n            }\n        });\n    }\n\n    handleDecoratorElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const decoratorSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const decoratorElements = decoratorSlot?.assignedElements({ flatten: true }) || [];\n        decoratorElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element is allowed in the decorator slot.');\n                return;\n            }\n\n            if (!['Q2-ICON', 'Q2-AVATAR'].includes(el.tagName)) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only Q2-ICON or Q2-AVATAR are allowed in the decorator slot.');\n                return;\n            }\n        });\n    }\n\n    handleHeaderElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const headerSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"header\"]');\n        const headerElements = headerSlot?.assignedElements({ flatten: true }) || [];\n        headerElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element allowed in the header slot.');\n            }\n\n            if (el.tagName !== 'H4') {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only H4 elements are allowed in the header slot.');\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"context-wrapper\">\n                <q2-item class=\"context-item\">\n                    {this.hasDecoratorSlotContent && (\n                        <slot\n                            name=\"decorator\"\n                            slot=\"bullet\"\n                        />\n                    )}\n                    <div\n                        class=\"context-body\"\n                        slot=\"body\"\n                    >\n                        <slot name=\"header\" />\n                        <slot name=\"description\" />\n                    </div>\n                    {this.hasAffordanceSlotContent && (\n                        <slot\n                            name=\"affordance\"\n                            slot=\"action\"\n                        />\n                    )}\n                </q2-item>\n                {this.separator && (\n                    <div\n                        class=\"separator\"\n                        role=\"separator\"\n                    />\n                )}\n                {this.hasActionGroupSlotContent && (\n                    <q2-action-group\n                        class=\"action-group\"\n                        orientation=\"horizontal\"\n                    >\n                        <slot name=\"action-group\" />\n                    </q2-action-group>\n                )}\n                {this.hasFooterSlotContent && <slot name=\"footer\" />}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"names":[],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["q2ContextCss","Q2Context","componentDidRender","this","handleActionGroupElements","handleAffordanceElement","handleDecoratorElement","handleHeaderElement","hasActionGroupSlotContent","hasSlotContent","hostElement","hasAffordanceSlotContent","hasDecoratorSlotContent","hasFooterSlotContent","window","actionGroupSlot","shadowRoot","querySelector","actionGroupElements","assignedElements","flatten","forEach","el","index","remove","console","warn","tagName","getAttribute","setAttribute","includes","affordanceSlot","affordanceElements","decoratorSlot","decoratorElements","headerSlot","headerElements","render","h","key","class","name","slot","separator","role","orientation"],"sources":["src/components/q2-context/q2-context.scss?tag=q2-context&encapsulation=shadow","src/components/q2-context/q2-context.tsx"],"sourcesContent":["@import '../../styles/functions';\n\n* {\n    box-sizing: border-box;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host {\n    display: block;\n    background: var-list(--tct-context-background, --t-tertiary, #e8f5fc);\n    box-shadow: var-list(--tct-context-box-shadow, none);\n    backdrop-filter: var-list(--tct-context-backdrop-filter, none);\n    border-radius: var-list(--tct-context-border-radius, --app-border-radius-2, 8px);\n    padding: var(--tct-context-padding, 10px);\n    width: var(--tct-context-width, 100%);\n    border-width: var-list(--tct-context-border-width, 0px);\n    border-style: var-list(--tct-context-border-style, solid);\n    border-color: var-list(--tct-context-border-color, transparent);\n}\n\n.context-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-context-gap, 10px);\n}\n\n.context-item {\n    --tct-item-bullet-padding-top: 0;\n    --tct-item-action-align-items: start;\n    --tct-item-action-icon-height: 24px;\n    --tct-item-action-icon-width: 24px;\n    --tct-item-action-icon-size: 24px;\n    --tct-item-avatar-height: 44px;\n    --tct-item-avatar-width: 44px;\n}\n\n.context-body {\n    slot:not(:first-child)::before {\n        content: ' ';\n    }\n\n    ::slotted(*) {\n        display: inline;\n    }\n}\n\n.separator {\n    margin: var(--tct-context-separator-margin, 0);\n    border-bottom: 1px solid var-list(--tct-context-separator-color, --t-gray-12, #d9d9d9);\n}\n\n.action-group {\n    --tct-action-group-margin: 0;\n}\n\n::slotted(q2-dropdown) {\n    // slotted affordance dropdown\n    --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);\n}\n\n::slotted(q2-link) {\n    // slotted action-group links\n    --tct-link-border-radius: var(--app-border-radius-1, 4px);\n    --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);\n    --tct-icon-stroke-secondary: var(--t-primary, #6a4a9e);\n}\n","import { hasSlotContent } from '@/utils';\nimport { Component, h, ComponentInterface, Element, Prop } from '@stencil/core';\n\n/**\n * @slot decorator - An optional slot that supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this as a visual aid for the context being provided.\n *\n * @slot header - A **required** slot that must be a single `<h4>` element. Use this to indicate the purpose or subject of the context being provided.\n *\n * @slot description - A **required** slot. Use this to provide the bulk of the context you wish to convey to the user.\n *\n * @slot affordance - An optional slot that supports either a [Button](https://tecton.q2developer.com/design-system/q2-btn/) or a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/).\n * Use this to provide an affordance such as a dismiss button, or a dropdown kebab menu for the user.\n *\n * @slot action-group - An optional slot that supports up to two elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group/).\n * Use this to provide the user with actions related to the context description.\n *\n * @slot footer - An optional slot to display additional HTML content.\n */\n@Component({ tag: 'q2-context', shadow: true, styleUrl: 'q2-context.scss' })\nexport class Q2Context implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Renders a horizontal line between the description and the action-group/footer slots. */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidRender(): void {\n        this.handleActionGroupElements();\n        this.handleAffordanceElement();\n        this.handleDecoratorElement();\n        this.handleHeaderElement();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasActionGroupSlotContent() {\n        return hasSlotContent(this.hostElement, 'action-group');\n    }\n\n    get hasAffordanceSlotContent() {\n        return hasSlotContent(this.hostElement, 'affordance');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    handleActionGroupElements() {\n        if (!('HTMLSlotElement' in window)) return;\n        const actionGroupSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action-group\"]');\n        const actionGroupElements = actionGroupSlot?.assignedElements({ flatten: true }) || [];\n        actionGroupElements.forEach((el: HTMLElement, index) => {\n            if (index > 1) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only two elements allowed in the action-group slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (el.getAttribute('size') !== 'small') {\n                    el.setAttribute('size', 'small');\n                    console.warn('Q2-CONTEXT: action-group slot buttons must be size=\"small\".');\n                }\n                if (!['neutral', 'workflow-escape'].includes(el.getAttribute('intent'))) {\n                    el.setAttribute('intent', 'neutral');\n                    console.warn(\n                        'Q2-CONTEXT: action-group slot buttons must have intent=\"neutral\" or intent=\"workflow-escape\".'\n                    );\n                }\n            }\n        });\n    }\n\n    handleAffordanceElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const affordanceSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"affordance\"]');\n        const affordanceElements = affordanceSlot?.assignedElements({ flatten: true }) || [];\n        affordanceElements.forEach((el: HTMLElement, index) => {\n            if (!['Q2-BTN', 'Q2-DROPDOWN'].includes(el.tagName) || index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one supported element is allowed in the affordance slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (!el.getAttribute('label')) el.setAttribute('label', 'Dismiss');\n                if (!el.getAttribute('hide-label')) el.setAttribute('hide-label', 'true');\n            }\n\n            if (el.tagName === 'Q2-DROPDOWN') {\n                if (el.getAttribute('type') !== 'icon') el.setAttribute('type', 'icon');\n                if (el.getAttribute('icon') !== 'options') el.setAttribute('icon', 'options');\n                if (el.getAttribute('popover-alignment') !== 'right') el.setAttribute('popover-alignment', 'right');\n            }\n        });\n    }\n\n    handleDecoratorElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const decoratorSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const decoratorElements = decoratorSlot?.assignedElements({ flatten: true }) || [];\n        decoratorElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element is allowed in the decorator slot.');\n                return;\n            }\n\n            if (!['Q2-ICON', 'Q2-AVATAR'].includes(el.tagName)) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only Q2-ICON or Q2-AVATAR are allowed in the decorator slot.');\n                return;\n            }\n        });\n    }\n\n    handleHeaderElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const headerSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"header\"]');\n        const headerElements = headerSlot?.assignedElements({ flatten: true }) || [];\n        headerElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element allowed in the header slot.');\n            }\n\n            if (el.tagName !== 'H4') {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only H4 elements are allowed in the header slot.');\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"context-wrapper\">\n                <q2-item class=\"context-item\">\n                    {this.hasDecoratorSlotContent && (\n                        <slot\n                            name=\"decorator\"\n                            slot=\"bullet\"\n                        />\n                    )}\n                    <div\n                        class=\"context-body\"\n                        slot=\"body\"\n                    >\n                        <slot name=\"header\" />\n                        <slot name=\"description\" />\n                    </div>\n                    {this.hasAffordanceSlotContent && (\n                        <slot\n                            name=\"affordance\"\n                            slot=\"action\"\n                        />\n                    )}\n                </q2-item>\n                {this.separator && (\n                    <div\n                        class=\"separator\"\n                        role=\"separator\"\n                    />\n                )}\n                {this.hasActionGroupSlotContent && (\n                    <q2-action-group\n                        class=\"action-group\"\n                        orientation=\"horizontal\"\n                    >\n                        <slot name=\"action-group\" />\n                    </q2-action-group>\n                )}\n                {this.hasFooterSlotContent && <slot name=\"footer\" />}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAe;;MCoBRC,IAAS;;;;;;EAgBlB,kBAAAC;IACIC,KAAKC;IACLD,KAAKE;IACLF,KAAKG;IACLH,KAAKI;;;;EAMT,6BAAIC;IACA,OAAOC,EAAeN,KAAKO,aAAa;;EAG5C,4BAAIC;IACA,OAAOF,EAAeN,KAAKO,aAAa;;EAG5C,2BAAIE;IACA,OAAOH,EAAeN,KAAKO,aAAa;;EAG5C,wBAAIG;IACA,OAAOJ,EAAeN,KAAKO,aAAa;;EAG5C,yBAAAN;IACI,MAAM,qBAAqBU,SAAS;IACpC,MAAMC,IAAmCZ,KAAKO,YAAYM,WAAWC,cAAc;IACnF,MAAMC,KAAsBH,MAAA,QAAAA,WAAe,aAAfA,EAAiBI,iBAAiB;MAAEC,SAAS;WAAW;IACpFF,EAAoBG,SAAQ,CAACC,GAAiBC;MAC1C,IAAIA,IAAQ,GAAG;QACXD,EAAGE;QACHC,QAAQC,KAAK;QACb;;MAGJ,IAAIJ,EAAGK,YAAY,UAAU;QACzB,IAAIL,EAAGM,aAAa,YAAY,SAAS;UACrCN,EAAGO,aAAa,QAAQ;UACxBJ,QAAQC,KAAK;;QAEjB,KAAK,EAAC,WAAW,oBAAmBI,SAASR,EAAGM,aAAa,YAAY;UACrEN,EAAGO,aAAa,UAAU;UAC1BJ,QAAQC,KACJ;;;;;EAOpB,uBAAArB;IACI,MAAM,qBAAqBS,SAAS;IACpC,MAAMiB,IAAkC5B,KAAKO,YAAYM,WAAWC,cAAc;IAClF,MAAMe,KAAqBD,MAAA,QAAAA,WAAc,aAAdA,EAAgBZ,iBAAiB;MAAEC,SAAS;WAAW;IAClFY,EAAmBX,SAAQ,CAACC,GAAiBC;MACzC,KAAK,EAAC,UAAU,gBAAeO,SAASR,EAAGK,YAAYJ,IAAQ,GAAG;QAC9DD,EAAGE;QACHC,QAAQC,KAAK;QACb;;MAGJ,IAAIJ,EAAGK,YAAY,UAAU;QACzB,KAAKL,EAAGM,aAAa,UAAUN,EAAGO,aAAa,SAAS;QACxD,KAAKP,EAAGM,aAAa,eAAeN,EAAGO,aAAa,cAAc;;MAGtE,IAAIP,EAAGK,YAAY,eAAe;QAC9B,IAAIL,EAAGM,aAAa,YAAY,QAAQN,EAAGO,aAAa,QAAQ;QAChE,IAAIP,EAAGM,aAAa,YAAY,WAAWN,EAAGO,aAAa,QAAQ;QACnE,IAAIP,EAAGM,aAAa,yBAAyB,SAASN,EAAGO,aAAa,qBAAqB;;;;EAKvG,sBAAAvB;IACI,MAAM,qBAAqBQ,SAAS;IACpC,MAAMmB,IAAiC9B,KAAKO,YAAYM,WAAWC,cAAc;IACjF,MAAMiB,KAAoBD,MAAA,QAAAA,WAAa,aAAbA,EAAed,iBAAiB;MAAEC,SAAS;WAAW;IAChFc,EAAkBb,SAAQ,CAACC,GAAiBC;MACxC,IAAIA,IAAQ,GAAG;QACXD,EAAGE;QACHC,QAAQC,KAAK;QACb;;MAGJ,KAAK,EAAC,WAAW,cAAaI,SAASR,EAAGK,UAAU;QAChDL,EAAGE;QACHC,QAAQC,KAAK;QACb;;;;EAKZ,mBAAAnB;IACI,MAAM,qBAAqBO,SAAS;IACpC,MAAMqB,IAA8BhC,KAAKO,YAAYM,WAAWC,cAAc;IAC9E,MAAMmB,KAAiBD,MAAA,QAAAA,WAAU,aAAVA,EAAYhB,iBAAiB;MAAEC,SAAS;WAAW;IAC1EgB,EAAef,SAAQ,CAACC,GAAiBC;MACrC,IAAIA,IAAQ,GAAG;QACXD,EAAGE;QACHC,QAAQC,KAAK;;MAGjB,IAAIJ,EAAGK,YAAY,MAAM;QACrBL,EAAGE;QACHC,QAAQC,KAAK;;;;;;EAQzB,MAAAW;IACI,OACIC,EAAA;MAAAC,KAAA;MAAKC,OAAM;OACPF,EAAS;MAAAC,KAAA;MAAAC,OAAM;OACVrC,KAAKS,2BACF0B,EACI;MAAAC,KAAA;MAAAE,MAAK;MACLC,MAAK;QAGbJ,EAAA;MAAAC,KAAA;MACIC,OAAM;MACNE,MAAK;OAELJ,EAAM;MAAAC,KAAA;MAAAE,MAAK;QACXH,EAAA;MAAAC,KAAA;MAAME,MAAK;SAEdtC,KAAKQ,4BACF2B,EAAA;MAAAC,KAAA;MACIE,MAAK;MACLC,MAAK;SAIhBvC,KAAKwC,aACFL,EACI;MAAAC,KAAA;MAAAC,OAAM;MACNI,MAAK;QAGZzC,KAAKK,6BACF8B,EAAA;MAAAC,KAAA;MACIC,OAAM;MACNK,aAAY;OAEZP,EAAA;MAAAC,KAAA;MAAME,MAAK;SAGlBtC,KAAKU,wBAAwByB,EAAM;MAAAC,KAAA;MAAAE,MAAK","ignoreList":[]}
+{"version":3,"names":["q2ContextCss","Q2Context","componentDidRender","this","handleActionGroupElements","handleAffordanceElement","handleDecoratorElement","handleHeaderElement","hasActionGroupSlotContent","hasSlotContent","hostElement","hasAffordanceSlotContent","hasDecoratorSlotContent","hasFooterSlotContent","window","actionGroupSlot","shadowRoot","querySelector","actionGroupElements","assignedElements","flatten","forEach","el","index","remove","console","warn","tagName","getAttribute","setAttribute","includes","affordanceSlot","affordanceElements","decoratorSlot","decoratorElements","headerSlot","headerElements","render","h","key","class","name","slot","separator","role","orientation"],"sources":["src/components/q2-context/q2-context.scss?tag=q2-context&encapsulation=shadow","src/components/q2-context/q2-context.tsx"],"sourcesContent":["@import '../../styles/functions';\n\n* {\n    box-sizing: border-box;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host {\n    display: block;\n    background: var-list(--tct-context-background, --t-tertiary, #e8f5fc);\n    box-shadow: var-list(--tct-context-box-shadow, none);\n    backdrop-filter: var-list(--tct-context-backdrop-filter, none);\n    border-radius: var-list(--tct-context-border-radius, --app-border-radius-2, 8px);\n    padding: var(--tct-context-padding, 10px);\n    width: var(--tct-context-width);\n    border-width: var-list(--tct-context-border-width, 0px);\n    border-style: var-list(--tct-context-border-style, solid);\n    border-color: var-list(--tct-context-border-color, transparent);\n}\n\n.context-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tct-context-gap, 10px);\n}\n\n.context-item {\n    --tct-item-bullet-padding-top: 0;\n    --tct-item-action-align-items: start;\n    --tct-item-action-icon-height: 24px;\n    --tct-item-action-icon-width: 24px;\n    --tct-item-action-icon-size: 24px;\n    --tct-item-avatar-height: 44px;\n    --tct-item-avatar-width: 44px;\n}\n\n.context-body {\n    slot:not(:first-child)::before {\n        content: ' ';\n    }\n\n    ::slotted(*) {\n        display: inline;\n    }\n}\n\n.separator {\n    margin: var(--tct-context-separator-margin, 0);\n    border-bottom: 1px solid var-list(--tct-context-separator-color, --t-gray-12, #d9d9d9);\n}\n\n.action-group {\n    --tct-action-group-margin: 0;\n}\n\n::slotted(q2-dropdown) {\n    // slotted affordance dropdown\n    --tct-btn-icon-border-radius: var(--app-border-radius-1, 4px);\n}\n\n::slotted(q2-link) {\n    // slotted action-group links\n    --tct-link-border-radius: var(--app-border-radius-1, 4px);\n    --tct-icon-stroke-primary: var(--t-primary, #6a4a9e);\n    --tct-icon-stroke-secondary: var(--t-primary, #6a4a9e);\n}\n","import { hasSlotContent } from '@/utils';\nimport { Component, h, ComponentInterface, Element, Prop } from '@stencil/core';\n\n/**\n * @slot decorator - An optional slot that supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).\n * Use this as a visual aid for the context being provided.\n *\n * @slot header - A **required** slot that must be a single `<h4>` element. Use this to indicate the purpose or subject of the context being provided.\n *\n * @slot description - A **required** slot. Use this to provide the bulk of the context you wish to convey to the user.\n *\n * @slot affordance - An optional slot that supports either a [Button](https://tecton.q2developer.com/design-system/q2-btn/) or a [Dropdown](https://tecton.q2developer.com/design-system/q2-dropdown/).\n * Use this to provide an affordance such as a dismiss button, or a dropdown kebab menu for the user.\n *\n * @slot action-group - An optional slot that supports up to two elements compatible with [Action Group](https://tecton.q2developer.com/design-system/q2-action-group/).\n * Use this to provide the user with actions related to the context description.\n *\n * @slot footer - An optional slot to display additional HTML content.\n */\n@Component({ tag: 'q2-context', shadow: true, styleUrl: 'q2-context.scss' })\nexport class Q2Context implements ComponentInterface {\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Renders a horizontal line between the description and the action-group/footer slots. */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentDidRender(): void {\n        this.handleActionGroupElements();\n        this.handleAffordanceElement();\n        this.handleDecoratorElement();\n        this.handleHeaderElement();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get hasActionGroupSlotContent() {\n        return hasSlotContent(this.hostElement, 'action-group');\n    }\n\n    get hasAffordanceSlotContent() {\n        return hasSlotContent(this.hostElement, 'affordance');\n    }\n\n    get hasDecoratorSlotContent() {\n        return hasSlotContent(this.hostElement, 'decorator');\n    }\n\n    get hasFooterSlotContent() {\n        return hasSlotContent(this.hostElement, 'footer');\n    }\n\n    handleActionGroupElements() {\n        if (!('HTMLSlotElement' in window)) return;\n        const actionGroupSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"action-group\"]');\n        const actionGroupElements = actionGroupSlot?.assignedElements({ flatten: true }) || [];\n        actionGroupElements.forEach((el: HTMLElement, index) => {\n            if (index > 1) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only two elements allowed in the action-group slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (el.getAttribute('size') !== 'small') {\n                    el.setAttribute('size', 'small');\n                    console.warn('Q2-CONTEXT: action-group slot buttons must be size=\"small\".');\n                }\n                if (!['neutral', 'workflow-escape'].includes(el.getAttribute('intent'))) {\n                    el.setAttribute('intent', 'neutral');\n                    console.warn(\n                        'Q2-CONTEXT: action-group slot buttons must have intent=\"neutral\" or intent=\"workflow-escape\".'\n                    );\n                }\n            }\n        });\n    }\n\n    handleAffordanceElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const affordanceSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"affordance\"]');\n        const affordanceElements = affordanceSlot?.assignedElements({ flatten: true }) || [];\n        affordanceElements.forEach((el: HTMLElement, index) => {\n            if (!['Q2-BTN', 'Q2-DROPDOWN'].includes(el.tagName) || index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one supported element is allowed in the affordance slot.');\n                return;\n            }\n\n            if (el.tagName === 'Q2-BTN') {\n                if (!el.getAttribute('label')) el.setAttribute('label', 'Dismiss');\n                if (!el.getAttribute('hide-label')) el.setAttribute('hide-label', 'true');\n            }\n\n            if (el.tagName === 'Q2-DROPDOWN') {\n                if (el.getAttribute('type') !== 'icon') el.setAttribute('type', 'icon');\n                if (el.getAttribute('icon') !== 'options') el.setAttribute('icon', 'options');\n                if (el.getAttribute('popover-alignment') !== 'right') el.setAttribute('popover-alignment', 'right');\n            }\n        });\n    }\n\n    handleDecoratorElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const decoratorSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"decorator\"]');\n        const decoratorElements = decoratorSlot?.assignedElements({ flatten: true }) || [];\n        decoratorElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element is allowed in the decorator slot.');\n                return;\n            }\n\n            if (!['Q2-ICON', 'Q2-AVATAR'].includes(el.tagName)) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only Q2-ICON or Q2-AVATAR are allowed in the decorator slot.');\n                return;\n            }\n        });\n    }\n\n    handleHeaderElement() {\n        if (!('HTMLSlotElement' in window)) return;\n        const headerSlot: HTMLSlotElement = this.hostElement.shadowRoot.querySelector('slot[name=\"header\"]');\n        const headerElements = headerSlot?.assignedElements({ flatten: true }) || [];\n        headerElements.forEach((el: HTMLElement, index) => {\n            if (index > 0) {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only one element allowed in the header slot.');\n            }\n\n            if (el.tagName !== 'H4') {\n                el.remove();\n                console.warn('Q2-CONTEXT: Only H4 elements are allowed in the header slot.');\n            }\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div class=\"context-wrapper\">\n                <q2-item class=\"context-item\">\n                    {this.hasDecoratorSlotContent && (\n                        <slot\n                            name=\"decorator\"\n                            slot=\"bullet\"\n                        />\n                    )}\n                    <div\n                        class=\"context-body\"\n                        slot=\"body\"\n                    >\n                        <slot name=\"header\" />\n                        <slot name=\"description\" />\n                    </div>\n                    {this.hasAffordanceSlotContent && (\n                        <slot\n                            name=\"affordance\"\n                            slot=\"action\"\n                        />\n                    )}\n                </q2-item>\n                {this.separator && (\n                    <div\n                        class=\"separator\"\n                        role=\"separator\"\n                    />\n                )}\n                {this.hasActionGroupSlotContent && (\n                    <q2-action-group\n                        class=\"action-group\"\n                        orientation=\"horizontal\"\n                    >\n                        <slot name=\"action-group\" />\n                    </q2-action-group>\n                )}\n                {this.hasFooterSlotContent && <slot name=\"footer\" />}\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import { r as t, c as e, h as a, F as r, g as o } from "./index-CGkHOjh1.js";
 
-import { b as l, l as n } from "./index-LNnzUeDP.js";
+import { a as l, l as n } from "./index-YJ5sXwiE.js";
 
 const d = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}.container{--comp-cell-padding:var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));--comp-select-column-width:var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));--comp-dropdown-column-width:var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));--comp-expandable-row-control-column-width:var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));overflow:auto;--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.container::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.container::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.container::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}:host([shadowed]:not([shadowed=false])) .container{box-shadow:var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))))}:host([density=compact]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)))}:host([density=comfortable]) .container{--comp-cell-padding:var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)))}table{table-layout:var(--tct-data-table-layout, var(--tct-table-layout, auto));border-collapse:collapse;border-spacing:0;width:var(--tct-data-table-width, var(--tct-table-width));min-width:100%;background:var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));backdrop-filter:var(--tct-data-table-backdrop-filter, none);caption-side:var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom))}thead{border-width:var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));border-style:var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));border-color:var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));background:var(--tct-data-table-header-background, var(--tct-table-header-background))}col.select-column{width:var(--comp-select-column-width)}col.expandable-row-control-column{width:var(--comp-expandable-row-control-column-width)}col.dropdown-column{width:var(--comp-dropdown-column-width)}:host(:is([bordered=vertical],[bordered=grid])) col{border-width:var(--tct-data-table-column-border-width, 0 1px 0 0);border-style:var(--tct-data-table-column-border-style, solid);border-color:var(--tct-data-table-column-border-color, var(--t-gray-9, #999999))}:host(:is([bordered=vertical],[bordered=grid])) col:last-child{border:none}td,th{padding:var(--comp-cell-padding);text-align:start;vertical-align:middle}td.align-end,th.align-end{text-align:end}td.align-center,th.align-center{text-align:center}td.vertical-align-top,th.vertical-align-top{vertical-align:top}td.vertical-align-bottom,th.vertical-align-bottom{vertical-align:bottom}th .header-content{font-weight:var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));font-size:var(--tct-data-table-header-font-size, var(--app-font-size, 14px))}th.sorted .header-content{font-weight:var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600))}th .sorted-indicator{--comp-header-sortable-icon-size:var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));--tct-icon-stroke-width:2;width:var(--comp-header-sortable-icon-size);height:var(--comp-header-sortable-icon-size)}th .sorted-indicator.direction-ASC{transform:rotate(180deg)}th q2-btn .header-content{display:flex;align-items:center;gap:var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)))}tr.expandable,tr.clickable{cursor:pointer}tr.expandable:focus,tr.clickable:focus{outline:none;box-shadow:none}tr.expandable{--tct-btn-icon-hover-background:transparent}tr.expandable:hover{background:var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2))}tr.striped-even{background:var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2))}tr.striped-even.expanded{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.striped-even.expandable:hover{background:var(--tct-data-table-expandable-row-even-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.striped-odd{background:var(--tct-data-table-row-odd-background, transparent)}tr.striped-odd.expanded{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}tr.striped-odd.expandable:hover{background:var(--tct-data-table-expandable-row-odd-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.clickable:hover{background:var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)))}tr.selected{background:var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}tr.expanded .toggle-expandable-row{transform:rotate(180deg)}:host(:is([bordered],[bordered=horizontal],[bordered=grid]):not([bordered=vertical],[bordered=false])) tbody tr{border-width:var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));border-style:var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));border-color:var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)))}tr.loading-row{background:var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)))}tr.loading-row td{text-align:center}tr.loading-row q2-loading{font-size:4em}tr.empty-state{background:var(--tct-data-table-loading-row-background, var(--t-base, #ffffff))}tr.empty-state td{text-align:center}tr.empty-state .empty-state-content{display:flex;flex-direction:column;align-items:center;padding-top:var(--app-scale-10x, 50px);padding-bottom:var(--app-scale-10x, 50px);gap:var(--app-scale-4x, 20px);--tct-icon-size:var(--app-scale-6x, 30px)}tr.expandable-row{background:var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)))}.striped-odd+tr.expandable-row{background:var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}.striped-even+tr.expandable-row{background:var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)))}td.clamped div{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--comp-line-clamp-count, 1);-webkit-box-orient:vertical}td.expandable-row-control-column{--tct-btn-icon-hover-bg:transparent;padding:var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));text-align:center}td.dropdown-column{padding:var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));text-align:center}td.click-column:not(.sr){padding:var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));text-align:center}caption{padding:var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));font-size:var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));font-weight:var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));text-align:var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));color:var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit))}q2-checkbox{padding:0}";