@vonage/vivid 3.14.0 → 3.16.0

package/shared/definition45.js

@@ -1,449 +1,68 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { t as tabRegistries } from './definition43.js';
-import { t as tabPanelRegistries } from './definition44.js';
-import { S as StartEnd } from './start-end.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { i as iconRegistries } from './definition3.js';
+import { f as focusRegistries } from './definition4.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { h as keyArrowRight, i as keyArrowLeft, b as keyArrowDown, c as keyArrowUp, k as keyEnd, a as keyHome } from './key-codes.js';
-import { u as uniqueId } from './strings.js';
-import { w as wrapInBounds } from './numbers.js';
-import { s as slotted } from './slotted.js';
-import { w as when } from './when.js';
-import { r as ref } from './ref.js';
+import { f as focusTemplateFactory } from './focus2.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
  */
-class Tabs$1 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.isFocusableElement = (el) => {
-            return !this.isDisabledElement(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;
-                    }
-                }
-                // 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) {
-        this.prevActiveTabIndex = this.activeTabIndex;
-        this.activeTabIndex = wrapInBounds(0, this.tabs.length - 1, this.activeTabIndex + adjustment);
-        this.setComponent();
-    }
-    focusTab() {
-        this.tabs[this.activeTabIndex].focus();
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.tabIds = this.getTabIds();
-        this.tabpanelIds = this.getTabPanelIds();
-        this.activeTabIndex = this.getActiveIndex();
-    }
+class Tab$1 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);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 GMT\n */\n.base {\n  display: grid;\n  box-sizing: border-box;\n}\n.base {\n  /* @cssprop [--vvd-tabs-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-tabs-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tabs-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-tabs-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-tabs-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-tabs-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tabs-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tabs-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tabs-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tabs-accent-soft, var(--vvd-color-neutral-100));\n}\n.base.orientation-vertical {\n  grid-template-columns: auto 1fr;\n  grid-template-rows: 1fr;\n}\n.base:not(.orientation-vertical) {\n  grid-template-columns: 1fr;\n  grid-template-rows: auto 1fr;\n}\n\n.tablist {\n  --_tabs-tablist-gutter: 8px;\n  --_tabs-active-indicator-stroke-width: 2px;\n  position: relative;\n  display: grid;\n  box-sizing: border-box;\n}\n.base.orientation-vertical .tablist {\n  padding: var(--_tabs-tablist-gutter);\n  box-shadow: 1px 0 0 0 var(--vvd-color-neutral-300);\n  grid-row: 1/2;\n  grid-template-columns: auto 1fr;\n  grid-template-rows: auto;\n  inline-size: 100%;\n  place-self: flex-start end;\n  row-gap: var(--_tabs-tablist-gutter);\n}\n.base:not(.orientation-vertical) .tablist {\n  align-self: end;\n  justify-content: flex-start;\n  border-bottom: 1px solid var(--vvd-color-neutral-300);\n  column-gap: var(--_tabs-tablist-gutter);\n  grid-auto-flow: column;\n  grid-template-columns: auto;\n  grid-template-rows: auto auto;\n  inline-size: 100%;\n  padding-inline: var(--_tabs-tablist-gutter);\n}\n\n.active-indicator {\n  background: currentColor;\n  margin-inline-start: calc(var(--_tabs-tablist-gutter) * -1);\n}\n.base.orientation-vertical .active-indicator {\n  align-self: center;\n  block-size: 80%;\n  grid-area: 2/1/auto/auto;\n  inline-size: var(--_tabs-active-indicator-stroke-width);\n}\n.base:not(.orientation-vertical) .active-indicator {\n  position: absolute;\n  z-index: 1;\n  block-size: var(--_tabs-active-indicator-stroke-width);\n  grid-column: 1/auto;\n  inline-size: var(--_tabs-active-tab-inline-size);\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  justify-self: center;\n  padding-inline: var(--_tabs-tablist-gutter);\n}\n\n.activeIndicatorTransition {\n  transition: transform 0.2s ease-out 0s, inline-size 0.2s ease-out 0s;\n}\n\n.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition) {\n  opacity: 0;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 07 Jun 2023 09:55:04 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus) {\n    outline: none;\n  }\n}\n:host(.vertical) {\n  justify-content: end;\n  grid-column: 1/auto;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: var(--_tabs-tablist-gutter);\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: var(--_tabs-tablist-gutter);\n  min-block-size: 48px;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n:host(.vertical) .base {\n  padding-inline-start: calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter));\n}\n\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n.icon-trailing .icon {\n  order: 1;\n  margin-inline-start: auto;\n}\n\n:host(:not(.vertical)) .base::after {\n  position: absolute;\n  background: currentColor;\n  block-size: 2px;\n  content: \"\";\n  inline-size: calc(100% + var(--_tabs-tablist-gutter) * 2);\n  inset-block-end: 0;\n  margin-inline: calc(var(--_tabs-tablist-gutter) * -2);\n  pointer-events: none;\n  transition-property: opacity;\n}\n:host(:not(.vertical)):host([aria-selected=true]) .base::after {\n  transition-delay: 0.2s;\n}\n:host(:not(.vertical)):host(:not([aria-selected=true])) .base::after {\n  opacity: 0;\n}";
 
-const ACTIVE_TAB_WIDTH = '--_tabs-active-tab-inline-size';
-class Tabs extends Tabs$1 {
-  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();
-  }
-  tabpanelsChanged() {
-    super.tabpanelsChanged();
-    this.patchIndicatorStyleTransition();
-    this.patchActiveID();
-  }
-  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`);
-  }
-  patchActiveID() {
-    if (!this.activetab) return;
-    const idx = this.tabs.indexOf(this.activetab);
-    this.activeid = this['tabIds'][idx];
+class Tab extends Tab$1 {
+  constructor() {
+    super(...arguments);
+    this.tabIndex = '-1';
+    this.ariaSelected = null;
   }
 }
-__decorate([observable, __metadata("design:type", HTMLElement)], Tabs.prototype, "tablist", void 0);
+__decorate([attr, __metadata("design:type", String)], Tab.prototype, "label", void 0);
+__decorate([attr({
+  mode: 'fromView'
+}), __metadata("design:type", Object)], Tab.prototype, "tabIndex", void 0);
+__decorate([attr({
+  attribute: 'aria-selected'
+}), __metadata("design:type", Object)], Tab.prototype, "ariaSelected", void 0);
+applyMixins(Tab, AffixIconWithTrailing);
 
 let _ = t => t,
-  _t,
-  _t2;
+  _t;
 const getClasses = ({
-  orientation
-}) => classNames('base', [`orientation-${orientation}`, Boolean(orientation)]);
-function TabsTemplate() {
+  disabled,
+  ariaSelected,
+  iconTrailing
+}) => classNames('base', ['disabled', Boolean(disabled)], ['selected', ariaSelected === 'true'], ['icon-trailing', iconTrailing]);
+function TabTemplate(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
   return html(_t || (_t = _`
-	<template role="tablist">
+	<template slot="tab" role="tab" aria-disabled="${0}" aria-selected="${0}">
 		<div class="${0}">
-			<div class="tablist" ${0}>
-				<slot name="tab" ${0}></slot>
-				${0}
-			</div>
-			<div class="tabpanel">
-				<slot name="tabpanel" ${0}></slot>
-			</div>
+      ${0}
+      ${0}
+      ${0}
 		</div>
-	</template>
-    `), getClasses, ref('tablist'), slotted('tabs'), when(x => x.showActiveIndicator, html(_t2 || (_t2 = _`
-					<div ${0} class="active-indicator"></div>
-				`), ref('activeIndicatorRef'))), slotted('tabpanels'));
+	</template>`), x => x.disabled, x => x.ariaSelected, getClasses, () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
 }
 
-const tabsDefinition = Tabs.compose({
-  baseName: 'tabs',
-  template: TabsTemplate,
+const tabDefinition = Tab.compose({
+  baseName: 'tab',
+  template: TabTemplate,
   styles: css_248z
 });
-const tabsRegistries = [tabsDefinition(), ...tabRegistries, ...tabPanelRegistries];
-const registerTabs = registerFactory(tabsRegistries);
+const tabRegistries = [tabDefinition(), ...iconRegistries, ...focusRegistries];
+const registerTab = registerFactory(tabRegistries);
 
-export { tabsRegistries as a, registerTabs as r, tabsDefinition as t };
+export { tabDefinition as a, registerTab as r, tabRegistries as t };

package/shared/definition46.js

@@ -1,122 +1,32 @@
-import { F as FoundationElement, U as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { f as focusRegistries } from './definition4.js';
-import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { I as Icon } from './icon.js';
-import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
 
-var _Tag_select;
-class Tag extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.removable = false;
-    this.disabled = false;
-    this.selectable = false;
-    this.selected = false;
-    _Tag_select.set(this, () => {
-      if (!this.selectable || this.disabled) {
-        return;
-      }
-      this.selected = !this.selected;
-      this.$emit('selected-change');
-    });
-  }
-  remove() {
-    if (!this.removable || this.selectable) {
-      return;
-    }
-    this.$emit('removed');
-    this.parentElement && this.parentElement.removeChild(this);
-  }
-  handleKeydown(e) {
-    if (e.key === 'Enter') {
-      __classPrivateFieldGet(this, _Tag_select, "f").call(this);
-    }
-    if (e.key === 'Delete' || e.key === 'Backspace') {
-      this.remove();
-    }
-    return true;
-  }
-  handleClick() {
-    __classPrivateFieldGet(this, _Tag_select, "f").call(this);
-  }
+/**
+ * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+ *
+ * @slot - The default slot for the tabpanel content
+ *
+ * @public
+ */
+class TabPanel$1 extends FoundationElement {
 }
-_Tag_select = new WeakMap();
-__decorate([attr, __metadata("design:type", String)], Tag.prototype, "connotation", void 0);
-__decorate([attr, __metadata("design:type", String)], Tag.prototype, "shape", void 0);
-__decorate([attr, __metadata("design:type", String)], Tag.prototype, "appearance", void 0);
-__decorate([attr, __metadata("design:type", String)], Tag.prototype, "label", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tag.prototype, "removable", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tag.prototype, "disabled", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tag.prototype, "selectable", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Tag.prototype, "selected", void 0);
-applyMixins(Tag, AffixIcon);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 30 May 2023 12:49:14 GMT\n */\n.base {\n  --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--tag-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 8px;\n  font: var(--vvd-typography-base-bold);\n  max-inline-size: 100%;\n  padding-inline: 8px;\n  vertical-align: middle;\n  /* Shape */\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-tag-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-tag-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));\n  /* @cssprop [--vvd-tag-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-tag-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-tag-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-tag-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-tag-cta-dim=var(--vvd-color-cta-200)] */\n  --_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-tag-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-tag-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-tag-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-tag-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-tag-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-tag-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-tag-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled).appearance-duotone {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-200);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)).appearance-duotone {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:not(.shape-pill) {\n  border-radius: 4px;\n}\n.base.shape-pill {\n  border-radius: 14px;\n}\n@supports selector(:focus-visible) {\n  .base:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.base.removable {\n  cursor: auto;\n}\n\n.label {\n  overflow: hidden;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.icon {\n  font-size: calc(var(--tag-block-size) / 1.5);\n  line-height: 1;\n}\n.icon > * {\n  vertical-align: middle;\n}\n\n.dismiss-button {\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: inherit;\n  cursor: pointer;\n}\n\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+class TabPanel extends TabPanel$1 {}
 
 let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
-const getClasses = ({
-  connotation,
-  appearance,
-  shape,
-  disabled,
-  selectable,
-  removable,
-  selected
-}) => classNames('base', ['disabled', disabled], ['selectable', selectable], ['active', selectable && selected], ['removable', removable && !selectable], [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)]);
-function renderDismissButton(iconTag) {
+  _t;
+function TabPanelTemplate() {
   return html(_t || (_t = _`
-	<span
-		aria-hidden="true"
-		class="dismiss-button"
-		@click="${0}">
-		<${0} name="close-line"></${0}>
-	</span>`), x => x.remove(), iconTag, iconTag);
+        <template slot="tabpanel" role="tabpanel">
+            <slot></slot>
+        </template>
+    `));
 }
-const tagTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  const focusTemplate = focusTemplateFactory(context);
-  return html(_t2 || (_t2 = _`
-	<span class="${0}"
-	role="option"
-	aria-disabled="${0}"
-	aria-selected="${0}"
-	tabindex="${0}"
-	@keydown="${0}"
-	@click="${0}">
-		${0}
-		${0}
-		${0}
-		${0}
-		${0}
-	</span>`), getClasses, x => x.disabled, x => x.selectable, x => x.disabled ? null : 0, (x, c) => x.handleKeydown(c.event), x => x.handleClick(), x => affixIconTemplate(x.icon), when(x => x.label, x => html(_t3 || (_t3 = _`<span class="label">${0}</span>`), x.label)), when(x => x.removable && !x.selectable, renderDismissButton(iconTag)), when(x => x.selectable && x.selected, html(_t4 || (_t4 = _`<${0} class="selectable-icon" name="check-circle-solid"></${0}>`), iconTag, iconTag)), () => focusTemplate);
-};
 
-const tagDefinition = Tag.compose({
-  baseName: 'tag',
-  template: tagTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const tabPanelDefinition = TabPanel.compose({
+  baseName: 'tab-panel',
+  template: TabPanelTemplate
 });
-const tagRegistries = [tagDefinition(), ...iconRegistries, ...focusRegistries];
-const registerTag = registerFactory(tagRegistries);
+const tabPanelRegistries = [tabPanelDefinition()];
+const registerTabPanel = registerFactory(tabPanelRegistries);
 
-export { registerTag as r, tagDefinition as t };
+export { tabPanelDefinition as a, registerTabPanel as r, tabPanelRegistries as t };