genesys-spark-components 4.26.1-beta.0 → 4.26.1

package/dist/cjs/gux-tab-advanced-list.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-75c9f0d9.js');
-const onMutation = require('./on-mutation-ec5d23bd.js');
-const eventIsFrom = require('./event-is-from-f3f1cfde.js');
-const afterNextRender = require('./after-next-render-a023ef47.js');
-const index$2 = require('./index-dee802be.js');
+const index$1 = require('./index-7fb02c8c.js');
+const onMutation = require('./on-mutation-3d294d15.js');
+const eventIsFrom = require('./event-is-from-3ab90a6c.js');
+const afterNextRender = require('./after-next-render-162425fe.js');
+const index$2 = require('./index-a1a48d79.js');
 const en = require('./en-85604f0f.js');
-require('./get-closest-element-26894e5a.js');
+require('./get-closest-element-9e41d6b9.js');
 
 /**!
  * Sortable 1.15.2
@@ -2660,464 +2660,465 @@ Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
 const guxTabAdvancedListCss = ".gux-tab-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;width:100%;margin-bottom:16px;background-color:var(--gse-ui-advancedTabs-set-backgroundColor)}.gux-tab-container .gux-scrollable-section{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;width:100%;overflow-x:auto;border-bottom:1px solid var(--gse-ui-advancedTabs-divider-dividerColor);scroll-behavior:smooth;scrollbar-width:none}.gux-tab-container .gux-scrollable-section::-webkit-scrollbar{height:0}.gux-tab-container .gux-scrollable-section .gux-tablist{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const GuxTabAdvancedListStyle0 = guxTabAdvancedListCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const GuxTabAdvancedList = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.newTab = index$1.createEvent(this, "newTab", 7);
-    this.sortChanged = index$1.createEvent(this, "sortChanged", 7);
-    this.showNewTabButton = true;
-    this.tabLimit = Infinity;
-    this.allowSort = true;
-    this.focused = 0;
-    this.disableAddTabButton = false;
-    this.tabTriggers = undefined;
-    this.hasScrollbar = false;
-    this.keyboardSort = false;
-    this.initialSortIndex = 0;
-    this.sortTarget = undefined;
-    this.ariaLiveAlert = '';
-  }
-  onFocusin(event) {
-    if (this.allowSort &&
-      eventIsFrom.eventIsFrom('.gux-tablist', event) &&
-      !this.keyboardSort) {
-      this.ariaLiveAlert = 'toggleSort';
-    }
-  }
-  onFocusout(event) {
-    if (!this.root
-      .querySelector('.gux-tablist')
-      .contains(event.relatedTarget)) {
-      this.tabTriggers.forEach((tabTrigger, index) => {
-        void tabTrigger.guxGetActive().then(activeElement => {
-          if (activeElement) {
-            this.focused = index;
-          }
-          else {
-            tabTrigger
-              .querySelector('.gux-tab-button')
-              .setAttribute('tabindex', '-1');
-            if (tabTrigger.querySelector('.gux-tab-options-button')) {
-              tabTrigger
-                .querySelector('.gux-tab-options-button')
-                .setAttribute('tabindex', '-1');
-            }
-          }
-        });
-      });
+    constructor(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.newTab = index$1.createEvent(this, "newTab", 7);
+        this.sortChanged = index$1.createEvent(this, "sortChanged", 7);
+        this.showNewTabButton = true;
+        this.tabLimit = Infinity;
+        this.allowSort = true;
+        this.focused = 0;
+        this.disableAddTabButton = false;
+        this.tabTriggers = undefined;
+        this.hasScrollbar = false;
+        this.keyboardSort = false;
+        this.initialSortIndex = 0;
+        this.sortTarget = undefined;
+        this.ariaLiveAlert = '';
+    }
+    onFocusin(event) {
+        if (this.allowSort &&
+            eventIsFrom.eventIsFrom('.gux-tablist', event) &&
+            !this.keyboardSort) {
+            this.ariaLiveAlert = 'toggleSort';
+        }
     }
-  }
-  watchAllowSort(allowSort) {
-    if (allowSort) {
-      this.validateSortableInstance();
+    onFocusout(event) {
+        if (!this.root
+            .querySelector('.gux-tablist')
+            .contains(event.relatedTarget)) {
+            this.tabTriggers.forEach((tabTrigger, index) => {
+                void tabTrigger.guxGetActive().then(activeElement => {
+                    if (activeElement) {
+                        this.focused = index;
+                    }
+                    else {
+                        tabTrigger
+                            .querySelector('.gux-tab-button')
+                            .setAttribute('tabindex', '-1');
+                        if (tabTrigger.querySelector('.gux-tab-options-button')) {
+                            tabTrigger
+                                .querySelector('.gux-tab-options-button')
+                                .setAttribute('tabindex', '-1');
+                        }
+                    }
+                });
+            });
+        }
     }
-    else {
-      this.destroySortable();
+    watchAllowSort(allowSort) {
+        if (allowSort) {
+            this.validateSortableInstance();
+        }
+        else {
+            this.destroySortable();
+        }
     }
-  }
-  onMutation() {
-    this.setTabTriggers();
-  }
-  onKeydown(event) {
-    switch (event.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
-        event.preventDefault();
-        if (this.keyboardSort &&
-          !eventIsFrom.eventIsFrom('.gux-tab-options-button', event)) {
-          this.ariaLiveAlert = '';
-          const parentNode = this.root.querySelector('.gux-tablist');
-          const allNodes = parentNode.querySelectorAll('gux-tab-advanced');
-          const targetNodeIndex = Array.prototype.indexOf.call(allNodes, this.sortTarget);
-          let insertBeforeTab;
-          if (targetNodeIndex === allNodes.length - 1) {
-            insertBeforeTab = allNodes[0];
-          }
-          else {
-            insertBeforeTab = allNodes[targetNodeIndex + 2];
-          }
-          parentNode.insertBefore(this.sortTarget, insertBeforeTab);
-          this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
-          this.tabTriggers.forEach((tabTrigger, index) => {
-            var _a;
-            const active = tabTrigger.tabId ===
-              ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-            if (active) {
-              this.focused = index;
-            }
-          });
-          this.focusTab(this.focused);
+    onMutation() {
+        this.setTabTriggers();
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                if (this.keyboardSort &&
+                    !eventIsFrom.eventIsFrom('.gux-tab-options-button', event)) {
+                    this.ariaLiveAlert = '';
+                    const parentNode = this.root.querySelector('.gux-tablist');
+                    const allNodes = parentNode.querySelectorAll('gux-tab-advanced');
+                    const targetNodeIndex = Array.prototype.indexOf.call(allNodes, this.sortTarget);
+                    let insertBeforeTab;
+                    if (targetNodeIndex === allNodes.length - 1) {
+                        insertBeforeTab = allNodes[0];
+                    }
+                    else {
+                        insertBeforeTab = allNodes[targetNodeIndex + 2];
+                    }
+                    parentNode.insertBefore(this.sortTarget, insertBeforeTab);
+                    this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
+                    this.tabTriggers.forEach((tabTrigger, index) => {
+                        var _a;
+                        const active = tabTrigger.tabId ===
+                            ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
+                        if (active) {
+                            this.focused = index;
+                        }
+                    });
+                    this.focusTab(this.focused);
+                }
+                else if (!eventIsFrom.eventIsFrom('.gux-tab-options-button', event) &&
+                    !eventIsFrom.eventIsFrom('.gux-dropdown-option-container', event)) {
+                    this.handleKeyboardScroll('forward');
+                }
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.keyboardSort &&
+                    !eventIsFrom.eventIsFrom('.gux-tab-options-button', event)) {
+                    this.ariaLiveAlert = '';
+                    const parentNode = this.root.querySelector('.gux-tablist');
+                    const allNodes = parentNode.querySelectorAll('gux-tab-advanced');
+                    const targetNodeIndex = Array.prototype.indexOf.call(allNodes, this.sortTarget);
+                    const insertBeforeTab = allNodes[targetNodeIndex - 1] || null;
+                    parentNode.insertBefore(this.sortTarget, insertBeforeTab);
+                    this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
+                    this.tabTriggers.forEach((tabTrigger, index) => {
+                        var _a;
+                        const active = tabTrigger.tabId ===
+                            ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
+                        if (active) {
+                            this.focused = index;
+                        }
+                    });
+                    this.focusTab(this.focused);
+                }
+                else if (!eventIsFrom.eventIsFrom('.gux-tab-options-button', event) &&
+                    !eventIsFrom.eventIsFrom('.gux-dropdown-option-container', event)) {
+                    this.handleKeyboardScroll('backward');
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                if (this.keyboardSort && this.allowSort) {
+                    this.keyboardSort = false;
+                    this.ariaLiveAlert = 'sortCancelled';
+                    const parentNode = this.root.querySelector('.gux-tablist');
+                    const allNodes = this.tabTriggers;
+                    const targetNodeIndex = this.initialSortIndex;
+                    const insertBeforeTab = allNodes[targetNodeIndex] || null;
+                    parentNode.insertBefore(this.sortTarget, insertBeforeTab);
+                }
+                this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
+                this.tabTriggers.forEach((tabTrigger, index) => {
+                    var _a;
+                    const active = tabTrigger.tabId ===
+                        ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
+                    if (active) {
+                        this.focused = index;
+                    }
+                });
+                this.focusTab(this.initialSortIndex);
+                afterNextRender.afterNextRenderTimeout(() => {
+                    this.focusTab(this.initialSortIndex);
+                });
+                break;
+            case 'Enter':
+                if (this.keyboardSort) {
+                    event.preventDefault();
+                    this.keyboardSort = false;
+                    this.ariaLiveAlert = 'sortComplete';
+                    this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
+                    this.tabTriggers.forEach((tabTrigger, index) => {
+                        var _a;
+                        const active = tabTrigger.tabId ===
+                            ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
+                        if (active) {
+                            this.focused = index;
+                        }
+                    });
+                    this.emitSortChanged();
+                }
+                break;
+            case 'Tab':
+                if (this.keyboardSort) {
+                    this.keyboardSort = false;
+                    this.ariaLiveAlert = 'sortCancelled';
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusTab(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusTab(this.tabTriggers.length - 1);
+                break;
         }
-        else if (!eventIsFrom.eventIsFrom('.gux-tab-options-button', event) &&
-          !eventIsFrom.eventIsFrom('.gux-dropdown-option-container', event)) {
-          this.handleKeyboardScroll('forward');
+    }
+    onKeyup(event) {
+        switch (event.key) {
+            case ' ':
+                if (eventIsFrom.eventIsFrom('.gux-tab', event) &&
+                    !eventIsFrom.eventIsFrom('.gux-tab-options-button', event) &&
+                    !eventIsFrom.eventIsFrom('gux-popover-list', event) &&
+                    this.allowSort) {
+                    event.preventDefault();
+                    if (this.keyboardSort === true) {
+                        this.keyboardSort = false;
+                        this.ariaLiveAlert = 'sortComplete';
+                        this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
+                        this.tabTriggers.forEach((tabTrigger, index) => {
+                            var _a;
+                            const active = tabTrigger.tabId ===
+                                ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
+                            if (active) {
+                                this.focused = index;
+                            }
+                        });
+                        this.focusTab(this.focused);
+                        this.emitSortChanged();
+                    }
+                    else {
+                        this.keyboardSort = true;
+                        this.sortTarget = event.target.closest('gux-tab-advanced');
+                        this.tabTriggers.forEach((tabTrigger, index) => {
+                            var _a;
+                            const active = tabTrigger.tabId ===
+                                ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
+                            if (active) {
+                                this.initialSortIndex = index;
+                            }
+                        });
+                        this.ariaLiveAlert = 'sortModeOn';
+                    }
+                }
         }
-        break;
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        event.preventDefault();
-        if (this.keyboardSort &&
-          !eventIsFrom.eventIsFrom('.gux-tab-options-button', event)) {
-          this.ariaLiveAlert = '';
-          const parentNode = this.root.querySelector('.gux-tablist');
-          const allNodes = parentNode.querySelectorAll('gux-tab-advanced');
-          const targetNodeIndex = Array.prototype.indexOf.call(allNodes, this.sortTarget);
-          const insertBeforeTab = allNodes[targetNodeIndex - 1] || null;
-          parentNode.insertBefore(this.sortTarget, insertBeforeTab);
-          this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
-          this.tabTriggers.forEach((tabTrigger, index) => {
-            var _a;
-            const active = tabTrigger.tabId ===
-              ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxSetActive(activeTab) {
+        this.tabTriggers.forEach((tabTrigger, index) => {
+            const active = tabTrigger.tabId === activeTab;
+            void tabTrigger.guxSetActive(active);
             if (active) {
-              this.focused = index;
+                this.focused = index;
             }
-          });
-          this.focusTab(this.focused);
+        });
+    }
+    focusTab(tabIndex) {
+        this.focused = tabIndex;
+        this.tabTriggers.forEach((tabTrigger, index) => {
+            void tabTrigger.guxGetActive().then(activeElement => {
+                if (this.focused !== index && !activeElement) {
+                    tabTrigger
+                        .querySelector('.gux-tab-button')
+                        .setAttribute('tabindex', '-1');
+                    if (tabTrigger.querySelector('.gux-tab-options-button')) {
+                        tabTrigger
+                            .querySelector('.gux-tab-options-button')
+                            .setAttribute('tabindex', '-1');
+                    }
+                }
+            });
+        });
+        this.tabTriggers[this.focused]
+            .querySelector('button')
+            .setAttribute('tabindex', '0');
+        if (this.tabTriggers[this.focused].querySelector('.gux-tab-options-button')) {
+            this.tabTriggers[this.focused]
+                .querySelector('.gux-tab-options-button')
+                .setAttribute('tabindex', '0');
         }
-        else if (!eventIsFrom.eventIsFrom('.gux-tab-options-button', event) &&
-          !eventIsFrom.eventIsFrom('.gux-dropdown-option-container', event)) {
-          this.handleKeyboardScroll('backward');
+        void this.tabTriggers[this.focused].guxFocus();
+    }
+    setTabTriggers() {
+        this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
+        if (this.tabTriggers) {
+            this.triggerIds = Array.from(this.tabTriggers)
+                .map(trigger => `gux-${trigger.getAttribute('tab-id')}-tab`)
+                .join(' ');
         }
-        break;
-      case 'Escape':
-        event.preventDefault();
-        if (this.keyboardSort && this.allowSort) {
-          this.keyboardSort = false;
-          this.ariaLiveAlert = 'sortCancelled';
-          const parentNode = this.root.querySelector('.gux-tablist');
-          const allNodes = this.tabTriggers;
-          const targetNodeIndex = this.initialSortIndex;
-          const insertBeforeTab = allNodes[targetNodeIndex] || null;
-          parentNode.insertBefore(this.sortTarget, insertBeforeTab);
+        else {
+            this.triggerIds = '';
         }
-        this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
-        this.tabTriggers.forEach((tabTrigger, index) => {
-          var _a;
-          const active = tabTrigger.tabId ===
-            ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-          if (active) {
-            this.focused = index;
-          }
+    }
+    createSortable() {
+        this.sortableInstance = new Sortable(this.root.querySelector('.gux-tablist'), {
+            animation: 250,
+            draggable: 'gux-tab-advanced',
+            filter: '.ignore-sort',
+            onMove: (event) => {
+                return !event.related.classList.contains('ignore-sort');
+            },
+            onUpdate: () => {
+                this.emitSortChanged();
+            }
         });
-        this.focusTab(this.initialSortIndex);
-        afterNextRender.afterNextRenderTimeout(() => {
-          this.focusTab(this.initialSortIndex);
+    }
+    destroySortable() {
+        if (this.sortableInstance) {
+            this.sortableInstance.destroy();
+            this.sortableInstance = null;
+        }
+    }
+    emitSortChanged() {
+        const tabIds = Array.from(this.root.querySelectorAll('gux-tab-advanced')).map(tabElement => tabElement.tabId);
+        this.sortChanged.emit(tabIds);
+    }
+    checkForScrollbarHideOrShow() {
+        index$1.readTask(() => {
+            const el = this.root.querySelector('.gux-scrollable-section');
+            const hasScrollbar = el.clientWidth < el.scrollWidth;
+            if (hasScrollbar !== this.hasScrollbar) {
+                this.hasScrollbar = hasScrollbar;
+            }
         });
-        break;
-      case 'Enter':
-        if (this.keyboardSort) {
-          event.preventDefault();
-          this.keyboardSort = false;
-          this.ariaLiveAlert = 'sortComplete';
-          this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
-          this.tabTriggers.forEach((tabTrigger, index) => {
-            var _a;
-            const active = tabTrigger.tabId ===
-              ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-            if (active) {
-              this.focused = index;
+    }
+    handleKeyboardScroll(direction) {
+        if (direction === 'forward') {
+            if (this.focused < this.tabTriggers.length - 1) {
+                if (this.hasScrollbar) {
+                    this.scrollRight();
+                }
+                this.focusTab(this.focused + 1);
+            }
+            else {
+                if (this.hasScrollbar) {
+                    this.scrollToStart();
+                }
+                this.focusTab(0);
             }
-          });
-          this.emitSortChanged();
         }
-        break;
-      case 'Tab':
-        if (this.keyboardSort) {
-          this.keyboardSort = false;
-          this.ariaLiveAlert = 'sortCancelled';
+        else if (direction === 'backward') {
+            if (this.focused > 0) {
+                if (this.hasScrollbar) {
+                    this.scrollLeft();
+                }
+                this.focusTab(this.focused - 1);
+            }
+            else {
+                if (this.hasScrollbar) {
+                    this.scrollToEnd();
+                }
+                this.focusTab(this.tabTriggers.length - 1);
+            }
         }
-        break;
-      case 'Home':
-        event.preventDefault();
-        this.focusTab(0);
-        break;
-      case 'End':
-        event.preventDefault();
-        this.focusTab(this.tabTriggers.length - 1);
-        break;
     }
-  }
-  onKeyup(event) {
-    switch (event.key) {
-      case ' ':
-        if (eventIsFrom.eventIsFrom('.gux-tab', event) &&
-          !eventIsFrom.eventIsFrom('.gux-tab-options-button', event) &&
-          !eventIsFrom.eventIsFrom('gux-popover-list', event) &&
-          this.allowSort) {
-          event.preventDefault();
-          if (this.keyboardSort === true) {
-            this.keyboardSort = false;
-            this.ariaLiveAlert = 'sortComplete';
-            this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
-            this.tabTriggers.forEach((tabTrigger, index) => {
-              var _a;
-              const active = tabTrigger.tabId ===
-                ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-              if (active) {
-                this.focused = index;
-              }
-            });
-            this.focusTab(this.focused);
-            this.emitSortChanged();
-          }
-          else {
-            this.keyboardSort = true;
-            this.sortTarget = event.target.closest('gux-tab-advanced');
-            this.tabTriggers.forEach((tabTrigger, index) => {
-              var _a;
-              const active = tabTrigger.tabId ===
-                ((_a = this.sortTarget) === null || _a === void 0 ? void 0 : _a.getAttribute('tab-id'));
-              if (active) {
-                this.initialSortIndex = index;
-              }
-            });
-            this.ariaLiveAlert = 'sortModeOn';
-          }
+    disconnectedCallback() {
+        if (this.sortableInstance) {
+            this.destroySortable();
         }
-    }
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxSetActive(activeTab) {
-    this.tabTriggers.forEach((tabTrigger, index) => {
-      const active = tabTrigger.tabId === activeTab;
-      void tabTrigger.guxSetActive(active);
-      if (active) {
-        this.focused = index;
-      }
-    });
-  }
-  focusTab(tabIndex) {
-    this.focused = tabIndex;
-    this.tabTriggers.forEach((tabTrigger, index) => {
-      void tabTrigger.guxGetActive().then(activeElement => {
-        if (this.focused !== index && !activeElement) {
-          tabTrigger
-            .querySelector('.gux-tab-button')
-            .setAttribute('tabindex', '-1');
-          if (tabTrigger.querySelector('.gux-tab-options-button')) {
-            tabTrigger
-              .querySelector('.gux-tab-options-button')
-              .setAttribute('tabindex', '-1');
-          }
+        if (this.resizeObserver) {
+            this.resizeObserver.unobserve(this.root.querySelector('.gux-tab-container'));
+        }
+        if (this.domObserver) {
+            this.domObserver.disconnect();
         }
-      });
-    });
-    this.tabTriggers[this.focused]
-      .querySelector('button')
-      .setAttribute('tabindex', '0');
-    if (this.tabTriggers[this.focused].querySelector('.gux-tab-options-button')) {
-      this.tabTriggers[this.focused]
-        .querySelector('.gux-tab-options-button')
-        .setAttribute('tabindex', '0');
-    }
-    void this.tabTriggers[this.focused].guxFocus();
-  }
-  setTabTriggers() {
-    this.tabTriggers = this.root.querySelectorAll('gux-tab-advanced');
-    if (this.tabTriggers) {
-      this.triggerIds = Array.from(this.tabTriggers)
-        .map(trigger => `gux-${trigger.getAttribute('tab-id')}-tab`)
-        .join(' ');
     }
-    else {
-      this.triggerIds = '';
+    async componentWillLoad() {
+        this.setTabTriggers();
+        this.i18n = await index$2.buildI18nForComponent(this.root, en.tabsResources, 'gux-tabs-advanced');
     }
-  }
-  createSortable() {
-    this.sortableInstance = new Sortable(this.root.querySelector('.gux-tablist'), {
-      animation: 250,
-      draggable: 'gux-tab-advanced',
-      filter: '.ignore-sort',
-      onMove: (event) => {
-        return !event.related.classList.contains('ignore-sort');
-      },
-      onUpdate: () => {
-        this.emitSortChanged();
-      }
-    });
-  }
-  destroySortable() {
-    if (this.sortableInstance) {
-      this.sortableInstance.destroy();
-      this.sortableInstance = null;
+    validateSortableInstance() {
+        if (this.allowSort && !this.sortableInstance) {
+            this.createSortable();
+        }
     }
-  }
-  emitSortChanged() {
-    const tabIds = Array.from(this.root.querySelectorAll('gux-tab-advanced')).map(tabElement => tabElement.tabId);
-    this.sortChanged.emit(tabIds);
-  }
-  checkForScrollbarHideOrShow() {
-    index$1.readTask(() => {
-      const el = this.root.querySelector('.gux-scrollable-section');
-      const hasScrollbar = el.clientWidth < el.scrollWidth;
-      if (hasScrollbar !== this.hasScrollbar) {
-        this.hasScrollbar = hasScrollbar;
-      }
-    });
-  }
-  handleKeyboardScroll(direction) {
-    if (direction === 'forward') {
-      if (this.focused < this.tabTriggers.length - 1) {
-        if (this.hasScrollbar) {
-          this.scrollRight();
+    componentDidLoad() {
+        this.validateSortableInstance();
+        if (!this.resizeObserver && window.ResizeObserver) {
+            this.resizeObserver = new ResizeObserver(() => this.checkForScrollbarHideOrShow());
         }
-        this.focusTab(this.focused + 1);
-      }
-      else {
-        if (this.hasScrollbar) {
-          this.scrollToStart();
+        if (this.resizeObserver) {
+            this.resizeObserver.observe(this.root.querySelector('.gux-scrollable-section'));
         }
-        this.focusTab(0);
-      }
-    }
-    else if (direction === 'backward') {
-      if (this.focused > 0) {
-        if (this.hasScrollbar) {
-          this.scrollLeft();
+        if (!this.domObserver && window.MutationObserver) {
+            this.domObserver = new MutationObserver(() => this.checkForScrollbarHideOrShow());
         }
-        this.focusTab(this.focused - 1);
-      }
-      else {
-        if (this.hasScrollbar) {
-          this.scrollToEnd();
+        if (this.domObserver) {
+            this.domObserver.observe(this.root, {
+                childList: true,
+                attributes: false,
+                subtree: true
+            });
         }
-        this.focusTab(this.tabTriggers.length - 1);
-      }
-    }
-  }
-  disconnectedCallback() {
-    if (this.sortableInstance) {
-      this.destroySortable();
+        afterNextRender.afterNextRenderTimeout(() => {
+            this.checkForScrollbarHideOrShow();
+        }, 500);
     }
-    if (this.resizeObserver) {
-      this.resizeObserver.unobserve(this.root.querySelector('.gux-tab-container'));
+    scrollLeft() {
+        index$1.writeTask(() => {
+            var _a;
+            this.root
+                .querySelector('.gux-scrollable-section')
+                .scrollBy(-((_a = this.root.querySelector('gux-tab-advanced')) === null || _a === void 0 ? void 0 : _a.scrollWidth), 0);
+        });
     }
-    if (this.domObserver) {
-      this.domObserver.disconnect();
+    scrollRight() {
+        index$1.writeTask(() => {
+            var _a;
+            this.root
+                .querySelector('.gux-scrollable-section')
+                .scrollBy((_a = this.root.querySelector('gux-tab-advanced')) === null || _a === void 0 ? void 0 : _a.scrollWidth, 0);
+        });
     }
-  }
-  async componentWillLoad() {
-    this.setTabTriggers();
-    this.i18n = await index$2.buildI18nForComponent(this.root, en.tabsResources, 'gux-tabs-advanced');
-  }
-  validateSortableInstance() {
-    if (this.allowSort && !this.sortableInstance) {
-      this.createSortable();
+    scrollToStart() {
+        const scrollableSection = this.root.querySelector('.gux-scrollable-section');
+        index$1.writeTask(() => {
+            scrollableSection === null || scrollableSection === void 0 ? void 0 : scrollableSection.scrollBy(-(scrollableSection === null || scrollableSection === void 0 ? void 0 : scrollableSection.scrollWidth), 0);
+        });
     }
-  }
-  componentDidLoad() {
-    this.validateSortableInstance();
-    if (!this.resizeObserver && window.ResizeObserver) {
-      this.resizeObserver = new ResizeObserver(() => this.checkForScrollbarHideOrShow());
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.observe(this.root.querySelector('.gux-scrollable-section'));
-    }
-    if (!this.domObserver && window.MutationObserver) {
-      this.domObserver = new MutationObserver(() => this.checkForScrollbarHideOrShow());
-    }
-    if (this.domObserver) {
-      this.domObserver.observe(this.root, {
-        childList: true,
-        attributes: false,
-        subtree: true
-      });
+    scrollToEnd() {
+        const scrollableSection = this.root.querySelector('.gux-scrollable-section');
+        index$1.writeTask(() => {
+            scrollableSection.scrollBy(scrollableSection === null || scrollableSection === void 0 ? void 0 : scrollableSection.scrollWidth, 0);
+        });
     }
-    afterNextRender.afterNextRenderTimeout(() => {
-      this.checkForScrollbarHideOrShow();
-    }, 500);
-  }
-  scrollLeft() {
-    index$1.writeTask(() => {
-      var _a;
-      this.root
-        .querySelector('.gux-scrollable-section')
-        .scrollBy(-((_a = this.root.querySelector('gux-tab-advanced')) === null || _a === void 0 ? void 0 : _a.scrollWidth), 0);
-    });
-  }
-  scrollRight() {
-    index$1.writeTask(() => {
-      var _a;
-      this.root
-        .querySelector('.gux-scrollable-section')
-        .scrollBy((_a = this.root.querySelector('gux-tab-advanced')) === null || _a === void 0 ? void 0 : _a.scrollWidth, 0);
-    });
-  }
-  scrollToStart() {
-    const scrollableSection = this.root.querySelector('.gux-scrollable-section');
-    index$1.writeTask(() => {
-      scrollableSection === null || scrollableSection === void 0 ? void 0 : scrollableSection.scrollBy(-(scrollableSection === null || scrollableSection === void 0 ? void 0 : scrollableSection.scrollWidth), 0);
-    });
-  }
-  scrollToEnd() {
-    const scrollableSection = this.root.querySelector('.gux-scrollable-section');
-    index$1.writeTask(() => {
-      scrollableSection.scrollBy(scrollableSection === null || scrollableSection === void 0 ? void 0 : scrollableSection.scrollWidth, 0);
-    });
-  }
-  componentWillRender() {
-    const tabs = Array.from(this.root.querySelectorAll('gux-tab-advanced'));
-    this.disableAddTabButton = tabs.length >= this.tabLimit;
-  }
-  render() {
-    return [
-      this.renderAlert(),
-      index$1.h("div", { class: "gux-tab-container" }, this.renderScrollButton('scrollLeft'), index$1.h("div", { class: "gux-scrollable-section" }, index$1.h("div", { class: "gux-tablist", role: "tablist", "data-gux-tab-sorting": this.keyboardSort, "aria-owns": this.triggerIds }, index$1.h("slot", null)), this.renderAddButton()), this.renderScrollButton('scrollRight'))
-    ];
-  }
-  renderAlert() {
-    return (index$1.h("div", { class: "gux-sr-only gux-aria-live-region", "aria-live": "polite" }, this.ariaLiveAlert ? this.i18n(this.ariaLiveAlert) : ''));
-  }
-  renderAddButton() {
-    return (index$1.h("div", null, this.showNewTabButton ? (index$1.h("gux-button-slot", { class: "gux-add-button", accent: "ghost" }, index$1.h("button", { onClick: () => this.newTab.emit(), disabled: this.disableAddTabButton }, index$1.h("slot", { name: "add-tab" }, index$1.h("gux-icon", { "icon-name": "add", "screenreader-text": this.disableAddTabButton
-        ? this.i18n('disableNewTab')
-        : this.root.querySelector('[slot="add-tab"]')
-          ? this.root
-            .querySelector('[slot="add-tab"]')
-            .textContent.trim()
-          : this.i18n('createNewTab') }))))) : null));
-  }
-  renderScrollButton(direction) {
-    return (index$1.h("div", null, this.hasScrollbar ? (index$1.h("gux-button-slot", { class: "gux-scroll-button", accent: "ghost" }, index$1.h("button", { tabindex: "-1", onDragOver: () => this.getScrollDirection(direction), onClick: () => this.getScrollDirection(direction) }, index$1.h("gux-icon", { "icon-name": this.getChevronIconName(direction), "screenreader-text": this.i18n(direction) })))) : null));
-  }
-  getScrollDirection(direction) {
-    switch (direction) {
-      case 'scrollLeft':
-        this.scrollLeft();
-        break;
-      case 'scrollRight':
-        this.scrollRight();
-        break;
+    componentWillRender() {
+        const tabs = Array.from(this.root.querySelectorAll('gux-tab-advanced'));
+        this.disableAddTabButton = tabs.length >= this.tabLimit;
+    }
+    render() {
+        return [
+            this.renderAlert(),
+            index$1.h("div", { key: '9e02f2a4a018f32c36fe5d45b171eb92290f73ca', class: "gux-tab-container" }, this.renderScrollButton('scrollLeft'), index$1.h("div", { key: 'abf96090632ff44cbbd5ae1f73431ee6ce11c65a', class: "gux-scrollable-section" }, index$1.h("div", { key: '648ed086d61097a12a04f451f74a7d8df307cb77', class: "gux-tablist", role: "tablist", "data-gux-tab-sorting": this.keyboardSort, "aria-owns": this.triggerIds }, index$1.h("slot", { key: '20847e37c7aedef829682e750b4affbd71800239' })), this.renderAddButton()), this.renderScrollButton('scrollRight'))
+        ];
+    }
+    renderAlert() {
+        return (index$1.h("div", { class: "gux-sr-only gux-aria-live-region", "aria-live": "polite" }, this.ariaLiveAlert ? this.i18n(this.ariaLiveAlert) : ''));
+    }
+    renderAddButton() {
+        return (index$1.h("div", null, this.showNewTabButton ? (index$1.h("gux-button-slot", { class: "gux-add-button", accent: "ghost" }, index$1.h("button", { onClick: () => this.newTab.emit(), disabled: this.disableAddTabButton }, index$1.h("slot", { name: "add-tab" }, index$1.h("gux-icon", { "icon-name": "add", "screenreader-text": this.disableAddTabButton
+                ? this.i18n('disableNewTab')
+                : this.root.querySelector('[slot="add-tab"]')
+                    ? this.root
+                        .querySelector('[slot="add-tab"]')
+                        .textContent.trim()
+                    : this.i18n('createNewTab') }))))) : null));
+    }
+    renderScrollButton(direction) {
+        return (index$1.h("div", null, this.hasScrollbar ? (index$1.h("gux-button-slot", { class: "gux-scroll-button", accent: "ghost" }, index$1.h("button", { tabindex: "-1", onDragOver: () => this.getScrollDirection(direction), onClick: () => this.getScrollDirection(direction) }, index$1.h("gux-icon", { "icon-name": this.getChevronIconName(direction), "screenreader-text": this.i18n(direction) })))) : null));
+    }
+    getScrollDirection(direction) {
+        switch (direction) {
+            case 'scrollLeft':
+                this.scrollLeft();
+                break;
+            case 'scrollRight':
+                this.scrollRight();
+                break;
+        }
     }
-  }
-  getChevronIconName(direction) {
-    switch (direction) {
-      case 'scrollLeft':
-        return 'chevron-left';
-      case 'scrollRight':
-        return 'chevron-right';
+    getChevronIconName(direction) {
+        switch (direction) {
+            case 'scrollLeft':
+                return 'chevron-left';
+            case 'scrollRight':
+                return 'chevron-right';
+        }
     }
-  }
-  get root() { return index$1.getElement(this); }
-  static get watchers() { return {
-    "allowSort": ["watchAllowSort"]
-  }; }
+    get root() { return index$1.getElement(this); }
+    static get watchers() { return {
+        "allowSort": ["watchAllowSort"]
+    }; }
 };
 __decorate([
-  onMutation.OnMutation({ childList: true, subtree: true })
+    onMutation.OnMutation({ childList: true, subtree: true })
 ], GuxTabAdvancedList.prototype, "onMutation", null);
-GuxTabAdvancedList.style = guxTabAdvancedListCss;
+GuxTabAdvancedList.style = GuxTabAdvancedListStyle0;
 
 exports.gux_tab_advanced_list = GuxTabAdvancedList;