q2-tecton-elements 1.71.0 → 1.71.2

package/dist/bundle-report.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-19T13:09:41",
+  "timestamp": "2026-08-28T18:20:49",
   "compiler": {
     "name": "node",
     "version": "24.10.0"
@@ -356,7 +356,7 @@
         "name": "dist-lazy",
         "files": 235,
         "generatedFiles": [
-          "./dist/cjs/action-sheet-D71RSc-w.js",
+          "./dist/cjs/action-sheet-DUBlF_x3.js",
           "./dist/cjs/app-globals-V2Kpy_OQ.js",
           "./dist/cjs/charting-ClN1ldqv.js",
           "./dist/cjs/click-elsewhere_3.cjs.entry.js",
@@ -434,7 +434,7 @@
           "./dist/cjs/shapes-CWaeHFb9.js",
           "./dist/cjs/sprites-DZZE7UFT.js",
           "./dist/cjs/tecton-tab-pane.cjs.entry.js",
-          "./dist/esm/action-sheet-B7adb3xs.js",
+          "./dist/esm/action-sheet-DuQ7VZ08.js",
           "./dist/esm/app-globals-DQuL1Twl.js",
           "./dist/esm/charting-DOZct-UB.js",
           "./dist/esm/click-elsewhere_3.entry.js",
@@ -514,7 +514,7 @@
           "./dist/esm/tecton-tab-pane.entry.js",
           "./dist/index.cjs.js",
           "./dist/index.js",
-          "./dist/q2-tecton-elements/action-sheet-B7adb3xs.js",
+          "./dist/q2-tecton-elements/action-sheet-DuQ7VZ08.js",
           "./dist/q2-tecton-elements/app-globals-DQuL1Twl.js",
           "./dist/q2-tecton-elements/charting-DOZct-UB.js",
           "./dist/q2-tecton-elements/click-elsewhere_3.entry.js",
@@ -663,7 +663,7 @@
           "sanitize-html-string-DPHNpMWE.js",
           "mirror-emit-DUjY_ucm.js"
         ],
-        "originalByteSize": 21733
+        "originalByteSize": 21971
       },
       {
         "key": "q2-card.entry",
@@ -768,7 +768,7 @@
         "fileName": "q2-dropdown.entry.js",
         "imports": [
           "index-Cqkz7Bnm.js",
-          "action-sheet-B7adb3xs.js",
+          "action-sheet-DuQ7VZ08.js",
           "index-Cps4jSQM.js"
         ],
         "originalByteSize": 19014
@@ -952,7 +952,7 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js",
           "mirror-emit-DUjY_ucm.js",
-          "action-sheet-B7adb3xs.js"
+          "action-sheet-DuQ7VZ08.js"
         ],
         "originalByteSize": 31320
       },
@@ -1009,7 +1009,7 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js"
         ],
-        "originalByteSize": 45662
+        "originalByteSize": 46300
       },
       {
         "key": "q2-section.entry",
@@ -1229,9 +1229,9 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js",
           "mirror-emit-DUjY_ucm.js",
-          "action-sheet-B7adb3xs.js"
+          "action-sheet-DuQ7VZ08.js"
         ],
-        "originalByteSize": 48151
+        "originalByteSize": 48249
       },
       {
         "key": "q2-tooltip.entry",
@@ -1327,7 +1327,7 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js",
           "mirror-emit-DUjY_ucm.js",
-          "action-sheet-B7adb3xs.js"
+          "action-sheet-DuQ7VZ08.js"
         ],
         "originalByteSize": 57005
       },
@@ -1524,7 +1524,7 @@
           "sanitize-html-string-DPHNpMWE.js",
           "mirror-emit-DUjY_ucm.js"
         ],
-        "originalByteSize": 21733
+        "originalByteSize": 21971
       },
       {
         "key": "q2-card.entry",
@@ -1629,7 +1629,7 @@
         "fileName": "q2-dropdown.entry.js",
         "imports": [
           "index-Cqkz7Bnm.js",
-          "action-sheet-B7adb3xs.js",
+          "action-sheet-DuQ7VZ08.js",
           "index-Cps4jSQM.js"
         ],
         "originalByteSize": 19014
@@ -1813,7 +1813,7 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js",
           "mirror-emit-DUjY_ucm.js",
-          "action-sheet-B7adb3xs.js"
+          "action-sheet-DuQ7VZ08.js"
         ],
         "originalByteSize": 31320
       },
