@vonage/vivid 4.5.0 → 4.7.0

package/shared/definition51.js

@@ -1,387 +1,24 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as tabRegistries } from './definition50.js';
-import { a as tabPanelRegistries } from './definition49.js';
-import { S as StartEnd } from './start-end.js';
+import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition27.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { h as keyArrowRight, i as keyArrowLeft, f as keyArrowDown, e as keyArrowUp, d as keyEnd, g as keyHome } from './key-codes.js';
-import { u as uniqueId } from './strings.js';
-import { l as limit } from './numbers.js';
-import { r as ref } from './ref.js';
-import { s as slotted } from './slotted.js';
-import { w as when } from './when.js';
+import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';
 
 /**
- * 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 }.
+ * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
  *
- * @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
+ * @slot - The default slot for the tab content
  *
  * @public
  */
-let Tabs$1 = class Tabs extends 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 keyArrowLeft:
-                        event.preventDefault();
-                        this.adjustBackward(event);
-                        break;
-                    case keyArrowRight:
-                        event.preventDefault();
-                        this.adjustForward(event);
-                        break;
-                }
-            }
-            else {
-                switch (event.key) {
-                    case keyArrowUp:
-                        event.preventDefault();
-                        this.adjustBackward(event);
-                        break;
-                    case keyArrowDown:
-                        event.preventDefault();
-                        this.adjustForward(event);
-                        break;
-                }
-            }
-            switch (event.key) {
-                case keyHome:
-                    event.preventDefault();
-                    this.adjust(-this.activeTabIndex);
-                    break;
-                case 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-${uniqueId()}`;
-        });
-    }
-    getTabPanelIds() {
-        return this.tabpanels.map((tabPanel) => {
-            var _a;
-            return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${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 = 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();
-    }
+let Tab$1 = class Tab extends FoundationElement {
 };
-__decorate([
-    attr
-], Tabs$1.prototype, "orientation", void 0);
-__decorate([
-    attr
-], Tabs$1.prototype, "activeid", void 0);
-__decorate([
-    observable
-], Tabs$1.prototype, "tabs", void 0);
-__decorate([
-    observable
-], Tabs$1.prototype, "tabpanels", void 0);
 __decorate([
     attr({ mode: "boolean" })
-], Tabs$1.prototype, "activeindicator", void 0);
-__decorate([
-    observable
-], Tabs$1.prototype, "activeIndicatorRef", void 0);
-__decorate([
-    observable
-], Tabs$1.prototype, "showActiveIndicator", void 0);
-applyMixins(Tabs$1, StartEnd);
+], Tab$1.prototype, "disabled", void 0);
 
-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{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:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;inline-size:100%;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}.tablist{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;position:relative;display:grid;box-sizing:border-box;color:var(--_appearance-color-text)}.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-columns:auto;grid-template-rows:auto auto;inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;border-bottom:1px solid var(--vvd-color-neutral-300);inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.tablist-wrapper::-webkit-scrollbar{display:none}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto}.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;block-size:var(--_tabs-active-indicator-stroke-width);grid-column:1/auto;inline-size:calc(var(--_tabs-active-tab-inline-size) - 32px);inset-block-end:0;inset-inline-start:8px;justify-self:center;padding-inline:var(--_tabs-tablist-gutter)}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition){opacity:0}";
+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;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}:host(:not(.vertical)) .base:after{position:absolute;border-radius:2px;background:currentColor;block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}.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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -392,198 +29,99 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
-class Tabs extends Tabs$1 {
+class Tab extends Tab$1 {
   constructor() {
     super(...arguments);
-    this.scrollablePanel = false;
-  }
-  connotationChanged() {
-    this.#updateTabsConnotation();
-  }
-  orientationChanged() {
-    super.orientationChanged();
-    this.patchIndicatorStyleTransition();
-    if (!this.activeIndicatorRef) return;
-    if (this.orientation === TabsOrientation.vertical) {
-      this.activeIndicatorRef.style.removeProperty(ACTIVE_TAB_WIDTH);
-    }
-    this.#patchActiveID();
-  }
-  activeidChanged(oldValue, newValue) {
-    super.activeidChanged(oldValue, newValue);
-    this.patchIndicatorStyleTransition();
-    this.#patchActiveID();
-  }
-  tabsChanged() {
-    super.tabsChanged();
-    this.patchIndicatorStyleTransition();
-    this.#patchActiveID();
-    this.#updateScrollStatus();
-  }
-  #updateScrollStatus() {
-    this.tablist.parentElement.dispatchEvent(new Event("scroll"));
+    this.removable = false;
+    this.tabIndex = "-1";
+    this.ariaSelected = null;
   }
-  tabpanelsChanged() {
-    super.tabpanelsChanged();
-    this.patchIndicatorStyleTransition();
-    this.#patchActiveID();
+  _handleCloseClick(e) {
+    e.stopImmediatePropagation();
+    this.$emit("close");
   }
-  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();
-    requestAnimationFrame(() => this.#updateScrollStatus());
-    const scrollWrapper = this.tablist.parentElement;
-    this.#resizeObserver = new ResizeObserver(() => {
-      this.#updateScrollStatus();
-    });
-    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");
-        }
-      });
-    }
-  }
-  get #tabListWrapper() {
-    return this.shadowRoot.querySelector(".tablist-wrapper");
-  }
-  #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" });
-  }
-  // adapted FAST fix https://github.com/microsoft/fast/pull/6606
-  #patchActiveID() {
-    if (!this.activetab) return;
-    const idx = this.tabs.indexOf(this.activetab);
-    this.activeid = this["tabIds"][idx];
-    this.#updateTabsConnotation();
-    this.#scrollToIndex(idx);
+  _onKeyDown(e) {
+    if (!this.removable || e.key !== "Delete") return true;
+    e.stopImmediatePropagation();
+    this.$emit("close");
+    return false;
   }
 }
 __decorateClass([
-  observable
-], Tabs.prototype, "tablist");
+  attr
+], Tab.prototype, "connotation");
 __decorateClass([
   attr
-], Tabs.prototype, "connotation");
+], Tab.prototype, "shape");
 __decorateClass([
   attr
-], Tabs.prototype, "gutters");
+], Tab.prototype, "label");
 __decorateClass([
-  attr({ mode: "boolean", attribute: "scrollable-panel" })
-], Tabs.prototype, "scrollablePanel");
+  attr({ mode: "boolean" })
+], Tab.prototype, "removable");
+__decorateClass([
+  attr({ mode: "fromView" })
+], Tab.prototype, "tabIndex");
+__decorateClass([
+  attr({ attribute: "aria-selected" })
+], Tab.prototype, "ariaSelected");
+applyMixins(Tab, AffixIconWithTrailing);
+applyMixins(Tab, Localized);
 
 const getClasses = ({
   connotation,
-  orientation,
-  gutters,
-  scrollablePanel
+  disabled,
+  ariaSelected,
+  iconTrailing,
+  shape,
+  removable
 }) => classNames(
   "base",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`orientation-${orientation}`, Boolean(orientation)],
-  `gutters-${gutters ?? "small"}`,
-  ["scroll", Boolean(scrollablePanel)]
+  [
+    `connotation-${connotation}`,
+    Boolean(connotation) && ariaSelected === "true"
+  ],
+  [`shape-${shape}`, Boolean(shape)],
+  ["disabled", Boolean(disabled)],
+  ["selected", ariaSelected === "true"],
+  ["icon-trailing", iconTrailing],
+  ["removable", removable]
 );
-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 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);
+function renderDismissButton(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html` <span
+		aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
+		class="close"
+		id="close-btn"
+		@click="${(x, c) => x._handleCloseClick(c.event)}"
+	>
+		${() => affixIconTemplate("close-line", IconWrapper.Span)}
+	</span>`;
 }
-function TabsTemplate() {
+function TabTemplate(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
   return html`
-		<template>
+		<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}">
-				<div class="scroll-shadow">
-					<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
-						<div class="tablist" role="tablist" ${ref("tablist")}>
-							<slot name="tab" ${slotted("tabs")}></slot>
-							${when(
-    (x) => x.showActiveIndicator,
-    html`
-									<div
-										${ref("activeIndicatorRef")}
-										class="active-indicator"
-									></div>
-								`
-  )}
-						</div>
-					</div>
-				</div>
-				<div class="tabpanel">
-					<slot name="tabpanel" ${slotted("tabpanels")}></slot>
-				</div>
+				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
+				${(x) => x.removable ? renderDismissButton(context) : null}
 			</div>
 		</template>
 	`;
 }
 
-const tabsDefinition = Tabs.compose({
-  baseName: "tabs",
-  template: TabsTemplate,
+const tabDefinition = Tab.compose({
+  baseName: "tab",
+  template: TabTemplate,
   styles
 });
-const tabsRegistries = [
-  tabsDefinition(),
-  ...tabRegistries,
-  ...tabPanelRegistries
-];
-const registerTabs = registerFactory(tabsRegistries);
+const tabRegistries = [tabDefinition(), ...iconRegistries];
+const registerTab = registerFactory(tabRegistries);
 
-export { tabsRegistries as a, registerTabs as r, tabsDefinition as t };
+export { tabRegistries as a, registerTab as r, tabDefinition as t };