@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition51.cjs

@@ -2,20 +2,40 @@
 
 const definition = require('./definition50.cjs');
 const definition$1 = require('./definition49.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
-const keyCodes$1 = require('./key-codes.cjs');
 const vividElement = require('./vivid-element.cjs');
+const keyCodes$1 = require('./key-codes.cjs');
 const foundationElement = require('./foundation-element.cjs');
-const keyCodes = require('./key-codes2.cjs');
+const startEnd = require('./start-end.cjs');
 const applyMixins = require('./apply-mixins2.cjs');
-const strings = require('./strings2.cjs');
-const strings$1 = require('./strings.cjs');
+const keyCodes = require('./key-codes2.cjs');
+const strings = require('./strings.cjs');
 const numbers = require('./numbers.cjs');
 const ref = require('./ref.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique ID based on incrementing a counter.
+ */
+function uniqueId(prefix = "") {
+    return `${prefix}${uniqueIdCounter++}`;
+}
+
 /**
  * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
  * @public
@@ -280,13 +300,13 @@ let Tabs$1 = class Tabs extends foundationElement.FoundationElement {
     getTabIds() {
         return this.tabs.map((tab) => {
             var _a;
-            return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${strings.uniqueId()}`;
+            return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${uniqueId()}`;
         });
     }
     getTabPanelIds() {
         return this.tabpanels.map((tabPanel) => {
             var _a;
-            return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${strings.uniqueId()}`;
+            return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId()}`;
         });
     }
     setComponent() {
@@ -343,7 +363,7 @@ let Tabs$1 = class Tabs extends foundationElement.FoundationElement {
     adjust(adjustment) {
         const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
         const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-        const nextTabIndex = strings.limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+        const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
         // the index of the next focusable tab within the context of all available tabs
         const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
         if (nextIndex > -1) {
@@ -364,27 +384,27 @@ let Tabs$1 = class Tabs extends foundationElement.FoundationElement {
     }
 };
 foundationElement.__decorate([
-    defineVividComponent.attr
+    vividElement.attr
 ], Tabs$1.prototype, "orientation", void 0);
 foundationElement.__decorate([
-    defineVividComponent.attr
+    vividElement.attr
 ], Tabs$1.prototype, "activeid", void 0);
 foundationElement.__decorate([
-    defineVividComponent.observable
+    vividElement.observable
 ], Tabs$1.prototype, "tabs", void 0);
 foundationElement.__decorate([
-    defineVividComponent.observable
+    vividElement.observable
 ], Tabs$1.prototype, "tabpanels", void 0);
 foundationElement.__decorate([
-    defineVividComponent.attr({ mode: "boolean" })
+    vividElement.attr({ mode: "boolean" })
 ], Tabs$1.prototype, "activeindicator", void 0);
 foundationElement.__decorate([
-    defineVividComponent.observable
+    vividElement.observable
 ], Tabs$1.prototype, "activeIndicatorRef", void 0);
 foundationElement.__decorate([
-    defineVividComponent.observable
+    vividElement.observable
 ], Tabs$1.prototype, "showActiveIndicator", void 0);
-applyMixins.applyMixins(Tabs$1, keyCodes.StartEnd);
+applyMixins.applyMixins(Tabs$1, startEnd.StartEnd);
 
 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){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-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-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}";
 
@@ -404,6 +424,11 @@ class Tabs extends vividElement.VividElement {
     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;
@@ -426,10 +451,10 @@ class Tabs extends vividElement.VividElement {
     this.setTabs = () => {
       const gridHorizontalProperty = "gridColumn";
       const gridVerticalProperty = "gridRow";
-      const gridProperty = this.isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
+      const gridProperty = this.#isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
       this.activeTabIndex = this.getActiveIndex();
       this.showActiveIndicator = false;
-      if (this.isHorizontal()) {
+      if (this.#isHorizontal()) {
         this.tablist.style.setProperty(
           "grid-template-columns",
           `repeat(${this.tabs.length}, var(${TABLIST_COLUMN}))`
@@ -449,7 +474,7 @@ class Tabs extends vividElement.VividElement {
           tab.setAttribute("aria-selected", isActiveTab ? "true" : "false");
           tab.setAttribute("aria-controls", tabpanelId);
           tab.addEventListener("click", this.handleTabClick);
-          tab.addEventListener("keydown", this.handleTabKeyDown);
+          tab.addEventListener("keydown", this.#handleTabKeyDown);
           tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
           if (isActiveTab) {
             this.activetab = tab;
@@ -459,7 +484,7 @@ class Tabs extends vividElement.VividElement {
         tab.style[gridHorizontalProperty] = "";
         tab.style[gridVerticalProperty] = "";
         tab.style[gridProperty] = `${index + 1}`;
-        !this.isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
+        !this.#isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
       });
     };
     this.setTabPanels = () => {
@@ -479,8 +504,11 @@ class Tabs extends vividElement.VividElement {
         this.setComponent();
       }
     };
-    this.handleTabKeyDown = (event) => {
-      if (this.isHorizontal()) {
+    this.#isHorizontal = () => {
+      return this.orientation === TabsOrientation.horizontal;
+    };
+    this.#handleTabKeyDown = (event) => {
+      if (this.#isHorizontal()) {
         switch (event.key) {
           case keyCodes$1.keyArrowLeft:
             event.preventDefault();
@@ -520,7 +548,7 @@ class Tabs extends vividElement.VividElement {
     this.adjustBackward = (_) => {
       this.#moveToNextTab(-1);
     };
-    this.moveToTabByIndex = (group, index) => {
+    this.#moveToTabByIndex = (group, index) => {
       const tab = group[index];
       this.activetab = tab;
       this.prevActiveTabIndex = this.activeTabIndex;
@@ -538,9 +566,9 @@ class Tabs extends vividElement.VividElement {
     if (this.$fastController.isConnected) {
       this.setTabs();
       this.setTabPanels();
-      this.handleActiveIndicatorPosition();
+      this.#handleActiveIndicatorPosition();
     }
-    this.patchIndicatorStyleTransition();
+    this.#patchIndicatorStyleTransition();
     if (!this.activeIndicatorRef) return;
     if (this.orientation === TabsOrientation.vertical) {
       this.activeIndicatorRef.style.removeProperty(ACTIVE_TAB_WIDTH);
@@ -556,38 +584,43 @@ class Tabs extends vividElement.VividElement {
       );
       this.setTabs();
       this.setTabPanels();
-      this.handleActiveIndicatorPosition();
+      this.#handleActiveIndicatorPosition();
     }
-    this.patchIndicatorStyleTransition();
+    this.#patchIndicatorStyleTransition();
     this.#updateTabsConnotation();
     this.#scrollToIndex(this.activeTabIndex);
   }
+  #isLastTabSelectedAfterRemove;
   /**
    * @internal
    */
-  tabsChanged() {
+  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.#handleActiveIndicatorPosition(
+        !this.#isLastTabSelectedAfterRemove(oldValue, newValue)
+      );
     }
-    this.patchIndicatorStyleTransition();
+    this.#patchIndicatorStyleTransition();
     this.#updateScrollStatus();
   }
   /**
    * @internal
    */