@@ -1870,7 +1870,7 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js"
         ],
-        "originalByteSize": 45662
+        "originalByteSize": 46300
       },
       {
         "key": "q2-section.entry",
@@ -2090,9 +2090,9 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js",
           "mirror-emit-DUjY_ucm.js",
-          "action-sheet-B7adb3xs.js"
+          "action-sheet-DuQ7VZ08.js"
         ],
-        "originalByteSize": 48151
+        "originalByteSize": 48249
       },
       {
         "key": "q2-tooltip.entry",
@@ -2188,7 +2188,7 @@
           "index-Cqkz7Bnm.js",
           "index-Cps4jSQM.js",
           "mirror-emit-DUjY_ucm.js",
-          "action-sheet-B7adb3xs.js"
+          "action-sheet-DuQ7VZ08.js"
         ],
         "originalByteSize": 57005
       },
@@ -2387,7 +2387,7 @@
           "sanitize-html-string-D17Pr7-c.js",
           "mirror-emit-kjeNv83f.js"
         ],
-        "originalByteSize": 21849
+        "originalByteSize": 22087
       },
       {
         "key": "q2-card.entry",
@@ -2492,7 +2492,7 @@
         "fileName": "q2-dropdown.cjs.entry.js",
         "imports": [
           "index-DUaTw_1N.js",
-          "action-sheet-D71RSc-w.js",
+          "action-sheet-DUBlF_x3.js",
           "index-SpDCZABA.js"
         ],
         "originalByteSize": 19045
@@ -2676,7 +2676,7 @@
           "index-DUaTw_1N.js",
           "index-SpDCZABA.js",
           "mirror-emit-kjeNv83f.js",
-          "action-sheet-D71RSc-w.js"
+          "action-sheet-DUBlF_x3.js"
         ],
         "originalByteSize": 31416
       },
@@ -2733,7 +2733,7 @@
           "index-DUaTw_1N.js",
           "index-SpDCZABA.js"
         ],
-        "originalByteSize": 45929
+        "originalByteSize": 46567
       },
       {
         "key": "q2-section.entry",
@@ -2953,9 +2953,9 @@
           "index-DUaTw_1N.js",
           "index-SpDCZABA.js",
           "mirror-emit-kjeNv83f.js",
-          "action-sheet-D71RSc-w.js"
+          "action-sheet-DUBlF_x3.js"
         ],
-        "originalByteSize": 48357
+        "originalByteSize": 48455
       },
       {
         "key": "q2-tooltip.entry",
@@ -3051,7 +3051,7 @@
           "index-DUaTw_1N.js",
           "index-SpDCZABA.js",
           "mirror-emit-kjeNv83f.js",
-          "action-sheet-D71RSc-w.js"
+          "action-sheet-DUBlF_x3.js"
         ],
         "originalByteSize": 57301
       },
@@ -3262,7 +3262,7 @@
           "method": "tctChange",
           "bubbles": true,
           "cancelable": true,
