@vonage/vivid 4.23.0 → 4.24.0

package/shared/definition53.cjs

@@ -9,9 +9,8 @@ const numbers = require('./numbers.cjs');
 const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
-const when = require('./when.cjs');
 
-const styles = ":host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:\"\";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1/auto/auto;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-column:1/auto;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}";
+const styles = ":host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:\"\";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -23,7 +22,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
-const TABLIST_COLUMN = "--_tabs-tablist-column";
 const TabsGutters = {
   None: "none",
   Small: "small"
@@ -32,323 +30,284 @@ const TabsOrientation = {
   vertical: "vertical",
   horizontal: "horizontal"
 };
+const oppositeOrientation = (orientation) => orientation === TabsOrientation.horizontal ? TabsOrientation.vertical : TabsOrientation.horizontal;
+const gridProperty = (orientation) => orientation === TabsOrientation.horizontal ? "gridColumn" : "gridRow";
+const translateProperty = (orientation) => orientation === TabsOrientation.horizontal ? "translateX" : "translateY";
+const offsetProperty = (orientation) => orientation === TabsOrientation.horizontal ? "offsetLeft" : "offsetTop";
+const isFocusableElement = (el) => el.getAttribute("aria-disabled") !== "true" && !el.hasAttribute("hidden");
 class Tabs extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
     this.orientation = TabsOrientation.horizontal;
-    this.#isLastTabSelectedAfterRemove = (oldValue, newValue, isTab = true) => {
-      return oldValue.length > newValue.length && this.activetab.id === oldValue[oldValue.length - 1].getAttribute(
-        isTab ? "id" : "aria-labelledby"
-      );
-    };
-    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
-    this.activeindicator = true;
-    this.showActiveIndicator = true;
-    this.prevActiveTabIndex = 0;
-    this.activeTabIndex = 0;
-    this.tabIds = [];
-    this.tabpanelIds = [];
-    this.change = () => {
-      this.$emit("change", this.activetab);
-    };
-    this.isDisabledElement = (el) => {
-      return el.getAttribute("aria-disabled") === "true";
-    };
-    this.isHiddenElement = (el) => {
-      return el.hasAttribute("hidden");
-    };
-    this.isFocusableElement = (el) => {
-      return !this.isDisabledElement(el) && !this.isHiddenElement(el);
-    };
-    this.setTabs = () => {
-      const gridHorizontalProperty = "gridColumn";
-      const gridVerticalProperty = "gridRow";
-      const gridProperty = this.#isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
-      this.activeTabIndex = this.getActiveIndex();
-      this.showActiveIndicator = false;
-      if (this.#isHorizontal()) {
-        this.tablist.style.setProperty(
-          "grid-template-columns",
-          `repeat(${this.tabs.length}, var(${TABLIST_COLUMN}))`
-        );
-      } else {
-        this.tablist.style.removeProperty("grid-template-columns");
-      }
-      this.tabs.forEach((tab, index) => {
-        if (tab.slot === "tab") {
-          const isActiveTab = this.activeTabIndex === index && this.isFocusableElement(tab);
-          if (this.activeindicator && this.isFocusableElement(tab)) {
-            this.showActiveIndicator = true;
-          }
-          const tabId = this.tabIds[index];
-          const tabpanelId = this.tabpanelIds[index];
-          tab.setAttribute("id", tabId);
-          tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
-          tab.setAttribute("aria-controls", tabpanelId);
-          tab.addEventListener("click", this.handleTabClick);
-          tab.addEventListener("keydown", this.#handleTabKeyDown);
-          tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
-          if (isActiveTab) {
-            this.activetab = tab;
-            this.activeid = tabId;
-          }
-        }
-        tab.style[gridHorizontalProperty] = "";
-        tab.style[gridVerticalProperty] = "";
-        tab.style[gridProperty] = `${index + 1}`;
-        !this.#isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
-      });
-      this.#updateTabsConnotation();
-    };
-    this.setTabPanels = () => {
-      this.tabpanels.forEach((tabpanel, index) => {
-        const tabId = this.tabIds[index];
-        const tabpanelId = this.tabpanelIds[index];
-        tabpanel.setAttribute("id", tabpanelId);
-        tabpanel.setAttribute("aria-labelledby", tabId);
-        this.activeTabIndex !== index ? tabpanel.setAttribute("hidden", "") : tabpanel.removeAttribute("hidden");
-      });
-    };
-    this.handleTabClick = (event) => {
+    this.tabs = [];
+    this.tabpanels = [];
+    this.#isTabsChangeQueued = false;
+    this.#lastActiveId = void 0;
+    this.#onTabClick = (event) => {
       const selectedTab = event.currentTarget;
-      if (selectedTab.nodeType === 1 && this.isFocusableElement(selectedTab)) {
-        this.prevActiveTabIndex = this.activeTabIndex;
-        this.activeTabIndex = this.tabs.indexOf(selectedTab);
-        this.setComponent();
+      if (this._validTabs.includes(selectedTab)) {
+        this.#setActiveTabDueToUserInteraction(selectedTab);
       }
     };
-    this.#isHorizontal = () => {
-      return this.orientation === TabsOrientation.horizontal;
-    };
-    this.#handleTabKeyDown = (event) => {
-      if (this.#isHorizontal()) {
-        switch (event.key) {
-          case keyCodes.keyArrowLeft:
-            event.preventDefault();
-            this.adjustBackward(event);
-            break;
-          case keyCodes.keyArrowRight:
-            event.preventDefault();
-            this.adjustForward(event);
-            break;
-        }
-      } else {
-        switch (event.key) {
-          case keyCodes.keyArrowUp:
-            event.preventDefault();
-            this.adjustBackward(event);
-            break;
-          case keyCodes.keyArrowDown:
-            event.preventDefault();
-            this.adjustForward(event);
-            break;
-        }
+    this.#onTabKeyDown = (event) => {
+      const tabs = this._validTabs;
+      const activeTab = this.activetab;
+      if (!activeTab) {
+        return;
       }
-      switch (event.key) {
-        case keyCodes.keyHome:
-          event.preventDefault();
-          this.adjust(-this.activeTabIndex);
-          break;
-        case keyCodes.keyEnd:
-          event.preventDefault();
-          this.adjust(this.tabs.length - this.activeTabIndex - 1);
-          break;
+      const [arrowKeyPrev, arrowKeyNext] = this.orientation === TabsOrientation.horizontal ? [keyCodes.keyArrowLeft, keyCodes.keyArrowRight] : [keyCodes.keyArrowUp, keyCodes.keyArrowDown];
+      const keyToNextTab = {
+        [arrowKeyPrev]: () => tabs[(tabs.indexOf(activeTab) - 1 + tabs.length) % tabs.length],
+        [arrowKeyNext]: () => tabs[(tabs.indexOf(activeTab) + 1) % tabs.length],
+        [keyCodes.keyHome]: () => tabs[0],
+        [keyCodes.keyEnd]: () => tabs[tabs.length - 1]
+      };
+      if (keyToNextTab[event.key]) {
+        event.preventDefault();
+        this.#setActiveTabDueToUserInteraction(keyToNextTab[event.key]());
       }
     };
-    this.adjustForward = (_) => {
-      this.#moveToNextTab(1);
-    };
-    this.adjustBackward = (_) => {
-      this.#moveToNextTab(-1);
-    };
-    this.#moveToTabByIndex = (group, index) => {
-      const tab = group[index];
-      this.activetab = tab;
-      this.prevActiveTabIndex = this.activeTabIndex;
-      this.activeTabIndex = index;
-      tab.focus();
-      this.setComponent();
-    };
+    this.#isTransitioningTransform = false;
     this.scrollablePanel = false;
     this._actionItemsSlottedContent = [];
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.activeindicator = true;
   }
   /**
    * @internal
    */
   orientationChanged() {
+    this._registerTabsChange();
     if (this.$fastController.isConnected) {
-      this.setTabs();
-      this.setTabPanels();
-      this.#handleActiveIndicatorPosition();
-    }
-    this.#patchIndicatorStyleTransition();
-    if (!this.activeIndicatorRef) return;
-    if (this.orientation === TabsOrientation.vertical) {
-      this.activeIndicatorRef.style.removeProperty(ACTIVE_TAB_WIDTH);
+      vividElement.DOM.queueUpdate(() => this.#moveActiveIndicator(false));
     }
   }
   /**
    * @internal
    */
-  activeidChanged(oldValue, _) {
-    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
-      this.prevActiveTabIndex = this.tabs.findIndex(
-        (item) => item.id === oldValue
-      );
-      this.setTabs();
-      this.setTabPanels();
-      this.#handleActiveIndicatorPosition();
+  tabsChanged() {
+    for (const tab of this.tabs) {
+      if (!tab.id) {
+        tab.id = `tab-${strings.uniqueId()}`;
+      }
+      tab.addEventListener("click", this.#onTabClick);
+      tab.addEventListener("keydown", this.#onTabKeyDown);
     }
-    this.#patchIndicatorStyleTransition();
-    this.#scrollToIndex(this.activeTabIndex);
+    this._registerTabsChange();
   }
-  #isLastTabSelectedAfterRemove;
   /**
    * @internal
    */
-  tabsChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
-      this.tabIds = this.getTabIds();
-      this.tabpanelIds = this.getTabPanelIds();
-      this.setTabs();
-      this.setTabPanels();
-      this.#handleActiveIndicatorPosition(
-        !this.#isLastTabSelectedAfterRemove(oldValue, newValue)
-      );
+  tabpanelsChanged() {
+    for (const panel of this.tabpanels) {
+      if (!panel.id) {
+        panel.id = `panel-${strings.uniqueId()}`;
+      }
     }
-    this.#patchIndicatorStyleTransition();
-    this.#updateScrollStatus();
+    this._registerTabsChange();
+  }
+  /**
+   * Tabs that are paired with a tabpanel. Ignore any excess tabs or panels.
+   */
+  get _pairedTabs() {
+    return this.tabs.slice(
+      0,
+      Math.min(this.tabs.length, this.tabpanels.length)
+    );
+  }
+  /**
+   * Tabs that are eligible to become active.
+   */
+  get _validTabs() {
+    return this._pairedTabs.filter(isFocusableElement);
   }
   /**
    * @internal
    */
-  tabpanelsChanged(oldValue, newValue) {
-    if (this.$fastController.isConnected && this.tabpanels.length <= this.tabs.length) {
-      this.tabIds = this.getTabIds();
-      this.tabpanelIds = this.getTabPanelIds();
-      this.setTabs();
-      this.setTabPanels();
-      this.#handleActiveIndicatorPosition(
-        !this.#isLastTabSelectedAfterRemove(oldValue, newValue, false)
-      );
-    }
-    this.#patchIndicatorStyleTransition();
+  activeidChanged() {
+    this._registerTabsChange();
   }
-  getActiveIndex() {
-    const id = this.activeid;
-    if (id !== void 0) {
-      return this.tabIds.indexOf(this.activeid) === -1 ? 0 : this.tabIds.indexOf(this.activeid);
-    } else {
-      return 0;
-    }
+  /**
+   * A reference to the active tab
+   * @public
+   */
+  get activetab() {
+    return this._validTabs.find((tab) => tab.id === this.activeid) ?? null;
   }
-  getTabIds() {
-    return this.tabs.map((tab) => {
-      return tab.getAttribute("id") ?? `tab-${strings.uniqueId()}`;
-    });
+  #setActiveTabDueToUserInteraction(tab) {
+    this.activeid = tab.id;
+    tab.focus();
+    this.$emit("change", tab);
   }
-  getTabPanelIds() {
-    return this.tabpanels.map((tabPanel) => {
-      return tabPanel.getAttribute("id") ?? `panel-${strings.uniqueId()}`;
+  #isTabsChangeQueued;
+  /**
+   * Defer actual processing of changes into a microtask to wait for all DOM changes to complete. E.g. when tabs and
+   * active id are updated at the same time.
+   */
+  _registerTabsChange() {
+    if (this.#isTabsChangeQueued) {
+      return;
+    }
+    this.#isTabsChangeQueued = true;
+    window.queueMicrotask(() => {
+      if (this.$fastController.isConnected) {
+        this.#handleTabsChange();
+      }
+      this.#isTabsChangeQueued = false;
     });
   }
-  setComponent() {
-    if (this.activeTabIndex !== this.prevActiveTabIndex) {
-      this.activeid = this.tabIds[this.activeTabIndex];
-      this.focusTab();
-      this.change();
+  #lastActiveId;
+  #handleTabsChange() {
+    const validTabs = this._validTabs;
+    let newActiveId = this.activeid;
+    if (!validTabs.length || newActiveId && !validTabs.find((t) => t.id === newActiveId)) {
+      newActiveId = void 0;
+    }
+    if (!newActiveId && validTabs.length) {
+      newActiveId = validTabs[0].id;
+    }
+    if (this.activeid !== newActiveId) {
+      this.activeid = newActiveId;
+      this.$emit("change", this.activetab);
+    }
+    this.#updateSlottedChildren();
+    if (this.activeid !== this.#lastActiveId) {
+      if (this.activetab) {
+        const shouldAnimate = this.#lastActiveId !== void 0;
+        this.#scrollToTab(this.activetab, shouldAnimate);
+        this.#moveActiveIndicator(shouldAnimate);
+      }
+      this.#lastActiveId = this.activeid;
+    } else {
+      this.#moveActiveIndicator(this.#isTransitioningTransform);
+    }
+  }
+  /**
+   * Updates the tabs and their panels according to the current state of the component.
+   */
+  #updateSlottedChildren() {
+    for (const [index, tab] of this._pairedTabs.entries()) {
+      const panel = this.tabpanels[index];
+      const isActiveTab = tab.id === this.activeid;
+      tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
+      tab.setAttribute("aria-controls", panel.id);
+      tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
+      if (isActiveTab && this.connotation) {
+        tab.setAttribute("connotation", this.connotation);
+      } else {
+        tab.removeAttribute("connotation");
+      }
+      tab.classList.toggle(
+        "vertical",
+        this.orientation === TabsOrientation.vertical
+      );
+      tab.style[gridProperty(oppositeOrientation(this.orientation))] = "";
+      tab.style[gridProperty(this.orientation)] = `${index + 1}`;
+      panel.setAttribute("aria-labelledby", tab.id);
+      panel.hidden = !isActiveTab;
     }
   }
-  #isHorizontal;
-  #handleTabKeyDown;
+  #onTabClick;
+  #onTabKeyDown;
   /**
-   * The adjust method for FASTTabs
+   * Adjusts the active index by numerical increments.
+   * Only enabled tabs are considered.
    * @public
    * @remarks
-   * This method allows the active index to be adjusted by numerical increments
    */
   adjust(adjustment) {
-    const focusableTabs = this.tabs.filter((t) => this.isFocusableElement(t));
-    const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
+    const focusableTabs = this._validTabs;
+    const currentActiveTabIndex = focusableTabs.findIndex(
+      (t) => t.id === this.activeid
+    );
+    if (currentActiveTabIndex === -1) {
+      return;
+    }
     const nextTabIndex = numbers.limit(
       0,
       focusableTabs.length - 1,
       currentActiveTabIndex + adjustment
     );
-    const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
-    if (nextIndex > -1) {
-      this.#moveToTabByIndex(this.tabs, nextIndex);
+    this.#setActiveTabDueToUserInteraction(focusableTabs[nextTabIndex]);
+  }
+  #isTransitioningTransform;
+  /**
+   * @internal
+   */
+  _onActiveIndicatorTransitionend(event) {
+    if (event.propertyName === "transform") {
+      this.#isTransitioningTransform = false;
     }
   }
-  #moveToNextTab(direction) {
-    const activeIndex = this.tabs.indexOf(this.activetab);
-    for (let offset = 1; offset < this.tabs.length; offset++) {
-      const index = (activeIndex + direction * offset + this.tabs.length) % this.tabs.length;
-      if (this.isFocusableElement(this.tabs[index])) {
-        this.#moveToTabByIndex(this.tabs, index);
-        break;
+  #cancelAnimationIfNeeded() {
+    this.#isTransitioningTransform = false;
+    this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+  }
+  #moveActiveIndicator(shouldAnimate) {
+    const activeTabIndex = this._pairedTabs.findIndex(
+      (tab) => tab.id === this.activeid
+    );
+    if (activeTabIndex === -1) {
+      return;
+    }
+    const indicatorEl = this.activeIndicatorRef;
+    const currentOffset = indicatorEl[offsetProperty(this.orientation)];
+    indicatorEl.style[gridProperty(this.orientation)] = `${activeTabIndex + 1}`;
+    const targetOffset = indicatorEl[offsetProperty(this.orientation)];
+    indicatorEl.style[gridProperty(this.orientation)] = "";
+    const relativeOffset = targetOffset - currentOffset;
+    const currentTransform = indicatorEl.style.transform;
+    const targetTransform = `${translateProperty(
+      this.orientation
+    )}(${relativeOffset}px)`;
+    if (shouldAnimate) {
+      indicatorEl.classList.add("activeIndicatorTransition");
+      if (currentTransform !== targetTransform) {
+        this.#isTransitioningTransform = true;
       }
+    } else {
+      this.#cancelAnimationIfNeeded();
     }
-  }
-  #moveToTabByIndex;
-  focusTab() {
-    this.tabs[this.activeTabIndex].focus();
+    indicatorEl.style.transform = targetTransform;
+    indicatorEl.style.setProperty(
+      ACTIVE_TAB_WIDTH,
+      this.tabs[activeTabIndex].getBoundingClientRect().width + "px"
+    );
   }
   /**
    * @internal
    */
   connotationChanged() {
-    this.#updateTabsConnotation();
+    this._registerTabsChange();
   }
   #updateScrollStatus() {
-    this.tablist.parentElement.dispatchEvent(new Event("scroll"));
-  }
-  get #shouldMoveIndicator() {
-    return !(!this.activetab || !this.activeIndicatorRef || this.orientation === TabsOrientation.vertical || !this.showActiveIndicator);
-  }
-  #patchIndicatorStyleTransition() {
-    if (!this.#shouldMoveIndicator) {
-      return;
-    }
-    const width = this.activetab.getBoundingClientRect().width;
-    this.activeIndicatorRef.style.setProperty(ACTIVE_TAB_WIDTH, `${width}px`);
+    this.#tabListScrollWrapper.dispatchEvent(new Event("scroll"));
   }
+  #resizeObserver;
   connectedCallback() {
     super.connectedCallback();
-    this.tabIds = this.getTabIds();
-    this.tabpanelIds = this.getTabPanelIds();
-    this.activeTabIndex = this.getActiveIndex();
+    this._registerTabsChange();
     requestAnimationFrame(() => this.#updateScrollStatus());
-    const scrollWrapper = this.tablist.parentElement;
     this.#resizeObserver = new ResizeObserver(() => {
+      this.#moveActiveIndicator(this.#isTransitioningTransform);
       this.#updateScrollStatus();
-      this.#patchIndicatorStyleTransition();
     });
-    this.#resizeObserver.observe(scrollWrapper);
+    this.#resizeObserver.observe(this.#tabListScrollWrapper);
+    this.#resizeObserver.observe(this.tablist);
   }
-  #resizeObserver;
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#resizeObserver.disconnect();
   }
-  #updateTabsConnotation() {
-    if (this.tabs) {
-      this.tabs.forEach((tab) => {
-        if (tab.getAttribute("aria-selected") === "true") {
-          tab.setAttribute("connotation", this.connotation);
-        } else {
-          tab.removeAttribute("connotation");
-        }
-      });
-    }
-  }
   get #tabListWrapper() {
     return this.shadowRoot.querySelector(".tablist-wrapper");
   }
-  #scrollToIndex(index) {
-    const tab = this.tabs?.[index];
-    if (!tab) return;
+  get #tabListScrollWrapper() {
+    return this.tablist.parentElement;
+  }
+  #scrollToTab(tab, shouldAnimate = true) {
+    const index = this.tabs.findIndex((t) => t === tab);
     let left = 0;
     let top = 0;
     if (this.orientation === TabsOrientation.vertical) {
@@ -366,51 +325,16 @@ class Tabs extends vividElement.VividElement {
         left = tab.offsetLeft - this.#tabListWrapper.offsetWidth / 2 + tab.offsetWidth / 2;
       }
     }
