@ni/nimble-components 32.4.1 → 32.5.1

package/dist/esm/patterns/tabs/testing/tabs-base.pageobject.js

@@ -0,0 +1,92 @@
+import { waitForUpdatesAsync } from '../../../testing/async-helpers';
+import { waitTimeout } from '../../../utilities/testing/component';
+/**
+ * Page object for the `nimble-tabs` and `nimble-anchor-tabs` components to provide
+ * consistent ways of querying and interacting with the component during tests.
+ */
+export class TabsBasePageObject {
+    constructor(tabsElement, tabElementName, tabPanelElementName) {
+        this.tabsElement = tabsElement;
+        this.tabElementName = tabElementName;
+        this.tabPanelElementName = tabPanelElementName;
+    }
+    async clickTab(index) {
+        if (index >= this.tabsElement.tabs.length) {
+            throw new Error(`Tab with index ${index} not found`);
+        }
+        this.tabsElement.tabs[index].click();
+        await waitForUpdatesAsync();
+    }
+    async pressKeyOnTab(index, key) {
+        if (index >= this.tabsElement.tabs.length) {
+            throw new Error(`Tab with index ${index} not found`);
+        }
+        const tab = this.tabsElement.tabs[index];
+        tab.dispatchEvent(new KeyboardEvent('keydown', { key }));
+        await waitForUpdatesAsync();
+    }
+    async setTabsWidth(width) {
+        this.tabsElement.style.width = `${width}px`;
+        await waitForUpdatesAsync();
+        await waitForUpdatesAsync(); // wait for the resize observer to fire
+    }
+    async clickScrollLeftButton() {
+        const leftButton = this.tabsElement.shadowRoot.querySelector('.scroll-button.left');
+        if (!leftButton) {
+            throw new Error('Scroll left button not found');
+        }
+        leftButton.click();
+        await waitForUpdatesAsync();
+        await waitTimeout(50); // let animation run
+    }
+    async clickScrollRightButton() {
+        const rightButton = this.tabsElement.shadowRoot.querySelector('.scroll-button.right');
+        if (!rightButton) {
+            throw new Error('Scroll right button not found');
+        }
+        rightButton.click();
+        await waitForUpdatesAsync();
+        await waitTimeout(50); // let animation run
+    }
+    areScrollButtonsVisible() {
+        return (this.tabsElement.shadowRoot.querySelectorAll('.scroll-button')
+            .length > 0);
+    }
+    async addTab(label) {
+        const tab = document.createElement(this.tabElementName);
+        tab.textContent = label;
+        const lastTab = this.tabsElement.querySelector(`${this.tabElementName}:last-of-type`);
+        lastTab.insertAdjacentElement('afterend', tab);
+        if (this.tabPanelElementName) {
+            const tabPanel = document.createElement(this.tabPanelElementName);
+            const lastTabPanel = this.tabsElement.querySelector(`${this.tabPanelElementName}:last-of-type`);
+            lastTabPanel.insertAdjacentElement('afterend', tabPanel);
+        }
+        await waitForUpdatesAsync();
+    }
+    async removeTab(index) {
+        if (index >= this.tabsElement.tabs.length) {
+            throw new Error(`Tab with index ${index} not found`);
+        }
+        const tabToRemove = this.tabsElement.tabs[index];
+        tabToRemove?.remove();
+        if (this.tabPanelElementName) {
+            const tabPanelToRemove = this.tabsElement.querySelectorAll(this.tabPanelElementName)[index];
+            tabPanelToRemove?.remove();
+        }
+        await waitForUpdatesAsync();
+    }
+    async updateTabLabel(index, label) {
+        if (index >= this.tabsElement.tabs.length) {
+            throw new Error(`Tab with index ${index} not found`);
+        }
+        const tab = this.tabsElement.tabs[index];
+        tab.textContent = label;
+        await waitForUpdatesAsync();
+    }
+    getTabsViewScrollOffset() {
+        return this.tabsElement.shadowRoot.querySelector('.tablist')
+            .scrollLeft;
+    }
+}
+//# sourceMappingURL=tabs-base.pageobject.js.map