-          "composed": true,
+          "composed": false,
           "docs": {
             "tags": [],
             "text": "Emitted when the user clicks outside the element"
@@ -16921,7 +16921,7 @@
           "method": "tctChange",
           "bubbles": true,
           "cancelable": true,
-          "composed": true,
+          "composed": false,
           "docs": {
             "tags": [
               {
@@ -72847,7 +72847,7 @@
               "method": "tctChange",
               "bubbles": true,
               "cancelable": true,
-              "composed": true,
+              "composed": false,
               "docs": {
                 "tags": [
                   {
@@ -73855,7 +73855,7 @@
               "method": "tctChange",
               "bubbles": true,
               "cancelable": true,
-              "composed": true,
+              "composed": false,
               "docs": {
                 "tags": [],
                 "text": "Emitted when the user clicks outside the element"
@@ -78524,7 +78524,7 @@
       "index-Cqkz7Bnm.js",
       "index-Cps4jSQM.js",
       "mirror-emit-DUjY_ucm.js",
-      "action-sheet-B7adb3xs.js"
+      "action-sheet-DuQ7VZ08.js"
     ],
     "sc-q2-checkbox-group": [
       "index-Cqkz7Bnm.js",
@@ -78550,7 +78550,7 @@
     ],
     "sc-q2-dropdown": [
       "index-Cqkz7Bnm.js",
-      "action-sheet-B7adb3xs.js",
+      "action-sheet-DuQ7VZ08.js",
       "index-Cps4jSQM.js"
     ],
     "sc-q2-dropdown-item": [
@@ -78674,7 +78674,7 @@
       "index-Cqkz7Bnm.js",
       "index-Cps4jSQM.js",
       "mirror-emit-DUjY_ucm.js",
-      "action-sheet-B7adb3xs.js"
+      "action-sheet-DuQ7VZ08.js"
     ],
     "sc-q2-popover": [
       "index-Cqkz7Bnm.js",
@@ -78718,7 +78718,7 @@
       "index-Cqkz7Bnm.js",
       "index-Cps4jSQM.js",
       "mirror-emit-DUjY_ucm.js",
-      "action-sheet-B7adb3xs.js"
+      "action-sheet-DuQ7VZ08.js"
     ],
     "sc-q2-stepper": [
       "index-Cqkz7Bnm.js",
@@ -78755,7 +78755,7 @@
       "index-Cqkz7Bnm.js",
       "index-Cps4jSQM.js",
       "mirror-emit-DUjY_ucm.js",
-      "action-sheet-B7adb3xs.js"
+      "action-sheet-DuQ7VZ08.js"
     ],
     "sc-q2-textarea": [
       "index-Cqkz7Bnm.js",

package/dist/cjs/{action-sheet-D71RSc-w.js → action-sheet-DUBlF_x3.js}

@@ -24,6 +24,7 @@ const shouldShowActionSheet = (component, event) => {
 };
 const parseOptions = (options) => {
     const defaultOption = {
+        _hideSelectedBlock: false,
         disabled: false,
         separator: false,
         display: '',

package/dist/cjs/click-elsewhere_3.cjs.entry.js

@@ -9,7 +9,7 @@ const ClickElsewhere = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.change = index.createEvent(this, "change", 7);
-        this.tctChange = index.createEvent(this, "tctChange", 7);
+        this.tctChange = index.createEvent(this, "tctChange", 5);
         // #region Own Properties
         this.isCurrentlyFocused = false;
         /**

package/dist/cjs/q2-action-sheet.cjs.entry.js

@@ -56,12 +56,14 @@ const Q2ActionSheet = class {
             Object.entries(attributes).forEach(([key, value]) => {
                 if (value === undefined)
                     return;
+                // Convert component prop names to HTML attributes, e.g. someLongPropertyName to some-long-property-name.
+                const attributeName = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
                 if (typeof value === 'boolean') {
                     if (value)
-                        optionElement.setAttribute(key, '');
+                        optionElement.setAttribute(attributeName, '');
                 }
                 else {
-                    optionElement.setAttribute(key, value);
+                    optionElement.setAttribute(attributeName, value);
                 }
             });
             return optionElement;
@@ -318,7 +320,7 @@ const Q2ActionSheet = class {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (index.h("dialog", { key: '90b91ed23231e01c4a77cd4c22201f736942546f', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick, "aria-labelledby": showHeader ? 'title' : undefined }, index.h("div", { key: '3a3d57295f090bec2fa4a0f4166ad47c020d02f9', class: interiorClasses }, showHeader && (index.h("header", { key: 'd3c5e66fc04a501b2d57bc7ebb122e192343e30d' }, index.h("div", { key: '238957b01b452902f627aca97f590479f53886f1', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (index.h("q2-btn", { key: 'cede4ee6deee3587043f01df525d12a1cd900a79', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, index.h("q2-icon", { key: '82e254b4b6419ea49f6647241a70f5203eb76624', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && index.h("p", { key: '78efd55feaad1979d540c49e94436e9da4c03cfe' }, data.description), RenderContent && index.h(RenderContent, { key: 'fdf02d887e3366d9fdc90dcecd5717c126a10873', data: this.data }))));
+        return (index.h("dialog", { key: '840635222baf3ed3f7193c550bb73675d0b466d4', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick, "aria-labelledby": showHeader ? 'title' : undefined }, index.h("div", { key: 'c09338fde8ba753281162bd75714e29e6a8cc936', class: interiorClasses }, showHeader && (index.h("header", { key: 'd3bb667204c262a28363b71ffe6fba8209454391' }, index.h("div", { key: '8981cf55df99b607a49660fd6ecfe8ef827c100e', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (index.h("q2-btn", { key: 'b4d175a3e7d0382ae9e4630a4fe0f85403af5888', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, index.h("q2-icon", { key: '95624ea4bcb5a9897a2b09326de718205a32e346', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && index.h("p", { key: '4f599b2645c604bde96747af50f8d7344db60e11' }, data.description), RenderContent && index.h(RenderContent, { key: '0878d252923c4c3a8b82cc89f8a88fc3bace794d', data: this.data }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -2969,7 +2969,7 @@ const Q2Input = class {
         this.formatted = index.createEvent(this, "formatted", 7);
         this.input = index.createEvent(this, "input", 7);
         this.invalid = index.createEvent(this, "invalid", 7);
-        this.tctChange = index.createEvent(this, "tctChange", 7);
+        this.tctChange = index.createEvent(this, "tctChange", 5);
         this.tctClear = index.createEvent(this, "tctClear", 7);
         this.tctFormatted = index.createEvent(this, "tctFormatted", 7);
         this.tctInput = index.createEvent(this, "tctInput", 7);
@@ -3664,7 +3664,7 @@ const Q2Input = class {
     }
     render() {
         const { ariaControls, ariaExpanded } = this.ariaAttributes;
-        return (index.h(index.Host, { key: '5255e58159b3c614913fec22cc38f8a31d5553bb', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, index.h("div", { key: '2dfaa5f10b49bb4ddbfe4c73467c9615559becd8', class: this.wrapperClasses }, index.h("div", { key: '7995fb27f33ebfa79ace1e7cd0e737d8bd466978', class: "label-wrapper" }, index$1.renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), index$1.renderMessages(this))));
+        return (index.h(index.Host, { key: '877bcbc79e4891cab10a027fd4d53cab9852779e', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, index.h("div", { key: '0150e85d50d8c69dc16a50fc900cdc78729fc6ec', class: this.wrapperClasses }, index.h("div", { key: '6fef0d2a694ef81a7967fd86365a64237ea29d96', class: "label-wrapper" }, index$1.renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), index$1.renderMessages(this))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,7 +3,7 @@
 var index = require('./index-DUaTw_1N.js');
 var index$1 = require('./index-SpDCZABA.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-var actionSheet = require('./action-sheet-D71RSc-w.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}`;
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DUaTw_1N.js');
-var actionSheet = require('./action-sheet-D71RSc-w.js');
+var actionSheet = require('./action-sheet-DUBlF_x3.js');
 var index$1 = require('./index-SpDCZABA.js');
 
 const q2DropdownCss = () => `*{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{display:inline-flex}:host([block]){display:block}:host([full-width]:not([full-width=false])){display:inline-flex;justify-content:center;width:100%}::slotted([slot=popover-top]){padding:var(--tct-dropdown-popover-top-slot-padding, 0);border-bottom:var(--tct-dropdown-slot-border-top)}::slotted([slot=popover-bottom]){padding:var(--tct-dropdown-popover-bottom-slot-padding, 0);border-top:var(--tct-dropdown-slot-border-bottom)}q2-icon{pointer-events:none;margin-block:-100px}click-elsewhere{position:relative;display:block}q2-popover{--tct-popover-min-width:var(--tct-dropdown-width, var(--t-dropdown-width));--tct-popover-padding:var(--tct-dropdown-content-padding)}`;

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

@@ -3,7 +3,7 @@
 var index = require('./index-DUaTw_1N.js');
 var index$1 = require('./index-SpDCZABA.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-var actionSheet = require('./action-sheet-D71RSc-w.js');
+var actionSheet = require('./action-sheet-DUBlF_x3.js');
 
 const q2PillCss = () => `*{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{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-letter-spacing:var(--tct-pill-btn-letter-spacing, inherit);--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));letter-spacing:var(--comp-btn-letter-spacing);padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, var(--const-px-14, 14px))));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:flex;align-items:center;gap:var(--app-scale-1x, 5px);width:100%;text-align:start}.btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-pill-decorator-icon-primary-stroke, var(--comp-btn-color));--tct-icon-stroke-secondary:var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-btn-color))}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}.btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}:host([active]:not([active=false])) .btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-pill-active-decorator-icon-primary-stroke, var(--tct-pill-decorator-icon-primary-stroke, var(--comp-active-btn-color)));--tct-icon-stroke-secondary:var(--tct-pill-active-decorator-icon-secondary-stroke, var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-active-btn-color)))}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}.btn-close:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]:not([active=false])) button.btn-close:focus,:host([active]:not([active=false])) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}`;
 

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

@@ -15,6 +15,7 @@ const Q2Search = class {
         // #region Own Properties
         // Viewport edge buffer (px) — popover falls back to input-width when it would otherwise overflow.
         this.displayBuffer = 10;
+        this.optionFingerprint = '';
         this.popoverWidthWarned = false;
         // #endregion
         // #region State Properties
@@ -187,7 +188,7 @@ const Q2Search = class {
             }
         };
         this.onMutationObserved = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const root = this.hostElement.shadowRoot;
             if (!root)
                 return;
@@ -212,6 +213,14 @@ const Q2Search = class {
             this.checkSelectedOptions();
             if (this.multilineOptions)
                 this.applyMultilineOptions();
+            // Reset the option list's active index whenever the slotted option set changes so that
+            // the next ArrowDown/ArrowUp always starts from the first visible item rather than a
+            // stale position left over from a previous, different options list.
+            const fingerprint = this.optionElements.map(o => o.value).join('\x00');
+            if (fingerprint !== this.optionFingerprint) {
+                this.optionFingerprint = fingerprint;
+                (_d = this.optionList) === null || _d === void 0 ? void 0 : _d.setActiveElement(undefined);
+            }
         };
         this.onOptionListChange = (event) => {
             event.stopPropagation();
@@ -763,7 +772,7 @@ const Q2Search = class {
         return (index.h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: (_a = this.innerInputContainer) !== null && _a !== void 0 ? _a : undefined, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, align: useBlock ? undefined : this.popoverAlignment, block: useBlock }, index.h("div", { class: "popover-content", "data-loading": this.loading ? 'true' : 'false', "aria-busy": this.loading ? 'true' : null }, index.h("div", { class: "popover-top-container", hidden: !this.hasPopoverTop && !(this.multiple && this.showSelectedToggle), tabindex: "-1" }, index.h("slot", { name: "popover-top" }), !this.loading && this.renderMultiSelectHeader()), index.h("q2-option-list", { ref: el => (this.optionList = el), type: "listbox", id: this.optionListId, label: index$1.loc(this.listLabel), multiple: this.multiple, selectedOptions: this.structuredSelectedOptions, showSelected: this.showSelected, customSearch: true, hidden: this.loading, onChange: (e) => e.stopPropagation(), onTctChange: this.onOptionListChange }, index.h("slot", null)), showEmpty && this.renderEmpty(), index.h("div", { class: "popover-bottom-container", hidden: !this.hasPopoverBottom, tabindex: "-1" }, index.h("slot", { name: "popover-bottom" })), this.loading && (index.h("div", { class: "loading-overlay", "aria-hidden": "true" }, index.h("q2-loading", { type: "spinner" }))))));
     }
     render() {
-        return (index.h(index.Fragment, { key: '7639a6dccbd55360c35c03c357fd64552dd9d2ba' }, index.h("div", { key: 'bf893491af923c9c2dc404a137df754297bd3ad5', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("click-elsewhere", { key: '73e0045d7fc40c5d57fe26ed2993da24d5d42a04', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, index.h("q2-input", { key: '5328d7d706f2f8bf3e8433d90c32e51b6abf4122', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && index$1.loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? index$1.loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => index$1.loc(e))) ||
+        return (index.h(index.Fragment, { key: '78ce7b735d59271600debb18ab2f0f5cf315e465' }, index.h("div", { key: 'd3e9a713581842cc62969a0df9556733edf6e378', "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("click-elsewhere", { key: '6912af1d8f31af8de7c7ffb28786756819c57afc', class: this.wrapperClasses, role: "presentation", onChange: this.onClickElsewhere }, index.h("q2-input", { key: '95a5397765aab6d3279b3d81cc31215f235aefc2', ref: el => (this.inputField = el), class: "q2-search-input", label: (this.label && index$1.loc(this.label)) || '', value: this.searchText, iconLeft: "search", clearable: this.clearable && !this.loading && !!this.searchText, disabled: this.disabled, optional: this.optional, readonly: !!this.readonly, placeholder: this.placeholder ? index$1.loc(this.placeholder) : undefined, hideLabel: this.hideLabel, errors: (Array.isArray(this.errors) && this.errors.length > 0 && this.errors.map(e => index$1.loc(e))) ||
                 (this.invalid && ['tecton.element.search.invalid']) ||
                 [], ariaExpanded: this.isInputOnlyMode ? undefined : `${this.open}`, ariaControls: this.isInputOnlyMode ? undefined : this.optionListId, ariaHaspopup: this.isInputOnlyMode ? undefined : 'listbox', hideMessages: true, _role: this.isInputOnlyMode ? undefined : 'combobox', onTctInput: this.inputInputHandler, onInput: (e) => e.stopImmediatePropagation(), onChange: (e) => e.stopPropagation(), onTctChange: (e) => e.stopPropagation(), badgeValue: this.badgeValue }, this.renderCustomDisplay()), this.renderOptionsDropdown())));
     }

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

@@ -3,7 +3,7 @@
 var index = require('./index-DUaTw_1N.js');
 var index$1 = require('./index-SpDCZABA.js');
 var mirrorEmit = require('./mirror-emit-kjeNv83f.js');
-var actionSheet = require('./action-sheet-D71RSc-w.js');
+var actionSheet = require('./action-sheet-DUBlF_x3.js');
 
 const q2SelectCss = () => `*{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}}}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white, #ffffff);color:var(--t-text, #4d4d4d);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1, 0.2s ease);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host([block]) q2-btn,:host([block]){display:block}:host{--comp-default-select-margin:var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-select-margin, var(--comp-default-select-margin))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0;--tct-input-min-height:var(--tct-select-input-min-height, var(--t-select-input-min-height));--tct-input-max-height:var(--tct-select-input-max-height, var(--t-select-input-max-height, none))}::slotted([slot=_selected-display]){width:100%;min-height:var(--comp-selected-display-height, 44px);padding-top:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px));padding-bottom:var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px))}.custom-display-content{position:absolute;bottom:0;left:calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);height:44px;width:calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)))}.popover-content{display:flex;flex-direction:column-reverse}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.popover-top-container{position:sticky;top:0;z-index:5}.popover-top-container .multi-select-header{padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--app-white);display:flex;gap:var(--app-scale-2x, 10px);align-items:center}.popover-top-container .multi-select-header fieldset{margin:0;padding:0;border:0;display:flex;gap:var(--app-scale-2x, 10px)}.popover-top-container .multi-select-header legend{padding:0;float:left}.popover-top-container .multi-select-header label{cursor:pointer;padding:var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));font-size:var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));border-radius:var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));background:var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));color:var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))))}.popover-top-container .multi-select-header label:hover{background:var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));color:var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))))}.popover-top-container .multi-select-header input:checked+label,.popover-top-container .multi-select-header input:checked+label:enabled:hover{background:var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));color:var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))))}.popover-top-container .multi-select-header input:disabled+label{opacity:var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));cursor:not-allowed}.popover-top-container .multi-select-header input:focus-visible+label{box-shadow:var(--const-double-focus-ring)}`;
 
@@ -363,6 +363,8 @@ const Q2Select = class {
     }
     onClearHandler(event) {
         var _a;
+        if (this.readonly || this.disabled)
+            return;
         // when multiple & searchable, it should not fire clearValue() if the type is `input` (cleared by key input) which is emitted from q2-input's handleDataInput
         if (this.multiple && this.searchable && ((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.source) === 'input')
             return;
@@ -807,7 +809,8 @@ const Q2Select = class {
     }
     renderSelectField() {
         var _a;
-        return (index.h(index.Fragment, null, index.h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && index$1.loc(this.label)) || '', value: this.selectedDisplay, clearable: (this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) || undefined, errors: (Array.isArray(this.errors) &&
+        return (index.h(index.Fragment, null, index.h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), index.h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && index$1.loc(this.label)) || '', value: this.selectedDisplay, clearable: (!this.disabled && this.clearable && (!!this.value || !!((_a = this.selectedOptions) === null || _a === void 0 ? void 0 : _a.length))) ||
+                undefined, errors: (Array.isArray(this.errors) &&
                 this.errors.length > 0 &&
                 this.errors.map(error => index$1.loc(error))) ||
                 (this.invalid && ['tecton.element.select.invalid']) ||
@@ -822,7 +825,7 @@ const Q2Select = class {
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), index.h("label", { htmlFor: "selected" }, index$1.loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (index.h("click-elsewhere", { key: 'a08e10cf8bd4e2d3f210d36003417f2a1dec4b21', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (index.h("click-elsewhere", { key: 'edb9951db5493781ee1f5da0ed5f6c03aff107e9', class: this.wrapperClasses, role: "presentation", onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/click-elsewhere/click-elsewhere.js

@@ -108,7 +108,7 @@ export class ClickElsewhere {
                 "name": "tctChange",
                 "bubbles": true,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when the user clicks outside the element"

package/dist/collection/components/q2-action-sheet/q2-action-sheet.js

@@ -52,12 +52,14 @@ export class Q2ActionSheet {
             Object.entries(attributes).forEach(([key, value]) => {
                 if (value === undefined)
                     return;
+                // Convert component prop names to HTML attributes, e.g. someLongPropertyName to some-long-property-name.
+                const attributeName = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
                 if (typeof value === 'boolean') {
                     if (value)
-                        optionElement.setAttribute(key, '');
+                        optionElement.setAttribute(attributeName, '');
                 }
                 else {
-                    optionElement.setAttribute(key, value);
+                    optionElement.setAttribute(attributeName, value);
                 }
             });
             return optionElement;
@@ -314,7 +316,7 @@ export class Q2ActionSheet {
         }
         const appearance = (data === null || data === void 0 ? void 0 : data.appearance) || 'slot';
         const interiorClasses = `interior is-${appearance}`;
-        return (h("dialog", { key: '90b91ed23231e01c4a77cd4c22201f736942546f', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick, "aria-labelledby": showHeader ? 'title' : undefined }, h("div", { key: '3a3d57295f090bec2fa4a0f4166ad47c020d02f9', class: interiorClasses }, showHeader && (h("header", { key: 'd3c5e66fc04a501b2d57bc7ebb122e192343e30d' }, h("div", { key: '238957b01b452902f627aca97f590479f53886f1', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'cede4ee6deee3587043f01df525d12a1cd900a79', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '82e254b4b6419ea49f6647241a70f5203eb76624', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '78efd55feaad1979d540c49e94436e9da4c03cfe' }, data.description), RenderContent && h(RenderContent, { key: 'fdf02d887e3366d9fdc90dcecd5717c126a10873', data: this.data }))));
+        return (h("dialog", { key: '840635222baf3ed3f7193c550bb73675d0b466d4', ref: el => (this.dialogElement = el), class: renderStatus, onClick: this.onClick, "aria-labelledby": showHeader ? 'title' : undefined }, h("div", { key: 'c09338fde8ba753281162bd75714e29e6a8cc936', class: interiorClasses }, showHeader && (h("header", { key: 'd3bb667204c262a28363b71ffe6fba8209454391' }, h("div", { key: '8981cf55df99b607a49660fd6ecfe8ef827c100e', id: "title" }, (data === null || data === void 0 ? void 0 : data.title) || this.title), !this.hideClose && (h("q2-btn", { key: 'b4d175a3e7d0382ae9e4630a4fe0f85403af5888', ref: el => (this.closeButtonElement = el), class: "btn-close", "test-id": "btnClose", onClick: this.onCancel, label: "tecton.element.actionSheet.close", "hide-label": true }, h("q2-icon", { key: '95624ea4bcb5a9897a2b09326de718205a32e346', type: "close" }))))), ((_a = this.data) === null || _a === void 0 ? void 0 : _a.description) && h("p", { key: '4f599b2645c604bde96747af50f8d7344db60e11' }, data.description), RenderContent && h(RenderContent, { key: '0878d252923c4c3a8b82cc89f8a88fc3bace794d', data: this.data }))));
     }
     static get is() { return "q2-action-sheet"; }
     static get encapsulation() { return "shadow"; }