q2-tecton-elements 1.60.2 → 1.61.0

package/dist/components/q2-pill.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './q2-icon2.js';
 import { d as defineCustomElement$3 } from './q2-option-list2.js';
 import { d as defineCustomElement$2 } from './q2-popover2.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}: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-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, 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-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)));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, 14px)));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus,.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,:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-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}: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}";
+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}: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-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)));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, 14px)));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:block;width:100%;text-align:start}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-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:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-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}: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}";
 
 const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLElement {
     constructor() {
@@ -44,7 +44,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
         };
         this.determineOptionCount = async () => {
             if (this.optionList) {
-                const allOptions = await this.optionList.getOptions();
+                const allOptions = await this.getOptionListOptions();
                 this.optionCount = allOptions.length;
             }
             else {
@@ -59,13 +59,18 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
         };
         this.getOption = async (value) => {
             if (this.optionList) {
-                const options = await this.optionList.getOptions();
+                const options = await this.getOptionListOptions();
                 return options.find(option => option.value === value);
             }
             else {
                 return this.hostElement.querySelector(`q2-option[value="${value}"]`);
             }
         };
+        // for spec testing
+        this.getOptionListOptions = async () => {
+            var _a;
+            return await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
+        };
         this.handleChange = event => {
             event.stopPropagation();
             if (!this.optionCount)
@@ -115,9 +120,14 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
                 this.executeActionSheet(event);
             }
             else {
-                this.optionList.handleExternalKeydown(event);
+                this.handleOptionListExternalKeydown(event);
             }
         };
+        // for spec testing
+        this.handleOptionListExternalKeydown = async (event) => {
+            var _a;
+            await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.handleExternalKeydown(event));
+        };
         this.handleSelectionChanges = async (changeDetails) => {
             const { multiple } = this;
             const { value = '', values = [] } = changeDetails;
@@ -160,6 +170,22 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             this.determineOptionCount();
             this.updateSelectedOptionElements();
         };
+        this.onPopoverState = (event) => {
+            const { open, action } = event.detail;
+            if (open)
+                return;
+            switch (action) {
+                case 'select':
+                case 'close':
+                    this.primaryBtn.focus();
+                    break;
+            }
+        };
+        // for spec testing
+        this.setOptionListActiveElement = async (index) => {
+            var _a;
+            await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.setActiveElement(index));
+        };
         this.syncValueProperties = () => {
             const { value, selectedOptions } = this;
             if (!!(selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length))
@@ -168,10 +194,9 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
                 this.valueChanged(value, null, 'value');
         };
         this.updateSelectedOptionElements = async () => {
-            var _a;
             const { selectedOptions = [] } = this;
             const selectedValues = selectedOptions.map(option => option.value);
-            const options = await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions());
+            const options = await this.getOptionListOptions();
             if (this.optionCount)
                 this.active = !!selectedValues.length;
             this.selectedOptionElements =
@@ -221,12 +246,12 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             return;
         this.primaryBtn.focus();
     }
