q2-tecton-elements 1.10.6 → 1.10.9

package/dist/esm/q2-section.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, l as loc } from './index-476b86cc.js';
+import { c as createGuid, o as overrideFocus, i as isEventFromElement, l as loc } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}@keyframes expandVertical{0%{height:0}}@keyframes collapseVertical{100%{height:0}}:host{display:block;background-color:var(--tct-section-bg, var(--t-section-bg, var(--tct-white, var(--app-white, #ffffff))));color:var(--tct-section-font-color, var(--t-section-font-color, #2e2e2e));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, 3px));margin:var(--tct-scale-3, var(--app-scale-3, 15px))}@media screen and (max-width: 767px){:host{margin:var(--tct-scale-3, var(--app-scale-3, 15px)) 0}}.q2-section-wrapper{display:block;padding:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}.q2-section-wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, inherit)}.q2-section-header{padding:0 var(--tct-scale-3, var(--app-scale-3, 15px));display:flex}.has-header .q2-section-header{min-height:44px}.q2-section-header-content{flex:1 1 100%;min-width:0;align-self:center}.collapsible .q2-section-header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.toggle-icon{transition:transform var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}.collapsed .toggle-icon{transform:rotate(180deg)}.q2-section-content-wrapper{height:auto}.q2-section-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px))\n        var(--tct-scale-3, var(--app-scale-3, 15px))}.expanded.animate .q2-section-content-wrapper{animation:expandVertical var(--tct-tween-2, var(--app-tween-2, 0.4s ease)) forwards}.collapsed .q2-section-content-wrapper{height:0;animation:collapseVertical 0s forwards;animation-duration:0;padding-top:0;visibility:hidden;overflow:hidden}.collapsed.animate .q2-section-content-wrapper{animation:collapseVertical var(--tct-tween-1, var(--app-tween-1, 0.2s ease)) forwards}.animate .q2-section-content-wrapper{overflow:hidden}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}@keyframes expandVertical{0%{height:0}}@keyframes collapseVertical{100%{height:0}}:host{display:block;background-color:var(--tct-section-bg, var(--t-section-bg, var(--tct-white, var(--app-white, #ffffff))));color:var(--tct-section-font-color, var(--t-section-font-color, #2e2e2e));border-radius:var(--tct-section-border-radius, var(--t-section-border-radius, 3px));margin:var(--tct-scale-3, var(--app-scale-3, 15px))}@media screen and (max-width: 767px){:host{margin:var(--tct-scale-3, var(--app-scale-3, 15px)) 0}}.q2-section-wrapper{display:block;padding:var(--tct-scale-1, var(--app-scale-1, 5px)) 0}.q2-section-wrapper:hover{box-shadow:var(--tct-section-wrapper-hover-box-shadow, inherit)}.q2-section-header{padding:0 var(--tct-scale-3, var(--app-scale-3, 15px));display:flex}.has-header .q2-section-header{min-height:44px}.q2-section-header-content{flex:1 1 100%;min-width:0;align-self:center}.collapsible .q2-section-header-content{cursor:pointer}.title{margin:0;font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.toggle-icon{transition:transform var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}.collapsed .toggle-icon{transform:rotate(180deg)}.q2-section-content-wrapper{height:auto}.q2-section-content{padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-3, var(--app-scale-3, 15px))}.q2-section-content:focus{box-shadow:none}.expanded.animate .q2-section-content-wrapper{animation:expandVertical var(--tct-tween-2, var(--app-tween-2, 0.4s ease)) forwards}.collapsed .q2-section-content-wrapper{height:0;animation:collapseVertical 0s forwards;animation-duration:0;padding-top:0;visibility:hidden;overflow:hidden}.collapsed.animate .q2-section-content-wrapper{animation:collapseVertical var(--tct-tween-1, var(--app-tween-1, 0.2s ease)) forwards}.animate .q2-section-content-wrapper{overflow:hidden}";
 
 const Q2Section = class {
   constructor(hostRef) {
@@ -94,6 +94,7 @@ const Q2Section = class {
   componentDidLoad() {
     this.addHeaderSlotListener();
     this.addContentSlotListener();
+    overrideFocus(this.hostElement);
   }
   disconnectedCallback() {
     this.removeHeaderSlotListener();
@@ -132,6 +133,11 @@ const Q2Section = class {
       this.expanded = event.detail.expanded;
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.contentContainer.focus();
+  }
   //////// Observers //////////
   expandedObserver() {
     if (this.collapsible) {
@@ -151,7 +157,7 @@ const Q2Section = class {
     }
   }
   render() {
-    return (h("section", { class: this.wrapperClasses }, h("div", { class: "q2-section-header" }, h("div", { class: "q2-section-header-content", id: this.titleId, onClick: this.onHeaderClick }, !this.hasYieldedHeader && !!this.label ? (h("h2", { class: "title" }, loc(this.label))) : (''), h("div", { class: "q2-section-header-slot-wrapper" }, h("slot", { name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.label, ariaExpanded: !!this.expanded, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { type: "chevron-up", class: "toggle-icon" }))) : ('')), h("div", { class: "q2-section-content-wrapper", id: this.contentId, "aria-labelledby": this.titleId, role: "region", onAnimationStart: this.onAnimationStart, onAnimationEnd: this.onAnimationEnd }, h("div", { class: "q2-section-content" }, h("slot", null)))));
+    return (h("section", { class: this.wrapperClasses }, h("div", { class: "q2-section-header" }, h("div", { class: "q2-section-header-content", id: this.titleId, onClick: this.onHeaderClick }, !this.hasYieldedHeader && !!this.label ? (h("h2", { class: "title" }, loc(this.label))) : (''), h("div", { class: "q2-section-header-slot-wrapper" }, h("slot", { name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.label, ariaExpanded: !!this.expanded, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { type: "chevron-up", class: "toggle-icon" }))) : ('')), h("div", { class: "q2-section-content-wrapper", id: this.contentId, "aria-labelledby": this.titleId, role: "region", onAnimationStart: this.onAnimationStart, onAnimationEnd: this.onAnimationEnd }, h("div", { class: "q2-section-content", tabindex: "-1" }, h("slot", null)))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, s as setPopProperties, l as loc, h as handleAriaLabel } from './index-476b86cc.js';
+import { c as createGuid, s as setPopProperties, l as loc, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-element-br, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--app-scale-1x, 5px));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible;margin-bottom:var(--app-scale-2)}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0}.custom-display-content{position:absolute;bottom:0;left:calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);height:44px;width:calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 15px));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var-list(--tct-scale-3, --app-scale-3, 15px) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.q2-element-dropdown{display:none;position:absolute;background-color:var(--app-white);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);border-radius:var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}.q2-element-dropdown::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}.q2-element-dropdown::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.q2-element-dropdown.sizable{display:block;height:auto}.dropdown-open .q2-element-dropdown{display:block;height:auto;overflow:auto;opacity:1;visibility:visible}:host([alignment=right]) .q2-element-dropdown{left:auto;right:0}:host{display:block;margin-top:var(--tct-select-margin-top, var(--app-scale-4, 30px));margin-bottom:var(--tct-select-margin-bottom, var(--app-scale-4, 30px))}.q2-select-container{position:relative;display:block}.q2-select-input{margin:0}.custom-display-content{position:absolute;bottom:0;left:calc(var-list(--tct-scale-2, --app-scale-2, 10px) + 1px);height:44px;width:calc(100% - 34px - var-list(--tct-scale-3, --app-scale-3, 15px));overflow:hidden;cursor:pointer;transition:left var(--tct-tween-2, var(--app-tween-1, 0.2s ease))}.custom-display-content:not([hidden]){display:flex;align-items:center}.is-searchable.is-focused .custom-display-content,.is-searchable .custom-display-content:active{left:calc(var-list(--tct-scale-3, --app-scale-3, 15px) + 1px)}.has-error .custom-display-content{width:calc(100% - 68px - var-list(--tct-scale-3, --app-scale-3, 15px))}.dropdown-open .q2-select-dropdown{overflow-y:auto;max-height:300px}.multi-select-header{padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-2, var(--app-scale-2, 10px))}.show-all-options{margin-right:var(--tct-scale-1, var(--app-scale-1, 5px));margin-left:var(--tct-scale-2, var(--app-scale-2, 10px))}.q2-element-dropdown.dropup{bottom:40px}";
 
 const Q2Select = class {
   constructor(hostRef) {
@@ -88,6 +88,144 @@ const Q2Select = class {
       }
     };
     ////// ACTIONS ////////
+    this.dropdownFocusoutHandler = (event) => {
+      const { relatedTarget } = event;
+      const isInDropdown = this.dropdownContainer.contains(relatedTarget);
+      const isInLightDom = !isInDropdown && this.hostElement.contains(relatedTarget);
+      if (isInDropdown || isInLightDom)
+        return;
+      if (!this.dropdownOpen)
+        return;
+      this.closeDropdown();
+    };
+    this.dropdownKeydownHandler = (event) => {
+      event.stopPropagation();
+      const { activeIndex, searchable, optionElements, multiSelectHeader } = this;
+      const { key, shiftKey } = event;
+      if (multiSelectHeader &&
+        multiSelectHeader.contains(event.target) &&
+        [' ', 'Enter'].includes(key))
+        return;
+      switch (key) {
+        case ' ':
+        case 'Enter':
+          event.preventDefault();
+          event.stopPropagation();
+          const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
+          if (!newOption || newOption.disabled)
+            break;
+          this.selectOption(newOption.value, true);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          const isFirstOption = activeIndex === 0;
+          if (isFirstOption)
+            break;
+          if (activeIndex !== undefined) {
+            const nextIndex = this.getNextVisibleIndex(-1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          else {
+            this.setDefaultActiveElement();
+          }
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          const isLastOption = activeIndex === optionElements.length - 1;
+          if (isLastOption)
+            break;
+          if (activeIndex !== undefined) {
+            const nextIndex = this.getNextVisibleIndex(1);
+            if (nextIndex === -1)
+              break;
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
+          }
+          else {
+            this.setDefaultActiveElement();
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(optionElements.length - 1);
+          break;
+        case 'PageUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.max(activeIndex - 10, 0));
+          break;
+        case 'PageDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(Math.min(activeIndex + 10, optionElements.length - 1));
+          break;
+        case 'Tab':
+          if (shiftKey)
+            break;
+          const myOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
+          if (!myOption || myOption.disabled)
+            return;
+          this.selectOption(myOption.value);
+          break;
+        case 'Esc':
+        case 'Escape':
+          this.closeDropdown();
+          this.focusInput();
+          break;
+        default:
+          if (searchable)
+            break;
+          if (!key.match(/^[A-Za-z0-9]$/))
+            break;
+          // search in non-searchable select: alpha-numeric only
+          this.searchAndFocus(key);
+          break;
+      }
+    };
+    this.inputKeydownHandler = (event) => {
+      const { key } = event;
+      const { optionElements, dropdownOpen, searchable } = this;
+      switch (key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(this.getLastEnabledIndex());
+          this.setFocusedOption();
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          this.openDropdownWithActiveElement(optionElements.length - 1);
+          break;
+        case 'Escape':
+        case 'Esc':
+          if (dropdownOpen) {
+            this.closeDropdown();
+          }
+          else {
+            this.searchText = '';
+          }
+          break;
+        default:
+          if (searchable) {
+            this.openDropdownWithoutActiveElement();
+            break;
+          }
+          if (!key.match(/^[A-Za-z0-9]$/))
+            break;
+          // search in non-searchable select: alpha-numeric only
+          this.searchAndFocus(key);
+      }
+    };
     this.inputClickHandler = (event) => {
       event.stopPropagation();
       setPopProperties(this);
@@ -96,32 +234,11 @@ const Q2Select = class {
     };
     this.inputInputHandler = (event) => {
       event.stopPropagation();
-      if (!this.dropdownOpen) {
+      if (!this.dropdownOpen)
         this.openDropdownWithoutActiveElement();
-      }
       this.searchText = event.detail.value;
       this.input.emit({ query: event.detail.value });
     };
-    this.inputKeydownHandler = (event) => {
-      if (event.key === 'Enter' && this.dropdownOpen) {
-        event.preventDefault();
-        const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
-        newOption && !newOption.disabled && this.selectOption(newOption.value);
-      }
-      if (['Escape', 'Esc'].includes(event.key)) {
-        this.closeDropdown();
-        this.focusInput();
-      }
-      if (event.key === 'Tab') {
-        if (this.dropdownOpen && this.searchable && event.shiftKey) {
-          event.preventDefault();
-          this.focusInput();
-        }
-        else {
-          this.dropdownOpen && !this.multiple && event.preventDefault();
-        }
-      }
-    };
     this.inputFocusHandler = () => {
       this.inputFocused = true;
     };
@@ -131,16 +248,6 @@ const Q2Select = class {
     this.inputChangeHandler = (event) => {
       event.stopPropagation();
     };
-    this.showAllOptionTabKeyDown = (event) => {
-      if (event.key === 'Tab' && !event.shiftKey && this.selectedOptionsCount === 0) {
-        event.preventDefault();
-      }
-    };
-    this.showSelectedOptionTabKeyDown = (event) => {
-      if (event.key === 'Tab' && !event.shiftKey) {
-        event.preventDefault();
-      }
-    };
     this.clickedElsewhere = (event) => {
       const target = event.target;
       if (target.localName === 'click-elsewhere') {
@@ -150,13 +257,15 @@ const Q2Select = class {
         }
       }
     };
-    this.showSelectedOptions = () => {
+    this.showSelectedOptions = (event) => {
+      event.stopImmediatePropagation();
       this.onlyShowingSelected = true;
       this.optionElements.forEach(optionElement => {
         optionElement._multiSelectHidden = !optionElement.selected;
       });
     };
-    this.showAllOptions = () => {
+    this.showAllOptions = (event) => {
+      event.stopPropagation();
       this.onlyShowingSelected = false;
       this.optionElements.forEach(optionElement => {
         optionElement._multiSelectHidden = false;
@@ -183,12 +292,20 @@ const Q2Select = class {
     else
       return 0;
   }
+  getLastEnabledIndex() {
+    const enabledIndexes = this.optionElements.reduce((acc, element, index) => {
+      if (!element.hidden && !element.disabled)
+        acc.push(index);
+      return acc;
+    }, []);
+    return enabledIndexes[enabledIndexes.length - 1];
+  }
   setActiveOption() {
-    if (!this.dropdownOpen) {
+    if (!this.dropdownOpen)
       return;
-    }
+    const activeIndex = this.activeIndex;
     this.optionElements.forEach((element, elementIndex) => {
-      if (this.activeIndex === elementIndex) {
+      if (activeIndex === elementIndex) {
         element.active = true;
         this.activeOptionId = element.optionId;
       }
@@ -199,6 +316,8 @@ const Q2Select = class {
   }
   setFocusedOption() {
     const option = this.optionElements[this.activeIndex];
+    if (!option)
+      return;
     option.dispatchEvent(new FocusEvent('focus'));
     option.focus();
   }
@@ -236,7 +355,7 @@ const Q2Select = class {
     if (this.hasCustomDisplay && !this.searchText) {
       return '';
     }
-    if (this.searchable && this.dropdownOpen) {
+    if (this.searchable && this.dropdownOpen && !this.value) {
       // when dropdown is open search selects show typing
       // when closed they display the same as non searchable select (what is selected)
       return this.searchText || '';
@@ -276,7 +395,7 @@ const Q2Select = class {
       element.multiline = this.multilineOptions;
     });
   }
-  selectOption(value) {
+  selectOption(value, focusInputOnClose = false) {
     if (this.multiple) {
       const isSelected = this.selectedOptions.includes(value);
       if (isSelected) {
@@ -291,7 +410,8 @@ const Q2Select = class {
     else {
       this.change.emit({ value });
       this.closeDropdown();
-      this.focusInput();
+      if (focusInputOnClose)
+        this.focusInput();
     }
   }
   scrollToActiveOption() {
@@ -309,9 +429,7 @@ const Q2Select = class {
     this.dropdownOpen = true;
     this.setActiveOption();
     this.scheduledAfterRender.push(() => {
-      if (!this.searchable) {
-        this.setFocusedOption();
-      }
+      this.setFocusedOption();
       this.scrollToActiveOption();
       this.resizeIframe();
     });
@@ -354,8 +472,8 @@ const Q2Select = class {
     this.setFocusedOption();
   }
   focusInput() {
-    const input = this.hostElement.shadowRoot.querySelector('q2-input');
-    input && input.dispatchEvent(new FocusEvent('focus'));
+    var _a;
+    (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
   }
   getNextVisibleIndex(direction) {
     let index = this.activeIndex + direction;
@@ -377,6 +495,7 @@ const Q2Select = class {
     observer.observe(this.hostElement, { childList: true, subtree: true });
     this.mutationObserver = observer;
     this.onMutationObserved();
+    overrideFocus(this.hostElement);
   }
   componentDidRender() {
     setTimeout(() => {
@@ -449,6 +568,11 @@ const Q2Select = class {
       this.setStatusMessage(loc(statusMessageLocString, [count]));
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.inputField.shadowRoot.querySelector('.input-field').focus();
+  }
   setStatusMessage(message) {
     clearTimeout(this.statusMessageTimer);
     this.statusMessage = '';
@@ -461,89 +585,10 @@ const Q2Select = class {
     if (target.localName !== 'q2-option' || target.disabled) {
       return;
     }
-    this.selectOption(target.value);
+    this.selectOption(target.value, true);
   }
   keydownHandler(event) {
-    event.stopPropagation();
-    const { dropdownOpen, activeIndex, searchable, multiple, optionElements } = this;
-    const { key, shiftKey } = event;
-    switch (key) {
-      case 'Enter':
-        if (!dropdownOpen)
-          break;
-        event.preventDefault();
-        const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
-        if (newOption === null || newOption === void 0 ? void 0 : newOption.disabled)
-          break;
-        this.selectOption(newOption.value);
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        if (!dropdownOpen) {
-          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-          break;
-        }
-        if (activeIndex > 0) {
-          const nextIndex = this.getNextVisibleIndex(-1);
-          if (nextIndex > -1) {
-            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
-          }
-        }
-        else if (activeIndex !== 0) {
-          this.setDefaultActiveElement();
-        }
-        break;
-      case 'ArrowDown':
-        event.preventDefault();
-        if (!dropdownOpen) {
-          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-          break;
-        }
-        if (activeIndex < optionElements.length - 1) {
-          const nextIndex = this.getNextVisibleIndex(1);
-          if (nextIndex > -1) {
-            this.adjustActiveOptionAndScroll(nextIndex - this.activeIndex);
-          }
-        }
-        else if (!activeIndex) {
-          this.setDefaultActiveElement();
-        }
-        break;
-      case 'Home':
-        if (!dropdownOpen)
-          break;
-        event.preventDefault();
-        this.adjustActiveOptionAndScroll(0);
-        break;
-      case 'End':
-        if (!dropdownOpen)
-          break;
-        event.preventDefault();
-        this.adjustActiveOptionAndScroll(optionElements.length - 1);
-        break;
-      case 'Escape':
-        this.closeDropdown();
-        this.focusInput();
-        break;
-      case 'Tab':
-        if (!dropdownOpen)
-          break;
-        if ((searchable && shiftKey) || !multiple) {
-          event.preventDefault();
-        }
-        if (searchable && shiftKey) {
-          this.focusInput();
-        }
-        break;
-      default:
-        if (searchable)
-          break;
-        if (!key.match(/^[A-Za-z0-9]$/))
-          break;
-        // search in non-searchable select: alpha-numeric only
-        this.searchAndFocus(key);
-        break;
-    }
+    this.inputKeydownHandler(event);
   }
   render() {
     return (h("click-elsewhere", { class: this.wrapperClasses, onChange: this.clickedElsewhere }, h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage), h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, errors: (Array.isArray(this.errors) &&
@@ -554,10 +599,10 @@ const Q2Select = class {
   }
   optionsDropdown() {
     const dropDirection = this.privatePopDirection === 'up' ? 'dropup' : '';
-    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el) }, this.multiple ? this.visibilityToggle() : '', h("div", { class: "q2-select-options", id: "dropdown", role: "listbox" }, h("slot", null))));
+    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el), onKeyDown: this.dropdownKeydownHandler, onFocusout: this.dropdownFocusoutHandler }, this.multiple ? this.visibilityToggle() : '', h("div", { class: "q2-select-options", id: "dropdown", role: "listbox" }, h("slot", null))));
   }
   visibilityToggle() {
-    return (h("div", { class: "multi-select-header" }, loc('tecton.element.select.multiHeader.showing'), h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "aria-selected": !this.onlyShowingSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.showAllOptionTabKeyDown, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')), h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.showSelectedOptionTabKeyDown, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [
+    return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) }, loc('tecton.element.select.multiHeader.showing'), h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "aria-selected": !this.onlyShowingSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')), h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [
         this.selectedOptionsCount
       ]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
   }

package/dist/esm/q2-stepper-pane.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-be8376c0.js';
-import { c as createGuid, l as loc } from './index-476b86cc.js';
+import { c as createGuid, l as loc } from './index-ec6660af.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}";
 

package/dist/esm/q2-stepper.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-be8376c0.js';
-import { a as addSmoothScrollPolyfill, l as loc } from './index-476b86cc.js';
+import { a as addSmoothScrollPolyfill, o as overrideFocus, i as isEventFromElement, l as loc } from './index-ec6660af.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--app-scale-1x, 5px));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled]{cursor:default}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)))}.step-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-bubble:before{content:\"\";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border)}hr{width:calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );top:calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));left:calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right:0}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-bg:var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1)));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-bullet-size, var(--t-stepper-bullet-size, 18px));--comp-bullet-gap:var(--tct-stepper-bullet-padding, var(--t-stepper-bullet-padding, var(--app-scale-2x, 10px)));--comp-bullet-border-offset:var(--tct-stepper-bullet-border-offset, var(--t-stepper-bullet-border-offset, 4px));--comp-bullet-border:var(--tct-stepper-bullet-border, var(--t-stepper-bullet-border, 2px solid var(--t-primary-l3)));--comp-bullet-font-size:var(--tct-stepper-bullet-font-size, var(--t-stepper-bullet-font-size, var(--app-font-size-small, 12px)));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--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, 3px)));--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}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none}.step-btn[aria-disabled]{cursor:default}.step-btn[aria-disabled],.step-btn[aria-disabled]+hr{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-bg:var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)))}.step-bubble{margin:var(--comp-bullet-gap) auto;background:var(--comp-bullet-bg);color:var(--comp-bullet-font-color);width:var(--comp-bullet-size);height:var(--comp-bullet-size);min-height:var(--comp-bullet-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}[aria-selected] .step-bubble{font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}[aria-selected] .step-bubble:before{content:\"\";position:absolute;inset:calc(var(--comp-bullet-border-offset) * -1);width:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));height:calc(var(--comp-bullet-size) + var(--comp-bullet-border-offset));border-radius:50%;border:var(--comp-bullet-border)}hr{width:calc( var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size) );top:calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));left:calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-bg);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));font-size:var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));height:1.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:1}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-bottom:0.2em}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right:0}";
 
 addSmoothScrollPolyfill();
 const Q2Stepper = class {
@@ -86,6 +86,7 @@ const Q2Stepper = class {
   componentDidLoad() {
     this.resizeObserver.observe(this.listElement);
     this.checkScrollState();
+    overrideFocus(this.hostElement);
     setTimeout(() => this.showStep(this.currentStep || 1), 0);
   }
   componentDidRender() {
@@ -108,6 +109,11 @@ const Q2Stepper = class {
       this.currentStep = event.detail.selectedStep;
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.focusStep(this.currentStep, true, true);
+  }
   ////////// GETTER METHODS ////////
   get allPanes() {
     return this.hostElement.querySelectorAll('q2-stepper-pane');
@@ -137,13 +143,13 @@ const Q2Stepper = class {
       pane.isActive = stepNumber === index + 1;
     });
   }
-  focusStep(stepNumber, scrollIntoView) {
+  focusStep(stepNumber, scrollIntoView, forceFocus) {
     var _a;
     const stepListItem = this.listElement.children[stepNumber - 1];
     const isActive = document.activeElement === this.hostElement;
     if (!stepListItem)
       return;
-    if (isActive) {
+    if (isActive || forceFocus) {
       (_a = stepListItem.firstElementChild) === null || _a === void 0 ? void 0 : _a.focus();
     }
     if (scrollIntoView) {

package/dist/esm/q2-tab-container.entry.js

@@ -1,11 +1,9 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-be8376c0.js';
-import { a as addSmoothScrollPolyfill, c as createGuid, l as loc } from './index-476b86cc.js';
+import { a as addSmoothScrollPolyfill, c as createGuid, l as loc, i as isEventFromElement, o as overrideFocus } from './index-ec6660af.js';
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1, 5px)) var(--tct-scale-1, var(--app-scale-1, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1, 5px))));list-style:none;border-bottom:1px solid var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));display:block;transition:color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), border-color var(--tct-tween-1, var(--app-tween-1, 0.2s ease))}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background-color:var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentColor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background-color:var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit))}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) var(--tct-scale-1, var(--app-scale-1, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2, 10px)) 0;padding:var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding)))}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to right, var(--t-base), var(--t-base-a0));left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base));right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-bg:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left{left:0}.btn-right{right:0}";
 
 addSmoothScrollPolyfill();
-const userAgent = navigator.userAgent.toLowerCase();
-const isFirefox = userAgent.includes('firefox');
 const Q2TabContainer = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -147,12 +145,11 @@ const Q2TabContainer = class {
   onResize() {
     this.checkScrollState();
   }
-  onFocus() {
-    // firefox receives focus on overflowed element even if it's not interactive element
-    if (isFirefox) {
-      const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);
-      this.moveFocus(index);
-    }
+  onFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);
+    this.moveFocus(index);
   }
   ///////// Lifecycle Hooks /////////
   componentWillLoad() {
@@ -170,6 +167,7 @@ const Q2TabContainer = class {
   componentDidLoad() {
     this.resizeObserver.observe(this.listElement);
     this.checkScrollState();
+    overrideFocus(this.hostElement);
     const index = this.tabs.findIndex(el => el.value === this.value);
     this.scheduledAfterRender.push(() => {
       const tab = this.moveFocus(Math.max(index, 0), false);

package/dist/esm/q2-tab-pane.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, h } from './index-be8376c0.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.tab-pane[aria-hidden='true']{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
 
 const Q2TabPane = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
   render() {
-    return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-expanded": `${!!this.selected}`, "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", null)));
+    return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", null)));
   }
 };
 Q2TabPane.style = stylesCss;