q2-tecton-elements 1.71.4 → 1.73.0

package/dist/cjs/q2-chart-area.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BqyWHpNu.js');
+var charting = require('./charting-CdNTrVBe.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-var charting = require('./charting-ClN1ldqv.js');
-var dataSample = require('./dataSample-BYR-wrOn.js');
+var dataSample = require('./dataSample-B4blhlH4.js');
 
 var Symbol = /** @class */function (_super) {
   charting.__extends(Symbol, _super);
@@ -3984,7 +3984,7 @@ function installUniversalTransition(registers) {
   });
 }
 
-const q2ChartAreaCss = () => `*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-area-chart-width, 100%);height:var(--tct-area-chart-height, 100%);display:block}.container{width:100%;height:100%}.chart-container{width:100%;height:100%}`;
+const q2ChartAreaCss = () => `*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-area-chart-width, 100%);height:var(--tct-area-chart-height, 100%);display:block}.container{position:relative;width:100%;height:100%}.chart-keyboard-value{position:absolute;top:0;right:0;padding:var(--app-scale-1x);background:var(--t-base);color:var(--t-text);pointer-events:none}.chart-container{width:100%;height:100%}`;
 
 charting.use([charting.install, install, charting.install$1, installUniversalTransition, dataSample.install, dataSample.install$1]);
 const Q2ChartArea = class {
@@ -3992,6 +3992,18 @@ const Q2ChartArea = class {
         index.registerInstance(this, hostRef);
         this.change = index.createEvent(this, "change", 7);
         this.tctChange = index.createEvent(this, "tctChange", 7);
+        this.keyboard = charting.createChartKeyboardNavigation({
+            getChart: () => this.chart,
+            getData: () => this.data,
+            onChange: index => {
+                this.keyboardIndex = index;
+                if (index !== null)
+                    mirrorEmit.mirrorEmit(this, ['change', 'tctChange'], { index, data: this.data[index] });
+            },
+        });
+        // #endregion
+        // #region State Properties
+        this.keyboardIndex = null;
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** Controls visibility of labels on the name axis. */
@@ -4021,6 +4033,7 @@ const Q2ChartArea = class {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        this.keyboard.onBlur();
         // CRITICAL: Dispose eCharts instance to prevent memory leaks
         // eCharts holds references to canvas, event listeners, and animation frames
         if (this.chart) {
@@ -4047,6 +4060,13 @@ const Q2ChartArea = class {
         index$1.overrideFocus(this.hostElement);
     }
     // #endregion
+    // #region Listeners
+    delegateFocus(event) {
+        var _a;
+        if (index$1.isEventFromElement(event, this.hostElement) && this.data.length)
+            (_a = this.chartContainer) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // #endregion
     // #region Public Methods API
     /**
      * A method to fire change event on hover on a point.
@@ -4065,9 +4085,18 @@ const Q2ChartArea = class {
         if (!this.chart)
             return;
         this.updateChart(this.chart);
+        this.keyboard.refresh();
     }
     // #endregion
     // #region Local Methods
+    get keyboardDescription() {
+        var _a;
+        const datum = this.data[this.keyboardIndex];
+        if (this.keyboardIndex === null || !datum)
+            return '';
+        const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+        return charting.chartPointDescription(datum.name, charting.formatValue(datum.value || 0, { type: this.format, decimals }), this.keyboardIndex, this.data.length);
+    }
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
         this.hostElementStyles = getComputedStyle(this.hostElement);
@@ -4117,7 +4146,7 @@ const Q2ChartArea = class {
         });
     }
     updateChart(chart) {
-        var _a;
+        var _a, _b;
         const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
         const valueAxis = {
             type: 'value',
@@ -4180,7 +4209,7 @@ const Q2ChartArea = class {
             min: this.xMin,
             max: this.xMax,
         };
-        return chart.setOption({
+        chart.setOption({
             aria: {
                 enabled: true,
             },
@@ -4225,11 +4254,13 @@ const Q2ChartArea = class {
                 },
             ],
         });
+        // ECharts ARIA sets role="img" when options change; retain the keyboard interaction role.
+        (_b = this.chartContainer) === null || _b === void 0 ? void 0 : _b.setAttribute('role', 'application');
     }
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '247b79eca7719feab470918648f223675483daf8', class: "container" }, index.h("div", { key: '349272c0ece24581f05dcadb81d7a19dd71eaa2d', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (index.h("div", { key: 'de38ac1c05ff6c85091069a691c5e2d51ba360ed', class: "container" }, index.h("div", { key: 'e45310470e9429714bd15100d01692b102963545', ref: el => (this.chartContainer = el), class: "chart-container", role: "application", tabIndex: this.data.length ? 0 : -1, "aria-describedby": "chart-keyboard-instructions", onFocus: this.keyboard.onFocus, onBlur: this.keyboard.onBlur, onKeyDown: this.keyboard.onKeyDown, "test-id": "areaChartContainer" }), index.h("div", { key: '45493b2498b17ab331fdff4487bd05874732c75e', id: "chart-keyboard-instructions", class: "sr" }, index$1.loc('tecton.element.chart.keyboardInstructions')), index.h("div", { key: '9d0a71f228271efde15c7ff4e0bae2a1144a8c9c', class: this.keyboardIndex === null ? 'sr' : 'chart-keyboard-value', role: "status", "aria-atomic": "true" }, this.keyboardDescription)));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-chart-bar.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
-var charting = require('./charting-ClN1ldqv.js');
-var dataSample = require('./dataSample-BYR-wrOn.js');
-var sectorHelper = require('./sectorHelper-9TWL-3dw.js');
+var index$1 = require('./index-BqyWHpNu.js');
+var charting = require('./charting-CdNTrVBe.js');
+var dataSample = require('./dataSample-B4blhlH4.js');
+var sectorHelper = require('./sectorHelper-CxhDl5ql.js');
 
 var BaseBarSeriesModel = /** @class */function (_super) {
   charting.__extends(BaseBarSeriesModel, _super);
@@ -1255,12 +1255,24 @@ function install(registers) {
   });
 }
 
-const q2ChartBarCss = () => `*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-bar-chart-width, 100%);height:var(--tct-bar-chart-height, 100%);display:block}.container{width:100%;height:100%}.chart-container{width:100%;height:100%}`;
+const q2ChartBarCss = () => `*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{width:var(--tct-bar-chart-width, 100%);height:var(--tct-bar-chart-height, 100%);display:block}.container{position:relative;width:100%;height:100%}.chart-keyboard-value{position:absolute;top:0;right:0;padding:var(--app-scale-1x);background:var(--t-base);color:var(--t-text);pointer-events:none}.chart-container{width:100%;height:100%}`;
 
 charting.use([charting.install, install, charting.install$1, sectorHelper.installLabelLayout, dataSample.install, dataSample.install$1]);
 const Q2ChartBar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.keyboard = charting.createChartKeyboardNavigation({
+            getChart: () => this.chart,
+            getData: () => this.data,
+            onChange: index => (this.keyboardIndex = index),
+            getOrder: () => {
+                const indices = this.data.map((_, index) => index);
+                return this.sort ? indices.sort((a, b) => this.data[b].value - this.data[a].value) : indices;
+            },
+        });
+        // #endregion
+        // #region State Properties
+        this.keyboardIndex = null;
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** Controls visibility of labels on the name axis. */
@@ -1288,6 +1300,7 @@ const Q2ChartBar = class {
     // #endregion
     // #region Component Lifecycle Events
     disconnectedCallback() {
+        this.keyboard.onBlur();
         // Remove event listeners
         window.removeEventListener('resize', this.resizeEventListener);
         // Clean up chart instance
@@ -1317,14 +1330,30 @@ const Q2ChartBar = class {
         index$1.overrideFocus(this.hostElement);
     }
     // #endregion
+    // #region Listeners
+    delegateFocus(event) {
+        var _a;
+        if (index$1.isEventFromElement(event, this.hostElement) && this.data.length)
+            (_a = this.chartContainer) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // #endregion
     // #region Watchers
     propsUpdates() {
         if (!this.chart)
             return;
         this.updateChart(this.chart);
+        this.keyboard.refresh();
     }
     // #endregion
     // #region Local Methods
+    get keyboardDescription() {
+        var _a;
+        const datum = this.data[this.keyboardIndex];
+        if (this.keyboardIndex === null || !datum)
+            return '';
+        const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+        return charting.chartPointDescription(datum.name, charting.formatValue(datum.value || 0, { type: this.format, decimals }), this.sort ? [...this.data].sort((a, b) => b.value - a.value).indexOf(datum) : this.keyboardIndex, this.data.length);
+    }
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
         this.hostElementStyles = getComputedStyle(this.hostElement);
@@ -1367,7 +1396,7 @@ const Q2ChartBar = class {
         chart.on('finished', this.chartFinishedListener);
     }
     updateChart(chart) {
-        var _a;
+        var _a, _b;
         const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
         const valueAxis = {
             type: 'value',
@@ -1396,7 +1425,7 @@ const Q2ChartBar = class {
                 alignWithLabel: this.offsetDataNames,
             },
         };
-        return chart.setOption({
+        chart.setOption({
             aria: {
                 enabled: true,
             },
@@ -1432,11 +1461,13 @@ const Q2ChartBar = class {
                 },
             ],
         });
+        // ECharts ARIA sets role="img" when options change; retain the keyboard interaction role.
+        (_b = this.chartContainer) === null || _b === void 0 ? void 0 : _b.setAttribute('role', 'application');
     }
     // #endregion
     // #region Render Methods
     render() {
-        return (index.h("div", { key: '36a77a29d5e06363f2cd2267c298429cd2ef9864', class: "container" }, index.h("div", { key: 'e7382ecf3ed8323ffbf1c57a78c870d7d7c4b718', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (index.h("div", { key: '2764d138c5aee7d65df3361a7d4720e00ba13368', class: "container" }, index.h("div", { key: '864b3f1d5987a101ab008e37e99c874cc411c143', ref: el => (this.chartContainer = el), class: "chart-container", role: "application", tabIndex: this.data.length ? 0 : -1, "aria-describedby": "chart-keyboard-instructions", onFocus: this.keyboard.onFocus, onBlur: this.keyboard.onBlur, onKeyDown: this.keyboard.onKeyDown, "test-id": "barChartContainer" }), index.h("div", { key: '3b6aa42b27e86f75cd4d1fc3d2efe823b950864c', id: "chart-keyboard-instructions", class: "sr" }, index$1.loc('tecton.element.chart.keyboardInstructions')), index.h("div", { key: '5d216b8ccce18ea77f136fd43ab81db335b38d89', class: this.keyboardIndex === null ? 'sr' : 'chart-keyboard-value', role: "status", "aria-atomic": "true" }, this.keyboardDescription)));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-chart-donut.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-var charting = require('./charting-ClN1ldqv.js');
-var sectorHelper = require('./sectorHelper-9TWL-3dw.js');
+var charting = require('./charting-CdNTrVBe.js');
+var sectorHelper = require('./sectorHelper-CxhDl5ql.js');
 
 function makeBackground(rect, componentModel) {
   var padding = charting.normalizeCssArray(componentModel.get('padding'));
@@ -4048,6 +4048,7 @@ const Q2ChartDonut = class {
         this.tctChange = index.createEvent(this, "tctChange", 7);
         this.tctClick = index.createEvent(this, "tctClick", 7);
         this.defaultRecord = { id: null, value: null, name: null };
+        this.keyboardAnnouncement = '';
         /** An array of objects that contain the data to be displayed. */
         this.data = [];
         /** The amount which the slice will scale when hovered. */
@@ -4087,6 +4088,8 @@ const Q2ChartDonut = class {
         };
         this.onButtonKeyDown = (event) => {
             const { selectedId, data } = this;
+            if (!data.length || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+                return;
             let selectedIndex = this.getIndexById(selectedId) || 0;
             switch (event.key) {
                 case 'ArrowUp':
@@ -4116,14 +4119,23 @@ const Q2ChartDonut = class {
                     });
                     break;
                 case 'Escape':
+                    event.preventDefault();
                     this.clearSelection();
-                    break;
-                case ' ':
+                    this.keyboardAnnouncement = index$1.loc(this.summaryName || 'tecton.element.chartDonut.button.summaryName');
+                    return;
+                case 'Home':
+                case 'End':
                     event.preventDefault();
+                    selectedIndex = event.key === 'Home' ? 0 : data.length - 1;
+                    this.chart.dispatchAction({ type: 'select', seriesId: 'pie', dataIndex: selectedIndex });
                     break;
                 default:
                     return;
             }
+            if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+                const datum = data[selectedIndex];
+                this.keyboardAnnouncement = charting.chartPointDescription(datum.name, this.displayValue(datum.value), selectedIndex, data.length);
+            }
         };
         this.onClickElsewhere = (event) => {
             event.stopPropagation();
@@ -4223,12 +4235,13 @@ const Q2ChartDonut = class {
     // #endregion
     // #region Listeners
     delegateFocus(event) {
-        var _a;
+        var _a, _b;
         if (!index$1.isEventFromElement(event, this.hostElement))
             return;
-        if (!this.isClickable)
-            return;
-        (_a = this.centerButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+        if (this.isClickable)
+            (_a = this.centerButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+        else if (this.data.length)
+            (_b = this.chartContainer) === null || _b === void 0 ? void 0 : _b.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -4299,6 +4312,7 @@ const Q2ChartDonut = class {
         this.updateChart(this.chart);
     }
     dataUpdated() {
+        this.keyboardAnnouncement = '';
         if (!this.chart)
             return;
         this.colors = this.getColors();
@@ -4474,8 +4488,9 @@ const Q2ChartDonut = class {
         });
     }
     updateChart(chart) {
+        var _a;
         this.validateColor();
-        return chart.setOption({
+        chart.setOption({
             tooltip: {
                 show: false,
             },
@@ -4517,6 +4532,8 @@ const Q2ChartDonut = class {
                 },
             ],
         });
+        // The clickable variant handles keyboard interaction on its native center button.
+        (_a = this.chartContainer) === null || _a === void 0 ? void 0 : _a.setAttribute('role', this.isClickable ? 'img' : 'application');
     }
     validateColor() {
         // check if there is name duplicated, then custom style using `itemStyle` object will be used.
@@ -4540,20 +4557,21 @@ const Q2ChartDonut = class {
         const props = isClickable
             ? {
                 onKeyDown: this.onButtonKeyDown,
+                onBlur: () => (this.keyboardAnnouncement = ''),
                 onClick: this.onButtonClick,
                 ref: el => (this.centerButtonElement = el),
-                'aria-describedby': 'center-card-description',
+                'aria-describedby': 'center-card-description chart-keyboard-instructions',
                 'aria-roledescription': index$1.loc('tecton.element.chartDonut.button.roleDescription'),
             }
             : null;
-        return (index.h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius})`, height: `calc(${this.innerRadius})` } }, index.h("div", { id: "center-card-description", class: "sr" }, index$1.loc('tecton.element.chartDonut.button.description')), index.h(TagName, { class: "center-card", "test-id": "centerCard", ...props }, !!icon && (index.h("q2-icon", { type: icon, style: color && {
+        return (index.h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius})`, height: `calc(${this.innerRadius})` } }, index.h("div", { id: "center-card-description", class: "sr" }, index$1.loc('tecton.element.chartDonut.button.description')), index.h("div", { id: "chart-keyboard-instructions", class: "sr" }, index$1.loc('tecton.element.chart.keyboardInstructions')), index.h(TagName, { class: "center-card", "test-id": "centerCard", ...props }, !!icon && (index.h("q2-icon", { type: icon, style: color && {
                 '--tct-icon-stroke-primary': color,
                 '--tct-icon-stroke-secondary': color,
                 color,
             } })), !!name && index.h("div", { class: "name" }, name), !isNaN(value) && index.h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: '27c21f281ef0746c9bd9d7235fa1833df7711e4d', onChange: this.onClickElsewhere }, index.h("figure", { key: '8356a94846a4319b682e3bc3171e6a71afb228f8' }, index.h("div", { key: 'a6b016aaa11371fdff673eb8cd7508bb5f3ce852', class: "container" }, index.h("div", { key: '862baeb8b1c1e096c92d260bc7340666875f9763', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (index.h("figcaption", { key: '24f16b0d7afd3a6433c58cd8eb6806785fc938e5' }, index.h("q2-legend", { key: '6bd27b69926b77181ab16726bb4e79c91e4dcc37', class: "legend", data: this.legendData, format: this.format, currencyRound: this.currencyRound, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (index.h("click-elsewhere", { key: '54e5d16621ac527fec69834b2c1cc1e7d2c6540b', onChange: this.onClickElsewhere }, index.h("figure", { key: '61e0c1e30fed4e89816d228c1c190b5bd38991a3' }, index.h("div", { key: '0685b804780ebdf17d7bfe5956306a027c3c9dba', class: "container" }, index.h("div", { key: '458dfa5c6ad8d704de66d4d51461e2d7b28ba13c', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description chart-keyboard-instructions' : undefined, class: "chart-container", role: this.isClickable ? 'img' : 'application', "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable && this.data.length ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined, onBlur: () => (this.keyboardAnnouncement = '') }), this.renderCenterBlock(), index.h("div", { key: '105396c05b8aa162b1c0515cb4b96dadafcca911', class: "sr", role: "status", "aria-atomic": "true" }, this.keyboardAnnouncement)), this.showLegend && (index.h("figcaption", { key: 'c6462ae033852ff7fa09d752e4fc8860608448c6' }, index.h("q2-legend", { key: 'd8f1ceb9b46392264b306d316d1fb6066b2f5b4d', class: "legend", data: this.legendData, format: this.format, currencyRound: this.currencyRound, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,11 +1,11 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var component = require('./component-iASoq6gx.js');
 
-const q2CheckboxGroupCss = () => `*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-checkbox-group-label-font-color, inherit);font-size:var(--tct-checkbox-group-label-font-size, inherit);font-weight:var(--tct-checkbox-group-label-font-weight, 600);text-transform:var(--tct-checkbox-group-label-text-transform, none);letter-spacing:var(--tct-checkbox-group-label-letter-spacing, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{--comp-default-container-margin:var(--app-scale-1x, 5px) 0;margin:var(--tct-checkbox-group-container-margin, var(--comp-default-container-margin));padding:var(--tct-checkbox-group-container-padding, var(--app-scale-1x, 5px));border-width:var(--tct-checkbox-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, var(--const-px-12, 12px));font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}`;
+const q2CheckboxGroupCss = () => `*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-checkbox-group-margin:var(--tct-checkbox-group-margin-top, var(--t-checkbox-group-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-checkbox-group-margin-bottom, var(--t-checkbox-group-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-checkbox-group-margin, var(--comp-default-checkbox-group-margin))}fieldset{padding:var(--tct-checkbox-group-fieldset-padding, 0);margin:0;border:0;position:relative}.label-row{display:grid;grid-template-columns:1fr 24px;grid-template-areas:"label icon";column-gap:var(--tct-checkbox-group-label-column-gap, var(--app-scale-2x, 10px));color:var(--tct-checkbox-group-label-font-color, inherit);font-size:var(--tct-checkbox-group-label-font-size, inherit);font-weight:var(--tct-checkbox-group-label-font-weight, 600);text-transform:var(--tct-checkbox-group-label-text-transform, none);letter-spacing:var(--tct-checkbox-group-label-letter-spacing, inherit);line-height:var(--tct-checkbox-group-label-line-height, inherit)}.label-row q2-icon{grid-area:icon;margin-top:-2px;margin-bottom:-2px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.slot-container{--comp-default-container-margin:var(--app-scale-1x, 5px) 0;margin:var(--tct-checkbox-group-container-margin, var(--comp-default-container-margin));padding:var(--tct-checkbox-group-container-padding, var(--app-scale-1x, 5px));border-width:var(--tct-checkbox-group-border-width, 1px);border-color:transparent;border-style:solid;border-radius:var(--tct-checkbox-group-border-radius, var(--app-border-radius-1, 4px))}:host([has-error]) .slot-container{border-color:var(--tct-checkbox-group-error-border-color, var(--const-stoplight-alert, #d20a0a))}:host([has-error=false]) .slot-container{border-color:transparent}.optional-tag{margin-left:var(--tct-checkbox-group-label-optional-margin-left, var(--app-scale-1x, 5px));color:var(--tct-checkbox-group-label-optional-color, var(--t-checkbox-group-label-optional-color, var(--tct-a11y-color, var(--t-a11y-color, var(--tct-a11y-gray-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--t-gray-d1, var(--app-gray-d1, rgba(77, 77, 77, 0.77))))))))))));font-size:var(--tct-checkbox-group-label-optional-font-size, var(--const-px-12, 12px));font-weight:var(--tct-checkbox-group-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}`;
 
 const Q2CheckboxGroup = class {
     constructor(hostRef) {
@@ -122,7 +122,7 @@ const Q2CheckboxGroup = class {
     render() {
         const showLabel = this.label || this.optional || this.readonly;
         const showLabelRow = (showLabel && !this.hideLabel) || this.hasError;
-        return (index.h(index.Fragment, { key: '4e9159cc489b8c2ed9adf3c8263355994364780e' }, showLabelRow && (index.h("div", { key: '85c21ddc03d2abaf4e78b1922dcf3705ec673fc9', class: "label-row" }, showLabel && !this.hideLabel && index.h("div", { key: '071eb3359b048a5e7f89f7c525362e065707a8fe', class: "group-legend" }, index$1.renderLabel(this)), this.hasError && (index.h("q2-icon", { key: '76a591fb52671d43351322faa488608128320183', type: "error", "test-id": "iconError" })))), index.h("fieldset", { key: '0bcc9a5419df7ab0bf2abfc6189983e6cf5bd779', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && index.h("legend", { key: 'c6a5f3ec8289091b6d113a36d2fed9b83a5c7088', class: "sr-only" }, index$1.renderLabel(this)), this.inputDom())));
+        return (index.h(index.Fragment, { key: 'ed664b9829dbea3e8e6fe3809dd2528a2a37b011' }, showLabelRow && (index.h("div", { key: '101b950b7aacfbc6dab450ad2c13a7a86af40936', class: "label-row" }, showLabel && !this.hideLabel && index.h("div", { key: '70330c12aefedf7f7b7f7cbe4e0a745cca667181', class: "group-legend" }, index$1.renderLabel(this)), this.hasError && (index.h("q2-icon", { key: '31eb9fac43cbf80696276c7d96945a3f267610d3', type: "error", "test-id": "iconError" })))), index.h("fieldset", { key: '200264b3fb882445dc5610155e28b137e2334ad2', onChange: this.onInnerCheckboxChange, "aria-invalid": this.hasError ? `${this.hasError}` : undefined }, showLabel && index.h("legend", { key: 'ef85eb7ca6ef53496a5fc7d0198f03d3a8fb129e', class: "sr-only" }, index$1.renderLabel(this)), this.inputDom())));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/q2-checkbox_2.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var index$1 = require('./index-SpDCZABA.js');
+var index$1 = require('./index-BqyWHpNu.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
 var actionSheet = require('./action-sheet-DUBlF_x3.js');
 
-const q2CheckboxCss = () => `*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}: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-label-line-height:var(--tct-checkbox-label-line-height, var(--const-px-24, 24px));--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-track-fill:var(--tct-checkbox-toggle-track-fill, var(--tct-checkbox-toggle-track-color, transparent));--comp-checkbox-toggle-track-fill-active:var(--tct-checkbox-toggle-active-track-fill, var(--tct-checkbox-toggle-active-track-color, var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))));--comp-checkbox-toggle-track-fill-hover:var(--tct-checkbox-toggle-hover-track-fill, var(--tct-checkbox-toggle-hover-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error:var(--tct-checkbox-toggle-error-track-fill, var(--tct-checkbox-toggle-error-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error-hover:var(--tct-checkbox-toggle-error-hover-track-fill, var(--tct-checkbox-toggle-error-hover-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-track-fill-error-active:var(--tct-checkbox-toggle-error-active-track-fill, var(--tct-checkbox-toggle-error-active-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-control-height:var(--comp-checkbox-size);--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-fill-color:var(--tct-checkbox-checked-fill-color, var(--t-primary, #040404));--comp-checkbox-checked-color:var(--tct-checkbox-checked-stroke-color, var(--tct-white, var(--app-white, #FFFFFF)));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--comp-checkbox-bold-fallback-stroke-width:var(--tct-checkbox-bold-fallback-stroke-width, 0.7px);--comp-checkbox-stroke-width:var(--tct-checkbox-stroke-width, unset);--comp-checkbox-checked-stroke-width:var(--tct-checkbox-checked-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-hover-stroke-width:var(--tct-checkbox-hover-stroke-width, unset);--comp-checkbox-focused-stroke-width:var(--tct-checkbox-focused-stroke-width, unset);--comp-checkbox-checked-hover-stroke-width:var(--tct-checkbox-checked-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-checked-focused-stroke-width:var(--tct-checkbox-checked-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-stroke-width:var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-focused-stroke-width:var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-hover-stroke-width:var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-toggle-circle-fill-active:var(--tct-checkbox-toggle-active-fill, var(--tct-checkbox-toggle-active-color, var(--comp-checkbox-toggle-color)));display:grid;grid-template-areas:"svg label";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))}.container.has-description{grid-template-areas:"svg label" ". description";align-items:start}.container.has-multiline-label{align-items:start}.container.has-description .label-control,.container.has-multiline-label .label-control{margin-top:calc((var(--comp-checkbox-label-line-height) - var(--comp-control-height)) / 2)}: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);--comp-control-height:30px}:host([align=right]) .container,:host([alignment=right]) .container,:host([type=toggle]:not([align]):not([alignment])) .container{grid-template-areas:"label svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}:host([align=right]) .container.has-description,:host([alignment=right]) .container.has-description,:host([type=toggle]:not([align]):not([alignment])) .container.has-description{grid-template-areas:"label svg" "description ."}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-stroke-width);text-stroke-width:var(--comp-checkbox-description-stroke-width)}:host([checked]:not([checked=false])) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-stroke-width);text-stroke-width:var(--comp-checkbox-checked-stroke-width)}:host(:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-hover-stroke-width);text-stroke-width:var(--comp-checkbox-hover-stroke-width)}:host(:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-focused-stroke-width);text-stroke-width:var(--comp-checkbox-focused-stroke-width)}:host([description]:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-hover-stroke-width);text-stroke-width:var(--comp-checkbox-description-hover-stroke-width)}:host([checked]:not([checked=false]):hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width);text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width)}:host([description]:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-focused-stroke-width);text-stroke-width:var(--comp-checkbox-description-focused-stroke-width)}:host([checked]:not([checked=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width);text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width)}:host(:active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-active-stroke-width, unset)}:host([checked]:not([checked=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset)}:host([has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset)}:host([has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset)}:host([has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset)}.label-text label{line-height:var(--comp-checkbox-label-line-height)}.label-text label .label-content{display:inline;font-size:var(--tct-checkbox-label-font-size, inherit)}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0;box-shadow:var(--tct-checkbox-box-shadow)}.checkbox-icon rect{transition:fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));box-shadow:var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow))}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host([has-error]:not([has-error=false]):not([type=favorite])[checked]:not([checked=false])) .checkbox-icon rect{fill:var(--tct-checkbox-error-checked-outer-fill-color)}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon{stroke:var(--comp-checkbox-checked-fill-color, var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color))))}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));box-shadow:var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))}:host(:hover:not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-focused-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host(:focus-within[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow))))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]:not([has-error=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error]:not([has-error=false])[type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{fill:none;stroke:var(--comp-checkbox-checked-color);stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-fill{stroke:var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);stroke-width:var(--tct-checkbox-error-checkmark-stroke-width, 2.5)}.checked-fill{stroke-dasharray:16;stroke-dashoffset:16;animation-name:draw-checkmark;animation-duration:var(--tct-checkbox-animation-duration, var(--t-tween-time-in-4, 300ms));animation-timing-function:var(--tct-checkbox-animation-timing-function, ease-out);animation-fill-mode:var(--tct-checkbox-animation-fill-mode, forwards)}@keyframes draw-checkmark{to{stroke-dashoffset:0}}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{--comp-default-track-box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);height:24px;width:38px;fill:var(--comp-checkbox-toggle-track-fill);border-radius:var(--app-border-radius-3, 12px);box-shadow:var(--tct-checkbox-toggle-track-box-shadow, var(--comp-default-track-box-shadow));transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{--comp-default-hover-track-box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color);box-shadow:var(--tct-checkbox-toggle-hover-track-box-shadow, var(--comp-default-hover-track-box-shadow));fill:var(--comp-checkbox-toggle-track-fill-hover)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--comp-checkbox-toggle-track-fill-active)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--comp-checkbox-toggle-circle-fill-active)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error-hover)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--comp-checkbox-toggle-track-fill-error-active)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-error-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset)}:host([checked]:not([checked=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-label-hover-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-label-active-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-error-label-hover-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-error-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-error-label-active-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset)}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}`;
+const q2CheckboxCss = () => `*{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}: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-label-line-height:var(--tct-checkbox-label-line-height, var(--const-px-24, 24px));--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 38px));--comp-checkbox-toggle-track-fill:var(--tct-checkbox-toggle-track-fill, var(--tct-checkbox-toggle-track-color, transparent));--comp-checkbox-toggle-track-fill-active:var(--tct-checkbox-toggle-active-track-fill, var(--tct-checkbox-toggle-active-track-color, var(--tct-checkbox-toggle-active-color, var(--t-primary-l1, #7755af))));--comp-checkbox-toggle-track-fill-hover:var(--tct-checkbox-toggle-hover-track-fill, var(--tct-checkbox-toggle-hover-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error:var(--tct-checkbox-toggle-error-track-fill, var(--tct-checkbox-toggle-error-track-color, var(--comp-checkbox-toggle-track-fill)));--comp-checkbox-toggle-track-fill-error-hover:var(--tct-checkbox-toggle-error-hover-track-fill, var(--tct-checkbox-toggle-error-hover-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-track-fill-error-active:var(--tct-checkbox-toggle-error-active-track-fill, var(--tct-checkbox-toggle-error-active-track-color, var(--comp-checkbox-toggle-track-fill-error)));--comp-checkbox-toggle-error-color:var(--tct-checkbox-toggle-error-color, var(--comp-checkbox-error-color));--comp-checkbox-toggle-color:var(--tct-checkbox-toggle-color, var(--t-gray-8, #808080));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-control-height:var(--comp-checkbox-size);--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-fill-color:var(--tct-checkbox-checked-fill-color, var(--t-primary, #040404));--comp-checkbox-checked-color:var(--tct-checkbox-checked-stroke-color, var(--tct-white, var(--app-white, #FFFFFF)));--comp-control-width:var(--comp-checkbox-size);--comp-checkbox-error-color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--comp-checkbox-bold-fallback-stroke-width:var(--tct-checkbox-bold-fallback-stroke-width, 0.7px);--comp-checkbox-stroke-width:var(--tct-checkbox-stroke-width, unset);--comp-checkbox-checked-stroke-width:var(--tct-checkbox-checked-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-hover-stroke-width:var(--tct-checkbox-hover-stroke-width, unset);--comp-checkbox-focused-stroke-width:var(--tct-checkbox-focused-stroke-width, unset);--comp-checkbox-checked-hover-stroke-width:var(--tct-checkbox-checked-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-checked-focused-stroke-width:var(--tct-checkbox-checked-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-stroke-width:var(--tct-checkbox-description-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-focused-stroke-width:var(--tct-checkbox-description-focused-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-description-hover-stroke-width:var(--tct-checkbox-description-hover-stroke-width, var(--comp-checkbox-bold-fallback-stroke-width));--comp-checkbox-toggle-circle-fill-active:var(--tct-checkbox-toggle-active-fill, var(--tct-checkbox-toggle-active-color, var(--comp-checkbox-toggle-color)));display:grid;grid-template-areas:"svg label";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))}.container.has-description{grid-template-areas:"svg label" ". description";align-items:start}.container.has-multiline-label{align-items:start}.container.has-description .label-control,.container.has-multiline-label .label-control{margin-top:calc((var(--comp-checkbox-label-line-height) - var(--comp-control-height)) / 2)}: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);--comp-control-height:30px}:host([align=right]) .container,:host([alignment=right]) .container,:host([type=toggle]:not([align]):not([alignment])) .container{grid-template-areas:"label svg";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}:host([align=right]) .container.has-description,:host([alignment=right]) .container.has-description,:host([type=toggle]:not([align]):not([alignment])) .container.has-description{grid-template-areas:"label svg" "description ."}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-stroke-width);text-stroke-width:var(--comp-checkbox-description-stroke-width)}:host([checked]:not([checked=false])) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-stroke-width);text-stroke-width:var(--comp-checkbox-checked-stroke-width)}:host(:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-hover-stroke-width);text-stroke-width:var(--comp-checkbox-hover-stroke-width)}:host(:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-focused-stroke-width);text-stroke-width:var(--comp-checkbox-focused-stroke-width)}:host([description]:hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-hover-stroke-width);text-stroke-width:var(--comp-checkbox-description-hover-stroke-width)}:host([checked]:not([checked=false]):hover) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width);text-stroke-width:var(--comp-checkbox-checked-hover-stroke-width)}:host([description]:focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-description-focused-stroke-width);text-stroke-width:var(--comp-checkbox-description-focused-stroke-width)}:host([checked]:not([checked=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width);text-stroke-width:var(--comp-checkbox-checked-focused-stroke-width)}:host(:active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-active-stroke-width, unset)}:host([checked]:not([checked=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-active-stroke-width, unset)}:host([has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-hover-stroke-width, unset)}:host([has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-focused-stroke-width, unset)}:host([has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-active-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):hover) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-hover-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):focus-within) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-focused-stroke-width, unset)}:host([checked]:not([checked=false])[has-error]:not([has-error=false]):active) .label-text{-webkit-text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-active-stroke-width, unset)}.label-text label{line-height:var(--comp-checkbox-label-line-height)}.label-text label .label-content{display:inline;font-size:var(--tct-checkbox-label-font-size, inherit)}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}:host(:hover) .description-text{font-weight:var(--tct-checkbox-hover-description-font-weight, var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400)))}label{color:var(--tct-checkbox-label-color);cursor:pointer;hyphens:var(--tct-checkbox-label-hyphens, auto);word-break:var(--tct-checkbox-label-word-break, break-word);word-wrap:var(--tct-checkbox-label-word-wrap, break-word)}.checkbox-icon{width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));stroke:var(--comp-checkbox-outer-stroke-color);fill:var(--comp-checkbox-outer-fill-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));flex-shrink:0;box-shadow:var(--tct-checkbox-box-shadow)}.checkbox-icon rect{transition:fill var(--tct-checkbox-tween, var(--app-tween-2, 0.4s ease))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-checked-fill-color, var(--comp-checkbox-outer-stroke-color))))}:host([checked]:not([checked=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color));box-shadow:var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow))}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host([has-error]:not([has-error=false]):not([type=favorite])[checked]:not([checked=false])) .checkbox-icon rect{fill:var(--tct-checkbox-error-checked-outer-fill-color)}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-checked-fill-color, var(--comp-checkbox-outer-stroke-color))))}:host([indeterminate]:not([indeterminate=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--comp-checkbox-checked-fill-color)}:host(:hover:not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-hover-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));box-shadow:var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))}:host(:hover:not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-hover-outer-fill-color, var(--comp-checkbox-outer-fill-color))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-hover-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));box-shadow:var(--tct-checkbox-error-hover-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-hover-box-shadow, var(--tct-checkbox-box-shadow))))}:host(:hover[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon rect{fill:var(--tct-checkbox-error-hover-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)))}:host(:focus-within:not([type=favorite])) .checkbox-icon{--comp-checkbox-focused-box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)));fill:var(--tct-checkbox-focused-outer-fill-color, var(--comp-checkbox-outer-fill-color));box-shadow:var(--tct-checkbox-focused-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow)))}:host(:focus-within[has-error]:not([has-error=false]):not([type=favorite])) .checkbox-icon{stroke:var(--tct-checkbox-error-focused-outer-stroke-color, var(--tct-checkbox-error-outer-stroke-color, var(--comp-checkbox-error-color)));fill:var(--tct-checkbox-error-focused-outer-fill-color, var(--tct-checkbox-error-outer-fill-color, var(--comp-checkbox-outer-fill-color)));box-shadow:var(--tct-checkbox-error-focused-box-shadow, var(--tct-checkbox-error-box-shadow, var(--tct-checkbox-box-shadow, var(--comp-checkbox-focused-box-shadow))))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host(:hover[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-stroke-color, var(--tct-checkbox-favorite-stroke-color, var(--comp-checkbox-favorite-fill-color)));fill:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked]:not([checked=false])[type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-hover-stroke-color, var(--tct-checkbox-favorite-hover-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-fill-primary:var(--tct-checkbox-favorite-checked-fill-color, var(--comp-checkbox-favorite-fill-color));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked]:not([checked=false])[type=favorite]:focus-within) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-checked-focused-stroke-color, var(--tct-checkbox-favorite-focused-stroke-color, var(--comp-checkbox-favorite-stroke-color)));--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([has-error]:not([has-error=false])[type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}:host([has-error]:not([has-error=false])[type=favorite][checked]:not([checked=false])) .checkbox-icon{--tct-icon-stroke-primary:var(--tct-checkbox-favorite-error-stroke-color, var(--comp-checkbox-error-color))}.checkbox-fill{fill:none;stroke:var(--comp-checkbox-checked-color);stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([has-error]:not([has-error=false]):not([type=favorite])) .checkbox-fill{stroke:var(--tct-checkbox-error-checkmark-stroke-color, #d20a0a);stroke-width:var(--tct-checkbox-error-checkmark-stroke-width, 2.5)}.checked-fill{stroke-dasharray:16;stroke-dashoffset:16;animation-name:draw-checkmark;animation-duration:var(--tct-checkbox-animation-duration, var(--t-tween-time-in-4, 300ms));animation-timing-function:var(--tct-checkbox-animation-timing-function, ease-out);animation-fill-mode:var(--tct-checkbox-animation-fill-mode, forwards)}@keyframes draw-checkmark{to{stroke-dashoffset:0}}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg-container{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-indicator,.toggle-track{position:absolute;top:50%;transform:translateY(-50%)}.toggle-indicator{transition:left var(--comp-checkbox-tween), height var(--comp-checkbox-tween), width var(--comp-checkbox-tween);height:16px;width:16px;left:4px;border-radius:50%}.toggle-track{--comp-default-track-box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-color);height:24px;width:38px;fill:var(--comp-checkbox-toggle-track-fill);border-radius:var(--app-border-radius-3, 12px);box-shadow:var(--tct-checkbox-toggle-track-box-shadow, var(--comp-default-track-box-shadow));transition:fill var(--comp-checkbox-tween), box-shadow var(--comp-checkbox-tween)}.toggle-circle{mask:url(#xMask);fill:var(--comp-checkbox-toggle-color);transition:fill var(--comp-checkbox-tween)}.toggle-icon{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--tct-checkbox-toggle-icon-stroke-width, 2);stroke:black}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{--comp-default-hover-track-box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-color);box-shadow:var(--tct-checkbox-toggle-hover-track-box-shadow, var(--comp-default-hover-track-box-shadow));fill:var(--comp-checkbox-toggle-track-fill-hover)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-hover-circle-color, var(--t-primary-d1, var(--t-gray-6, #4d4d4d)))}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--comp-checkbox-toggle-track-fill-active)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-active-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--comp-checkbox-toggle-circle-fill-active)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-track{box-shadow:inset 0 0 0 1px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])) .toggle-circle{fill:var(--comp-checkbox-toggle-error-color)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{box-shadow:inset 0 0 0 2px var(--comp-checkbox-toggle-error-color);fill:var(--comp-checkbox-toggle-track-fill-error-hover)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-circle,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-circle{fill:var(--tct-checkbox-toggle-error-hover-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-label-hover-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-description-hover-stroke-width, unset)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--comp-checkbox-toggle-track-fill-error-active)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-circle{fill:var(--tct-checkbox-toggle-error-active-color, var(--comp-checkbox-toggle-error-color))}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-error-label-active-color, inherit)}:host(:is(:not([checked]),[checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-error-description-active-stroke-width, unset)}:host([checked]:not([checked=false])) .toggle-indicator{left:18px}:host([checked]:not([checked=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-track-color, var(--t-primary, #6a4a9e));border:none}:host([checked]:not([checked=false])) .toggle-circle{mask:url(#checkMask);fill:var(--tct-checkbox-toggle-checked-circle-color, var(--t-base, #ffffff))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-hover-track-color, var(--t-primary-d1, #5f438e))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-indicator,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-label-hover-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-active-track-color, var(--t-primary-l1, #7755af))}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-indicator{height:18px;width:18px}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-label-active-color, inherit)}:host([checked]:not([checked=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-description-active-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])) .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .toggle-track,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-hover-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .label-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .label-text{color:var(--tct-checkbox-checked-error-label-hover-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :hover .description-text,:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :focus-within .description-text{color:var(--tct-checkbox-checked-error-description-hover-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-hover-stroke-width, unset)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .toggle-track{fill:var(--tct-checkbox-toggle-checked-error-active-track-color, var(--comp-checkbox-toggle-error-color))}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .label-text{color:var(--tct-checkbox-checked-error-label-active-color, inherit)}:host([checked]:not([checked=false])):host([has-error]:not([has-error=false])):host(:is(:not([disabled]),[disabled=false]):is(:not([group-disabled]),[group-disabled=false])) :active .description-text{color:var(--tct-checkbox-checked-error-description-active-color, inherit);-webkit-text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset);text-stroke-width:var(--tct-checkbox-checked-error-description-active-stroke-width, unset)}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))){cursor:not-allowed;opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host(:is([disabled]:not([disabled=false]),[group-disabled]:not([group-disabled=false]))) label{cursor:not-allowed}`;
 
 const Q2Checkbox = class {
     constructor(hostRef) {
@@ -181,7 +181,7 @@ const Q2Checkbox = class {
             containerClasses.push('has-multiline-label');
         if (this.hideLabel)
             textLabelClasses.push('sr');
-        return (index.h("div", { key: '0dff5141bf9fd0eb9b9d92f55c80b046a8224bad', class: containerClasses.join(' ') }, index.h("input", { key: 'ac0565c29bcb4b2e29403215ceb5fc0221578209', ref: el => (this.inputElement = el), "aria-describedby": this.hasDescription ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, "aria-labelledby": this.ariaLabelledBy, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), index.h("label", { key: '56684f4fb63b0f6d136e69420f2e632a807ab03a', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-hidden": "true" }, this.renderCheckboxSVG()), index.h("div", { key: '4f40ff7c46337d002e3097e849e8a6d163271787', class: textLabelClasses.join(' '), ref: el => (this.labelTextElement = el) }, index.h("label", { key: '3d9803210e8462137d28205891762da8a9fa19cd', "test-id": "checkboxLabel", htmlFor: this._id, id: this.labelId }, index.h("div", { key: 'de644e9efa49bfb2c84400d4f748678f1724786d', class: "label-content" }, index$1.loc(this.label), index.h("slot", { key: 'f537a700ad48155f2896ae1880fcfdc4f1e60226', onSlotchange: this.queueLabelLayoutUpdate }), index.h("slot", { key: '184d686720af904c8f5cda2d4508cd07add7b1bf', name: "label", onSlotchange: this.queueLabelLayoutUpdate })))), this._tooltip && (index.h("span", { key: '05a8eacb9150b56ce30183561c72b0c607c60c8c', id: this.tooltipId, class: "sr", "test-id": "checkboxTooltipText" }, this._tooltip)), this.hasDescription && (index.h("div", { key: '7b06216cede51eb0bc13932ed17e3237854c1316', class: "description-text", "test-id": "checkboxDescription", id: "description" }, index$1.loc(this.description), index.h("slot", { key: '723ac0aa53756d0bd9f06e7bb2a1231056cdca50', name: "description" })))));
+        return (index.h("div", { key: '95ac828b1e5991bd66dfd7e83dcdc75bc152e18f', class: containerClasses.join(' ') }, index.h("input", { key: '36f4d3c2aa33464cfb62e66a8e3fa75933d65344', ref: el => (this.inputElement = el), "aria-describedby": this.hasDescription ? 'description' : undefined, "aria-invalid": this.hasError === undefined ? undefined : `${this.hasError}`, "aria-labelledby": this.ariaLabelledBy, checked: this.indeterminate || this.checked || false, class: "sr", disabled: !!this.disabled || !!this.groupDisabled, id: this._id, name: this.name || this._id, onClick: this.onInputClick, "test-id": "q2CheckboxInnerCheckBox", type: "checkbox", value: this.value }), index.h("label", { key: 'b64445b937b72c81c2266dd9512ac810e780ee54', htmlFor: this._id, class: "label-control", "test-id": "checkboxButton", "aria-hidden": "true" }, this.renderCheckboxSVG()), index.h("div", { key: 'ff43e0c59e23b9cd0c61339e275c45ed5ae082aa', class: textLabelClasses.join(' '), ref: el => (this.labelTextElement = el) }, index.h("label", { key: '808c972d8808da7a4e7f907176466a72edcd2c48', "test-id": "checkboxLabel", htmlFor: this._id, id: this.labelId }, index.h("div", { key: 'fe386612e683c6e7be2db8a3404f34b6f53391b6', class: "label-content" }, index$1.loc(this.label), index.h("slot", { key: '38b16db321f096aa05e8062a7a02e01d3e3feb3e', onSlotchange: this.queueLabelLayoutUpdate }), index.h("slot", { key: '327afa820650c9d769a6566c7bc7d79b607492c0', name: "label", onSlotchange: this.queueLabelLayoutUpdate })))), this._tooltip && (index.h("span", { key: 'ab9ac6546e1e0e7021115c67056155bd00387aac', id: this.tooltipId, class: "sr", "test-id": "checkboxTooltipText" }, this._tooltip)), this.hasDescription && (index.h("div", { key: 'acef71e4ff4d85e16f80bce4ff8b68e52a252fd2', class: "description-text", "test-id": "checkboxDescription", id: "description" }, index$1.loc(this.description), index.h("slot", { key: '11e62328019bc7f3fe8be7ec74300e727c2dc98e', name: "description" })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -329,11 +329,14 @@ const Q2Tag = class {
         this.dropdownBtn.focus();
     }
     popoverStateHandler({ detail: { open } }) {
-        if (this.open !== open)
-            this.open = open;
+        var _a;
+        if (this.open === open)
+            return;
+        this.open = open;
         if (open)
             return;
         this.optionList.setActiveElement(null);
+        (_a = this.dropdownBtn) === null || _a === void 0 ? void 0 : _a.focus();
     }
     // #endregion
     // #region Public Methods API
@@ -391,7 +394,7 @@ const Q2Tag = class {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (index.h(index.Host, { key: 'b7b199109ef756942f6cf76aff904a21ba406998' }, index.h("click-elsewhere", { key: 'f4a5ec911c582d480e5d7d91638d681ba6c054c8', onChange: this.onClickElsewhere }, shouldShowOptions ? (index.h(index.Fragment, null, index.h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": index$1.loc(this.label) }, index.h("div", { class: wrapperClassNames.join(' ') }, index$1.loc(this.label)), index.h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (index.h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, index.h("div", { class: wrapperClassNames.join(' ') }, index.h("slot", { name: "decorator" }), index$1.loc(this.label)))), shouldShowOptions && (index.h("q2-popover", { key: '046a9aae077ed9800b081ce70aa5d03f0d919cff', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { key: '63899f97a13db69ed8776214ca6670e825663c5a', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", { key: '40fa7c27a8b27ae2c5f894bbe1ae6e51ab1b55f0' })))))));
+        return (index.h(index.Host, { key: 'a18af83301ac8bf08d1638b05d4dd8795f11cd46' }, index.h("click-elsewhere", { key: '130d173a4bf53dd6eec1775944d910c630e704ae', onChange: this.onClickElsewhere }, shouldShowOptions ? (index.h(index.Fragment, null, index.h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description", "aria-label": index$1.loc(this.label) }, index.h("div", { class: wrapperClassNames.join(' ') }, index$1.loc(this.label)), index.h("q2-icon", { type: "options" })), this.renderHiddenElement())) : (index.h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, index.h("div", { class: wrapperClassNames.join(' ') }, index.h("slot", { name: "decorator" }), index$1.loc(this.label)))), shouldShowOptions && (index.h("q2-popover", { key: '07bf52f6b4d8c4bbf42e90e69ff9a9deec82810b', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { key: 'eefdf7202c269194a9753e438b4c6060984ba33e', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", { key: '3067ac9beee239562c410d7dfe4af04c651ef8ae' })))))));
     }
     get hostElement() { return index.getElement(this); }
 };