@vonage/vivid 4.13.0 → 4.14.0

package/shared/definition51.cjs

@@ -1,13 +1,392 @@
 'use strict';
 
-const index = require('./index.cjs');
-const definition = require('./definition27.cjs');
-const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const localized = require('./localized.cjs');
+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 foundationElement = require('./foundation-element.cjs');
+const keyCodes = require('./key-codes2.cjs');
+const applyMixins = require('./apply-mixins2.cjs');
+const strings = require('./strings2.cjs');
+const strings$1 = 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');
 
-const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
+/**
+ * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
+ * @public
+ */
+const TabsOrientation = {
+    vertical: "vertical",
+    horizontal: "horizontal",
+};
+/**
+ * A Tabs Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#tablist | ARIA tablist }.
+ *
+ * @slot start - Content which can be provided before the tablist element
+ * @slot end - Content which can be provided after the tablist element
+ * @slot tab - The slot for tabs
+ * @slot tabpanel - The slot for tabpanels
+ * @csspart tablist - The element wrapping for the tabs
+ * @csspart tab - The tab slot
+ * @csspart activeIndicator - The visual indicator
+ * @csspart tabpanel - The tabpanel slot
+ * @fires change - Fires a custom 'change' event when a tab is clicked or during keyboard navigation
+ *
+ * @public
+ */
+let Tabs$1 = class Tabs extends foundationElement.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The orientation
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = TabsOrientation.horizontal;
+        /**
+         * Whether or not to show the active indicator
+         * @public
+         * @remarks
+         * HTML Attribute: activeindicator
+         */
+        this.activeindicator = true;
+        /**
+         * @internal
+         */
+        this.showActiveIndicator = true;
+        this.prevActiveTabIndex = 0;
+        this.activeTabIndex = 0;
+        this.ticking = false;
+        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;
+            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;
+                    }
+                }
+                // If the original property isn't emptied out,
+                // the next set will morph into a grid-area style setting that is not what we want
+                tab.style[gridHorizontalProperty] = "";
+                tab.style[gridVerticalProperty] = "";
+                tab.style[gridProperty] = `${index + 1}`;
+                !this.isHorizontal()
+                    ? tab.classList.add("vertical")
+                    : tab.classList.remove("vertical");
+            });
+        };
+        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) => {
+            const selectedTab = event.currentTarget;
+            if (selectedTab.nodeType === 1 && this.isFocusableElement(selectedTab)) {
+                this.prevActiveTabIndex = this.activeTabIndex;
+                this.activeTabIndex = this.tabs.indexOf(selectedTab);
+                this.setComponent();
+            }
+        };
+        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;
+                }
+            }
+            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;
+            }
+        };
+        this.adjustForward = (e) => {
+            const group = this.tabs;
+            let index = 0;
+            index = this.activetab ? group.indexOf(this.activetab) + 1 : 1;
+            if (index === group.length) {
+                index = 0;
+            }
+            while (index < group.length && group.length > 1) {
+                if (this.isFocusableElement(group[index])) {
+                    this.moveToTabByIndex(group, index);
+                    break;
+                }
+                else if (this.activetab && index === group.indexOf(this.activetab)) {
+                    break;
+                }
+                else if (index + 1 >= group.length) {
+                    index = 0;
+                }
+                else {
+                    index += 1;
+                }
+            }
+        };
+        this.adjustBackward = (e) => {
+            const group = this.tabs;
+            let index = 0;
+            index = this.activetab ? group.indexOf(this.activetab) - 1 : 0;
+            index = index < 0 ? group.length - 1 : index;
+            while (index >= 0 && group.length > 1) {
+                if (this.isFocusableElement(group[index])) {
+                    this.moveToTabByIndex(group, index);
+                    break;
+                }
+                else if (index - 1 < 0) {
+                    index = group.length - 1;
+                }
+                else {
+                    index -= 1;
+                }
+            }
+        };
+        this.moveToTabByIndex = (group, index) => {
+            const tab = group[index];
+            this.activetab = tab;
+            this.prevActiveTabIndex = this.activeTabIndex;
+            this.activeTabIndex = index;
+            tab.focus();
+            this.setComponent();
+        };
+    }
+    /**
+     * @internal
+     */
+    orientationChanged() {
+        if (this.$fastController.isConnected) {
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue, newValue) {
+        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();
+        }
+    }
+    /**
+     * @internal
+     */
+    tabsChanged() {
+        if (this.$fastController.isConnected &&
+            this.tabs.length <= this.tabpanels.length) {
+            this.tabIds = this.getTabIds();
+            this.tabpanelIds = this.getTabPanelIds();
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    /**
+     * @internal
+     */
+    tabpanelsChanged() {
+        if (this.$fastController.isConnected &&
+            this.tabpanels.length <= this.tabs.length) {
+            this.tabIds = this.getTabIds();
+            this.tabpanelIds = this.getTabPanelIds();
+            this.setTabs();
+            this.setTabPanels();
+            this.handleActiveIndicatorPosition();
+        }
+    }
+    getActiveIndex() {
+        const id = this.activeid;
+        if (id !== undefined) {
+            return this.tabIds.indexOf(this.activeid) === -1
+                ? 0
+                : this.tabIds.indexOf(this.activeid);
+        }
+        else {
+            return 0;
+        }
+    }
+    getTabIds() {
+        return this.tabs.map((tab) => {
+            var _a;
+            return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${strings.uniqueId()}`;
+        });
+    }
+    getTabPanelIds() {
+        return this.tabpanels.map((tabPanel) => {
+            var _a;
+            return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${strings.uniqueId()}`;
+        });
+    }
+    setComponent() {
+        if (this.activeTabIndex !== this.prevActiveTabIndex) {
+            this.activeid = this.tabIds[this.activeTabIndex];
+            this.focusTab();
+            this.change();
+        }
+    }
+    isHorizontal() {
+        return this.orientation === TabsOrientation.horizontal;
+    }
+    handleActiveIndicatorPosition() {
+        // Ignore if we click twice on the same tab
+        if (this.showActiveIndicator &&
+            this.activeindicator &&
+            this.activeTabIndex !== this.prevActiveTabIndex) {
+            if (this.ticking) {
+                this.ticking = false;
+            }
+            else {
+                this.ticking = true;
+                this.animateActiveIndicator();
+            }
+        }
+    }
+    animateActiveIndicator() {
+        this.ticking = true;
+        const gridProperty = this.isHorizontal() ? "gridColumn" : "gridRow";
+        const translateProperty = this.isHorizontal()
+            ? "translateX"
+            : "translateY";
+        const offsetProperty = this.isHorizontal() ? "offsetLeft" : "offsetTop";
+        const prev = this.activeIndicatorRef[offsetProperty];
+        this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
+        const next = this.activeIndicatorRef[offsetProperty];
+        this.activeIndicatorRef.style[gridProperty] = `${this.prevActiveTabIndex + 1}`;
+        const dif = next - prev;
+        this.activeIndicatorRef.style.transform = `${translateProperty}(${dif}px)`;
+        this.activeIndicatorRef.classList.add("activeIndicatorTransition");
+        this.activeIndicatorRef.addEventListener("transitionend", () => {
+            this.ticking = false;
+            this.activeIndicatorRef.style[gridProperty] = `${this.activeTabIndex + 1}`;
+            this.activeIndicatorRef.style.transform = `${translateProperty}(0px)`;
+            this.activeIndicatorRef.classList.remove("activeIndicatorTransition");
+        });
+    }
+    /**
+     * The adjust method for FASTTabs
+     * @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 nextTabIndex = strings.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) {
+            this.moveToTabByIndex(this.tabs, nextIndex);
+        }
+    }
+    focusTab() {
+        this.tabs[this.activeTabIndex].focus();
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIds = this.getTabIds();
+        this.tabpanelIds = this.getTabPanelIds();
+        this.activeTabIndex = this.getActiveIndex();
+    }
+};
+foundationElement.__decorate([
+    defineVividComponent.attr
+], Tabs$1.prototype, "orientation", void 0);
+foundationElement.__decorate([
+    defineVividComponent.attr
+], Tabs$1.prototype, "activeid", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], Tabs$1.prototype, "tabs", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], Tabs$1.prototype, "tabpanels", void 0);
+foundationElement.__decorate([
+    defineVividComponent.attr({ mode: "boolean" })
+], Tabs$1.prototype, "activeindicator", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], Tabs$1.prototype, "activeIndicatorRef", void 0);
+foundationElement.__decorate([
+    defineVividComponent.observable
+], Tabs$1.prototype, "showActiveIndicator", void 0);
+applyMixins.applyMixins(Tabs$1, keyCodes.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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,104 +397,488 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Tab extends index.FoundationElement {
+const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
+const TABLIST_COLUMN = "--_tabs-tablist-column";
+class Tabs extends vividElement.VividElement {
   constructor() {
     super(...arguments);
-    this.removable = false;
-    this.tabIndex = "-1";
-    this.ariaSelected = null;
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.orientation = TabsOrientation.horizontal;
+    // 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.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) => {
+      const selectedTab = event.currentTarget;
+      if (selectedTab.nodeType === 1 && this.isFocusableElement(selectedTab)) {
+        this.prevActiveTabIndex = this.activeTabIndex;
+        this.activeTabIndex = this.tabs.indexOf(selectedTab);
+        this.setComponent();
+      }
+    };
+    this.handleTabKeyDown = (event) => {
+      if (this.isHorizontal()) {
+        switch (event.key) {
+          case keyCodes$1.keyArrowLeft:
+            event.preventDefault();
+            this.adjustBackward(event);
+            break;
+          case keyCodes$1.keyArrowRight:
+            event.preventDefault();
+            this.adjustForward(event);
+            break;
+        }
+      } else {
+        switch (event.key) {
+          case keyCodes$1.keyArrowUp:
+            event.preventDefault();
+            this.adjustBackward(event);
+            break;
+          case keyCodes$1.keyArrowDown:
+            event.preventDefault();
+            this.adjustForward(event);
+            break;
+        }
+      }
+      switch (event.key) {
+        case keyCodes$1.keyHome:
+          event.preventDefault();
+          this.adjust(-this.activeTabIndex);
+          break;
+        case keyCodes$1.keyEnd:
+          event.preventDefault();
+          this.adjust(this.tabs.length - this.activeTabIndex - 1);
+          break;
+      }
+    };
+    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.scrollablePanel = false;
+    this._actionItemsSlottedContent = [];
+  }
+  /**
+   * @internal
+   */
+  orientationChanged() {
+    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);
+    }
+  }
+  /**
+   * @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();
+    }
+    this.patchIndicatorStyleTransition();
+    this.#updateTabsConnotation();
+    this.#scrollToIndex(this.activeTabIndex);
+  }
+  /**
+   * @internal
+   */
+  tabsChanged() {
+    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.patchIndicatorStyleTransition();
+    this.#updateScrollStatus();
+  }
+  /**
+   * @internal
+   */
+  tabpanelsChanged() {
+    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.patchIndicatorStyleTransition();
+  }
+  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;
+    }
+  }
+  getTabIds() {
+    return this.tabs.map((tab) => {
+      return tab.getAttribute("id") ?? `tab-${strings$1.uniqueId()}`;
+    });
+  }
+  getTabPanelIds() {
+    return this.tabpanels.map((tabPanel) => {
+      return tabPanel.getAttribute("id") ?? `panel-${strings$1.uniqueId()}`;
+    });
+  }
+  setComponent() {
+    if (this.activeTabIndex !== this.prevActiveTabIndex) {
+      this.activeid = this.tabIds[this.activeTabIndex];
+      this.focusTab();
+      this.change();
+    }
+  }
+  isHorizontal() {
+    return this.orientation === TabsOrientation.horizontal;
+  }
+  /**
+   * The adjust method for FASTTabs
+   * @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 nextTabIndex = numbers.limit(
+      0,
+      focusableTabs.length - 1,
+      currentActiveTabIndex + adjustment
+    );
+    const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
+    if (nextIndex > -1) {
+      this.moveToTabByIndex(this.tabs, nextIndex);
+    }
+  }
+  #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;
+      }
+    }
+  }
+  focusTab() {
+    this.tabs[this.activeTabIndex].focus();
+  }
+  /**
+   * @internal
+   */
+  connotationChanged() {
+    this.#updateTabsConnotation();
+  }
+  #updateScrollStatus() {
+    this.tablist.parentElement.dispatchEvent(new Event("scroll"));
+  }
+  /**
+   * @internal
+   */
+  patchIndicatorStyleTransition() {
+    if (!this.activetab || !this.activeIndicatorRef) return;
+    if (this.orientation === TabsOrientation.vertical || !this.showActiveIndicator)
+      return;
+    const width = this.activetab.getBoundingClientRect().width;
+    this.activeIndicatorRef.style.setProperty(ACTIVE_TAB_WIDTH, `${width}px`);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.tabIds = this.getTabIds();
+    this.tabpanelIds = this.getTabPanelIds();
+    this.activeTabIndex = this.getActiveIndex();
+    requestAnimationFrame(() => this.#updateScrollStatus());
+    const scrollWrapper = this.tablist.parentElement;
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#updateScrollStatus();
+      this.patchIndicatorStyleTransition();
+    });
+    this.#resizeObserver.observe(scrollWrapper);
+  }
+  #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");
+        }
+      });
+    }
   }