-    this.#tabListWrapper.scrollTo({ top, left, behavior: "smooth" });
-  }
-  #getGridProperty() {
-    return this.#isHorizontal() ? "gridColumn" : "gridRow";
-  }
-  #getTranslateProperty() {
-    return this.#isHorizontal() ? "translateX" : "translateY";
-  }
-  #handleActiveIndicatorPosition(animate = true) {
-    if (this.showActiveIndicator && this.activeindicator) {
-      this.#animateActiveIndicator(animate);
-    }
-  }
-  #animateActiveIndicator(animate) {
-    const offsetProperty = this.#isHorizontal() ? "offsetLeft" : "offsetTop";
-    const currentOffset = this.activeIndicatorRef[offsetProperty];
-    const currentGridValue = this.activeIndicatorRef.style[this.#getGridProperty()];
-    this.activeIndicatorRef.style[this.#getGridProperty()] = `${this.activeTabIndex + 1}`;
-    const targetOffset = this.activeIndicatorRef[offsetProperty];
-    this.activeIndicatorRef.style[this.#getGridProperty()] = currentGridValue;
-    const relativeOffset = targetOffset - currentOffset;
-    this.activeIndicatorRef.style.transform = `${this.#getTranslateProperty()}(${relativeOffset}px)`;
-    if (animate) {
-      this.activeIndicatorRef.classList.add("activeIndicatorTransition");
-    } else {
-      this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
-    }
-  }
-  /**
-   * @internal
-   */
-  activeIndicatorRefChanged() {
-    this.activeIndicatorRef.addEventListener("transitionend", () => {
-      this.activeIndicatorRef.style[this.#getGridProperty()] = `${this.activeTabIndex + 1}`;
-      this.activeIndicatorRef.style.transform = `${this.#getTranslateProperty()}(0px)`;
-      this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+    this.#tabListWrapper.scrollTo({
+      top,
+      left,
+      behavior: shouldAnimate ? "smooth" : "instant"
     });
   }
 }
 __decorateClass([
   vividElement.attr
 ], Tabs.prototype, "orientation");
-__decorateClass([
-  vividElement.attr
-], Tabs.prototype, "activeid");
 __decorateClass([
   vividElement.observable
 ], Tabs.prototype, "tabs");
@@ -418,14 +342,11 @@ __decorateClass([
   vividElement.observable
 ], Tabs.prototype, "tabpanels");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], Tabs.prototype, "activeindicator");