-  tabpanelsChanged() {
+  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.#handleActiveIndicatorPosition(
+        !this.#isLastTabSelectedAfterRemove(oldValue, newValue, false)
+      );
     }
-    this.patchIndicatorStyleTransition();
+    this.#patchIndicatorStyleTransition();
   }
   getActiveIndex() {
     const id = this.activeid;
@@ -599,12 +632,12 @@ class Tabs extends vividElement.VividElement {
   }
   getTabIds() {
     return this.tabs.map((tab) => {
-      return tab.getAttribute("id") ?? `tab-${strings$1.uniqueId()}`;
+      return tab.getAttribute("id") ?? `tab-${strings.uniqueId()}`;
     });
   }
   getTabPanelIds() {
     return this.tabpanels.map((tabPanel) => {
-      return tabPanel.getAttribute("id") ?? `panel-${strings$1.uniqueId()}`;
+      return tabPanel.getAttribute("id") ?? `panel-${strings.uniqueId()}`;
     });
   }
   setComponent() {
@@ -614,9 +647,8 @@ class Tabs extends vividElement.VividElement {
       this.change();
     }
   }
-  isHorizontal() {
-    return this.orientation === TabsOrientation.horizontal;
-  }
+  #isHorizontal;
+  #handleTabKeyDown;
   /**
    * The adjust method for FASTTabs
    * @public
@@ -633,7 +665,7 @@ class Tabs extends vividElement.VividElement {
     );
     const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
     if (nextIndex > -1) {
-      this.moveToTabByIndex(this.tabs, nextIndex);
+      this.#moveToTabByIndex(this.tabs, nextIndex);
     }
   }
   #moveToNextTab(direction) {
@@ -641,11 +673,12 @@ class Tabs extends vividElement.VividElement {
     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);
+        this.#moveToTabByIndex(this.tabs, index);
         break;
       }
     }
   }
+  #moveToTabByIndex;
   focusTab() {
     this.tabs[this.activeTabIndex].focus();
   }
@@ -658,13 +691,13 @@ class Tabs extends vividElement.VividElement {
   #updateScrollStatus() {
     this.tablist.parentElement.dispatchEvent(new Event("scroll"));
   }
-  /**
-   * @internal
-   */
-  patchIndicatorStyleTransition() {
-    if (!this.activetab || !this.activeIndicatorRef) return;
-    if (this.orientation === TabsOrientation.vertical || !this.showActiveIndicator)
+  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`);
   }
@@ -677,7 +710,7 @@ class Tabs extends vividElement.VividElement {
     const scrollWrapper = this.tablist.parentElement;
     this.#resizeObserver = new ResizeObserver(() => {
       this.#updateScrollStatus();
-      this.patchIndicatorStyleTransition();
+      this.#patchIndicatorStyleTransition();
     });
     this.#resizeObserver.observe(scrollWrapper);
   }
@@ -723,18 +756,18 @@ class Tabs extends vividElement.VividElement {
     this.#tabListWrapper.scrollTo({ top, left, behavior: "smooth" });
   }
   #getGridProperty() {
-    return this.isHorizontal() ? "gridColumn" : "gridRow";
+    return this.#isHorizontal() ? "gridColumn" : "gridRow";
   }
   #getTranslateProperty() {
-    return this.isHorizontal() ? "translateX" : "translateY";
+    return this.#isHorizontal() ? "translateX" : "translateY";
   }
-  handleActiveIndicatorPosition() {
+  #handleActiveIndicatorPosition(animate = true) {
     if (this.showActiveIndicator && this.activeindicator) {
-      this.animateActiveIndicator();
+      this.#animateActiveIndicator(animate);
     }
   }
-  animateActiveIndicator() {
-    const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
+  #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}`;
@@ -742,7 +775,11 @@ class Tabs extends vividElement.VividElement {
     this.activeIndicatorRef.style[this.#getGridProperty()] = currentGridValue;
     const relativeOffset = targetOffset - currentOffset;
     this.activeIndicatorRef.style.transform = `${this.#getTranslateProperty()}(${relativeOffset}px)`;
-    this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+    if (animate) {
+      this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+    } else {
+      this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+    }
   }
   /**
    * @internal
@@ -756,43 +793,43 @@ class Tabs extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Tabs.prototype, "orientation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Tabs.prototype, "activeid");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Tabs.prototype, "tabs");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Tabs.prototype, "tabpanels");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Tabs.prototype, "activeindicator");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Tabs.prototype, "activeIndicatorRef");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Tabs.prototype, "showActiveIndicator");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Tabs.prototype, "tablist");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Tabs.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Tabs.prototype, "gutters");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean", attribute: "scrollable-panel" })
+  vividElement.attr({ mode: "boolean", attribute: "scrollable-panel" })
 ], Tabs.prototype, "scrollablePanel");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "tabs-layout" })
+  vividElement.attr({ attribute: "tabs-layout" })
 ], Tabs.prototype, "tabsLayout");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Tabs.prototype, "_actionItemsSlottedContent");
 
 const getClasses = ({
@@ -829,7 +866,7 @@ function addEndShadow(scrollShadow, scrollWrapper) {
   );
 }
 function setShadowWhenScrollTabs(_, { event }) {
-  const scrollWrapper = event.target;
+  const scrollWrapper = event.currentTarget;
   const scrollShadow = scrollWrapper.parentElement;
   if (setNoScrollState(scrollShadow, scrollWrapper)) {
     return;
@@ -837,7 +874,7 @@ function setShadowWhenScrollTabs(_, { event }) {
   addStartShadow(scrollShadow, scrollWrapper);
   addEndShadow(scrollShadow, scrollWrapper);
 }
-const TabsTemplate = defineVividComponent.html`
+const TabsTemplate = vividElement.html`
 	<template>
 		<div class="${getClasses}">
 			<div class="tabs">
@@ -847,7 +884,7 @@ const TabsTemplate = defineVividComponent.html`
 							<slot name="tab" ${slotted.slotted("tabs")}></slot>
 							${when.when(
   (x) => x.showActiveIndicator,
-  defineVividComponent.html`
+  vividElement.html`
 									<div
 										${ref.ref("activeIndicatorRef")}
 										class="active-indicator"
@@ -869,7 +906,7 @@ const TabsTemplate = defineVividComponent.html`
 	</template>
 `;
 
-const tabsDefinition = defineVividComponent.defineVividComponent(
+const tabsDefinition = vividElement.defineVividComponent(
   "tabs",
   Tabs,
   TabsTemplate,
@@ -878,7 +915,7 @@ const tabsDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerTabs = defineVividComponent.createRegisterFunction(tabsDefinition);
+const registerTabs = vividElement.createRegisterFunction(tabsDefinition);
 
 exports.registerTabs = registerTabs;
 exports.tabsDefinition = tabsDefinition;