@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/esm/tablist/tablist.options.js

@@ -0,0 +1,24 @@
+import { Orientation } from '@microsoft/fast-web-utilities';
+/**
+ * The appearance of the component
+ * @public
+ */
+export const TablistAppearance = {
+    subtle: 'subtle',
+    transparent: 'transparent',
+};
+/**
+ * The size of the component
+ * @public
+ */
+export const TablistSize = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+};
+/**
+ * The orientation of the component
+ * @public
+ */
+export const TablistOrientation = Orientation;
+//# sourceMappingURL=tablist.options.js.map

package/dist/esm/tablist/tablist.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablist.options.js","sourceRoot":"","sources":["../../../src/tablist/tablist.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,aAAa;CAClB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC"}

package/dist/esm/tablist/tablist.styles.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/tablist/tablist.styles.js

@@ -0,0 +1,193 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../utils/index.js';
+import { borderRadiusCircular, colorCompoundBrandForeground1Hover, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground2, colorNeutralForegroundDisabled, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, curveDecelerateMax, durationSlow, fontSizeBase300, fontSizeBase400, lineHeightBase300, lineHeightBase400, spacingHorizontalMNudge, spacingHorizontalSNudge, spacingVerticalL, spacingVerticalMNudge, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXXS, strokeWidthThicker, } from '../theme/design-tokens.js';
+/**
+ * @public
+ */
+export const styles = css `
+  ${display('flex')}
+
+  :host {
+    --tabPaddingInline: inherit;
+    --tabPaddingBlock: inherit;
+    --tabIndicatorInsetInline: 0;
+    --tabIndicatorInsetBlock: 0;
+    box-sizing: border-box;
+    color: ${colorNeutralForeground2};
+    flex-direction: row;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+  }
+
+  :host([orientation='vertical']) ::slotted([role='tab']) {
+    justify-content: flex-start;
+  }
+
+  /* indicator animation  */
+  :host ::slotted([slot='tab'][data-animate='true'])::after {
+    transition-property: transform;
+    transition-duration: ${durationSlow};
+    transition-timing-function: ${curveDecelerateMax};
+  }
+
+  :host ::slotted([slot='tab'])::after {
+    height: ${strokeWidthThicker};
+    margin-block-start: auto;
+    transform-origin: left;
+    transform: translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale));
+  }
+
+  :host([orientation='vertical']) ::slotted([slot='tab'])::after {
+    width: ${strokeWidthThicker};
+    height: unset;
+    margin-block-start: unset;
+    transform-origin: top;
+    transform: translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale));
+  }
+
+  /* ::before adds a secondary indicator placeholder that appears right after click on the active tab */
+  :host ::slotted([slot='tab'])::before {
+    height: ${strokeWidthThicker};
+    border-radius: ${borderRadiusCircular};
+    content: '';
+    inset-inline: var(--tabIndicatorInsetInline);
+    inset-block: var(--tabIndicatorInsetBlock);
+    position: absolute;
+    margin-top: auto;
+  }
+
+  :host ::slotted([slot='tab'])::before {
+    inset-inline: var(--tabIndicatorInsetInline);
+    inset-block: var(--tabIndicatorInsetBlock);
+  }
+
+  :host ::slotted([slot='tab'][aria-selected='true'])::before {
+    background-color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host ::slotted([slot='tab'][aria-selected='false']:hover)::after {
+    height: ${strokeWidthThicker};
+    margin-block-start: auto;
+    transform-origin: left;
+  }
+
+  :host([orientation='vertical']) ::slotted([slot='tab'])::before,
+  :host([orientation='vertical']) ::slotted([slot='tab'][aria-selected='false']:hover)::after {
+    height: unset;
+    width: ${strokeWidthThicker};
+    margin-inline-end: auto;
+    transform-origin: top;
+  }
+
+  :host(:where([size='small'], [size='large'])) ::slotted([slot='tab']) {
+    padding-inline: var(--tabPaddingInline);
+    padding-block: var(--tabPaddingBlock);
+  }
+
+  :host([size='small']) ::slotted([slot='tab']) {
+    --tabPaddingBlock: ${spacingVerticalSNudge};
+    --tabPaddingInline: ${spacingHorizontalSNudge};
+    font-size: ${fontSizeBase300};
+    line-height: ${lineHeightBase300};
+  }
+
+  :host([size='large']) ::slotted([slot='tab']) {
+    --tabPaddingBlock: ${spacingVerticalL};
+    --tabPaddingInline: ${spacingHorizontalMNudge};
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
+  }
+
+  /* horizontal spacing for indicator */
+  :host ::slotted([slot='tab'])::after,
+  :host ::slotted([slot='tab'])::before,
+  :host ::slotted([slot='tab']:hover)::after {
+    inset-inline: var(--tabIndicatorInsetInline);
+  }
+
+  :host ::slotted([slot='tab']) {
+    --tabIndicatorInsetInline: ${spacingHorizontalMNudge};
+  }
+
+  :host([size='small']) ::slotted([slot='tab']) {
+    --tabIndicatorInsetInline: ${spacingHorizontalSNudge};
+  }
+
+  :host([size='large']) ::slotted([slot='tab']) {
+    --tabIndicatorInsetInline: ${spacingHorizontalMNudge};
+  }
+
+  :host([orientation='vertical']) ::slotted([slot='tab']) {
+    padding-block: var(--tabPaddingBlock);
+  }
+
+  :host([orientation='vertical']) ::slotted([slot='tab']) {
+    --tabPaddingBlock: ${spacingVerticalS};
+  }
+
+  :host([orientation='vertical'][size='small']) ::slotted([slot='tab']) {
+    --tabPaddingBlock: ${spacingVerticalXXS};
+  }
+
+  :host([orientation='vertical'][size='large']) ::slotted([slot='tab']) {
+    --tabPaddingBlock: ${spacingVerticalS};
+  }
+
+  :host([orientation='vertical']) ::slotted([slot='tab'])::after,
+  :host([orientation='vertical']) ::slotted([slot='tab'])::before,
+  :host([orientation='vertical']) ::slotted([slot='tab']:hover)::after {
+    inset-inline: 0;
+    inset-block: var(--tabIndicatorInsetBlock);
+  }
+
+  :host([orientation='vertical']) {
+    --tabIndicatorInsetBlock: ${spacingVerticalS};
+  }
+
+  :host([orientation='vertical'][size='small']) {
+    --tabIndicatorInsetBlock: ${spacingVerticalSNudge};
+  }
+
+  :host([orientation='vertical'][size='large']) {
+    --tabIndicatorInsetBlock: ${spacingVerticalMNudge};
+  }
+
+  /* disabled styles */
+  :host([disabled]) {
+    cursor: not-allowed;
+    color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host([disabled]) ::slotted([slot='tab']) {
+    pointer-events: none;
+    cursor: not-allowed;
+    color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host([disabled]) ::slotted([slot='tab']:after) {
+    background-color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host([disabled]) ::slotted([slot='tab'][aria-selected='true'])::after {
+    background-color: ${colorNeutralForegroundDisabled};
+  }
+
+  :host([disabled]) ::slotted([slot='tab']:hover):before {
+    content: unset;
+  }
+
+  :host([appearance='subtle']) ::slotted([slot='tab']:hover) {
+    background-color: ${colorSubtleBackgroundHover};
+    color: ${colorNeutralForeground1Hover};
+    fill: ${colorCompoundBrandForeground1Hover};
+  }
+
+  :host([appearance='subtle']) ::slotted([slot='tab']:active) {
+    background-color: ${colorSubtleBackgroundPressed};
+    fill: ${colorSubtleBackgroundPressed};
+    color: ${colorNeutralForeground1};
+  }
+`;
+//# sourceMappingURL=tablist.styles.js.map

