@ni/nimble-components 32.4.1 → 32.5.0

package/dist/esm/anchor-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/anchor-tab/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;;;;;;;iBASjC,qBAAqB;;;;;;;mBAOnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;;;;;;;;;;yBAoBM,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;oCAWiB,gBAAgB;;;;;;;;;;CAUnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    bodyDisabledFontColor,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    buttonLabelFont,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    smallDelay,\n    mediumPadding,\n    standardPadding\n} from '../theme-provider/design-tokens';\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-current]) {\n        background-color: ${fillHoverSelectedColor};\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        pointer-events: none;\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    a::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        a::before {\n            transition-duration: 0s;\n        }\n    }\n\n    a${focusVisible}::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    a {\n        display: inline-flex;\n        text-decoration: none;\n        color: inherit;\n        cursor: inherit;\n        outline: none;\n        align-items: center;\n        justify-content: center;\n    }\n\n    a::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        a::after {\n            transition-duration: 0s;\n        }\n    }\n\n    a${focusVisible}::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-current]) a::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([disabled][aria-current]) a::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;;4BAYF,cAAc;;;;4BAId,sBAAsB;;;;;;;;;iBASjC,qBAAqB;;;;;;;mBAOnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;;;;;;;;;;yBAoBM,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;oCAWiB,gBAAgB;;;;;;;;;;CAUnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    bodyDisabledFontColor,\n    bodyFontColor,\n    borderHoverColor,\n    borderWidth,\n    buttonLabelFont,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    smallDelay,\n    mediumPadding,\n    standardPadding\n} from '../theme-provider/design-tokens';\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-current]) {\n        background-color: ${fillHoverSelectedColor};\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        pointer-events: none;\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    a::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        a::before {\n            transition-duration: 0s;\n        }\n    }\n\n    a${focusVisible}::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    a {\n        display: inline-flex;\n        text-decoration: none;\n        color: inherit;\n        cursor: inherit;\n        outline: none;\n        align-items: center;\n        justify-content: center;\n    }\n\n    a::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        a::after {\n            transition-duration: 0s;\n        }\n    }\n\n    a${focusVisible}::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-current]) a::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([disabled][aria-current]) a::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    [part='end'] {\n        display: none;\n    }\n`;\n"]}

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

@@ -1,4 +1,5 @@
 import { StartEndOptions, FoundationElementDefinition, FoundationElement } from '@microsoft/fast-foundation';
+import type { TabsOwner } from '../patterns/tabs/types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-anchor-tabs': AnchorTabs;
@@ -8,7 +9,7 @@ export type TabsOptions = FoundationElementDefinition & StartEndOptions;
 /**
  * A nimble-styled set of anchor tabs
  */
-export declare class AnchorTabs extends FoundationElement {
+export declare class AnchorTabs extends FoundationElement implements TabsOwner {
     /**
      * The id of the active tab
      *
@@ -21,6 +22,10 @@ export declare class AnchorTabs extends FoundationElement {
      * @internal
      */
     tabs: HTMLElement[];
+    /**
+     * @internal
+     */
+    showScrollButtons: boolean;
     /**
      * A reference to the active tab
      * @public
@@ -31,7 +36,17 @@ export declare class AnchorTabs extends FoundationElement {
      * @internal
      */
     tablist: HTMLElement;
+    /**
+     * @internal
+     */
+    readonly leftScrollButton?: HTMLElement;
+    /**
+     * @internal
+     */
+    readonly tabSlotName = "anchortab";
+    private readonly tabListResizeObserver;
     private tabIds;
+    constructor();
     /**
      * @internal
      */
@@ -40,10 +55,22 @@ export declare class AnchorTabs extends FoundationElement {
      * @internal
      */
     tabsChanged(): void;
+    /**
+     * @internal
+     */
+    onScrollLeftClick(): void;
+    /**
+     * @internal
+     */
+    onScrollRightClick(): void;
     /**
      * @internal
      */
     connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
     private readonly isDisabledElement;
     private readonly isHiddenElement;
     private readonly isFocusableElement;

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

@@ -12,14 +12,22 @@ import { __decorate } from "tslib";
 import { attr, observable } from '@microsoft/fast-element';
 import { keyArrowLeft, keyArrowRight, keyEnd, keyEnter, keyHome, keySpace, uniqueId } from '@microsoft/fast-web-utilities';
 import { DesignSystem, StartEnd, applyMixins, FoundationElement } from '@microsoft/fast-foundation';
-import { styles } from './styles';
-import { template } from './template';
+import { styles } from '../patterns/tabs/styles';
+import { template } from '../patterns/tabs/template';
 /**
  * A nimble-styled set of anchor tabs
  */
 export class AnchorTabs extends FoundationElement {
     constructor() {
-        super(...arguments);
+        super();
+        /**
+         * @internal
+         */
+        this.showScrollButtons = false;
+        /**
+         * @internal
+         */
+        this.tabSlotName = 'anchortab';
         this.tabIds = [];
         this.isDisabledElement = (el) => {
             return el.getAttribute('aria-disabled') === 'true';
@@ -161,7 +169,19 @@ export class AnchorTabs extends FoundationElement {
                 tab.setAttribute('tabindex', tab === focusedTab ? '0' : '-1');
                 tab.setAttribute('aria-selected', tab === focusedTab ? 'true' : 'false');
             });
+            focusedTab.scrollIntoView({ block: 'nearest', inline: 'start' });
         };
+        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
@@ -169,6 +189,10 @@ export class AnchorTabs extends FoundationElement {
     activeidChanged(_oldValue, _newValue) {
         if (this.$fastController.isConnected) {
             this.setTabs();
+            this.activetab?.scrollIntoView({
+                block: 'nearest',
+                inline: 'start'
+            });
         }
     }
     /**
@@ -180,13 +204,39 @@ export class AnchorTabs extends FoundationElement {
             this.setTabs();
         }
     }
+    /**
+     * @internal
+     */
+    onScrollLeftClick() {
+        this.tablist.scrollBy({
+            left: -this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
+    }
+    /**
+     * @internal
+     */
+    onScrollRightClick() {
+        this.tablist.scrollBy({
+            left: this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
+    }
     /**
      * @internal
      */
     connectedCallback() {
         super.connectedCallback();
+        this.tabListResizeObserver.observe(this.tablist);
         this.tabIds = this.getTabIds();
     }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.tabListResizeObserver.disconnect();
+    }
     getTabIds() {
         return this.tabs.map((tab) => {
             return tab.getAttribute('id') ?? `tab-${uniqueId()}`;
@@ -210,6 +260,9 @@ __decorate([
 __decorate([
     observable
 ], AnchorTabs.prototype, "tabs", void 0);
+__decorate([
+    observable
+], AnchorTabs.prototype, "showScrollButtons", void 0);
 applyMixins(AnchorTabs, StartEnd);
 const nimbleAnchorTabs = AnchorTabs.compose({
     baseName: 'anchor-tabs',

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-tabs/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Based on:\n// https://github.com/microsoft/fast/blob/6bce27d0b2d654650b8751bf055f5e3b5a4f9250/packages/web-components/fast-foundation/src/tabs/tabs.ts\n// The code is heavily modified such that a diff against the original is useless.\n// Primary differences are:\n// - Reimplemented active tab indicator and removed attribute to disable it\n// - Separated tab focus and tab selection, i.e. can focus a different tab than the selected one\n// - Removed everything related to tab panels\n// - Removed support for vertical tab orientation\n// - Removed change event\n// - Conforms to our linter rules\nimport { attr, observable } from '@microsoft/fast-element';\nimport {\n    keyArrowLeft,\n    keyArrowRight,\n    keyEnd,\n    keyEnter,\n    keyHome,\n    keySpace,\n    uniqueId\n} from '@microsoft/fast-web-utilities';\nimport {\n    DesignSystem,\n    StartEnd,\n    applyMixins,\n    StartEndOptions,\n    FoundationElementDefinition,\n    FoundationElement\n} from '@microsoft/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { AnchorTab } from '../anchor-tab';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-anchor-tabs': AnchorTabs;\n    }\n}\n\nexport type TabsOptions = FoundationElementDefinition & StartEndOptions;\n\n/**\n * A nimble-styled set of anchor tabs\n */\nexport class AnchorTabs extends FoundationElement {\n    /**\n     * The id of the active tab\n     *\n     * @public\n     * @remarks\n     * HTML Attribute: activeid\n     */\n    @attr\n    public activeid?: string;\n\n    /**\n     * @internal\n     */\n    @observable\n    public tabs!: HTMLElement[];\n\n    /**\n     * A reference to the active tab\n     * @public\n     */\n    public activetab?: HTMLElement;\n\n    /**\n     * A reference to the tablist div\n     * @internal\n     */\n    public tablist!: HTMLElement;\n\n    private tabIds: string[] = [];\n\n    /**\n     * @internal\n     */\n    public activeidChanged(_oldValue: string, _newValue: string): void {\n        if (this.$fastController.isConnected) {\n            this.setTabs();\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public tabsChanged(): void {\n        if (this.$fastController.isConnected) {\n            this.tabIds = this.getTabIds();\n            this.setTabs();\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n\n        this.tabIds = this.getTabIds();\n    }\n\n    private readonly isDisabledElement = (el: Element): el is HTMLElement => {\n        return el.getAttribute('aria-disabled') === 'true';\n    };\n\n    private readonly isHiddenElement = (el: Element): el is HTMLElement => {\n        return el.hasAttribute('hidden');\n    };\n\n    private readonly isFocusableElement = (el: Element): el is HTMLElement => {\n        return !this.isDisabledElement(el) && !this.isHiddenElement(el);\n    };\n\n    private readonly setTabs = (): void => {\n        const gridHorizontalProperty = 'gridColumn';\n        const gridVerticalProperty = 'gridRow';\n\n        this.activetab = undefined;\n        let firstFocusableTab: HTMLElement | undefined;\n        this.tabs.forEach((tab: HTMLElement, index: number) => {\n            const tabId: string = this.tabIds[index]!;\n            const isActiveTab = this.activeid === tabId;\n            if (!firstFocusableTab && this.isFocusableElement(tab)) {\n                firstFocusableTab = tab;\n            }\n            const isTabStop = this.activeid === tabId && this.isFocusableElement(tab);\n            tab.setAttribute('id', tabId);\n            if (isActiveTab) {\n                tab.setAttribute('aria-current', 'page');\n            } else {\n                tab.removeAttribute('aria-current');\n            }\n            tab.removeEventListener('click', this.handleTabClick);\n            tab.addEventListener('click', this.handleTabClick);\n            tab.removeEventListener('keydown', this.handleTabKeyDown);\n            tab.addEventListener('keydown', this.handleTabKeyDown);\n            tab.setAttribute('tabindex', isTabStop ? '0' : '-1');\n            if (isActiveTab) {\n                this.activetab = tab;\n            }\n\n            tab.style[gridVerticalProperty] = '';\n            tab.style[gridHorizontalProperty] = `${index + 1}`;\n        });\n\n        if (\n            firstFocusableTab\n            && (!this.activetab || !this.isFocusableElement(this.activetab))\n        ) {\n            firstFocusableTab.setAttribute('tabindex', '0');\n        }\n    };\n\n    private getTabIds(): string[] {\n        return this.tabs.map((tab: HTMLElement) => {\n            return tab.getAttribute('id') ?? `tab-${uniqueId()}`;\n        });\n    }\n\n    private readonly handleTabClick = (event: MouseEvent): void => {\n        const selectedTab = event.currentTarget as HTMLElement;\n        if (\n            selectedTab.nodeType === 1\n            && this.isFocusableElement(selectedTab)\n        ) {\n            this.tabs.forEach((tab: HTMLElement) => {\n                tab.setAttribute('tabindex', tab === selectedTab ? '0' : '-1');\n            });\n        }\n    };\n\n    private readonly handleTabKeyDown = (event: KeyboardEvent): void => {\n        let anchor;\n        switch (event.key) {\n            case keyArrowLeft:\n                event.preventDefault();\n                this.adjustBackward();\n                break;\n            case keyArrowRight:\n                event.preventDefault();\n                this.adjustForward();\n                break;\n            case keyHome:\n                event.preventDefault();\n                this.focusFirstOrLast(false);\n                break;\n            case keyEnd:\n                event.preventDefault();\n                this.focusFirstOrLast(true);\n                break;\n            case keySpace:\n            case keyEnter:\n                event.preventDefault();\n                this.getTabAnchor(event.target as AnchorTab).click();\n                break;\n            case 'ContextMenu':\n                event.preventDefault();\n                anchor = this.getTabAnchor(event.target as AnchorTab);\n                anchor.focus();\n                anchor.dispatchEvent(\n                    new KeyboardEvent('keydown', {\n                        key: event.key,\n                        bubbles: false\n                    })\n                );\n                break;\n            default:\n            // do nothing\n        }\n    };\n\n    private focusFirstOrLast(focusLast: boolean): void {\n        const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));\n        const focusableIndex = focusLast ? focusableTabs.length - 1 : 0;\n        const index = this.tabs.indexOf(focusableTabs[focusableIndex]!);\n        if (index > -1) {\n            this.focusTabByIndex(this.tabs, index);\n        }\n    }\n\n    private readonly adjustForward = (): void => {\n        const group: HTMLElement[] = this.tabs;\n        let index = 0;\n        const focusedTab = group.find(x => x === document.activeElement);\n\n        index = focusedTab ? group.indexOf(focusedTab) + 1 : 1;\n        if (index === group.length) {\n            index = 0;\n        }\n\n        while (index < group.length && group.length > 1) {\n            if (this.isFocusableElement(group[index]!)) {\n                this.focusTabByIndex(group, index);\n                break;\n            } else if (focusedTab && index === group.indexOf(focusedTab)) {\n                break;\n            } else if (index + 1 >= group.length) {\n                index = 0;\n            } else {\n                index += 1;\n            }\n        }\n    };\n\n    private readonly adjustBackward = (): void => {\n        const group: HTMLElement[] = this.tabs;\n        let index = 0;\n        const focusedTab = group.find(x => x === document.activeElement);\n\n        index = focusedTab ? group.indexOf(focusedTab) - 1 : 0;\n        index = index < 0 ? group.length - 1 : index;\n\n        while (index >= 0 && group.length > 1) {\n            if (this.isFocusableElement(group[index]!)) {\n                this.focusTabByIndex(group, index);\n                break;\n            } else if (index - 1 < 0) {\n                index = group.length - 1;\n            } else {\n                index -= 1;\n            }\n        }\n    };\n\n    private readonly focusTabByIndex = (\n        group: HTMLElement[],\n        index: number\n    ): void => {\n        const focusedTab: HTMLElement = group[index]!;\n        focusedTab.focus();\n\n        this.tabs.forEach((tab: HTMLElement) => {\n            tab.setAttribute('tabindex', tab === focusedTab ? '0' : '-1');\n            tab.setAttribute(\n                'aria-selected',\n                tab === focusedTab ? 'true' : 'false'\n            );\n        });\n    };\n\n    private getTabAnchor(tab: AnchorTab): HTMLAnchorElement {\n        return tab.shadowRoot!.querySelector('a')!;\n    }\n}\napplyMixins(AnchorTabs, StartEnd);\n\nconst nimbleAnchorTabs = AnchorTabs.compose<TabsOptions>({\n    baseName: 'anchor-tabs',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: false\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());\nexport const anchorTabsTag = 'nimble-anchor-tabs';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-tabs/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Based on:\n// https://github.com/microsoft/fast/blob/6bce27d0b2d654650b8751bf055f5e3b5a4f9250/packages/web-components/fast-foundation/src/tabs/tabs.ts\n// The code is heavily modified such that a diff against the original is useless.\n// Primary differences are:\n// - Reimplemented active tab indicator and removed attribute to disable it\n// - Separated tab focus and tab selection, i.e. can focus a different tab than the selected one\n// - Removed everything related to tab panels\n// - Removed support for vertical tab orientation\n// - Removed change event\n// - Conforms to our linter rules\nimport { attr, observable } from '@microsoft/fast-element';\nimport {\n    keyArrowLeft,\n    keyArrowRight,\n    keyEnd,\n    keyEnter,\n    keyHome,\n    keySpace,\n    uniqueId\n} from '@microsoft/fast-web-utilities';\nimport {\n    DesignSystem,\n    StartEnd,\n    applyMixins,\n    StartEndOptions,\n    FoundationElementDefinition,\n    FoundationElement\n} from '@microsoft/fast-foundation';\nimport { styles } from '../patterns/tabs/styles';\nimport { template } from '../patterns/tabs/template';\nimport type { AnchorTab } from '../anchor-tab';\nimport type { TabsOwner } from '../patterns/tabs/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-anchor-tabs': AnchorTabs;\n    }\n}\n\nexport type TabsOptions = FoundationElementDefinition & StartEndOptions;\n\n/**\n * A nimble-styled set of anchor tabs\n */\nexport class AnchorTabs extends FoundationElement implements TabsOwner {\n    /**\n     * The id of the active tab\n     *\n     * @public\n     * @remarks\n     * HTML Attribute: activeid\n     */\n    @attr\n    public activeid?: string;\n\n    /**\n     * @internal\n     */\n    @observable\n    public tabs!: HTMLElement[];\n\n    /**\n     * @internal\n     */\n    @observable\n    public showScrollButtons = false;\n\n    /**\n     * A reference to the active tab\n     * @public\n     */\n    public activetab?: HTMLElement;\n\n    /**\n     * A reference to the tablist div\n     * @internal\n     */\n    public tablist!: HTMLElement;\n\n    /**\n     * @internal\n     */\n    public readonly leftScrollButton?: HTMLElement;\n\n    /**\n     * @internal\n     */\n    public readonly tabSlotName = 'anchortab';\n\n    private readonly tabListResizeObserver: ResizeObserver;\n    private tabIds: string[] = [];\n\n    public constructor() {\n        super();\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 activeidChanged(_oldValue: string, _newValue: string): void {\n        if (this.$fastController.isConnected) {\n            this.setTabs();\n            this.activetab?.scrollIntoView({\n                block: 'nearest',\n                inline: 'start'\n            });\n        }\n    }\n\n    /**\n     * @internal\n     */\n    public tabsChanged(): void {\n        if (this.$fastController.isConnected) {\n            this.tabIds = this.getTabIds();\n            this.setTabs();\n        }\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    /**\n     * @internal\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.tabListResizeObserver.observe(this.tablist);\n        this.tabIds = this.getTabIds();\n    }\n\n    /**\n     * @internal\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.tabListResizeObserver.disconnect();\n    }\n\n    private readonly isDisabledElement = (el: Element): el is HTMLElement => {\n        return el.getAttribute('aria-disabled') === 'true';\n    };\n\n    private readonly isHiddenElement = (el: Element): el is HTMLElement => {\n        return el.hasAttribute('hidden');\n    };\n\n    private readonly isFocusableElement = (el: Element): el is HTMLElement => {\n        return !this.isDisabledElement(el) && !this.isHiddenElement(el);\n    };\n\n    private readonly setTabs = (): void => {\n        const gridHorizontalProperty = 'gridColumn';\n        const gridVerticalProperty = 'gridRow';\n\n        this.activetab = undefined;\n        let firstFocusableTab: HTMLElement | undefined;\n        this.tabs.forEach((tab: HTMLElement, index: number) => {\n            const tabId: string = this.tabIds[index]!;\n            const isActiveTab = this.activeid === tabId;\n            if (!firstFocusableTab && this.isFocusableElement(tab)) {\n                firstFocusableTab = tab;\n            }\n            const isTabStop = this.activeid === tabId && this.isFocusableElement(tab);\n            tab.setAttribute('id', tabId);\n            if (isActiveTab) {\n                tab.setAttribute('aria-current', 'page');\n            } else {\n                tab.removeAttribute('aria-current');\n            }\n            tab.removeEventListener('click', this.handleTabClick);\n            tab.addEventListener('click', this.handleTabClick);\n            tab.removeEventListener('keydown', this.handleTabKeyDown);\n            tab.addEventListener('keydown', this.handleTabKeyDown);\n            tab.setAttribute('tabindex', isTabStop ? '0' : '-1');\n            if (isActiveTab) {\n                this.activetab = tab;\n            }\n\n            tab.style[gridVerticalProperty] = '';\n            tab.style[gridHorizontalProperty] = `${index + 1}`;\n        });\n\n        if (\n            firstFocusableTab\n            && (!this.activetab || !this.isFocusableElement(this.activetab))\n        ) {\n            firstFocusableTab.setAttribute('tabindex', '0');\n        }\n    };\n\n    private getTabIds(): string[] {\n        return this.tabs.map((tab: HTMLElement) => {\n            return tab.getAttribute('id') ?? `tab-${uniqueId()}`;\n        });\n    }\n\n    private readonly handleTabClick = (event: MouseEvent): void => {\n        const selectedTab = event.currentTarget as HTMLElement;\n        if (\n            selectedTab.nodeType === 1\n            && this.isFocusableElement(selectedTab)\n        ) {\n            this.tabs.forEach((tab: HTMLElement) => {\n                tab.setAttribute('tabindex', tab === selectedTab ? '0' : '-1');\n            });\n        }\n    };\n\n    private readonly handleTabKeyDown = (event: KeyboardEvent): void => {\n        let anchor;\n        switch (event.key) {\n            case keyArrowLeft:\n                event.preventDefault();\n                this.adjustBackward();\n                break;\n            case keyArrowRight:\n                event.preventDefault();\n                this.adjustForward();\n                break;\n            case keyHome:\n                event.preventDefault();\n                this.focusFirstOrLast(false);\n                break;\n            case keyEnd:\n                event.preventDefault();\n                this.focusFirstOrLast(true);\n                break;\n            case keySpace:\n            case keyEnter:\n                event.preventDefault();\n                this.getTabAnchor(event.target as AnchorTab).click();\n                break;\n            case 'ContextMenu':\n                event.preventDefault();\n                anchor = this.getTabAnchor(event.target as AnchorTab);\n                anchor.focus();\n                anchor.dispatchEvent(\n                    new KeyboardEvent('keydown', {\n                        key: event.key,\n                        bubbles: false\n                    })\n                );\n                break;\n            default:\n            // do nothing\n        }\n    };\n\n    private focusFirstOrLast(focusLast: boolean): void {\n        const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));\n        const focusableIndex = focusLast ? focusableTabs.length - 1 : 0;\n        const index = this.tabs.indexOf(focusableTabs[focusableIndex]!);\n        if (index > -1) {\n            this.focusTabByIndex(this.tabs, index);\n        }\n    }\n\n    private readonly adjustForward = (): void => {\n        const group: HTMLElement[] = this.tabs;\n        let index = 0;\n        const focusedTab = group.find(x => x === document.activeElement);\n\n        index = focusedTab ? group.indexOf(focusedTab) + 1 : 1;\n        if (index === group.length) {\n            index = 0;\n        }\n\n        while (index < group.length && group.length > 1) {\n            if (this.isFocusableElement(group[index]!)) {\n                this.focusTabByIndex(group, index);\n                break;\n            } else if (focusedTab && index === group.indexOf(focusedTab)) {\n                break;\n            } else if (index + 1 >= group.length) {\n                index = 0;\n            } else {\n                index += 1;\n            }\n        }\n    };\n\n    private readonly adjustBackward = (): void => {\n        const group: HTMLElement[] = this.tabs;\n        let index = 0;\n        const focusedTab = group.find(x => x === document.activeElement);\n\n        index = focusedTab ? group.indexOf(focusedTab) - 1 : 0;\n        index = index < 0 ? group.length - 1 : index;\n\n        while (index >= 0 && group.length > 1) {\n            if (this.isFocusableElement(group[index]!)) {\n                this.focusTabByIndex(group, index);\n                break;\n            } else if (index - 1 < 0) {\n                index = group.length - 1;\n            } else {\n                index -= 1;\n            }\n        }\n    };\n\n    private readonly focusTabByIndex = (\n        group: HTMLElement[],\n        index: number\n    ): void => {\n        const focusedTab: HTMLElement = group[index]!;\n        focusedTab.focus();\n\n        this.tabs.forEach((tab: HTMLElement) => {\n            tab.setAttribute('tabindex', tab === focusedTab ? '0' : '-1');\n            tab.setAttribute(\n                'aria-selected',\n                tab === focusedTab ? 'true' : 'false'\n            );\n        });\n\n        focusedTab.scrollIntoView({ block: 'nearest', inline: 'start' });\n    };\n\n    private getTabAnchor(tab: AnchorTab): HTMLAnchorElement {\n        return tab.shadowRoot!.querySelector('a')!;\n    }\n}\napplyMixins(AnchorTabs, StartEnd);\n\nconst nimbleAnchorTabs = AnchorTabs.compose<TabsOptions>({\n    baseName: 'anchor-tabs',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: false\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());\nexport const anchorTabsTag = 'nimble-anchor-tabs';\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-tabs.pageobject.js","sourceRoot":"","sources":["../../../../src/anchor-tabs/testing/anchor-tabs.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAEtF;;;GAGG;AACH,MAAM,OAAO,oBAAqB,SAAQ,kBAA8B;IACpE,YAAmB,WAAuB;QACtC,KAAK,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IACrC,CAAC;CACJ","sourcesContent":["import type { AnchorTabs } from '..';\nimport { anchorTabTag } from '../../anchor-tab';\nimport { TabsBasePageObject } from '../../patterns/tabs/testing/tabs-base.pageobject';\n\n/**\n * Page object for the `nimble-anchor-tabs` component to provide consistent ways\n * of querying and interacting with the component during tests.\n */\nexport class AnchorTabsPageObject extends TabsBasePageObject<AnchorTabs> {\n    public constructor(tabsElement: AnchorTabs) {\n        super(tabsElement, anchorTabTag);\n    }\n}\n"]}

package/dist/esm/label-provider/core/index.d.ts

@@ -14,6 +14,8 @@ declare const supportedLabels: {
     readonly filterSearch: import("@microsoft/fast-foundation").DesignToken<string>;
     readonly filterNoResults: import("@microsoft/fast-foundation").DesignToken<string>;
     readonly loading: import("@microsoft/fast-foundation").DesignToken<string>;
+    readonly scrollBackward: import("@microsoft/fast-foundation").DesignToken<string>;
+    readonly scrollForward: import("@microsoft/fast-foundation").DesignToken<string>;
 };
 /**
  * Core label provider for Nimble
@@ -28,6 +30,8 @@ export declare class LabelProviderCore extends LabelProviderBase<typeof supporte
     filterSearch: string | undefined;
     filterNoResults: string | undefined;
     loading: string | undefined;
+    scrollBackward: string | undefined;
+    scrollForward: string | undefined;
     protected readonly supportedLabels: {
         readonly popupDismiss: import("@microsoft/fast-foundation").DesignToken<string>;
         readonly numericDecrement: import("@microsoft/fast-foundation").DesignToken<string>;
@@ -38,6 +42,8 @@ export declare class LabelProviderCore extends LabelProviderBase<typeof supporte
         readonly filterSearch: import("@microsoft/fast-foundation").DesignToken<string>;
         readonly filterNoResults: import("@microsoft/fast-foundation").DesignToken<string>;
         readonly loading: import("@microsoft/fast-foundation").DesignToken<string>;
+        readonly scrollBackward: import("@microsoft/fast-foundation").DesignToken<string>;
+        readonly scrollForward: import("@microsoft/fast-foundation").DesignToken<string>;
     };
 }
 export declare const labelProviderCoreTag = "nimble-label-provider-core";

package/dist/esm/label-provider/core/index.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import { LabelProviderBase } from '../base';
-import { popupDismissLabel, numericDecrementLabel, numericIncrementLabel, popupIconErrorLabel, popupIconWarningLabel, popupIconInformationLabel, filterSearchLabel, filterNoResultsLabel, loadingLabel } from './label-tokens';
+import { popupDismissLabel, numericDecrementLabel, numericIncrementLabel, popupIconErrorLabel, popupIconWarningLabel, popupIconInformationLabel, filterSearchLabel, filterNoResultsLabel, loadingLabel, scrollBackwardLabel, scrollForwardLabel } from './label-tokens';
 import { styles } from '../base/styles';
 const supportedLabels = {
     popupDismiss: popupDismissLabel,
@@ -13,7 +13,9 @@ const supportedLabels = {
     popupIconInformation: popupIconInformationLabel,
     filterSearch: filterSearchLabel,
     filterNoResults: filterNoResultsLabel,
-    loading: loadingLabel
+    loading: loadingLabel,
+    scrollBackward: scrollBackwardLabel,
+    scrollForward: scrollForwardLabel
 };
 /**
  * Core label provider for Nimble
@@ -51,6 +53,12 @@ __decorate([
 __decorate([
     attr({ attribute: 'loading' })
 ], LabelProviderCore.prototype, "loading", void 0);
+__decorate([
+    attr({ attribute: 'scroll-backward' })
+], LabelProviderCore.prototype, "scrollBackward", void 0);
+__decorate([
+    attr({ attribute: 'scroll-forward' })
+], LabelProviderCore.prototype, "scrollForward", void 0);
 const nimbleLabelProviderCore = LabelProviderCore.compose({
     baseName: 'label-provider-core',
     styles

package/dist/esm/label-provider/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/core/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC,MAAM,eAAe,GAAG;IACpB,YAAY,EAAE,iBAAiB;IAC/B,gBAAgB,EAAE,qBAAqB;IACvC,gBAAgB,EAAE,qBAAqB;IACvC,cAAc,EAAE,mBAAmB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,oBAAoB;IACrC,OAAO,EAAE,YAAY;CACf,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,iBACT,SAAQ,iBAAyC;IADrD;;QA8BgC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AA3BU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;yDACE;AAGnC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;2DACE;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DACE;AAGzC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DACE;AAGpC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;kDACI;AAKvC,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACtD,QAAQ,EAAE,qBAAqB;IAC/B,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    popupDismissLabel,\n    numericDecrementLabel,\n    numericIncrementLabel,\n    popupIconErrorLabel,\n    popupIconWarningLabel,\n    popupIconInformationLabel,\n    filterSearchLabel,\n    filterNoResultsLabel,\n    loadingLabel\n} from './label-tokens';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-core': LabelProviderCore;\n    }\n}\n\nconst supportedLabels = {\n    popupDismiss: popupDismissLabel,\n    numericDecrement: numericDecrementLabel,\n    numericIncrement: numericIncrementLabel,\n    popupIconError: popupIconErrorLabel,\n    popupIconWarning: popupIconWarningLabel,\n    popupIconInformation: popupIconInformationLabel,\n    filterSearch: filterSearchLabel,\n    filterNoResults: filterNoResultsLabel,\n    loading: loadingLabel\n} as const;\n\n/**\n * Core label provider for Nimble\n */\nexport class LabelProviderCore\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'popup-dismiss' })\n    public popupDismiss: string | undefined;\n\n    @attr({ attribute: 'numeric-decrement' })\n    public numericDecrement: string | undefined;\n\n    @attr({ attribute: 'numeric-increment' })\n    public numericIncrement: string | undefined;\n\n    @attr({ attribute: 'popup-icon-error' })\n    public popupIconError: string | undefined;\n\n    @attr({ attribute: 'popup-icon-warning' })\n    public popupIconWarning: string | undefined;\n\n    @attr({ attribute: 'popup-icon-information' })\n    public popupIconInformation: string | undefined;\n\n    @attr({ attribute: 'filter-search' })\n    public filterSearch: string | undefined;\n\n    @attr({ attribute: 'filter-no-results' })\n    public filterNoResults: string | undefined;\n\n    @attr({ attribute: 'loading' })\n    public loading: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderCore = LabelProviderCore.compose({\n    baseName: 'label-provider-core',\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderCore());\nexport const labelProviderCoreTag = 'nimble-label-provider-core';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/label-provider/core/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EACH,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC,MAAM,eAAe,GAAG;IACpB,YAAY,EAAE,iBAAiB;IAC/B,gBAAgB,EAAE,qBAAqB;IACvC,gBAAgB,EAAE,qBAAqB;IACvC,cAAc,EAAE,mBAAmB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,YAAY,EAAE,iBAAiB;IAC/B,eAAe,EAAE,oBAAoB;IACrC,OAAO,EAAE,YAAY;IACrB,cAAc,EAAE,mBAAmB;IACnC,aAAa,EAAE,kBAAkB;CAC3B,CAAC;AAEX;;GAEG;AACH,MAAM,OAAO,iBACT,SAAQ,iBAAyC;IADrD;;QAoCgC,oBAAe,GAAG,eAAe,CAAC;IAClE,CAAC;CAAA;AAjCU;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;2DACG;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;yDACE;AAGnC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;2DACE;AAGrC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;+DACE;AAGzC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;uDACG;AAGjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;0DACE;AAGpC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;kDACI;AAG5B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;yDACG;AAGnC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;wDACG;AAK7C,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,OAAO,CAAC;IACtD,QAAQ,EAAE,qBAAqB;IAC/B,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,uBAAuB,EAAE,CAAC,CAAC;AACzC,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { DesignTokensFor, LabelProviderBase } from '../base';\nimport {\n    popupDismissLabel,\n    numericDecrementLabel,\n    numericIncrementLabel,\n    popupIconErrorLabel,\n    popupIconWarningLabel,\n    popupIconInformationLabel,\n    filterSearchLabel,\n    filterNoResultsLabel,\n    loadingLabel,\n    scrollBackwardLabel,\n    scrollForwardLabel\n} from './label-tokens';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-label-provider-core': LabelProviderCore;\n    }\n}\n\nconst supportedLabels = {\n    popupDismiss: popupDismissLabel,\n    numericDecrement: numericDecrementLabel,\n    numericIncrement: numericIncrementLabel,\n    popupIconError: popupIconErrorLabel,\n    popupIconWarning: popupIconWarningLabel,\n    popupIconInformation: popupIconInformationLabel,\n    filterSearch: filterSearchLabel,\n    filterNoResults: filterNoResultsLabel,\n    loading: loadingLabel,\n    scrollBackward: scrollBackwardLabel,\n    scrollForward: scrollForwardLabel\n} as const;\n\n/**\n * Core label provider for Nimble\n */\nexport class LabelProviderCore\n    extends LabelProviderBase<typeof supportedLabels>\n    implements DesignTokensFor<typeof supportedLabels> {\n    @attr({ attribute: 'popup-dismiss' })\n    public popupDismiss: string | undefined;\n\n    @attr({ attribute: 'numeric-decrement' })\n    public numericDecrement: string | undefined;\n\n    @attr({ attribute: 'numeric-increment' })\n    public numericIncrement: string | undefined;\n\n    @attr({ attribute: 'popup-icon-error' })\n    public popupIconError: string | undefined;\n\n    @attr({ attribute: 'popup-icon-warning' })\n    public popupIconWarning: string | undefined;\n\n    @attr({ attribute: 'popup-icon-information' })\n    public popupIconInformation: string | undefined;\n\n    @attr({ attribute: 'filter-search' })\n    public filterSearch: string | undefined;\n\n    @attr({ attribute: 'filter-no-results' })\n    public filterNoResults: string | undefined;\n\n    @attr({ attribute: 'loading' })\n    public loading: string | undefined;\n\n    @attr({ attribute: 'scroll-backward' })\n    public scrollBackward: string | undefined;\n\n    @attr({ attribute: 'scroll-forward' })\n    public scrollForward: string | undefined;\n\n    protected override readonly supportedLabels = supportedLabels;\n}\n\nconst nimbleLabelProviderCore = LabelProviderCore.compose({\n    baseName: 'label-provider-core',\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleLabelProviderCore());\nexport const labelProviderCoreTag = 'nimble-label-provider-core';\n"]}

package/dist/esm/label-provider/core/label-token-defaults.js

@@ -7,6 +7,8 @@ export const coreLabelDefaults = {
     popupIconInformationLabel: 'Information',
     filterSearchLabel: 'Search',
     filterNoResultsLabel: 'No items found',
-    loadingLabel: 'Loading…'
+    loadingLabel: 'Loading…',
+    scrollBackwardLabel: 'Scroll backward',
+    scrollForwardLabel: 'Scroll forward'
 };
 //# sourceMappingURL=label-token-defaults.js.map

package/dist/esm/label-provider/core/label-token-defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-token-defaults.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-token-defaults.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACtE,iBAAiB,EAAE,OAAO;IAC1B,qBAAqB,EAAE,WAAW;IAClC,qBAAqB,EAAE,WAAW;IAClC,mBAAmB,EAAE,OAAO;IAC5B,qBAAqB,EAAE,SAAS;IAChC,yBAAyB,EAAE,aAAa;IACxC,iBAAiB,EAAE,QAAQ;IAC3B,oBAAoB,EAAE,gBAAgB;IACtC,YAAY,EAAE,UAAU;CAC3B,CAAC","sourcesContent":["import type * as TokensNamespace from './label-tokens';\n\ntype TokenName = keyof typeof TokensNamespace;\n\nexport const coreLabelDefaults: { readonly [key in TokenName]: string } = {\n    popupDismissLabel: 'Close',\n    numericIncrementLabel: 'Increment',\n    numericDecrementLabel: 'Decrement',\n    popupIconErrorLabel: 'Error',\n    popupIconWarningLabel: 'Warning',\n    popupIconInformationLabel: 'Information',\n    filterSearchLabel: 'Search',\n    filterNoResultsLabel: 'No items found',\n    loadingLabel: 'Loading…'\n};\n"]}
+{"version":3,"file":"label-token-defaults.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-token-defaults.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACtE,iBAAiB,EAAE,OAAO;IAC1B,qBAAqB,EAAE,WAAW;IAClC,qBAAqB,EAAE,WAAW;IAClC,mBAAmB,EAAE,OAAO;IAC5B,qBAAqB,EAAE,SAAS;IAChC,yBAAyB,EAAE,aAAa;IACxC,iBAAiB,EAAE,QAAQ;IAC3B,oBAAoB,EAAE,gBAAgB;IACtC,YAAY,EAAE,UAAU;IACxB,mBAAmB,EAAE,iBAAiB;IACtC,kBAAkB,EAAE,gBAAgB;CACvC,CAAC","sourcesContent":["import type * as TokensNamespace from './label-tokens';\n\ntype TokenName = keyof typeof TokensNamespace;\n\nexport const coreLabelDefaults: { readonly [key in TokenName]: string } = {\n    popupDismissLabel: 'Close',\n    numericIncrementLabel: 'Increment',\n    numericDecrementLabel: 'Decrement',\n    popupIconErrorLabel: 'Error',\n    popupIconWarningLabel: 'Warning',\n    popupIconInformationLabel: 'Information',\n    filterSearchLabel: 'Search',\n    filterNoResultsLabel: 'No items found',\n    loadingLabel: 'Loading…',\n    scrollBackwardLabel: 'Scroll backward',\n    scrollForwardLabel: 'Scroll forward'\n};\n"]}

package/dist/esm/label-provider/core/label-tokens.d.ts

@@ -8,3 +8,5 @@ export declare const popupIconInformationLabel: DesignToken<string>;
 export declare const filterSearchLabel: DesignToken<string>;
 export declare const filterNoResultsLabel: DesignToken<string>;
 export declare const loadingLabel: DesignToken<string>;
+export declare const scrollBackwardLabel: DesignToken<string>;
+export declare const scrollForwardLabel: DesignToken<string>;

package/dist/esm/label-provider/core/label-tokens.js

@@ -36,4 +36,12 @@ export const loadingLabel = DesignToken.create({
     name: 'loading-label',
     cssCustomPropertyName: null
 }).withDefault(coreLabelDefaults.loadingLabel);
+export const scrollBackwardLabel = DesignToken.create({
+    name: 'scroll-backward-label',
+    cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.scrollBackwardLabel);
+export const scrollForwardLabel = DesignToken.create({
+    name: 'scroll-forward-label',
+    cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.scrollForwardLabel);
 //# sourceMappingURL=label-tokens.js.map

package/dist/esm/label-provider/core/label-tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-tokens.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC1D,IAAI,EAAE,wBAAwB;IAC9B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,0BAA0B;IAChC,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,MAAM,CAAS;IAChE,IAAI,EAAE,8BAA8B;IACpC,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC3D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,CAAS;IACnD,IAAI,EAAE,eAAe;IACrB,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import { DesignToken } from '@microsoft/fast-foundation';\nimport { coreLabelDefaults } from './label-token-defaults';\n\nexport const popupDismissLabel = DesignToken.create<string>({\n    name: 'popup-dismiss-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupDismissLabel);\n\nexport const numericDecrementLabel = DesignToken.create<string>({\n    name: 'numeric-decrement-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericDecrementLabel);\n\nexport const numericIncrementLabel = DesignToken.create<string>({\n    name: 'numeric-increment-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericIncrementLabel);\n\nexport const popupIconErrorLabel = DesignToken.create<string>({\n    name: 'popup-icon-error-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconErrorLabel);\n\nexport const popupIconWarningLabel = DesignToken.create<string>({\n    name: 'popup-icon-warning-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconWarningLabel);\n\nexport const popupIconInformationLabel = DesignToken.create<string>({\n    name: 'popup-icon-information-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconInformationLabel);\n\nexport const filterSearchLabel = DesignToken.create<string>({\n    name: 'filter-search-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterSearchLabel);\n\nexport const filterNoResultsLabel = DesignToken.create<string>({\n    name: 'filter-no-results-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterNoResultsLabel);\n\nexport const loadingLabel = DesignToken.create<string>({\n    name: 'loading-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.loadingLabel);\n"]}
+{"version":3,"file":"label-tokens.js","sourceRoot":"","sources":["../../../../src/label-provider/core/label-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC1D,IAAI,EAAE,wBAAwB;IAC9B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC5D,IAAI,EAAE,0BAA0B;IAChC,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,yBAAyB,GAAG,WAAW,CAAC,MAAM,CAAS;IAChE,IAAI,EAAE,8BAA8B;IACpC,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAM,CAAS;IACxD,IAAI,EAAE,qBAAqB;IAC3B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AAEpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC3D,IAAI,EAAE,yBAAyB;IAC/B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,CAAS;IACnD,IAAI,EAAE,eAAe;IACrB,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAAS;IAC1D,IAAI,EAAE,uBAAuB;IAC7B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC,MAAM,CAAS;IACzD,IAAI,EAAE,sBAAsB;IAC5B,qBAAqB,EAAE,IAAI;CAC9B,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import { DesignToken } from '@microsoft/fast-foundation';\nimport { coreLabelDefaults } from './label-token-defaults';\n\nexport const popupDismissLabel = DesignToken.create<string>({\n    name: 'popup-dismiss-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupDismissLabel);\n\nexport const numericDecrementLabel = DesignToken.create<string>({\n    name: 'numeric-decrement-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericDecrementLabel);\n\nexport const numericIncrementLabel = DesignToken.create<string>({\n    name: 'numeric-increment-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.numericIncrementLabel);\n\nexport const popupIconErrorLabel = DesignToken.create<string>({\n    name: 'popup-icon-error-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconErrorLabel);\n\nexport const popupIconWarningLabel = DesignToken.create<string>({\n    name: 'popup-icon-warning-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconWarningLabel);\n\nexport const popupIconInformationLabel = DesignToken.create<string>({\n    name: 'popup-icon-information-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.popupIconInformationLabel);\n\nexport const filterSearchLabel = DesignToken.create<string>({\n    name: 'filter-search-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterSearchLabel);\n\nexport const filterNoResultsLabel = DesignToken.create<string>({\n    name: 'filter-no-results-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.filterNoResultsLabel);\n\nexport const loadingLabel = DesignToken.create<string>({\n    name: 'loading-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.loadingLabel);\n\nexport const scrollBackwardLabel = DesignToken.create<string>({\n    name: 'scroll-backward-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.scrollBackwardLabel);\n\nexport const scrollForwardLabel = DesignToken.create<string>({\n    name: 'scroll-forward-label',\n    cssCustomPropertyName: null\n}).withDefault(coreLabelDefaults.scrollForwardLabel);\n"]}

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

@@ -0,0 +1,35 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
+import { smallPadding } from '../../theme-provider/design-tokens';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        flex-direction: column;
+    }
+
+    .tab-bar {
+        display: flex;
+    }
+
+    [part='start'] {
+        display: none;
+    }
+
+    .scroll-button.left {
+        margin-right: ${smallPadding};
+    }
+
+    .tablist {
+        display: flex;
+        width: max-content;
+        align-self: end;
+        overflow-x: scroll;
+        scrollbar-width: none;
+    }
+
+    .scroll-button.right {
+        margin-left: ${smallPadding};
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAElE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;wBAeG,YAAY;;;;;;;;;;;;uBAYb,YAAY;;CAElC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport { smallPadding } from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        flex-direction: column;\n    }\n\n    .tab-bar {\n        display: flex;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .scroll-button.left {\n        margin-right: ${smallPadding};\n    }\n\n    .tablist {\n        display: flex;\n        width: max-content;\n        align-self: end;\n        overflow-x: scroll;\n        scrollbar-width: none;\n    }\n\n    .scroll-button.right {\n        margin-left: ${smallPadding};\n    }\n`;\n"]}

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

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

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

