npm - q2-tecton-elements - Versions diffs - 1.71.4 → 1.73.0 - Mend

q2-tecton-elements 1.71.4 → 1.73.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (415) hide show

package/dist/components/q2-pill.js CHANGED Viewed

@@ -183,7 +183,9 @@ const f =  t(class extends o {
     c(t, this.hostElement) && this.primaryBtn.focus();
   }
   async popoverStateHandler({detail: {open: t}}) {
-    this.open !== t && (this.open = t), t || this.setOptionListActiveElement(null);
+    var o;
+    this.open !== t && (this.open = t, t || (this.setOptionListActiveElement(null),
+    null === (o = this.primaryBtn) || void 0 === o || o.focus()));
   }
   // #endregion
   // #region Public Methods API
@@ -292,19 +294,19 @@ const f =  t(class extends o {
   render() {
     const {optionCount: t, active: o, open: i} = this, {text: r, truncatedText: a} = this.buttonContent, n = [ "btn-wrapper" ];
     return (t || o) && n.push("has-icon"), t && n.push("has-options"), e("click-elsewhere", {
-      key: "5bbfce776dcd2ef3ac7097b37fd2df039d47c21f",
+      key: "8cba59cde3746d0397305512334eb56357e9e5d4",
       onChange: this.onClickElsewhere
     }, e("div", {
-      key: "9d8d7a4b6afb1d931d762a0e656509a2036180ba",
+      key: "391da54f9fd870e223765e6266291dff9775abe6",
       class: n.join(" ")
     }, e("div", {
-      key: "5bbf245bd78d2ed075b9a16cc46396528f20b823",
+      key: "06431fd76c0a9d30833756407c89ff59609bc3a3",
       class: "btn-height-wrapper",
       ref: t => this.primaryBtnWrapper = t,
       onClick: this.handleWrapperClick,
       tabIndex: -1
     }, e("button", {
-      key: "494b1555d332a62c8a2946da260a9bb5f26849d5",
+      key: "609557b9206c91511e78e26c990230e61f7e5c19",
       class: "btn-primary",
       "test-id": "btn-control",
       type: "button",
@@ -321,10 +323,10 @@ const f =  t(class extends o {
       "aria-pressed": t ? void 0 : "" + !!o,
       "aria-describedby": t ? "option-description" : void 0
     }, e("slot", {
-      key: "d26426863ec1dadfbf2049ca6b85dcdb28875858",
+      key: "e1f4c57b7526f714cf0242e101ec0f5c39ebafa5",
       name: "decorator"
     }), a)), this.renderIcon(), !!t && this.renderHiddenElement()), this.optionCount > 0 && e("q2-popover", {
-      key: "1b06b432ce4ab98a1d1d0b70acb7074849e94999",
+      key: "2777b45efbd94516a633ca4ff1e2d6a452ecbd81",
       ref: t => this.popoverElement = t,
       controlElement: this.primaryBtn,
       open: this.open,
@@ -334,20 +336,20 @@ const f =  t(class extends o {
       align: this.popoverAlignment,
       onFocusout: this.handleFocusOut
     }, e("div", {
-      key: "ea87e923fe84d94fc1f9a1b72b9fd1deef5cb5ad",
+      key: "54d2c1c8814be9265b4ed8092bd3360da76cc2b0",
       class: "popover-content"
     }, e("div", {
-      key: "53b50f438af20d4474b42511ee334391ff429fa0",
+      key: "fb95b6f0ab78119f0bf944fa67ec0bcf391088dc",
       ref: t => this.popoverTopContainer = t,
       class: "popover-top-container",
       tabindex: "-1",
       hidden: !this.hasPopoverTop,
       onKeyDown: this.handleSlotKeydown
     }, e("slot", {
-      key: "0996ca12d288c696601919df48ef6c8784bbf8d4",
+      key: "8e522c96fa1241e7c05fbc989d59f71ec2bc1d98",
       name: "popover-top"
     })), e("q2-option-list", {
-      key: "9faef4049f040e8c22b46107a7a618224cd0e82c",
+      key: "5e7a827ac08395399e0b04fa9074f5b6a3fa1c48",
       type: "listbox",
       ref: t => this.optionList = t,
       id: "option-list",
@@ -358,16 +360,16 @@ const f =  t(class extends o {
       onPopoverState: this.onPopoverState,
       label: l("tecton.element.optionList.label", [ this.optionListLabel ])
     }, e("slot", {
-      key: "8f54a5eb6670b9bffb2062eeb9815834b2aa8de7"
+      key: "4197780a058b3937ac748b53aef6afc5eabd8c7a"
     })), e("div", {
-      key: "1e61e07bb5c6bdcdfd68080cc606bb1a42f48d79",
+      key: "78992c83515dcfe6acbf7e09a5efced2d65c1903",
       ref: t => this.popoverBottomContainer = t,
       class: "popover-bottom-container",
       tabindex: "-1",
       hidden: !this.hasPopoverBottom,
       onKeyDown: this.handleSlotKeydown
     }, e("slot", {
-      key: "48a8d60e3eae7de823d1e55ab9153dedda9a739d",
+      key: "553f959ec8b866111b2e5c5f9090d8ddee5fd208",
       name: "popover-bottom"
     })))));
   }
@@ -388,7 +390,7 @@ const f =  t(class extends o {
     };
   }
   static get style() {
-    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-letter-spacing:var(--tct-pill-btn-letter-spacing, inherit);--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));letter-spacing:var(--comp-btn-letter-spacing);padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, var(--const-px-14, 14px))));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:flex;align-items:center;gap:var(--app-scale-1x, 5px);width:100%;text-align:start}.btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-pill-decorator-icon-primary-stroke, var(--comp-btn-color));--tct-icon-stroke-secondary:var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-btn-color))}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}.btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}:host([active]:not([active=false])) .btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-pill-active-decorator-icon-primary-stroke, var(--tct-pill-decorator-icon-primary-stroke, var(--comp-active-btn-color)));--tct-icon-stroke-secondary:var(--tct-pill-active-decorator-icon-secondary-stroke, var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-active-btn-color)))}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}.btn-close:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, 14px));transition-property:transform;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}div.btn-close{pointer-events:none}:host([open]) div.btn-close q2-icon{transform:rotate(180deg)}:host([active]:not([active=false])) button.btn-close:focus,:host([active]:not([active=false])) button.btn-close:hover{background:var(--tct-pill-hover-close-btn-background, var(--t-pill-hover-close-btn-background, var(--t-top-a1, rgba(13, 13, 13, 0.35))));border-color:var(--tct-pill-hover-close-btn-border-color, var(--t-pill-hover-close-btn-border-color, var(--t-top-a1, rgba(13, 13, 13, 0.35))))}q2-popover{top:calc(var(--comp-pill-min-height) - (var(--comp-pill-min-height) - var(--comp-pill-btn-height)) / 2)}:host([borderless]:not([borderless=false])) button{border-style:none}';
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:inline-block;position:relative;line-height:0}:host(:not(:last-child)){margin-inline-end:var(--tct-pill-margin, var(--t-pill-margin, var(--app-scale-2x, 10px)))}q2-popover,.btn-wrapper{--comp-pill-min-height:var(--tct-pill-min-height, var(--t-pill-min-height, 44px));--comp-pill-btn-height:var(--tct-pill-btn-height, var(--t-pill-btn-height, 30px))}.popover-top-container{position:sticky;top:0;z-index:5}.popover-bottom-container{position:sticky;bottom:0;z-index:5}.btn-wrapper{--comp-pill-btn-border-width:var(--tct-pill-btn-border-width, var(--t-pill-btn-border-width, 2px));--comp-close-size:0px;--comp-btn-background:var(--tct-pill-btn-background, var(--t-pill-btn-background, var(--t-base, #ffffff)));--comp-btn-box-shadow:var(--tct-pill-btn-box-shadow, none);--comp-btn-backdrop-filter:var(--tct-pill-btn-backdrop-filter, none);--comp-hover-btn-background:var(--tct-pill-hover-btn-background, var(--t-pill-hover-btn-background, var(--t-gray-13, #e6e6e6)));--comp-btn-padding:var(--tct-pill-btn-padding-inline, var(--t-pill-btn-padding-inline, var(--app-scale-3x, 15px)));--comp-btn-letter-spacing:var(--tct-pill-btn-letter-spacing, inherit);--comp-btn-color:var(--tct-pill-btn-color, var(--t-pill-btn-color, var(--t-gray-3, #262626)));--comp-active-btn-color:var(--tct-pill-active-btn-color, var(--comp-btn-background));--comp-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-7, #666666)));--comp-active-btn-box-shadow:var(--tct-pill-active-btn-box-shadow, var(--tct-pill-btn-box-shadow, none));--comp-active-btn-backdrop-filter:var(--tct-pill-active-btn-backdrop-filter, none);--comp-active-btn-border-color:var(--tct-pill-active-btn-border-color, var(--t-pill-active-btn-border-color, var(--t-gray-7, #666666)));--comp-hover-active-btn-background:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));--comp-hover-active-btn-border-color:var(--tct-pill-active-btn-background, var(--t-pill-active-btn-background, var(--t-gray-6, #4d4d4d)));position:relative}.btn-wrapper.has-options,.btn-wrapper.has-icon{--comp-close-size:var(--comp-pill-btn-height)}:host([active]:not([active=false])) .btn-wrapper{--comp-btn-color:var(--tct-pill-active-btn-color, var(--t-pill-active-btn-color, var(--t-base, #ffffff)))}:host([theme=primary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-primary-active-background, var(--t-primary, #0079c1));--comp-active-btn-box-shadow:var(--tct-pill-primary-active-btn-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-primary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-primary-active-font-color, var(--t-primary-text, #ffffff));--comp-active-btn-border-color:var(--tct-pill-primary-active-border-color, var(--t-primary, #0079c1));--comp-hover-active-btn-background:var(--tct-pill-primary-active-hover-background, var(--t-primary-l3, #21acff));--comp-hover-active-btn-border-color:var(--tct-pill-primary-active-hover-border-color, var(--t-primary-l3, #21acff))}:host([theme=secondary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-secondary-active-background, var(--t-secondary, #b3c2cc));--comp-active-btn-box-shadow:var(--tct-pill-secondary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-secondary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-secondary-active-font-color, var(--t-secondary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-secondary-active-border-color, var(--t-secondary, #b3c2cc));--comp-hover-active-btn-background:var(--tct-pill-secondary-active-hover-background, var(--t-secondary-l3, #c9d5db));--comp-hover-active-btn-border-color:var(--tct-pill-secondary-active-hover-border-color, var(--t-secondary-l3, #c9d5db))}:host([theme=tertiary]) .btn-wrapper{--comp-active-btn-background:var(--tct-pill-tertiary-active-background, var(--t-tertiary, #e8f5fc));--comp-active-btn-box-shadow:var(--tct-pill-tertiary-active-box-shadow, none);--comp-active-btn-backdrop-filter:var(--tct-pill-tertiary-active-backdrop-filter, none);--comp-active-btn-color:var(--tct-pill-tertiary-active-font-color, var(--t-tertiary-text, #141414));--comp-active-btn-border-color:var(--tct-pill-tertiary-active-border-color, var(--t-tertiary, #e8f5fc));--comp-hover-active-btn-background:var(--tct-pill-tertiary-active-hover-background, var(--t-tertiary-l3, #eff8fd));--comp-hover-active-btn-border-color:var(--tct-pill-tertiary-active-hover-border-color, var(--t-tertiary-l3, #eff8fd))}.btn-height-wrapper{height:var(--comp-pill-min-height);display:flex;align-items:center;cursor:pointer}.btn-height-wrapper:focus{box-shadow:none}:host([disabled]) .btn-height-wrapper{cursor:not-allowed}.btn-close,.btn-primary{cursor:pointer;height:var(--comp-pill-btn-height);border-style:solid;border-radius:var(--tct-pill-btn-border-radius, var(--t-pill-btn-border-radius, 30px));transition-property:background, color, padding, width, opacity;transition:var(--tct-pill-btn-tween, var(--t-pill-btn-tween, var(--app-tween-1, 0.2s ease)))}:host([disabled]) .btn-close,:host([disabled]) .btn-primary,:host([disabled]) q2-icon{opacity:var(--tct-pill-disabled-opacity, var(--t-pill-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}.btn-primary{background:var(--comp-btn-background);box-shadow:var(--comp-btn-box-shadow);backdrop-filter:var(--comp-btn-backdrop-filter);border-width:var(--comp-pill-btn-border-width);border-color:var(--tct-pill-btn-border-color, var(--t-pill-btn-border-color, var(--t-a11y-gray-color-AA, #949494)));letter-spacing:var(--comp-btn-letter-spacing);padding-inline:var(--comp-btn-padding);padding-right:calc(var(--comp-btn-padding) + var(--comp-close-size));font-size:var(--tct-pill-btn-font-size, var(--t-pill-btn-font-size, var(--app-font-size, var(--const-px-14, 14px))));font-weight:var(--tct-pill-btn-font-weight, 400);color:var(--comp-btn-color);display:flex;align-items:center;gap:var(--app-scale-1x, 5px);width:100%;text-align:start}.btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-size:1em;--tct-icon-stroke-primary:var(--tct-pill-decorator-icon-primary-stroke, var(--comp-btn-color));--tct-icon-stroke-secondary:var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-btn-color))}.btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}.btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}.btn-primary:hover{background:var(--comp-hover-btn-background)}.has-options .btn-primary,.has-icon .btn-primary{padding-right:calc(var(--tct-pill-icon-gap, var(--t-pill-icon-gap, var(--app-scale-1x, 5px))) + var(--comp-close-size))}.has-options .btn-primary{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:var(--tct-pill-max-width, var(--t-pill-max-width, 200px))}:host([active]:not([active=false])) .btn-primary{background:var(--comp-active-btn-background);box-shadow:var(--comp-active-btn-box-shadow);backdrop-filter:var(--comp-active-btn-backdrop-filter);border-color:var(--comp-active-btn-border-color);color:var(--comp-active-btn-color)}:host([active]:not([active=false])) .btn-primary:focus{box-shadow:var(--tct-pill-btn-focus-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-primary:hover{background:var(--comp-hover-active-btn-background);border-color:var(--comp-hover-active-btn-border-color)}:host([active]:not([active=false])) .btn-primary ::slotted(q2-icon[slot=decorator]){--tct-icon-stroke-primary:var(--tct-pill-active-decorator-icon-primary-stroke, var(--tct-pill-decorator-icon-primary-stroke, var(--comp-active-btn-color)));--tct-icon-stroke-secondary:var(--tct-pill-active-decorator-icon-secondary-stroke, var(--tct-pill-decorator-icon-secondary-stroke, var(--comp-active-btn-color)))}.btn-close{background:transparent;border-color:transparent;border-width:var(--comp-pill-btn-border-width);width:var(--comp-close-size);height:var(--comp-close-size);padding:0;border:0;display:inline-flex;justify-content:center;align-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0}.btn-close:focus-visible{box-shadow:var(--tct-pill-btn-focus-visible-box-shadow, var(--const-double-focus-ring))}:host([active]:not([active=false])) .btn-close{color:var(--comp-active-btn-color)}.has-options .btn-close,.has-icon .btn-close{opacity:1}q2-icon{--tct-icon-stroke-primary:var(--tct-pill-icon-stroke, currentcolor);--tct-icon-stroke-width:var(--tct-pill-icon-stroke-width, inherit);width:var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));height:var(--tct-pill-icon-size, var(--t-pill-icon-size, var(--const-px-18, 18px)));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}';
   }
 }, [ 257, "q2-pill", {
   active: [ 1540 ],

package/dist/components/q2-popover2.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { proxyCustomElement as o, HTMLElement as t, createEvent as i, h as e, transformTag as r } from "@stencil/core/internal/client";
+import { proxyCustomElement as o, HTMLElement as t, createEvent as i, h as e, transformTag as n } from "@stencil/core/internal/client";
-import { j as n, w as p, u as s, v as a, d as l } from "./index2.js";
+import { f as r, w as s, u as p, v as a, d as l } from "./index2.js";
-import { m as c } from "./mirror-emit.js";
+import { m as h } from "./mirror-emit.js";
-const h =  o(class extends t {
+const c =  o(class extends t {
   constructor(o) {
     super(), !1 !== o && this.__registerHost(), this.__attachShadow(), this.popoverStateChanged = i(this, "popoverStateChanged", 7),
     this.tctPopoverStateChanged = i(this, "tctPopoverStateChanged", 7),
@@ -12,6 +12,7 @@ const h =  o(class extends t {
          * The number of pixels to leave between the popover and the edge of the viewport
          */
     this.displayBuffer = 10, this.orientationChanged = !1, this.pendingAnimationResolve = null,
+    this.platformScrollUnsubscribe = null,
     // #endregion
     // #region State Properties
     this.animationState = "idle", this.currentDirection = void 0,
@@ -20,10 +21,17 @@ const h =  o(class extends t {
     // #endregion
     // #region Public Property API
     /** Aligns the popover to the left or right side of the control element. */
-    this.align = "left", this.mode = null, this.handleMinHeight = () => {
-      this.minHeight && n(this, "minHeight", "prop");
+    this.align = "left", this.mode = null, this.handleInsideScroll = o => {
+      const {containerElement: t} = this;
+      t && (t.scrollHeight > t.clientHeight || o.preventDefault());
+    }, this.handleMinHeight = () => {
+      this.minHeight && r(this, "minHeight", "prop");
+    }, this.handleOutsideScroll = o => {
+      this.open && (o.composedPath().includes(this.hostElement) || (this.open = !1));
+    }, this.handlePlatformScroll = () => {
+      this.open && (this.open = !1);
     }, this.handlePopoverToggleEvent = o => {
-      c(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
+      h(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
         open: "open" === o.newState
       });
     }, this.setAbsoluteCSSProperties = async () => {
@@ -36,26 +44,26 @@ const h =  o(class extends t {
           t.style.setProperty("--comp-pop-bottom", `${e}px`);
         }
         // Wait for one paint to prevent layout thrashing
-                await p(), this.containerElement && t.style.setProperty("--comp-pop-opacity", "1");
+                await s(), this.containerElement && t.style.setProperty("--comp-pop-opacity", "1");
       }
     }, this.setPopoverAPICSSProperties = async () => {
       var o, t, i;
-      const {controlElement: e, containerElement: r, currentDirection: n, isModule: l, align: c} = this;
-      if (!r) return;
-      const {top: h, bottom: d, left: m, right: v} = null !== (t = null === (o = null == e ? void 0 : e.getBoundingClientRect) || void 0 === o ? void 0 : o.call(e)) && void 0 !== t ? t : {
+      const {controlElement: e, containerElement: n, currentDirection: r, isModule: l, align: h} = this;
+      if (!n) return;
+      const {top: c, bottom: d, left: m, right: v} = null !== (t = null === (o = null == e ? void 0 : e.getBoundingClientRect) || void 0 === o ? void 0 : o.call(e)) && void 0 !== t ? t : {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0
-      }, u = m, w = (null === (i = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === i ? void 0 : i.width) - v, b = s(e), g = b ? 0 : window.scrollX, f = b ? 0 : window.scrollY;
-      r.style.setProperty("--comp-pop-position", b ? "fixed" : "absolute"), "right" === c ? (r.style.setProperty("--comp-pop-right", w - g + "px"),
-      r.style.setProperty("--comp-pop-left", "unset")) : (r.style.setProperty("--comp-pop-left", `${u + g}px`),
-      r.style.setProperty("--comp-pop-right", "unset")), this.block && r.style.setProperty("--comp-pop-width", `${(null == e ? void 0 : e.offsetWidth) || 0}px`);
+      }, u = m, w = (null === (i = null === window || void 0 === window ? void 0 : window.visualViewport) || void 0 === i ? void 0 : i.width) - v, b = p(e), g = b ? 0 : window.scrollX, f = b ? 0 : window.scrollY;
+      n.style.setProperty("--comp-pop-position", b ? "fixed" : "absolute"), "right" === h ? (n.style.setProperty("--comp-pop-right", w - g + "px"),
+      n.style.setProperty("--comp-pop-left", "unset")) : (n.style.setProperty("--comp-pop-left", `${u + g}px`),
+      n.style.setProperty("--comp-pop-right", "unset")), this.block && n.style.setProperty("--comp-pop-width", `${(null == e ? void 0 : e.offsetWidth) || 0}px`);
       const x = l && a(this.hostElement);
-      "up" === n && (l && !x ? r.style.setProperty("--comp-pop-bottom", window.innerHeight - h + "px") : r.style.setProperty("--comp-pop-bottom", window.innerHeight - h - f + "px")),
-      "down" === n && (l && !x ? r.style.setProperty("--comp-pop-top", `${d}px`) : r.style.setProperty("--comp-pop-top", `${d + f}px`)),
+      "up" === r && (l && !x ? n.style.setProperty("--comp-pop-top", `${c}px`) : n.style.setProperty("--comp-pop-top", `${c + f}px`)),
+      "down" === r && (l && !x ? n.style.setProperty("--comp-pop-top", `${d}px`) : n.style.setProperty("--comp-pop-top", `${d + f}px`)),
       // Wait for one paint to prevent layout thrashing
-      await p(), this.containerElement && r.style.setProperty("--comp-pop-opacity", "1");
+      await s(), this.containerElement && n.style.setProperty("--comp-pop-opacity", "1");
     }, this.viewPortChanged = () => {
       this.open && this.determinePopDirection();
     }, this.viewPortOrientationChanged = () => {
@@ -77,7 +85,7 @@ const h =  o(class extends t {
   componentDidLoad() {
     var o;
     this.handleMinHeight(), this.supportsPopoverAPI && (null === (o = this.containerElement) || void 0 === o || o.addEventListener("toggle", this.handlePopoverToggleEvent)),
-    this.open && this.determinePopDirection();
+    this.open && (this.addViewportListeners(), this.determinePopDirection());
   }
   // #endregion
   // #region Listeners
@@ -101,7 +109,7 @@ const h =  o(class extends t {
   }
   async openChanged(o) {
     var t;
-    if (c(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
+    if (h(this, [ "popoverStateChanged", "tctPopoverStateChanged" ], {
       open: o
     }), o) this.animationState = "opening", this.addViewportListeners(), this.determinePopDirection(); else {
       if (this.animationState = "closing", this.removeViewportListeners(),
@@ -118,7 +126,7 @@ const h =  o(class extends t {
       if (!this.containerElement) return;
       if (this.open) return;
       this.currentDirection = void 0, this.animationState = "idle", "legacy" !== this.mode && this.supportsPopoverAPI ? null === (t = this.containerElement) || void 0 === t || t.hidePopover() : this.show = !1,
-      await p(), this.clearCSSProperties();
+      await s(), this.clearCSSProperties();
     }
   }
   // #endregion
@@ -147,13 +155,21 @@ const h =  o(class extends t {
     return isNaN(o) ? void 0 : o;
   }
   addViewportListeners() {
-    var o;
-    window.addEventListener("resize", this.viewPortOrientationChanged), null === visualViewport || void 0 === visualViewport || visualViewport.addEventListener("resize", this.viewPortChanged),
+    var o, t, i, e, n, r, s, p, h, c, d;
+    window.addEventListener("resize", this.viewPortOrientationChanged), null === (t = null === (o = window.visualViewport) || void 0 === o ? void 0 : o.addEventListener) || void 0 === t || t.call(o, "resize", this.viewPortChanged),
     a(this.hostElement) && !l() && window.addEventListener("scroll", this.viewPortChanged, {
       passive: !0,
       capture: !0
-    }), null === (o = null === screen || void 0 === screen ? void 0 : screen.orientation) || void 0 === o || o.addEventListener("orientationchange", this.viewPortOrientationChanged),
-    window.addEventListener("orientationchange", this.viewPortOrientationChanged);
+    }), null === (n = null === (e = null === (i = window.screen) || void 0 === i ? void 0 : i.orientation) || void 0 === e ? void 0 : e.addEventListener) || void 0 === n || n.call(e, "orientationchange", this.viewPortOrientationChanged),
+    window.addEventListener("orientationchange", this.viewPortOrientationChanged), l() || window.addEventListener("scroll", this.handleOutsideScroll, {
+      passive: !0,
+      capture: !0
+    }), null === (r = this.containerElement) || void 0 === r || r.addEventListener("wheel", this.handleInsideScroll, {
+      passive: !1
+    }), null === (s = this.containerElement) || void 0 === s || s.addEventListener("touchmove", this.handleInsideScroll, {
+      passive: !1
+    }), null === (p = this.platformScrollUnsubscribe) || void 0 === p || p.call(this),
+    this.platformScrollUnsubscribe = null !== (d = null === (c = null === (h = window.TectonElements) || void 0 === h ? void 0 : h.platformScrollChanged) || void 0 === c ? void 0 : c.call(h, this.handlePlatformScroll)) && void 0 !== d ? d : null;
   }
   clearCSSProperties() {
     this.containerElement && (this.containerElement.style.removeProperty("--comp-pop-max-height"),
@@ -163,47 +179,55 @@ const h =  o(class extends t {
     this.containerElement.style.removeProperty("--comp-pop-position"));
   }
   async determinePopDirection() {
-    var o, t, i;
-    const {containerElement: e, controlElement: r, providedDirection: n, displayBuffer: s} = this;
-    if (e && (e.style.maxHeight = null), await p(), !this.containerElement) return;
-    const {isModule: l} = this, {top: c, bottom: h} = null !== (t = null === (o = null == r ? void 0 : r.getBoundingClientRect) || void 0 === o ? void 0 : o.call(r)) && void 0 !== t ? t : {
+    var o, t, i, e;
+    const {containerElement: n, controlElement: r, providedDirection: p, displayBuffer: l} = this;
+    if (n && (n.style.maxHeight = null), await s(), !this.containerElement) return;
+    const {isModule: h} = this, {top: c, bottom: d} = null !== (t = null === (o = null == r ? void 0 : r.getBoundingClientRect) || void 0 === o ? void 0 : o.call(r)) && void 0 !== t ? t : {
       top: 0,
       bottom: 0
     };
-    let d, m, v;
-    const u = l && a(this.hostElement);
-    if (l && !u) {
-      const {outletOffset: o = 0, innerHeight: t = window.innerHeight, top: e = 0, bottom: r = 0} = (null === (i = window.Tecton) || void 0 === i ? void 0 : i.platformDimensions) || {}, n = window.innerHeight - h, p = t - r - (o + h - e);
-      m = (o > 0 ? c : c + o - e) - s, v = n < p ? n - s : p - s;
-    } else d = window.innerHeight, m = c - s, v = d - h - s;
-    const w = m > v ? "up" : "down", b = !(null == e ? void 0 : e.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
+    let m, v, u;
+    const w = h && a(this.hostElement);
+    if (h && !w) {
+      const {outletOffset: o = 0, innerHeight: t = window.innerHeight, top: e = 0, bottom: n = 0} = (null === (i = window.Tecton) || void 0 === i ? void 0 : i.platformDimensions) || {}, r = window.innerHeight - d, s = t - n - (o + d - e);
+      v = (o > 0 ? c : c + o - e) - l, u = r < s ? r - l : s - l;
+    } else {
+      const {height: o = window.innerHeight, offsetTop: t = 0} = null !== (e = window.visualViewport) && void 0 !== e ? e : {};
+      m = o, v = c - t - l, u = t + m - d - l;
+    }
+    const b = v > u ? "up" : "down", g = !(null == n ? void 0 : n.style.getPropertyValue("--comp-pop-max-height")) || this.orientationChanged;
     // We do not want to update the max height once the popover is open unless the page orientation shifts (resize or mobile use cases)
         // we do not want to constantly update the max-height after an orientation change, so we switch this back to false
     this.orientationChanged = !1;
-    switch (this.currentDirection || n || w) {
+    switch (this.currentDirection || p || b) {
      case "up":
-      if (b && e) {
-        const o = this.validatedMaxHeight || m, t = Math.min(m, o);
-        e.style.setProperty("--comp-pop-max-height", `${t}px`);
+      if (g && n) {
+        const o = this.validatedMaxHeight || v, t = Math.min(v, o);
+        n.style.setProperty("--comp-pop-max-height", `${t}px`);
       }
       this.setDirectionAndShow("up");
       break;
      case "down":
-      if (b && e) {
-        const o = this.validatedMaxHeight || v, t = Math.min(v, o);
-        e.style.setProperty("--comp-pop-max-height", `${t}px`);
+      if (g && n) {
+        const o = this.validatedMaxHeight || u, t = Math.min(u, o);
+        n.style.setProperty("--comp-pop-max-height", `${t}px`);
       }
       this.setDirectionAndShow("down");
     }
   }
   removeViewportListeners() {
-    var o;
-    window.removeEventListener("resize", this.viewPortOrientationChanged), null === visualViewport || void 0 === visualViewport || visualViewport.removeEventListener("resize", this.viewPortChanged),
+    var o, t, i, e, n, r, s, p;
+    window.removeEventListener("resize", this.viewPortOrientationChanged), null === (t = null === (o = window.visualViewport) || void 0 === o ? void 0 : o.removeEventListener) || void 0 === t || t.call(o, "resize", this.viewPortChanged),
     window.removeEventListener("scroll", this.viewPortChanged, {
       capture: !0
-    }), null === (o = null === screen || void 0 === screen ? void 0 : screen.orientation) || void 0 === o || o.removeEventListener("orientationchange", this.viewPortOrientationChanged),
-    window.removeEventListener("orientationchange", this.viewPortOrientationChanged);
+    }), null === (n = null === (e = null === (i = window.screen) || void 0 === i ? void 0 : i.orientation) || void 0 === e ? void 0 : e.removeEventListener) || void 0 === n || n.call(e, "orientationchange", this.viewPortOrientationChanged),
+    window.removeEventListener("orientationchange", this.viewPortOrientationChanged),
+    window.removeEventListener("scroll", this.handleOutsideScroll, {
+      capture: !0
+    }), null === (r = this.containerElement) || void 0 === r || r.removeEventListener("wheel", this.handleInsideScroll),
+    null === (s = this.containerElement) || void 0 === s || s.removeEventListener("touchmove", this.handleInsideScroll),
+    null === (p = this.platformScrollUnsubscribe) || void 0 === p || p.call(this), this.platformScrollUnsubscribe = null;
   }
   setDirectionAndShow(o) {
     var t;
@@ -220,18 +244,18 @@ const h =  o(class extends t {
     return l() && o.push("mobile"), this.show && o.push("show"), this.block && o.push("block"),
     "legacy" === this.mode && o.push("legacy"), "opening" === this.animationState && o.push("animating-open"),
     "closing" === this.animationState && o.push("animating-close"), e("div", {
-      key: "4fe0c06793144eb83fe53cfc568af81226f78345",
+      key: "f608766723c6ae6737181318b5baf8b52ed7fc0f",
       ref: o => this.containerElement = o,
       class: o.join(" "),
       "test-id": "outerContainer",
       tabIndex: -1,
       popover: "manual"
     }, e("div", {
-      key: "ed5d7c9f5efba8b129d580e68ab6692849332cf4",
+      key: "477f1a209cf4abc984a82324d0c6fc07ede82160",
       ref: o => this.contentElement = o,
       class: "content"
     }, e("slot", {
-      key: "4c5d5b9682014b2e94b153ca33a3e0c4dd58d6bb"
+      key: "5b48ff13907b952a2cdcffc1b6e271e4982c78ad"
     })));
   }
   get hostElement() {
@@ -248,7 +272,7 @@ const h =  o(class extends t {
     };
   }
   static get style() {
-    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:unset;bottom:var(--comp-pop-bottom)}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}';
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.legacy.container{display:none}.legacy.show{display:block;z-index:var(--tct-popover-z-index, 50)}@keyframes popoverOpen{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes popoverClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}:popover-open,.show{position:var(--comp-pop-position, absolute);margin:0;padding:var(--tct-popover-padding, 0);overflow:auto;overscroll-behavior:contain;background:var(--tct-popover-background, var(--app-white, #ffffff));backdrop-filter:var(--tct-popover-backdrop-filter, none);color:var(--tct-popover-font-color, inherit);min-width:var(--tct-popover-min-width, 135px);width:var(--tct-popover-width, auto);margin-block:var(--tct-popover-margin-block, 0);box-shadow:var(--tct-popover-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)));border-width:var(--tct-popover-border-width, 0);border-style:solid;border-color:var(--tct-popover-border-color, transparent);border-radius:var(--tct-popover-border-radius, 0);max-height:var(--comp-pop-max-height);left:var(--comp-pop-left);opacity:var(--comp-pop-opacity, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}:popover-open.animating-open,.show.animating-open{animation-name:popoverOpen;animation-duration:var(--tct-popover-open-animation-duration, var(--t-tween-time-in-1, 150ms));animation-timing-function:var(--tct-popover-open-animation-timing-function, ease-out);animation-fill-mode:var(--tct-popover-open-animation-fill-mode, forwards)}:popover-open.animating-close,.show.animating-close{animation-name:popoverClose;animation-duration:var(--tct-popover-close-animation-duration, var(--t-tween-time-out-1, 100ms));animation-timing-function:var(--tct-popover-close-animation-timing-function, ease-in);animation-fill-mode:var(--tct-popover-close-animation-fill-mode, forwards)}:popover-open.block,.show.block{right:unset;width:var(--comp-pop-width);min-width:var(--tct-popover-min-width, unset)}:popover-open.left,.show.left{left:var(--comp-pop-left);right:unset}:popover-open.right,.show.right{right:var(--comp-pop-right);left:unset}:popover-open.down,.show.down{top:var(--tct-popover-top, var(--comp-pop-top));bottom:unset}:popover-open.up,.show.up{top:var(--comp-pop-top);bottom:unset;translate:0 calc(-100% - var(--app-scale-2x, 10px))}:popover-open.down.left:not(.mobile),.show.down.left:not(.mobile){transform-origin:top left}:popover-open.down.right:not(.mobile),.show.down.right:not(.mobile){transform-origin:top right}:popover-open.up.left:not(.mobile),.show.up.left:not(.mobile){transform-origin:bottom left}:popover-open.up.right:not(.mobile),.show.up.right:not(.mobile){transform-origin:bottom right}:popover-open.mobile.down,.show.mobile.down{transform-origin:center top}:popover-open.mobile.up,.show.mobile.up{transform-origin:center bottom}:popover-open::-webkit-scrollbar,.show::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}:popover-open::-webkit-scrollbar-thumb,.show::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}:popover-open::-webkit-scrollbar-track,.show::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}click-elsewhere{position:relative;display:block}';
   }
 }, [ 257, "q2-popover", {
   align: [ 513 ],
@@ -276,8 +300,8 @@ const h =  o(class extends t {
 function defineCustomElement() {
   if ("undefined" == typeof customElements) return;
   [ "q2-popover" ].forEach((o => {
-    if ("q2-popover" === o) customElements.get(r(o)) || customElements.define(r(o), h);
+    if ("q2-popover" === o) customElements.get(n(o)) || customElements.define(n(o), c);
   }));
 }
-export { h as Q, defineCustomElement as d }
+export { c as Q, defineCustomElement as d }