package/dist/esm/patterns/tabs/testing/tabs-base.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-base.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/tabs/testing/tabs-base.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Button } from '../../../button';\nimport { waitForUpdatesAsync } from '../../../testing/async-helpers';\nimport { waitTimeout } from '../../../utilities/testing/component';\nimport type { TabsOwner } from '../types';\n\n/**\n * Page object for the `nimble-tabs` and `nimble-anchor-tabs` components to provide\n * consistent ways of querying and interacting with the component during tests.\n */\nexport abstract class TabsBasePageObject<T extends TabsOwner> {\n    public constructor(\n        protected readonly tabsElement: T,\n        protected readonly tabElementName: string,\n        protected readonly tabPanelElementName?: string\n    ) {}\n\n    public async clickTab(index: number): Promise<void> {\n        if (index >= this.tabsElement.tabs.length) {\n            throw new Error(`Tab with index ${index} not found`);\n        }\n        this.tabsElement.tabs[index]!.click();\n        await waitForUpdatesAsync();\n    }\n\n    public async pressKeyOnTab(index: number, key: string): Promise<void> {\n        if (index >= this.tabsElement.tabs.length) {\n            throw new Error(`Tab with index ${index} not found`);\n        }\n        const tab = this.tabsElement.tabs[index]!;\n        tab.dispatchEvent(new KeyboardEvent('keydown', { key }));\n        await waitForUpdatesAsync();\n    }\n\n    public async setTabsWidth(width: number): Promise<void> {\n        this.tabsElement.style.width = `${width}px`;\n        await waitForUpdatesAsync();\n        await waitForUpdatesAsync(); // wait for the resize observer to fire\n    }\n\n    public async clickScrollLeftButton(): Promise<void> {\n        const leftButton = this.tabsElement.shadowRoot!.querySelector<Button>(\n            '.scroll-button.left'\n        );\n        if (!leftButton) {\n            throw new Error('Scroll left button not found');\n        }\n        leftButton.click();\n        await waitForUpdatesAsync();\n        await waitTimeout(50); // let animation run\n    }\n\n    public async clickScrollRightButton(): Promise<void> {\n        const rightButton = this.tabsElement.shadowRoot!.querySelector<Button>(\n            '.scroll-button.right'\n        );\n        if (!rightButton) {\n            throw new Error('Scroll right button not found');\n        }\n        rightButton.click();\n        await waitForUpdatesAsync();\n        await waitTimeout(50); // let animation run\n    }\n\n    public areScrollButtonsVisible(): boolean {\n        return (\n            this.tabsElement.shadowRoot!.querySelectorAll('.scroll-button')\n                .length > 0\n        );\n    }\n\n    public async addTab(label: string): Promise<void> {\n        const tab = document.createElement(this.tabElementName);\n        tab.textContent = label;\n        const lastTab = this.tabsElement.querySelector(\n            `${this.tabElementName}:last-of-type`\n        )!;\n        lastTab.insertAdjacentElement('afterend', tab);\n        if (this.tabPanelElementName) {\n            const tabPanel = document.createElement(this.tabPanelElementName);\n            const lastTabPanel = this.tabsElement.querySelector(\n                `${this.tabPanelElementName}:last-of-type`\n            )!;\n            lastTabPanel.insertAdjacentElement('afterend', tabPanel);\n        }\n        await waitForUpdatesAsync();\n    }\n\n    public async removeTab(index: number): Promise<void> {\n        if (index >= this.tabsElement.tabs.length) {\n            throw new Error(`Tab with index ${index} not found`);\n        }\n        const tabToRemove = this.tabsElement.tabs[index];\n        tabToRemove?.remove();\n        if (this.tabPanelElementName) {\n            const tabPanelToRemove = this.tabsElement.querySelectorAll(\n                this.tabPanelElementName\n            )[index];\n            tabPanelToRemove?.remove();\n        }\n        await waitForUpdatesAsync();\n    }\n\n    public async updateTabLabel(index: number, label: string): Promise<void> {\n        if (index >= this.tabsElement.tabs.length) {\n            throw new Error(`Tab with index ${index} not found`);\n        }\n        const tab = this.tabsElement.tabs[index]!;\n        tab.textContent = label;\n        await waitForUpdatesAsync();\n    }\n\n    public getTabsViewScrollOffset(): number {\n        return this.tabsElement.shadowRoot!.querySelector('.tablist')!\n            .scrollLeft;\n    }\n}\n"]}

package/dist/esm/patterns/tabs/types.d.ts

@@ -0,0 +1,9 @@
+export interface TabsOwner extends HTMLElement {
+    tabs: HTMLElement[];
+    tablist: HTMLElement;
+    leftScrollButton?: HTMLElement;
+    showScrollButtons: boolean;
+    tabSlotName: string;
+    onScrollLeftClick(): void;
+    onScrollRightClick(): void;
+}

package/dist/esm/patterns/tabs/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/patterns/tabs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/tabs/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface TabsOwner extends HTMLElement {\n    tabs: HTMLElement[];\n    tablist: HTMLElement;\n    leftScrollButton?: HTMLElement;\n    showScrollButtons: boolean;\n    tabSlotName: string;\n    onScrollLeftClick(): void;\n    onScrollRightClick(): void;\n}\n"]}

package/dist/esm/tab/styles.js

@@ -13,6 +13,7 @@ export const styles = css `
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        text-wrap: nowrap;
         --ni-private-active-indicator-width: 2px;
         --ni-private-focus-indicator-width: 1px;
         --ni-private-indicator-lines-gap: 1px;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;YAGtC,YAAY;;;;;;;;;;iBAUP,qBAAqB;;;;;;mBAMnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;yBAUC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;oCAWY,gBAAgB;;CAEnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    mediumPadding,\n    standardPadding,\n    smallDelay,\n    buttonLabelFont\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        position: relative;\n        font: ${buttonLabelFont};\n        height: ${controlHeight};\n        color: ${bodyFontColor};\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        --ni-private-active-indicator-width: 2px;\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n        --ni-private-focus-indicator-inset-width: 3px;\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover[aria-selected='true']) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: none;\n    }\n\n    :host(:active) {\n        background: none;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        background: none;\n    }\n\n    slot:not([name]) {\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(\n            var(--ni-private-active-indicator-width) +\n                var(--ni-private-indicator-lines-gap)\n        );\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: 0px;\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-active-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-selected='true'])::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([aria-selected='true'][disabled])::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;;4BAYF,cAAc;;;;4BAId,sBAAsB;;;YAGtC,YAAY;;;;;;;;;;iBAUP,qBAAqB;;;;;;mBAMnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;yBAUC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;oCAWY,gBAAgB;;CAEnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    mediumPadding,\n    standardPadding,\n    smallDelay,\n    buttonLabelFont\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        position: relative;\n        font: ${buttonLabelFont};\n        height: ${controlHeight};\n        color: ${bodyFontColor};\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        text-wrap: nowrap;\n        --ni-private-active-indicator-width: 2px;\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n        --ni-private-focus-indicator-inset-width: 3px;\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover[aria-selected='true']) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: none;\n    }\n\n    :host(:active) {\n        background: none;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        background: none;\n    }\n\n    slot:not([name]) {\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(\n            var(--ni-private-active-indicator-width) +\n                var(--ni-private-indicator-lines-gap)\n        );\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: 0px;\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-active-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-selected='true'])::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([aria-selected='true'][disabled])::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n`;\n"]}

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

@@ -1,4 +1,5 @@
 import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
+import type { TabsOwner } from '../patterns/tabs/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-tabs': Tabs;
@@ -7,7 +8,44 @@ declare global {
 /**
  * A nimble-styled tabs control
  */
-export declare class Tabs extends FoundationTabs {
+export declare class Tabs extends FoundationTabs implements TabsOwner {
+    /**
+     * @internal
+     */
+    showScrollButtons: boolean;
+    /**
+     * @internal
+     */
+    readonly tablist: HTMLElement;
+    /**
+     * @internal
+     */
+    readonly leftScrollButton?: HTMLElement;
+    /**
+     * @internal
+     */
+    readonly tabSlotName = "tab";
+    private readonly tabListResizeObserver;
     constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * @internal
+     */
+    onScrollLeftClick(): void;
+    /**
+     * @internal
+     */
+    onScrollRightClick(): void;
 }
 export declare const tabsTag = "nimble-tabs";

package/dist/esm/tabs/index.js

@@ -1,15 +1,79 @@
-import { DesignSystem, Tabs as FoundationTabs, tabsTemplate as template } from '@microsoft/fast-foundation';
+import { __decorate } from "tslib";
+import { observable } from '@microsoft/fast-element';
+import { DesignSystem, Tabs as FoundationTabs } from '@microsoft/fast-foundation';
 import { styles } from './styles';
+import { template } from '../patterns/tabs/template';
 /**
  * A nimble-styled tabs control
  */
 export class Tabs extends FoundationTabs {
     constructor() {
         super();
+        /**
+         * @internal
+         */
+        this.showScrollButtons = false;
+        /**
+         * @internal
+         */
+        this.tabSlotName = 'tab';
         // We disable the built-in active indicator so that we can implement our own
         this.activeindicator = false;
+        this.tabListResizeObserver = new ResizeObserver(entries => {
+            let tabListVisibleWidth = entries[0]?.contentRect.width;
+            if (tabListVisibleWidth !== undefined) {
+                const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;
+                tabListVisibleWidth = Math.ceil(tabListVisibleWidth);
+                if (this.showScrollButtons) {
+                    tabListVisibleWidth += buttonWidth * 2;
+                }
+                this.showScrollButtons = tabListVisibleWidth < this.tablist.scrollWidth;
+            }
+        });
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabListResizeObserver.observe(this.tablist);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.tabListResizeObserver.disconnect();
+    }
+    /**
+     * @internal
+     */
+    activeidChanged(oldValue, newValue) {
+        super.activeidChanged(oldValue, newValue);
+        this.activetab?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+    /**
+     * @internal
+     */
+    onScrollLeftClick() {
+        this.tablist.scrollBy({
+            left: -this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
+    }
+    /**
+     * @internal
+     */
+    onScrollRightClick() {
+        this.tablist.scrollBy({
+            left: this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
     }
 }
+__decorate([
+    observable
+], Tabs.prototype, "showScrollButtons", void 0);
 const nimbleTabs = Tabs.compose({
     baseName: 'tabs',
     baseClass: FoundationTabs,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,IAAI,cAAc,EAEtB,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,cAAc;IACpC;QACI,KAAK,EAAE,CAAC;QACR,4EAA4E;QAC5E,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC;CACJ;AAED,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAc;IACzC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,cAAc;IACzB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;AACvE,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC","sourcesContent":["import {\n    DesignSystem,\n    Tabs as FoundationTabs,\n    TabsOptions,\n    tabsTemplate as template\n} from '@microsoft/fast-foundation';\nimport { styles } from './styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-tabs': Tabs;\n    }\n}\n\n/**\n * A nimble-styled tabs control\n */\nexport class Tabs extends FoundationTabs {\n    public constructor() {\n        super();\n        // We disable the built-in active indicator so that we can implement our own\n        this.activeindicator = false;\n    }\n}\n\nconst nimbleTabs = Tabs.compose<TabsOptions>({\n    baseName: 'tabs',\n    baseClass: FoundationTabs,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());\nexport const tabsTag = 'nimble-tabs';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,IAAI,IAAI,cAAc,EAEzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AASrD;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,cAAc;IAwBpC;QACI,KAAK,EAAE,CAAC;QAxBZ;;WAEG;QAEI,sBAAiB,GAAG,KAAK,CAAC;QAYjC;;WAEG;QACa,gBAAW,GAAG,KAAK,CAAC;QAMhC,4EAA4E;QAC5E,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,qBAAqB,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YACtD,IAAI,mBAAmB,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC;YACxD,IAAI,mBAAmB,KAAK,SAAS,EAAE,CAAC;gBACpC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,EAAE,WAAW,IAAI,CAAC,CAAC;gBAC5D,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;gBACrD,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;oBACzB,mBAAmB,IAAI,WAAW,GAAG,CAAC,CAAC;gBAC3C,CAAC;gBACD,IAAI,CAAC,iBAAiB,GAAG,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;YAC5E,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACa,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED;;OAEG;IACa,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,CAAC;IAC5C,CAAC;IAED;;OAEG;IACa,eAAe,CAAC,QAAgB,EAAE,QAAgB;QAC9D,KAAK,CAAC,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC1C,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAC5E,CAAC;IAED;;OAEG;IACI,iBAAiB;QACpB,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;YAClB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;YAC/B,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;IACP,CAAC;IAED;;OAEG;IACI,kBAAkB;QACrB,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;YAClB,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW;YAC9B,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;IACP,CAAC;CACJ;AA/EU;IADN,UAAU;+CACsB;AAiFrC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAc;IACzC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,cAAc;IACzB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;AACvE,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC","sourcesContent":["import { observable } from '@microsoft/fast-element';\nimport {\n    DesignSystem,\n    Tabs as FoundationTabs,\n    TabsOptions\n} from '@microsoft/fast-foundation';\nimport { styles } from './styles';\nimport { template } from '../patterns/tabs/template';\nimport type { TabsOwner } from '../patterns/tabs/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-tabs': Tabs;\n    }\n}\n\n/**\n * A nimble-styled tabs control\n */\nexport class Tabs extends FoundationTabs implements TabsOwner {\n    /**\n     * @internal\n     */\n    @observable\n    public showScrollButtons = false;\n\n    /**\n     * @internal\n     */\n    public readonly tablist!: HTMLElement;\n\n    /**\n     * @internal\n     */\n    public readonly leftScrollButton?: HTMLElement;\n\n    /**\n     * @internal\n     */\n    public readonly tabSlotName = 'tab';\n\n    private readonly tabListResizeObserver: ResizeObserver;\n\n    public constructor() {\n        super();\n        // We disable the built-in active indicator so that we can implement our own\n        this.activeindicator = false;\n        this.tabListResizeObserver = new ResizeObserver(entries => {\n            let tabListVisibleWidth = entries[0]?.contentRect.width;\n            if (tabListVisibleWidth !== undefined) {\n                const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;\n                tabListVisibleWidth = Math.ceil(tabListVisibleWidth);\n                if (this.showScrollButtons) {\n                    tabListVisibleWidth += buttonWidth * 2;\n                }\n                this.showScrollButtons = tabListVisibleWidth < this.tablist.scrollWidth;\n            }\n        });\n    }\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.tabListResizeObserver.observe(this.tablist);\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.tabListResizeObserver.disconnect();\n    }\n\n    /**\n     * @internal\n     */\n    public override activeidChanged(oldValue: string, newValue: string): void {\n        super.activeidChanged(oldValue, newValue);\n        this.activetab?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    }\n\n    /**\n     * @internal\n     */\n    public onScrollLeftClick(): void {\n        this.tablist.scrollBy({\n            left: -this.tablist.clientWidth,\n            behavior: 'smooth'\n        });\n    }\n\n    /**\n     * @internal\n     */\n    public onScrollRightClick(): void {\n        this.tablist.scrollBy({\n            left: this.tablist.clientWidth,\n            behavior: 'smooth'\n        });\n    }\n}\n\nconst nimbleTabs = Tabs.compose<TabsOptions>({\n    baseName: 'tabs',\n    baseClass: FoundationTabs,\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());\nexport const tabsTag = 'nimble-tabs';\n"]}

package/dist/esm/tabs/styles.js

@@ -1,29 +1,9 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utilities/style/display';
+import { styles as tabsStyles } from '../patterns/tabs/styles';
 export const styles = css `
-    ${display('grid')}
-
-    :host {
-        grid-template-columns: auto 1fr;
-        grid-template-rows: auto 1fr;
-    }
-
-    [part='start'] {
-        display: none;
-    }
-
-    .tablist {
-        display: grid;
-        grid-template-rows: auto auto;
-        grid-template-columns: auto;
-        width: max-content;
-        align-self: end;
-    }
+    ${tabsStyles}
 
     .tabpanel {
-        grid-row: 2;
-        grid-column-start: 1;
-        grid-column-end: 4;
         overflow: auto;
     }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        grid-template-columns: auto 1fr;\n        grid-template-rows: auto 1fr;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .tablist {\n        display: grid;\n        grid-template-rows: auto auto;\n        grid-template-columns: auto;\n        width: max-content;\n        align-self: end;\n    }\n\n    .tabpanel {\n        grid-row: 2;\n        grid-column-start: 1;\n        grid-column-end: 4;\n        overflow: auto;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,UAAU;;;;;CAKf,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { styles as tabsStyles } from '../patterns/tabs/styles';\n\nexport const styles = css`\n    ${tabsStyles}\n\n    .tabpanel {\n        overflow: auto;\n    }\n`;\n"]}

package/dist/esm/tabs/testing/tabs.pageobject.d.ts

@@ -0,0 +1,9 @@
+import type { Tabs } from '..';
+import { TabsBasePageObject } from '../../patterns/tabs/testing/tabs-base.pageobject';
+/**
+ * Page object for the `nimble-tabs` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export declare class TabsPageObject extends TabsBasePageObject<Tabs> {
+    constructor(tabsElement: Tabs);
+}

package/dist/esm/tabs/testing/tabs.pageobject.js

@@ -0,0 +1,13 @@
+import { TabsBasePageObject } from '../../patterns/tabs/testing/tabs-base.pageobject';
+import { tabTag } from '../../tab';
+import { tabPanelTag } from '../../tab-panel';
+/**
+ * Page object for the `nimble-tabs` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ */
+export class TabsPageObject extends TabsBasePageObject {
+    constructor(tabsElement) {
+        super(tabsElement, tabTag, tabPanelTag);
+    }
+}
+//# sourceMappingURL=tabs.pageobject.js.map

package/dist/esm/tabs/testing/tabs.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.pageobject.js","sourceRoot":"","sources":["../../../../src/tabs/testing/tabs.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,kBAAwB;IACxD,YAAmB,WAAiB;QAChC,KAAK,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;IAC5C,CAAC;CACJ","sourcesContent":["import type { Tabs } from '..';\nimport { TabsBasePageObject } from '../../patterns/tabs/testing/tabs-base.pageobject';\nimport { tabTag } from '../../tab';\nimport { tabPanelTag } from '../../tab-panel';\n\n/**\n * Page object for the `nimble-tabs` component to provide consistent ways\n * of querying and interacting with the component during tests.\n */\nexport class TabsPageObject extends TabsBasePageObject<Tabs> {\n    public constructor(tabsElement: Tabs) {\n        super(tabsElement, tabTag, tabPanelTag);\n    }\n}\n"]}

package/dist/esm/utilities/testing/component.d.ts

@@ -9,3 +9,7 @@ export declare function waitForEvent<T extends Event>(element: HTMLElement, even
  * Waits for a requested animation frame to occur.
  */
 export declare function waitAnimationFrame(): Promise<void>;
+/**
+ * Timeout for use in async tets.
+ */
+export declare function waitTimeout(ms?: number): Promise<void>;

package/dist/esm/utilities/testing/component.js

@@ -49,4 +49,12 @@ export async function waitAnimationFrame() {
         requestAnimationFrame(() => resolve());
     });
 }
+/**
+ * Timeout for use in async tets.
+ */
+export async function waitTimeout(ms = 0) {
+    await new Promise(resolve => {
+        window.setTimeout(() => resolve(undefined), ms);
+    });
+}
 //# sourceMappingURL=component.js.map

package/dist/esm/utilities/testing/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/utilities/testing/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,OAAoB;IACnD,OAAO,CAAC,KAAK,EAAE,CAAC;IAChB,MAAM,mBAAmB,EAAE,CAAC;AAChC,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAClC,MAAmB,EACnB,GAAW,EACX,IAAwB;IAExB,OAAO,CACH,MAAM,iBAAiB,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CACpE,CAAC,CAAC,CAAE,CAAC;AACV,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACnC,MAAmB,EACnB,WAAqB,EACrB,IAA0B;IAE1B,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IACpE,CAAC;IACD,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,MAAM,EAAE,CAAC;QAC7C,MAAM,IAAI,KAAK,CACX,+DAA+D,CAClE,CAAC;IACN,CAAC;IACD,MAAM,MAAM,GAAoB,EAAE,CAAC;IACnC,KAAK,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;QAC/C,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG;YACH,UAAU,EAAE,IAAI;YAChB,OAAO,EAAE,IAAI;YACb,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC;SACnB,CAAC,CAAC;QACH,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACD,MAAM,mBAAmB,EAAE,CAAC;IAC5B,OAAO,MAAM,CAAC;AAClB,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,YAAY,CAC9B,OAAoB,EACpB,SAAiB,EACjB,QAA2B;IAE3B,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;QAC9B,MAAM,OAAO,GAAG,CAAC,CAAC,GAAM,EAAQ,EAAE;YAC9B,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;YAChB,OAAO,EAAE,CAAC;QACd,CAAC,CAAkB,CAAC;QACpB,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE;YACzC,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,kBAAkB;IACpC,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;QAC9B,qBAAqB,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["import { waitForUpdatesAsync } from '../../testing/async-helpers';\n\nexport async function clickElement(element: HTMLElement): Promise<void> {\n    element.click();\n    await waitForUpdatesAsync();\n}\n\nexport async function sendKeyDownEvent(\n    target: HTMLElement,\n    key: string,\n    init?: KeyboardEventInit\n): Promise<KeyboardEvent> {\n    return (\n        await sendKeyDownEvents(target, [key], init ? [init] : undefined)\n    )[0]!;\n}\n\nexport async function sendKeyDownEvents(\n    target: HTMLElement,\n    keySequence: string[],\n    init?: KeyboardEventInit[]\n): Promise<KeyboardEvent[]> {\n    if (keySequence.length === 0) {\n        throw new Error('The key sequence must have at least one key.');\n    }\n    if (init && init.length !== keySequence.length) {\n        throw new Error(\n            'The length of the key sequence and the init array must match.'\n        );\n    }\n    const events: KeyboardEvent[] = [];\n    for (const [index, key] of keySequence.entries()) {\n        const event = new KeyboardEvent('keydown', {\n            key,\n            cancelable: true,\n            bubbles: true,\n            ...init?.[index]\n        });\n        target.dispatchEvent(event);\n        events.push(event);\n    }\n    await waitForUpdatesAsync();\n    return events;\n}\n\n/** A helper function to abstract turning waiting for an event to fire into a promise.\n * The returned promise should be resolved prior to completing a test.\n */\nexport async function waitForEvent<T extends Event>(\n    element: HTMLElement,\n    eventName: string,\n    callback?: (evt: T) => void\n): Promise<void> {\n    await new Promise<void>(resolve => {\n        const handler = ((evt: T): void => {\n            callback?.(evt);\n            resolve();\n        }) as EventListener;\n        element.addEventListener(eventName, handler, {\n            once: true\n        });\n    });\n}\n\n/**\n * Waits for a requested animation frame to occur.\n */\nexport async function waitAnimationFrame(): Promise<void> {\n    await new Promise<void>(resolve => {\n        requestAnimationFrame(() => resolve());\n    });\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/utilities/testing/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAElE,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,OAAoB;IACnD,OAAO,CAAC,KAAK,EAAE,CAAC;IAChB,MAAM,mBAAmB,EAAE,CAAC;AAChC,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAClC,MAAmB,EACnB,GAAW,EACX,IAAwB;IAExB,OAAO,CACH,MAAM,iBAAiB,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CACpE,CAAC,CAAC,CAAE,CAAC;AACV,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACnC,MAAmB,EACnB,WAAqB,EACrB,IAA0B;IAE1B,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IACpE,CAAC;IACD,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,MAAM,EAAE,CAAC;QAC7C,MAAM,IAAI,KAAK,CACX,+DAA+D,CAClE,CAAC;IACN,CAAC;IACD,MAAM,MAAM,GAAoB,EAAE,CAAC;IACnC,KAAK,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;QAC/C,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG;YACH,UAAU,EAAE,IAAI;YAChB,OAAO,EAAE,IAAI;YACb,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC;SACnB,CAAC,CAAC;QACH,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC5B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC;IACD,MAAM,mBAAmB,EAAE,CAAC;IAC5B,OAAO,MAAM,CAAC;AAClB,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,YAAY,CAC9B,OAAoB,EACpB,SAAiB,EACjB,QAA2B;IAE3B,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;QAC9B,MAAM,OAAO,GAAG,CAAC,CAAC,GAAM,EAAQ,EAAE;YAC9B,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;YAChB,OAAO,EAAE,CAAC;QACd,CAAC,CAAkB,CAAC;QACpB,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE;YACzC,IAAI,EAAE,IAAI;SACb,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,kBAAkB;IACpC,MAAM,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;QAC9B,qBAAqB,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACP,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,EAAE,GAAG,CAAC;IACpC,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QACxB,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["import { waitForUpdatesAsync } from '../../testing/async-helpers';\n\nexport async function clickElement(element: HTMLElement): Promise<void> {\n    element.click();\n    await waitForUpdatesAsync();\n}\n\nexport async function sendKeyDownEvent(\n    target: HTMLElement,\n    key: string,\n    init?: KeyboardEventInit\n): Promise<KeyboardEvent> {\n    return (\n        await sendKeyDownEvents(target, [key], init ? [init] : undefined)\n    )[0]!;\n}\n\nexport async function sendKeyDownEvents(\n    target: HTMLElement,\n    keySequence: string[],\n    init?: KeyboardEventInit[]\n): Promise<KeyboardEvent[]> {\n    if (keySequence.length === 0) {\n        throw new Error('The key sequence must have at least one key.');\n    }\n    if (init && init.length !== keySequence.length) {\n        throw new Error(\n            'The length of the key sequence and the init array must match.'\n        );\n    }\n    const events: KeyboardEvent[] = [];\n    for (const [index, key] of keySequence.entries()) {\n        const event = new KeyboardEvent('keydown', {\n            key,\n            cancelable: true,\n            bubbles: true,\n            ...init?.[index]\n        });\n        target.dispatchEvent(event);\n        events.push(event);\n    }\n    await waitForUpdatesAsync();\n    return events;\n}\n\n/** A helper function to abstract turning waiting for an event to fire into a promise.\n * The returned promise should be resolved prior to completing a test.\n */\nexport async function waitForEvent<T extends Event>(\n    element: HTMLElement,\n    eventName: string,\n    callback?: (evt: T) => void\n): Promise<void> {\n    await new Promise<void>(resolve => {\n        const handler = ((evt: T): void => {\n            callback?.(evt);\n            resolve();\n        }) as EventListener;\n        element.addEventListener(eventName, handler, {\n            once: true\n        });\n    });\n}\n\n/**\n * Waits for a requested animation frame to occur.\n */\nexport async function waitAnimationFrame(): Promise<void> {\n    await new Promise<void>(resolve => {\n        requestAnimationFrame(() => resolve());\n    });\n}\n\n/**\n * Timeout for use in async tets.\n */\nexport async function waitTimeout(ms = 0): Promise<void> {\n    await new Promise(resolve => {\n        window.setTimeout(() => resolve(undefined), ms);\n    });\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "32.4.1",
+  "version": "32.5.1",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",

package/dist/esm/anchor-tabs/styles.js

@@ -1,23 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '../utilities/style/display';
-export const styles = css `
-    ${display('grid')}
-
-    :host {
-        grid-template-columns: auto 1fr;
-        grid-template-rows: auto 1fr;
-    }
-
-    [part='start'] {
-        display: none;
-    }
-
-    .tablist {
-        display: grid;
-        grid-template-rows: auto auto;
-        grid-template-columns: auto;
-        width: max-content;
-        align-self: end;
-    }
-`;
-//# sourceMappingURL=styles.js.map

package/dist/esm/anchor-tabs/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;CAkBpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        grid-template-columns: auto 1fr;\n        grid-template-rows: auto 1fr;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .tablist {\n        display: grid;\n        grid-template-rows: auto auto;\n        grid-template-columns: auto;\n        width: max-content;\n        align-self: end;\n    }\n`;\n"]}

package/dist/esm/anchor-tabs/template.d.ts

@@ -1,4 +0,0 @@
-import { ViewTemplate } from '@microsoft/fast-element';
-import { FoundationElementTemplate } from '@microsoft/fast-foundation';
-import type { AnchorTabs, TabsOptions } from '.';
-export declare const template: FoundationElementTemplate<ViewTemplate<AnchorTabs>, TabsOptions>;

package/dist/esm/anchor-tabs/template.js

@@ -1,10 +0,0 @@
-import { html, ref, slotted } from '@microsoft/fast-element';
-import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
-export const template = (context, definition) => html `
-    ${startSlotTemplate(context, definition)}
-    <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
-        <slot name="anchortab" ${slotted('tabs')}></slot>
-    </div>
-    ${endSlotTemplate(context, definition)}
-`;
-//# sourceMappingURL=template.js.map

package/dist/esm/anchor-tabs/template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-tabs/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAgB,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EACH,eAAe,EAEf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAY;MACvC,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;WACjC,GAAG,CAAC,SAAS,CAAC;iCACQ,OAAO,CAAC,MAAM,CAAC;;MAE1C,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;CACzC,CAAC","sourcesContent":["import { html, ref, slotted, ViewTemplate } from '@microsoft/fast-element';\nimport {\n    endSlotTemplate,\n    FoundationElementTemplate,\n    startSlotTemplate\n} from '@microsoft/fast-foundation';\nimport type { AnchorTabs, TabsOptions } from '.';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<AnchorTabs>,\nTabsOptions\n> = (context, definition) => html<AnchorTabs>`\n    ${startSlotTemplate(context, definition)}\n    <div ${ref('tablist')} class=\"tablist\" part=\"tablist\" role=\"tablist\">\n        <slot name=\"anchortab\" ${slotted('tabs')}></slot>\n    </div>\n    ${endSlotTemplate(context, definition)}\n`;\n"]}