-  _handleCloseClick(e) {
-    e.stopImmediatePropagation();
-    this.$emit("close");
+  get #tabListWrapper() {
+    return this.shadowRoot.querySelector(".tablist-wrapper");
   }
-  _onKeyDown(e) {
-    if (!this.removable || e.key !== "Delete") return true;
-    e.stopImmediatePropagation();
-    this.$emit("close");
-    return false;
+  #scrollToIndex(index) {
+    const tab = this.tabs?.[index];
+    if (!tab) return;
+    let left = 0;
+    let top = 0;
+    if (this.orientation === TabsOrientation.vertical) {
+      if (index === this.tabs.length - 1) {
+        top = this.#tabListWrapper.scrollHeight;
+      }
+      if (index > 0 && index < this.tabs.length - 1) {
+        top = tab.offsetTop - this.#tabListWrapper.offsetHeight / 2 + tab.offsetHeight / 2;
+      }
+    } else {
+      if (index === this.tabs.length - 1) {
+        left = this.#tabListWrapper.scrollWidth;
+      }
+      if (index > 0 && index < this.tabs.length - 1) {
+        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() {
+    if (this.showActiveIndicator && this.activeindicator) {
+      this.animateActiveIndicator();
+    }
+  }
+  animateActiveIndicator() {
+    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)`;
+    this.activeIndicatorRef.classList.add("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");
+    });
   }
 }
 __decorateClass([
-  index.attr({ mode: "boolean" })
-], Tab.prototype, "disabled");
+  defineVividComponent.attr
+], Tabs.prototype, "orientation");
+__decorateClass([
+  defineVividComponent.attr
+], Tabs.prototype, "activeid");
+__decorateClass([
+  defineVividComponent.observable
+], Tabs.prototype, "tabs");
+__decorateClass([
+  defineVividComponent.observable
+], Tabs.prototype, "tabpanels");
+__decorateClass([
+  defineVividComponent.attr({ mode: "boolean" })
+], Tabs.prototype, "activeindicator");
+__decorateClass([
+  defineVividComponent.observable
+], Tabs.prototype, "activeIndicatorRef");
 __decorateClass([
-  index.attr
-], Tab.prototype, "connotation");
+  defineVividComponent.observable
+], Tabs.prototype, "showActiveIndicator");
 __decorateClass([
-  index.attr
-], Tab.prototype, "shape");
+  defineVividComponent.observable
+], Tabs.prototype, "tablist");
 __decorateClass([
-  index.attr
-], Tab.prototype, "label");
+  defineVividComponent.attr
+], Tabs.prototype, "connotation");
 __decorateClass([
-  index.attr({ mode: "boolean" })
-], Tab.prototype, "removable");
+  defineVividComponent.attr
+], Tabs.prototype, "gutters");
 __decorateClass([
-  index.attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex");
+  defineVividComponent.attr({ mode: "boolean", attribute: "scrollable-panel" })
+], Tabs.prototype, "scrollablePanel");
 __decorateClass([
-  index.attr({ attribute: "aria-selected" })
-], Tab.prototype, "ariaSelected");
-applyMixins.applyMixins(Tab, affix.AffixIconWithTrailing);
-applyMixins.applyMixins(Tab, localized.Localized);
+  defineVividComponent.attr({ attribute: "tabs-layout" })
+], Tabs.prototype, "tabsLayout");
+__decorateClass([
+  defineVividComponent.observable
+], Tabs.prototype, "_actionItemsSlottedContent");
 
 const getClasses = ({
   connotation,
-  disabled,
-  ariaSelected,
-  iconTrailing,
-  shape,
-  removable
+  orientation,
+  gutters,
+  scrollablePanel,
+  tabsLayout,
+  _actionItemsSlottedContent
 }) => classNames.classNames(
   "base",
-  [
-    `connotation-${connotation}`,
-    Boolean(connotation) && ariaSelected === "true"
-  ],
-  [`shape-${shape}`, Boolean(shape)],
-  ["disabled", Boolean(disabled)],
-  ["selected", ariaSelected === "true"],
-  ["icon-trailing", iconTrailing],
-  ["removable", removable]
+  `layout-${tabsLayout ?? "align-start"}`,
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`orientation-${orientation}`, Boolean(orientation)],
+  `gutters-${gutters ?? "small"}`,
+  ["scroll", Boolean(scrollablePanel)],
+  ["has-action-items", Boolean(_actionItemsSlottedContent.length)]
 );
-function renderDismissButton(context) {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html` <span
-		aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
-		class="close"
-		id="close-btn"
-		@click="${(x, c) => x._handleCloseClick(c.event)}"
-	>
-		${() => affixIconTemplate("close-line", affix.IconWrapper.Span)}
-	</span>`;
+function setNoScrollState(scrollShadow, scrollWrapper) {
+  if (scrollWrapper.scrollWidth <= scrollWrapper.clientWidth) {
+    scrollShadow.classList.toggle("start-scroll", false);
+    scrollShadow.classList.toggle("end-scroll", false);
+    return true;
+  }
+  return false;
 }
-function TabTemplate(context) {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html`
-		<template
-			slot="tab"
-			role="tab"
-			aria-disabled="${(x) => x.disabled}"
-			aria-selected="${(x) => x.ariaSelected}"
-			@keydown="${(x, c) => x._onKeyDown(c.event)}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
-				${(x) => x.removable ? renderDismissButton(context) : null}
-			</div>
-		</template>
-	`;
+function addStartShadow(scrollShadow, scrollWrapper) {
+  scrollShadow.classList.toggle("start-scroll", scrollWrapper.scrollLeft > 0);
+}
+function addEndShadow(scrollShadow, scrollWrapper) {
+  scrollShadow.classList.toggle(
+    "end-scroll",
+    scrollWrapper.scrollLeft < scrollWrapper.scrollWidth - scrollWrapper.clientWidth
+  );
+}
+function setShadowWhenScrollTabs(_, { event }) {
+  const scrollWrapper = event.target;
+  const scrollShadow = scrollWrapper.parentElement;
+  if (setNoScrollState(scrollShadow, scrollWrapper)) {
+    return;
+  }
+  addStartShadow(scrollShadow, scrollWrapper);
+  addEndShadow(scrollShadow, scrollWrapper);
 }
+const TabsTemplate = defineVividComponent.html`
+	<template>
+		<div class="${getClasses}">
+			<div class="tabs">
+				<div class="scroll-shadow">
+					<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,
+  defineVividComponent.html`
+									<div
+										${ref.ref("activeIndicatorRef")}
+										class="active-indicator"
+									></div>
+								`
+)}
+						</div>
+					</div>
+				</div>
+				<slot
+					name="action-items"
+					${slotted.slotted("_actionItemsSlottedContent")}
+				></slot>
+			</div>
+			<div class="tabpanel" part="tab-panel">
+				<slot name="tabpanel" ${slotted.slotted("tabpanels")}></slot>
+			</div>
+		</div>
+	</template>
+`;
 
-const tabDefinition = Tab.compose({
-  baseName: "tab",
-  template: TabTemplate,
-  styles
-});
-const tabRegistries = [tabDefinition(), ...definition.iconRegistries];
-const registerTab = index.registerFactory(tabRegistries);
+const tabsDefinition = defineVividComponent.defineVividComponent(
+  "tabs",
+  Tabs,
+  TabsTemplate,
+  [definition.tabDefinition, definition$1.tabPanelDefinition],
+  {
+    styles
+  }
+);
+const registerTabs = defineVividComponent.createRegisterFunction(tabsDefinition);
 
-exports.registerTab = registerTab;
-exports.tabDefinition = tabDefinition;
-exports.tabRegistries = tabRegistries;
+exports.registerTabs = registerTabs;
+exports.tabsDefinition = tabsDefinition;