@@ -0,0 +1,56 @@
+import { html, ref, slotted, when } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
+import { buttonTag } from '../../button';
+import { iconArrowExpanderLeftTag } from '../../icons/arrow-expander-left';
+import { iconArrowExpanderRightTag } from '../../icons/arrow-expander-right';
+import { ButtonAppearance } from '../button/types';
+import { scrollForwardLabel, scrollBackwardLabel } from '../../label-provider/core/label-tokens';
+// prettier-ignore
+export const template = (context, definition) => html `
+    <div
+        class="tab-bar"
+    >
+        ${startSlotTemplate(context, definition)}
+        ${when(x => x.showScrollButtons, html `
+            <${buttonTag} 
+                content-hidden
+                class="scroll-button left"
+                appearance="${ButtonAppearance.ghost}"
+                tabindex="-1"
+                @click="${x => x.onScrollLeftClick()}"
+                ${ref('leftScrollButton')}
+            >
+                ${x => scrollForwardLabel.getValueFor(x)}
+                <${iconArrowExpanderLeftTag} slot="start"></${iconArrowExpanderLeftTag}>
+            </${buttonTag}>
+        `)}
+        <div
+            class="tablist"
+            part="tablist"
+            role="tablist"
+            ${ref('tablist')}
+        >
+            <slot class="tab" name="${x => x.tabSlotName}" part="tab" ${slotted('tabs')}>
+            </slot>
+        </div>
+        ${when(x => x.showScrollButtons, html `
+            <${buttonTag}
+                content-hidden
+                class="scroll-button right"
+                appearance="${ButtonAppearance.ghost}"
+                tabindex="-1"
+                @click="${x => x.onScrollRightClick()}"
+            >
+                ${x => scrollBackwardLabel.getValueFor(x)}
+                <${iconArrowExpanderRightTag} slot="start"></${iconArrowExpanderRightTag}>
+            </${buttonTag}>
+        `)}
+        ${endSlotTemplate(context, definition)}
+    </div>
+    ${when(x => 'tabpanels' in x, html `
+        <div class="tabpanel" part="tabpanel">
+            <slot name="tabpanel" ${slotted('tabpanels')}></slot>
+        </div>
+    `)}
+`;
+//# sourceMappingURL=template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/tabs/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EACH,eAAe,EACf,iBAAiB,EAGpB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACH,kBAAkB,EAClB,mBAAmB,EACtB,MAAM,wCAAwC,CAAC;AAEhD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;;;UAIvB,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;UACtC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAW;eACzC,SAAS;;;8BAGM,gBAAgB,CAAC,KAAK;;0BAE1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;kBAClC,GAAG,CAAC,kBAAkB,CAAC;;kBAEvB,CAAC,CAAC,EAAE,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;mBACrC,wBAAwB,mBAAmB,wBAAwB;gBACtE,SAAS;SAChB,CAAC;;;;;cAKI,GAAG,CAAC,SAAS,CAAC;;sCAEU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,gBAAgB,OAAO,CAAC,MAAM,CAAC;;;UAG7E,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAW;eACzC,SAAS;;;8BAGM,gBAAgB,CAAC,KAAK;;0BAE1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;;kBAEnC,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;mBACtC,yBAAyB,mBAAmB,yBAAyB;gBACxE,SAAS;SAChB,CAAC;UACA,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;MAExC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,IAAI,CAAC,EAAE,IAAI,CAAM;;oCAER,OAAO,CAAC,WAAW,CAAC;;KAEnD,CAAC;CACL,CAAC","sourcesContent":["import { html, ref, slotted, when } from '@microsoft/fast-element';\nimport type { ViewTemplate } from '@microsoft/fast-element';\nimport {\n    endSlotTemplate,\n    startSlotTemplate,\n    FoundationElementTemplate,\n    TabsOptions\n} from '@microsoft/fast-foundation';\nimport type { Tabs } from '../../tabs';\nimport { buttonTag } from '../../button';\nimport { iconArrowExpanderLeftTag } from '../../icons/arrow-expander-left';\nimport { iconArrowExpanderRightTag } from '../../icons/arrow-expander-right';\nimport type { TabsOwner } from './types';\nimport { ButtonAppearance } from '../button/types';\nimport {\n    scrollForwardLabel,\n    scrollBackwardLabel\n} from '../../label-provider/core/label-tokens';\n\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<TabsOwner>,\nTabsOptions\n> = (context, definition) => html`\n    <div\n        class=\"tab-bar\"\n    >\n        ${startSlotTemplate(context, definition)}\n        ${when(x => x.showScrollButtons, html<TabsOwner>`\n            <${buttonTag} \n                content-hidden\n                class=\"scroll-button left\"\n                appearance=\"${ButtonAppearance.ghost}\"\n                tabindex=\"-1\"\n                @click=\"${x => x.onScrollLeftClick()}\"\n                ${ref('leftScrollButton')}\n            >\n                ${x => scrollForwardLabel.getValueFor(x)}\n                <${iconArrowExpanderLeftTag} slot=\"start\"></${iconArrowExpanderLeftTag}>\n            </${buttonTag}>\n        `)}\n        <div\n            class=\"tablist\"\n            part=\"tablist\"\n            role=\"tablist\"\n            ${ref('tablist')}\n        >\n            <slot class=\"tab\" name=\"${x => x.tabSlotName}\" part=\"tab\" ${slotted('tabs')}>\n            </slot>\n        </div>\n        ${when(x => x.showScrollButtons, html<TabsOwner>`\n            <${buttonTag}\n                content-hidden\n                class=\"scroll-button right\"\n                appearance=\"${ButtonAppearance.ghost}\"\n                tabindex=\"-1\"\n                @click=\"${x => x.onScrollRightClick()}\"\n            >\n                ${x => scrollBackwardLabel.getValueFor(x)}\n                <${iconArrowExpanderRightTag} slot=\"start\"></${iconArrowExpanderRightTag}>\n            </${buttonTag}>\n        `)}\n        ${endSlotTemplate(context, definition)}\n    </div>\n    ${when(x => 'tabpanels' in x, html<Tabs>`\n        <div class=\"tabpanel\" part=\"tabpanel\">\n            <slot name=\"tabpanel\" ${slotted('tabpanels')}></slot>\n        </div>\n    `)}\n`;\n"]}

package/dist/esm/patterns/tabs/testing/tabs-base.pageobject.d.ts

@@ -0,0 +1,21 @@
+import type { TabsOwner } from '../types';
+/**
+ * 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 declare abstract class TabsBasePageObject<T extends TabsOwner> {
+    protected readonly tabsElement: T;
+    protected readonly tabElementName: string;
+    protected readonly tabPanelElementName?: string | undefined;
+    constructor(tabsElement: T, tabElementName: string, tabPanelElementName?: string | undefined);
+    clickTab(index: number): Promise<void>;
+    pressKeyOnTab(index: number, key: string): Promise<void>;
+    setTabsWidth(width: number): Promise<void>;
+    clickScrollLeftButton(): Promise<void>;
+    clickScrollRightButton(): Promise<void>;
+    areScrollButtonsVisible(): boolean;
+    addTab(label: string): Promise<void>;
+    removeTab(index: number): Promise<void>;
+    updateTabLabel(index: number, label: string): Promise<void>;
+    getTabsViewScrollOffset(): number;
+}