+  vividElement.attr
+], Tabs.prototype, "activeid");
 __decorateClass([
   vividElement.observable
 ], Tabs.prototype, "activeIndicatorRef");
-__decorateClass([
-  vividElement.observable
-], Tabs.prototype, "showActiveIndicator");
 __decorateClass([
   vividElement.observable
 ], Tabs.prototype, "tablist");
@@ -444,6 +365,9 @@ __decorateClass([
 __decorateClass([
   vividElement.observable
 ], Tabs.prototype, "_actionItemsSlottedContent");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], Tabs.prototype, "activeindicator");
 
 const getClasses = ({
   connotation,
@@ -475,7 +399,7 @@ function addStartShadow(scrollShadow, scrollWrapper) {
 function addEndShadow(scrollShadow, scrollWrapper) {
   scrollShadow.classList.toggle(
     "end-scroll",
-    scrollWrapper.scrollLeft < scrollWrapper.scrollWidth - scrollWrapper.clientWidth
+    scrollWrapper.scrollLeft + 1 < scrollWrapper.scrollWidth - scrollWrapper.clientWidth
   );
 }
 function setShadowWhenScrollTabs(_, { event }) {
@@ -495,15 +419,13 @@ const TabsTemplate = vividElement.html`
 					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
 						<div class="tablist" role="tablist" ${ref.ref("tablist")}>
 							<slot name="tab" ${slotted.slotted("tabs")}></slot>
-							${when.when(
-  (x) => x.showActiveIndicator,
-  vividElement.html`
-									<div
-										${ref.ref("activeIndicatorRef")}
-										class="active-indicator"
-									></div>
-								`
-)}
+							<div
+								${ref.ref("activeIndicatorRef")}
+								class="active-indicator"
+								@transitionend="${(x, c) => x._onActiveIndicatorTransitionend(
+  c.event
+)}"
+							></div>
 						</div>
 					</div>
 				</div>