-    popoverStateHandler({ detail: { open } }) {
+    async popoverStateHandler({ detail: { open } }) {
         if (this.open !== open)
             this.open = open;
         if (open)
             return;
-        this.optionList.setActiveElement(null);
+        this.setOptionListActiveElement(null);
     }
     // #endregion
     // #region Public Methods API
@@ -259,9 +284,8 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
      * @testOnly
      */
     async setValue(values, options = { closePopover: true }) {
-        var _a;
         const valueSet = new Set(Array.isArray(values) ? values : [values]);
-        const allOptions = (await ((_a = this.optionList) === null || _a === void 0 ? void 0 : _a.getOptions()));
+        const allOptions = (await this.getOptionListOptions());
         if (!this.open) {
             await this.openPopover();
             await waitForNextPaint();
@@ -316,7 +340,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
         if (!optionCount || selectedOptionElements.length === 0)
             return loc(label);
         else if (selectedOptionElements.length === 1)
-            return loc(selectedOptionElements[0].display);
+            return `${loc(selectedOptionElements[0].display)}`;
         return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
     }
     get truncatedButtonContent() {
@@ -351,7 +375,7 @@ const Q2Pill$1 = /*@__PURE__*/ proxyCustomElement(class Q2Pill extends HTMLEleme
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '612e277fb831b60becbdac0df520de45cc08a398', onChange: this.onClickElsewhere }, h("div", { key: '5f56c66943e7fefd4295bd5c96019039aac039c9', class: wrapperClassNames.join(' ') }, h("div", { key: '1b101344313e3bc6357e69378b929b47b53a9e50', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'f0231168c9043ac7d2596ecbb3a7a382cf27d33b', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": this.buttonContent, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent, !optionCount && active && h("span", { key: '066f5d1132937be8eb8e925c8394d219aadeb819', class: "sr" }, "(", loc('tecton.element.pill.active'), ")"))), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'f38e3d6f605f10e8907b40d16cd70276c6f85a73', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'e4ce39ff508b27e82126fa4b08cca3d3c39ff3a7', class: "popover-content" }, h("div", { key: '4075cea397c412b24ffa17194158b9fd0aec6ad4', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '1f48ca125b79984bb49ac5e21ba6290402462c9d', name: "popover-top" })), h("q2-option-list", { key: '9dcfea71f57897a393604167e629fa4a956ef3d8', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '1915a1abd9801102248fc8b516b13f2a34e4554d' })), h("div", { key: '0073dd48f8fb6dfbe282f84ce134b258dff237a8', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '92da82497608b7fdee73587b677ec8673bbe1411', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '1b2fae67d287db309f9e953449d3ec897244bc46', onChange: this.onClickElsewhere }, h("div", { key: 'a8dd7ebd6b171a8f2cede88d829210b78341d477', class: wrapperClassNames.join(' ') }, h("div", { key: '3a4f1e6c1c1135886803b27ef8e4bc3cde2c3b62', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: '7fcd194d44ec0306509cb7b55dcbfb9c5a0f915d', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": `${this.buttonContent}${!optionCount && active ? ` ${loc('tecton.element.pill.active')}` : ''}`, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '059152c08a71d83ccc65d8517298a7ff2af09a16', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: 'a6b5192bf1d6f8370e906bf9f0a031a1db3ed189', class: "popover-content" }, h("div", { key: '64596428058159629f33a4c975bbe80c172a49e4', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: 'c9991d5f8fa9039874480a03dd26f45fbcac5b84', name: "popover-top" })), h("q2-option-list", { key: 'ba0bfb7ff081f4379fbfe86dfc291a675fc2819b', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: 'e17a9ec82e412c214f39bbd047fa63dfa09306c6' })), h("div", { key: 'b9eb63a198876df544748b07a36a16a392dcbda1', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: 'ba43c55ca7e21a8faf4f7759bb887163dd5879ea', name: "popover-bottom" })))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-pill.js.map

@@ -1 +1 @@
-{"file":"q2-pill.js","mappings":"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","names":["Q2Pill","__stencil_proxyCustomElement"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-btn-box-shadow: #{var-list(--tct-pill-btn-box-shadow, none)};\n    --comp-btn-backdrop-filter: #{var-list(--tct-pill-btn-backdrop-filter, none)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: #{var-list(--tct-pill-active-btn-color, --comp-btn-background)};\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-box-shadow: #{var-list(--tct-pill-active-btn-box-shadow, none)};\n    --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-active-btn-backdrop-filter, none)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    &.has-options,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]:not([active='false'])) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n        --comp-active-btn-box-shadow: #{var-list(--tct-pill-primary-active-box-shadow, none)};\n        --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-primary-active-backdrop-filter, none)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n        --comp-active-btn-box-shadow: #{var-list(--tct-pill-secondary-active-box-shadow, none)};\n        --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-secondary-active-backdrop-filter, none)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n        --comp-active-btn-box-shadow: #{var-list(--tct-pill-tertiary-active-box-shadow, none)};\n        --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-tertiary-active-backdrop-filter, none)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    box-shadow: var(--comp-btn-box-shadow);\n    backdrop-filter: var(--comp-btn-backdrop-filter);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    font-weight: var-list(--tct-pill-btn-font-weight, 400);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus,\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    .has-options &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]:not([active='false'])) & {\n        background: var(--comp-active-btn-background);\n        box-shadow: var(--comp-active-btn-box-shadow);\n        backdrop-filter: var(--comp-active-btn-backdrop-filter);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus,\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]:not([active='false'])) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    .has-options &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --tct-icon-stroke-primary: #{var-list(--tct-pill-icon-stroke, currentcolor)};\n    --tct-icon-stroke-width: #{var-list(--tct-pill-icon-stroke-width, inherit)};\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]:not([active='false'])) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n    button {\n        border-style: none;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n/**\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.\n */\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverBottomContainer: HTMLElement;\n    popoverElement: HTMLQ2PopoverElement;\n    popoverTopContainer: HTMLElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasPopoverBottom = false;\n\n    @State()\n    hasPopoverTop = false;\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions = (await this.optionList?.getOptions()) as HTMLQ2OptionElement[];\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    @Watch('label')\n    async valueChanged(newValue, _oldValue, propName) {\n        const { label, multiple, selectedOptions, value } = this;\n        const valueProxy = propName === 'value' ? newValue : value;\n        const labelProxy = propName === 'label' ? newValue : label;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (propName === 'value' && newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n            const { value, display } = selectedOption || { value: valueProxy, display: labelProxy };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return loc(selectedOptionElements[0].display);\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.optionList.getOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.primaryBtn.focus();\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.optionList.getOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleFocusOut = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n        event.preventDefault();\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            this.executeActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.updateSlotState();\n        this.determineOptionCount();\n        this.updateSelectedOptionElements();\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value, null, 'value');\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.optionList?.getOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements =\n            (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) || [];\n    };\n\n    updateSlotState = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n        if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n        if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleFocusOut}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={this.buttonContent}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                            {!optionCount && active && <span class=\"sr\">({loc('tecton.element.pill.active')})</span>}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        max-height={this.popoverMaxHeight}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                        onFocusout={this.handleFocusOut}\n                    >\n                        <div class=\"popover-content\">\n                            <div\n                                ref={el => (this.popoverTopContainer = el)}\n                                class=\"popover-top-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverTop}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-top\"></slot>\n                            </div>\n                            <q2-option-list\n                                type=\"listbox\"\n                                ref={el => (this.optionList = el)}\n                                id=\"option-list\"\n                                onChange={this.handleChange}\n                                multiple={this.multiple}\n                                selectedOptions={this.selectedOptions}\n                                onReady={() => this.updateSelectedOptionElements()}\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                            >\n                                <slot />\n                            </q2-option-list>\n                            <div\n                                ref={el => (this.popoverBottomContainer = el)}\n                                class=\"popover-bottom-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverBottom}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-bottom\"></slot>\n                            </div>\n                        </div>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-pill.js","mappings":"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","names":["Q2Pill","__stencil_proxyCustomElement"],"sources":["src/components/q2-pill/q2-pill.scss?tag=q2-pill&encapsulation=shadow","src/components/q2-pill/q2-pill.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(pill-margin), --app-scale-2x, 10px);\n}\n\nq2-popover,\n.btn-wrapper {\n    --comp-pill-min-height: #{var-list(var-prefixer(pill-min-height), 44px)};\n    --comp-pill-btn-height: #{var-list(var-prefixer(pill-btn-height), 30px)};\n}\n\n.popover-top-container {\n    position: sticky;\n    top: 0;\n    z-index: 5;\n}\n\n.popover-bottom-container {\n    position: sticky;\n    bottom: 0;\n    z-index: 5;\n}\n\n.btn-wrapper {\n    --comp-pill-btn-border-width: #{var-list(var-prefixer(pill-btn-border-width), 2px)};\n    --comp-close-size: 0px;\n    --comp-btn-background: #{var-list(var-prefixer(pill-btn-background), --t-base, #ffffff)};\n    --comp-btn-box-shadow: #{var-list(--tct-pill-btn-box-shadow, none)};\n    --comp-btn-backdrop-filter: #{var-list(--tct-pill-btn-backdrop-filter, none)};\n    --comp-hover-btn-background: #{var-list(var-prefixer(pill-hover-btn-background), --t-gray-13, #e6e6e6)};\n    --comp-btn-padding: #{var-list(var-prefixer(pill-btn-padding-inline), --app-scale-3x, 15px)};\n    --comp-btn-color: #{var-list(var-prefixer(pill-btn-color), --t-gray-3, #262626)};\n    --comp-active-btn-color: #{var-list(--tct-pill-active-btn-color, --comp-btn-background)};\n    --comp-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-7, #666666)};\n    --comp-active-btn-box-shadow: #{var-list(--tct-pill-active-btn-box-shadow, --tct-pill-btn-box-shadow, none)};\n    --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-active-btn-backdrop-filter, none)};\n    --comp-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-border-color), --t-gray-7, #666666)};\n    --comp-hover-active-btn-background: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n    --comp-hover-active-btn-border-color: #{var-list(var-prefixer(pill-active-btn-background), --t-gray-6, #4d4d4d)};\n\n    position: relative;\n\n    &.has-options,\n    &.has-icon {\n        --comp-close-size: var(--comp-pill-btn-height);\n    }\n\n    :host([active]:not([active='false'])) & {\n        --comp-btn-color: #{var-list(var-prefixer(pill-active-btn-color), --t-base, #ffffff)};\n    }\n\n    :host([theme='primary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-primary-active-background, --t-primary, #0079c1)};\n        --comp-active-btn-box-shadow: #{var-list(--tct-pill-primary-active-btn-box-shadow, none)};\n        --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-primary-active-backdrop-filter, none)};\n        --comp-active-btn-color: #{var-list(--tct-pill-primary-active-font-color, --t-primary-text, #ffffff)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-primary-active-border-color, --t-primary, #0079c1)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-primary-active-hover-background,\n                --t-primary-l3,\n                #21acff\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-primary-active-hover-border-color,\n                --t-primary-l3,\n                #21acff\n            )};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-secondary-active-background, --t-secondary, #b3c2cc)};\n        --comp-active-btn-box-shadow: #{var-list(--tct-pill-secondary-active-box-shadow, none)};\n        --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-secondary-active-backdrop-filter, none)};\n        --comp-active-btn-color: #{var-list(--tct-pill-secondary-active-font-color, --t-secondary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-secondary-active-border-color, --t-secondary, #b3c2cc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-secondary-active-hover-background,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-secondary-active-hover-border-color,\n                --t-secondary-l3,\n                #c9d5db\n            )};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-active-btn-background: #{var-list(--tct-pill-tertiary-active-background, --t-tertiary, #e8f5fc)};\n        --comp-active-btn-box-shadow: #{var-list(--tct-pill-tertiary-active-box-shadow, none)};\n        --comp-active-btn-backdrop-filter: #{var-list(--tct-pill-tertiary-active-backdrop-filter, none)};\n        --comp-active-btn-color: #{var-list(--tct-pill-tertiary-active-font-color, --t-tertiary-text, #141414)};\n        --comp-active-btn-border-color: #{var-list(--tct-pill-tertiary-active-border-color, --t-tertiary, #e8f5fc)};\n        --comp-hover-active-btn-background: #{var-list(\n                --tct-pill-tertiary-active-hover-background,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n        --comp-hover-active-btn-border-color: #{var-list(\n                --tct-pill-tertiary-active-hover-border-color,\n                --t-tertiary-l3,\n                #eff8fd\n            )};\n    }\n}\n\n.btn-height-wrapper {\n    height: var(--comp-pill-min-height);\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    &:focus {\n        box-shadow: none;\n    }\n\n    :host([disabled]) & {\n        cursor: not-allowed;\n    }\n}\n\n.btn-close,\n.btn-primary {\n    cursor: pointer;\n    height: var(--comp-pill-btn-height);\n    border-style: solid;\n    border-radius: var-list(var-prefixer(pill-btn-border-radius), 30px);\n    transition-property: background, color, padding, width, opacity;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\n.btn-close,\n.btn-primary,\nq2-icon {\n    :host([disabled]) & {\n        opacity: var-list(var-prefixer(pill-disabled-opacity), --tct-disabled-opacity, --app-disabled-opacity, 0.4);\n        cursor: not-allowed;\n    }\n}\n\n.btn-primary {\n    background: var(--comp-btn-background);\n    box-shadow: var(--comp-btn-box-shadow);\n    backdrop-filter: var(--comp-btn-backdrop-filter);\n    border-width: var-list(--comp-pill-btn-border-width);\n    border-color: var-list(var-prefixer(pill-btn-border-color), --t-a11y-gray-color-AA, #949494);\n    padding-inline: var(--comp-btn-padding);\n    padding-right: calc(var(--comp-btn-padding) + var(--comp-close-size));\n    font-size: var-list(var-prefixer(pill-btn-font-size), --app-font-size, 14px);\n    font-weight: var-list(--tct-pill-btn-font-weight, 400);\n    color: var(--comp-btn-color);\n    display: block;\n    width: 100%;\n    text-align: start;\n\n    &:focus {\n        box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n    }\n\n    &:hover {\n        background: var(--comp-hover-btn-background);\n    }\n\n    .has-options &,\n    .has-icon & {\n        padding-right: calc(#{var-list(var-prefixer(pill-icon-gap), --app-scale-1x, 5px)} + var(--comp-close-size));\n    }\n\n    .has-options & {\n        @include line-clamp(1);\n        max-width: var-list(var-prefixer(pill-max-width), 200px);\n    }\n\n    :host([active]:not([active='false'])) & {\n        background: var(--comp-active-btn-background);\n        box-shadow: var(--comp-active-btn-box-shadow);\n        backdrop-filter: var(--comp-active-btn-backdrop-filter);\n        border-color: var(--comp-active-btn-border-color);\n        color: var(--comp-active-btn-color);\n\n        &:focus {\n            box-shadow: var-list(--tct-pill-btn-focus-box-shadow, --const-double-focus-ring);\n        }\n\n        &:hover {\n            background: var(--comp-hover-active-btn-background);\n            border-color: var(--comp-hover-active-btn-border-color);\n        }\n    }\n}\n\n.btn-close {\n    background: transparent;\n    border-color: transparent;\n    border-width: var(--comp-pill-btn-border-width);\n    width: var(--comp-close-size);\n    height: var(--comp-close-size);\n    padding: 0;\n    border: 0;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0;\n    :host([active]:not([active='false'])) & {\n        color: var(--comp-active-btn-color);\n    }\n\n    .has-options &,\n    .has-icon & {\n        opacity: 1;\n    }\n}\n\nq2-icon {\n    --tct-icon-stroke-primary: #{var-list(--tct-pill-icon-stroke, currentcolor)};\n    --tct-icon-stroke-width: #{var-list(--tct-pill-icon-stroke-width, inherit)};\n    width: var-list(var-prefixer(pill-icon-size), 14px);\n    height: var-list(var-prefixer(pill-icon-size), 14px);\n    transition-property: transform;\n    transition: var-list(var-prefixer(pill-btn-tween), --app-tween-1, unquote('0.2s ease'));\n}\n\ndiv.btn-close {\n    pointer-events: none;\n\n    :host([open]) & q2-icon {\n        transform: rotate(180deg);\n    }\n}\n\nbutton.btn-close {\n    :host([active]:not([active='false'])) & {\n        &:focus,\n        &:hover {\n            background: var-list(var-prefixer(pill-hover-close-btn-background), --t-top-a1, rgba(13, 13, 13, 0.35));\n            border-color: var-list(var-prefixer(pill-hover-close-btn-border-color), --t-top-a1, rgba(13, 13, 13, 0.35));\n        }\n    }\n}\n\nq2-popover {\n    top: calc(var(--comp-pill-min-height) - calc(calc(var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2));\n}\n\n:host([borderless]:not([borderless='false'])) {\n    button {\n        border-style: none;\n    }\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Listen,\n    Watch,\n    Element,\n    EventEmitter,\n    Event,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, resizeIframe, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\nimport { IOptionValue } from '../q2-option-list/q2-option-list';\n\n/**\n * @slot popover-top - An optional slot to display custom content persistently at the top of the popover. This is **not** compatible with the action sheet workflow.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the popover. This is **not** compatible with the action sheet workflow.\n */\n@Component({ tag: 'q2-pill', shadow: true, styleUrl: 'q2-pill.scss' })\nexport class Q2Pill implements ComponentInterface {\n    // #region Own Properties\n\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverBottomContainer: HTMLElement;\n    popoverElement: HTMLQ2PopoverElement;\n    popoverTopContainer: HTMLElement;\n    primaryBtn: HTMLButtonElement;\n    primaryBtnWrapper: HTMLElement;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasPopoverBottom = false;\n\n    @State()\n    hasPopoverTop = false;\n\n    @State()\n    optionCount: number;\n\n    @State()\n    selectedOptionElements: HTMLQ2OptionElement[] = [];\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determine if the elements is in the selected state, with values. */\n    @Prop({ reflect: true, mutable: true })\n    active: boolean;\n\n    /** Indicates that the pill has no border */\n    @Prop({ reflect: true })\n    borderless: boolean;\n\n    /** Indicates the pill cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /**\n     * The maximum number of characters to display before ellipcizing.\n     * @info\n     * Limitless by default.\n     */\n    @Prop({ reflect: true })\n    maxLength: number;\n\n    /**\n     * Enables the multi-select ability for the dropdown.\n     * @info\n     * Only applicable when options are provided.\n     */\n    @Prop({ reflect: true })\n    multiple: boolean;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop()\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** A list of the selected options on the element. */\n    @Prop({ mutable: true })\n    selectedOptions: IOptionValue[] = [];\n\n    /** The color of the element when in the active state. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    /** The value emitted when the component is selected. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the pill is clicked or the selected options change.\n     *\n     * When multi-select is enabled, `value` will be `undefined`.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string; values: IOptionValue[]; active: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad() {\n        overrideFocus(this.hostElement);\n        this.syncValueProperties();\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('displayChanged')\n    handleSelectedDisplay() {\n        if (this.multiple) return;\n        this.updateSelectedOptionElements();\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.primaryBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    async popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.setOptionListActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking the `<button>` to hide the popover if it is visible.\n     *\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover if it is hidden.\n     *\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the `<button>` to display the popover and selecting the option(s) with the specified value(s).\n     *\n     * If multi-select is enabled and the `closePopover` argument is `true` (default), the popover will be closed\n     * after the option(s) are selected.\n     *\n     * @testOnly\n     */\n    @Method()\n    async setValue(values: string | string[], options: { closePopover?: boolean } = { closePopover: true }) {\n        const valueSet = new Set(Array.isArray(values) ? values : [values]);\n        const allOptions = (await this.getOptionListOptions()) as HTMLQ2OptionElement[];\n        if (!this.open) {\n            await this.openPopover();\n            await waitForNextPaint();\n        }\n\n        valueSet.forEach(value => {\n            allOptions.find(option => option.value === value)?.click();\n        });\n\n        if (options.closePopover) {\n            await this.closePopover();\n            await waitForNextPaint();\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('selectedOptions')\n    selectedOptionsChanged(newValue) {\n        const { multiple } = this;\n        const firstValue = newValue?.[0]?.value ?? null;\n        if (multiple) {\n            if (this.value) this.value = null;\n            this.updateSelectedOptionElements();\n        } else if (this.value === firstValue) {\n            this.updateSelectedOptionElements();\n        } else {\n            this.value = firstValue;\n        }\n    }\n\n    @Watch('value')\n    @Watch('label')\n    async valueChanged(newValue, _oldValue, propName) {\n        const { label, multiple, selectedOptions, value } = this;\n        const valueProxy = propName === 'value' ? newValue : value;\n        const labelProxy = propName === 'label' ? newValue : label;\n        if (multiple) return;\n        const firstValue = selectedOptions?.[0]?.value ?? null;\n        if (propName === 'value' && newValue === firstValue) this.updateSelectedOptionElements();\n        else {\n            const selectedOption = (await this.getOption(newValue)) as HTMLQ2OptionElement;\n            const { value, display } = selectedOption || { value: valueProxy, display: labelProxy };\n            this.selectedOptions = value ? [{ value, display }] : [];\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get buttonContent() {\n        const { label, selectedOptions, selectedOptionElements, optionCount } = this;\n        if (!optionCount || selectedOptionElements.length === 0) return loc(label);\n        else if (selectedOptionElements.length === 1) return `${loc(selectedOptionElements[0].display)}`;\n\n        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });\n    }\n\n    get truncatedButtonContent() {\n        const { maxLength, buttonContent } = this;\n        if (maxLength && buttonContent.length > maxLength) return `${buttonContent.substring(0, maxLength)}…`;\n        else return buttonContent;\n    }\n\n    _togglePopover() {\n        const { primaryBtn } = this;\n        primaryBtn?.click();\n        primaryBtn?.focus();\n        primaryBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    clearSelectedOptions = () => {\n        this.selectedOptions = [];\n        this.value = null;\n        this.active = false;\n        this.open = false;\n        this.primaryBtn.focus();\n        this.change.emit({ value: null, values: [], active: false });\n        this.scheduledAfterRender.push(resizeIframe);\n    };\n\n    determineOptionCount = async () => {\n        if (this.optionList) {\n            const allOptions = await this.getOptionListOptions();\n            this.optionCount = allOptions.length;\n        } else {\n            const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n            this.optionCount = numberOfOptions;\n        }\n    };\n\n    executeActionSheet = async (event: MouseEvent | KeyboardEvent) => {\n        const result = await showActionSheetList(this, event);\n        this.primaryBtn.focus();\n        this.handleSelectionChanges(result);\n    };\n\n    getOption = async (value: string) => {\n        if (this.optionList) {\n            const options = await this.getOptionListOptions();\n            return options.find(option => option.value === value);\n        } else {\n            return this.hostElement.querySelector<HTMLQ2OptionElement>(`q2-option[value=\"${value}\"]`);\n        }\n    };\n\n    // for spec testing\n    getOptionListOptions = async () => {\n        return await this.optionList?.getOptions();\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        this.handleSelectionChanges(event.detail);\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        if (this.disabled) return;\n        if (this.optionCount) {\n            if (shouldShowActionSheet(this)) {\n                this.executeActionSheet(event);\n            } else {\n                await this.popoverElement.toggle();\n            }\n        } else {\n            const { value, label } = this;\n            const isActive = (this.active = !this.active);\n            const values = isActive ? [{ value, display: label }] : [];\n            this.change.emit({\n                value,\n                values,\n                active: isActive,\n            });\n        }\n    };\n\n    handleFocusOut = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    handleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (!this.optionCount || this.disabled || isTabMetaOrCtrl) return;\n        event.preventDefault();\n        const hasSlot = this.hasPopoverTop || this.hasPopoverBottom;\n\n        // slots are incompatible with action sheet\n        if (shouldShowActionSheet(this, event) && !hasSlot) {\n            this.executeActionSheet(event);\n        } else {\n            this.handleOptionListExternalKeydown(event);\n        }\n    };\n\n    // for spec testing\n    handleOptionListExternalKeydown = async (event: KeyboardEvent) => {\n        await this.optionList?.handleExternalKeydown(event);\n    };\n\n    handleSelectionChanges = async (changeDetails: { value?: string; values?: IOptionValue[] }) => {\n        const { multiple } = this;\n        const { value = '', values = [] } = changeDetails;\n        const isActive = multiple ? !!values.length : !!value;\n        if (!this.hostElement.onchange) {\n            if (multiple) {\n                this.selectedOptions = values;\n                this.value = undefined;\n            } else {\n                const selectedOption = (await this.getOption(value)) as HTMLQ2OptionElement;\n                this.selectedOptions = selectedOption\n                    ? [{ value: selectedOption.value, display: selectedOption.display }]\n                    : [];\n                this.value = selectedOption?.value || undefined;\n            }\n        }\n\n        this.change.emit({\n            value: multiple ? undefined : value,\n            values,\n            active: isActive,\n        });\n    };\n\n    handleWrapperClick = () => {\n        this.primaryBtn.focus();\n        this.primaryBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onMutationObserved = () => {\n        this.updateSlotState();\n        this.determineOptionCount();\n        this.updateSelectedOptionElements();\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: 'close' | 'select' | 'open' }>) => {\n        const { open, action } = event.detail;\n        if (open) return;\n\n        switch (action) {\n            case 'select':\n            case 'close':\n                this.primaryBtn.focus();\n                break;\n        }\n    };\n\n    // for spec testing\n    setOptionListActiveElement = async (index: number) => {\n        await this.optionList?.setActiveElement(index);\n    };\n\n    syncValueProperties = () => {\n        const { value, selectedOptions } = this;\n        if (!!selectedOptions?.length) this.selectedOptionsChanged(selectedOptions);\n        else if (value) this.valueChanged(value, null, 'value');\n    };\n\n    updateSelectedOptionElements = async () => {\n        const { selectedOptions = [] } = this;\n        const selectedValues = selectedOptions.map(option => option.value);\n        const options = await this.getOptionListOptions();\n        if (this.optionCount) this.active = !!selectedValues.length;\n        this.selectedOptionElements =\n            (options?.filter(option => selectedValues.includes(option.value)) as HTMLQ2OptionElement[]) || [];\n    };\n\n    updateSlotState = () => {\n        const { hostElement, hasPopoverTop, hasPopoverBottom } = this;\n        const popTopSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-top\"]');\n        const popBottomSlot = hostElement.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"popover-bottom\"]');\n        const topSlotHasNode = popTopSlot?.assignedNodes().length > 0;\n        const bottomSlotHasNode = popBottomSlot?.assignedNodes().length > 0;\n\n        if (hasPopoverTop !== topSlotHasNode) this.hasPopoverTop = topSlotHasNode;\n        if (hasPopoverBottom !== bottomSlotHasNode) this.hasPopoverBottom = bottomSlotHasNode;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    renderIcon() {\n        const { optionCount, active } = this;\n        const isButton = optionCount && active;\n        const TagName = isButton ? 'button' : 'div';\n        const iconName = isButton || !optionCount ? 'close' : 'chevron-down';\n\n        return (\n            <TagName\n                class=\"btn-close\"\n                onClick={(isButton && this.clearSelectedOptions) || undefined}\n                disabled={(isButton && this.disabled) || undefined}\n                aria-label={(isButton && loc('tecton.element.pill.clearSelection')) || undefined}\n                type={(isButton && 'button') || undefined}\n            >\n                <q2-icon type={iconName}></q2-icon>\n            </TagName>\n        );\n    }\n\n    render() {\n        const { optionCount, active, open } = this;\n        const wrapperClassNames = ['btn-wrapper'];\n        if (optionCount || active) wrapperClassNames.push('has-icon');\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <click-elsewhere onChange={this.onClickElsewhere}>\n                <div class={wrapperClassNames.join(' ')}>\n                    <div\n                        class=\"btn-height-wrapper\"\n                        ref={el => (this.primaryBtnWrapper = el)}\n                        onClick={this.handleWrapperClick}\n                        tabIndex={-1}\n                    >\n                        <button\n                            class=\"btn-primary\"\n                            test-id=\"btn-control\"\n                            type=\"button\"\n                            role={(optionCount && 'combobox') || undefined}\n                            ref={el => (this.primaryBtn = el)}\n                            onClick={this.handleClick}\n                            onKeyDown={this.handleKeydown}\n                            onFocusout={this.handleFocusOut}\n                            disabled={this.disabled}\n                            aria-roledescription={!optionCount && 'filter'}\n                            aria-controls={(optionCount && 'option-list') || undefined}\n                            aria-expanded={(optionCount && `${!!open}`) || undefined}\n                            aria-label={`${this.buttonContent}${!optionCount && active ? ` ${loc('tecton.element.pill.active')}` : ''}`}\n                            aria-describedby={(optionCount && 'option-description') || undefined}\n                        >\n                            {this.truncatedButtonContent}\n                        </button>\n                    </div>\n                    {this.renderIcon()}\n                    {!!optionCount && this.renderHiddenElement()}\n                </div>\n                {this.optionCount > 0 && (\n                    <q2-popover\n                        ref={el => (this.popoverElement = el)}\n                        controlElement={this.primaryBtn}\n                        open={this.open}\n                        max-height={this.popoverMaxHeight}\n                        minHeight={this.popoverMinHeight}\n                        direction={this.popoverDirection}\n                        align={this.popoverAlignment}\n                        onFocusout={this.handleFocusOut}\n                    >\n                        <div class=\"popover-content\">\n                            <div\n                                ref={el => (this.popoverTopContainer = el)}\n                                class=\"popover-top-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverTop}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-top\"></slot>\n                            </div>\n                            <q2-option-list\n                                type=\"listbox\"\n                                ref={el => (this.optionList = el)}\n                                id=\"option-list\"\n                                onChange={this.handleChange}\n                                multiple={this.multiple}\n                                selectedOptions={this.selectedOptions}\n                                onReady={() => this.updateSelectedOptionElements()}\n                                onPopoverState={this.onPopoverState}\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                            >\n                                <slot />\n                            </q2-option-list>\n                            <div\n                                ref={el => (this.popoverBottomContainer = el)}\n                                class=\"popover-bottom-container\"\n                                tabindex=\"-1\"\n                                hidden={!this.hasPopoverBottom}\n                                onKeyDown={this.handleKeydown}\n                            >\n                                <slot name=\"popover-bottom\"></slot>\n                            </div>\n                        </div>\n                    </q2-popover>\n                )}\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-relative-time.js

@@ -154,7 +154,7 @@ const Q2RelativeTime$1 = /*@__PURE__*/ proxyCustomElement(class Q2RelativeTime e
     // #region Render Methods
     render() {
         const { shouldShow, displayedMessage } = this;
-        return h(Fragment, { key: 'e1d5750a6b6a3b4ca86c5b4af8c2ecb1975f1c4e' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
+        return h(Fragment, { key: '9e4de12f0204aed3785403117927f10d2b1aded8' }, shouldShow ? h("time", { dateTime: displayedMessage }, displayedMessage) : null);
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-resize-observer2.js

@@ -78,7 +78,7 @@ const Q2ResizeObserver = /*@__PURE__*/ proxyCustomElement(class Q2ResizeObserver
     // #endregion
     // #region Render Methods
     render() {
-        return h("slot", { key: 'ddbfca45153c9007a9739ac2576610b530fb2792', onSlotchange: this.handleSlotChange });
+        return h("slot", { key: '7ca13e04c3d3911c557e21c027b625ae2bd3d8ec', onSlotchange: this.handleSlotChange });
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-section.js

@@ -189,9 +189,9 @@ const Q2Section$1 = /*@__PURE__*/ proxyCustomElement(class Q2Section extends HTM
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: 'a452ccc6afa55a60b5a113149b61cff3c2b91d41', class: "wrapper" }, h("header", { key: '3c1fad3cc6c5a699c630e3a79bf24aac6fab9bd8', class: hasHeader ? 'has-header' : '' }, h("div", { key: '92c40fed762ba25a1773b38256463b1635957124', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '4171548d9475cbc26385e92796fce4fe31de7efb', class: "title" }, loc(this.label)), h("div", { key: '3e15ee305c36a0e595ec5bad06b8e8e182d00294', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '4dd77571c2be2a7a59b0953d689bc502446bec57', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'adc0959a31b2cd03fe42ddbed049aa2131828b82', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '5da2d38afbe4f9b7341905fdc8b8dd0ef1ca8295', type: "chevron-up" })))), h("div", { key: 'c113434c40a9498b17fa94584895a87a8d0a8457', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '75ee3365532a808fddf450d5d77b633ba5356446', class: "wrapper" }, h("header", { key: '5d770cc75a6db249182a3648fa1bdd8807d6a59f', class: hasHeader ? 'has-header' : '' }, h("div", { key: '9e9746b5365c2c84ed1cbc41bfd1a72fa00a31c4', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '8ac27af413dfb5256798022a4969909c1b765207', class: "title" }, loc(this.label)), h("div", { key: '66dae1296194b900b31cfab5771fedce650520b3', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: '0f1fd020cec309910a89e89723bfbd334fc0cf69', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'cd94ab34ea64ee4d82d74a3937151d6a815fc8c6', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '14fc44b7680b1bc16e6f60b0ce03e05a7e484e6e', type: "chevron-up" })))), h("div", { key: 'b3047b05bcafa05c3304887c8817375429f265b8', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '02fe907e426ce7ac692173aa00457e3d819922fb', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '9743cb500ca41269b6434a442c94f9555f0c7d1e', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: 'b78e94b5caba8d5de6a2266d7ac788b2d0058a69', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: '67fa665161cd0680a20e9d2615edc9caebbfa255', ref: (el) => (this.contentSlot = el) })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/q2-select2.js

@@ -101,8 +101,11 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
             const { popoverElement } = this;
             if (!popoverElement)
                 return;
-            popoverElement.open = false;
-            this.innerInputField.blur();
+            // close popover only if not nested in a shadow dom
+            if (this.hostElement.getRootNode().nodeName !== '#document-fragment') {
+                popoverElement.open = false;
+                this.innerInputField.blur();
+            }
         };
         this.destroyEventListeners = () => {
             var _a;
@@ -773,7 +776,7 @@ const Q2Select = /*@__PURE__*/ proxyCustomElement(class Q2Select extends HTMLEle
             ]), checked: showSelected, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.visibilityToggleKeyDown }), h("label", { htmlFor: "selected" }, loc('tecton.element.select.multiHeader.selected', [selectedOptionsCount]))))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'ec16f1d70315236cf872414291a81959b7c9b3d6', class: this.wrapperClasses, onChange: this.clickedElsewhere }, this.renderSelectField()));
+        return (h("click-elsewhere", { key: 'c1a7e133e25c7ee4b07e5891d46a82bf01b4d798', class: this.wrapperClasses, onChange: this.clickedElsewhere }, this.renderSelectField()));
     }
     get hostElement() { return this; }
     static get watchers() { return {