package/dist/esm/tablist/tablist.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablist.styles.js","sourceRoot":"","sources":["../../../src/tablist/tablist.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,kCAAkC,EAClC,uBAAuB,EACvB,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,4BAA4B,EAC5B,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;aAQN,uBAAuB;;;;;;;;;;;;;;;2BAeT,YAAY;kCACL,kBAAkB;;;;cAItC,kBAAkB;;;;;;;aAOnB,kBAAkB;;;;;;;;;cASjB,kBAAkB;qBACX,oBAAoB;;;;;;;;;;;;;;wBAcjB,8BAA8B;;;;cAIxC,kBAAkB;;;;;;;;aAQnB,kBAAkB;;;;;;;;;;;yBAWN,qBAAqB;0BACpB,uBAAuB;iBAChC,eAAe;mBACb,iBAAiB;;;;yBAIX,gBAAgB;0BACf,uBAAuB;iBAChC,eAAe;mBACb,iBAAiB;;;;;;;;;;;iCAWH,uBAAuB;;;;iCAIvB,uBAAuB;;;;iCAIvB,uBAAuB;;;;;;;;yBAQ/B,gBAAgB;;;;yBAIhB,kBAAkB;;;;yBAIlB,gBAAgB;;;;;;;;;;;gCAWT,gBAAgB;;;;gCAIhB,qBAAqB;;;;gCAIrB,qBAAqB;;;;;;aAMxC,8BAA8B;;;;;;aAM9B,8BAA8B;;;;wBAInB,8BAA8B;;;;wBAI9B,8BAA8B;;;;;;;;wBAQ9B,0BAA0B;aACrC,4BAA4B;YAC7B,kCAAkC;;;;wBAItB,4BAA4B;YACxC,4BAA4B;aAC3B,uBAAuB;;CAEnC,CAAC"}

package/dist/esm/tablist/tablist.template.d.ts

@@ -0,0 +1,5 @@
+import type { Tablist } from './tablist.js';
+/**
+ * @public
+ */
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Tablist, any>;

package/dist/esm/tablist/tablist.template.js

@@ -0,0 +1,10 @@
+import { html, slotted } from '@microsoft/fast-element';
+/**
+ * @public
+ */
+export const template = html `
+  <template role="tablist">
+    <slot name="tab" ${slotted('slottedTabs')}></slot>
+  </template>
+`;
+//# sourceMappingURL=tablist.template.js.map

package/dist/esm/tablist/tablist.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablist.template.js","sourceRoot":"","sources":["../../../src/tablist/tablist.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGxD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;uBAEd,OAAO,CAAC,aAAa,CAAC;;CAE5C,CAAC"}

package/dist/esm/tabs/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tabs/define.js

@@ -1,4 +1,7 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './tabs.definition.js';
+/**
+ * @deprecated - Use tablist instead
+ */
 definition.define(FluentDesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/tabs/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/tabs/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/tabs/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/tabs/index.d.ts

@@ -0,0 +1,6 @@
+export { definition as TabsDefinition } from './tabs.definition.js';
+export { Tabs } from './tabs.js';
+export { TabsAppearance, TabsOrientation, TabsSize } from './tabs.options.js';
+export type { TabsOptions } from './tabs.options.js';
+export { styles as TabsStyles } from './tabs.styles.js';
+export { template as TabsTemplate } from './tabs.template.js';

package/dist/esm/tabs/index.js

@@ -1,6 +1,6 @@
-export * from './tabs.js';
-export * from './tabs.options.js';
-export { template as TabsTemplate } from './tabs.template.js';
-export { styles as TabsStyles } from './tabs.styles.js';
 export { definition as TabsDefinition } from './tabs.definition.js';
+export { Tabs } from './tabs.js';
+export { TabsAppearance, TabsOrientation, TabsSize } from './tabs.options.js';
+export { styles as TabsStyles } from './tabs.styles.js';
+export { template as TabsTemplate } from './tabs.template.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE9E,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/esm/tabs/tabs.base.d.ts

@@ -0,0 +1,90 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { TabsOrientation } from './tabs.options.js';
+/**
+ * A Tabs component that wraps a collection of tab and tab panel elements.
+ *
+ * @deprecated - use tablist instead
+ */
+export declare class BaseTabs extends FASTElement {
+    /**
+     * The orientation
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: TabsOrientation;
+    /**
+     * @internal
+     */
+    orientationChanged(): void;
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid: string;
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * @internal
+     */
+    tabs: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabsChanged(): void;
+    /**
+     * @internal
+     */
+    tabpanels: HTMLElement[];
+    /**
+     * @internal
+     */
+    tabpanelsChanged(): void;
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private tabpanelIds;
+    private change;
+    private isDisabledElement;
+    private isHiddenElement;
+    private isFocusableElement;
+    private getActiveIndex;
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     *
+     * @public
+     */
+    protected setTabs(): void;
+    private setTabPanels;
+    private getTabIds;
+    private getTabPanelIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
+    /**
+     * The adjust method for FASTTabs
+     * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
+     */
+    adjust(adjustment: number): void;
+    private adjustForward;
+    private adjustBackward;
+    private moveToTabByIndex;
+    private focusTab;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}

package/dist/esm/tabs/tabs.base.js

@@ -0,0 +1,279 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { keyArrowDown, keyArrowLeft, keyArrowRight, keyArrowUp, keyEnd, keyHome, limit, uniqueId, } from '@microsoft/fast-web-utilities';
+import { TabsOrientation } from './tabs.options.js';
+/**
+ * A Tabs component that wraps a collection of tab and tab panel elements.
+ *
+ * @deprecated - use tablist instead
+ */
+export class BaseTabs extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The orientation
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = TabsOrientation.horizontal;
+        this.prevActiveTabIndex = 0;
+        this.activeTabIndex = 0;
+        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.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;
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    orientationChanged() {
+        if (this.$fastController.isConnected) {
+            this.setTabs();
+        }
+    }
+    /**
+     * @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();
+        }
+    }
+    /**
+     * @internal
+     */
+    tabsChanged() {
+        if (this.$fastController.isConnected && this.tabs.length <= this.tabpanels.length) {
+            this.tabIds = this.getTabIds();
+            this.tabpanelIds = this.getTabPanelIds();
+            this.setTabs();
+        }
+    }
+    /**
+     * @internal
+     */
+    tabpanelsChanged() {
+        if (this.$fastController.isConnected && this.tabpanels.length <= this.tabs.length) {
+            this.tabIds = this.getTabIds();
+            this.tabpanelIds = this.getTabPanelIds();
+            this.setTabs();
+        }
+    }
+    getActiveIndex() {
+        const id = this.activeid;
+        if (id !== undefined) {
+            return this.tabIds.indexOf(this.activeid) === -1 ? 0 : this.tabIds.indexOf(this.activeid);
+        }
+        else {
+            return 0;
+        }
+    }
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     *
+     * @public
+     */
+    setTabs() {
+        const gridHorizontalProperty = 'gridColumn';
+        const gridVerticalProperty = 'gridRow';
+        const gridProperty = this.isHorizontal() ? gridHorizontalProperty : gridVerticalProperty;
+        this.activeTabIndex = this.getActiveIndex();
+        this.tabs.forEach((tab, index) => {
+            if (tab.slot === 'tab') {
+                const isActiveTab = this.activeTabIndex === index && this.isFocusableElement(tab);
+                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();
+    }
+    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');
+        });
+    }
+    getTabIds() {
+        return this.tabs.map((tab) => {
+            return tab.getAttribute('id') ?? `tab-${uniqueId()}`;
+        });
+    }
+    getTabPanelIds() {
+        return this.tabpanels.map((tabPanel) => {
+            return tabPanel.getAttribute('id') ?? `panel-${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 = 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);
+        }
+    }
+    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;
+            }
+        }
+    }
+    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;
+            }
+        }
+    }
+    moveToTabByIndex(group, index) {
+        const tab = group[index];
+        this.activetab = tab;
+        this.prevActiveTabIndex = this.activeTabIndex;
+        this.activeTabIndex = index;
+        tab.focus();
+        this.setComponent();
+    }
+    focusTab() {
+        this.tabs[this.activeTabIndex].focus();
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIds = this.getTabIds();
+        this.tabpanelIds = this.getTabPanelIds();
+        this.activeTabIndex = this.getActiveIndex();
+    }
+}
+__decorate([
+    attr
+], BaseTabs.prototype, "orientation", void 0);
+__decorate([
+    attr
+], BaseTabs.prototype, "activeid", void 0);
+__decorate([
+    observable
+], BaseTabs.prototype, "tabs", void 0);
+__decorate([
+    observable
+], BaseTabs.prototype, "tabpanels", void 0);
+//# sourceMappingURL=tabs.base.js.map