From 4173c319a64f9c600b3cfbda2b90f2b336ea5f1c Mon Sep 17 00:00:00 2001
From: Jonathan Meyer <jonathan.meyer@ni.com>
Date: Wed, 23 Oct 2024 14:04:06 -0500
Subject: [PATCH 1/6] Scrollable tabs (#2440)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 🤨 Rationale

- #1509
---
 ...-51de64d0-1537-4dce-89b5-e85857542ebb.json |   7 +
 .../src/anchor-tab/styles.ts                  |   1 +
 .../src/anchor-tabs/index.ts                  |  75 ++++++++-
 .../src/anchor-tabs/styles.ts                 |  23 ---
 .../src/anchor-tabs/template.ts               |  18 ---
 .../testing/anchor-tabs.pageobject.ts         |  13 ++
 .../src/anchor-tabs/tests/anchor-tabs.spec.ts | 121 +++++++++++++-
 .../src/label-provider/core/index.ts          |  14 +-
 .../core/label-token-defaults.ts              |   4 +-
 .../src/label-provider/core/label-tokens.ts   |  10 ++
 .../src/patterns/tabs/styles.ts               |  35 +++++
 .../src/patterns/tabs/template.ts             |  70 +++++++++
 .../tabs/testing/tabs-base.pageobject.ts      | 116 ++++++++++++++
 .../src/patterns/tabs/types.ts                |   9 ++
 .../select/tests/select.foundation.spec.ts    |  33 ++--
 packages/nimble-components/src/tab/styles.ts  |   1 +
 packages/nimble-components/src/tabs/index.ts  |  86 +++++++++-
 packages/nimble-components/src/tabs/styles.ts |  24 +--
 .../src/tabs/testing/tabs.pageobject.ts       |  14 ++
 .../src/tabs/tests/tabs.spec.ts               | 147 ++++++++++++++++++
 .../src/utilities/testing/component.ts        |   9 ++
 .../anchor-tabs/anchor-tabs-matrix.stories.ts |  11 +-
 .../nimble/anchor-tabs/anchor-tabs.stories.ts |  77 ++++++++-
 .../src/nimble/patterns/tabs/types.ts         |   7 +
 .../src/nimble/tabs/tabs-matrix.stories.ts    |  13 +-
 .../storybook/src/nimble/tabs/tabs.stories.ts |  71 +++++++--
 26 files changed, 883 insertions(+), 126 deletions(-)
 create mode 100644 change/@ni-nimble-components-51de64d0-1537-4dce-89b5-e85857542ebb.json
 delete mode 100644 packages/nimble-components/src/anchor-tabs/styles.ts
 delete mode 100644 packages/nimble-components/src/anchor-tabs/template.ts
 create mode 100644 packages/nimble-components/src/anchor-tabs/testing/anchor-tabs.pageobject.ts
 create mode 100644 packages/nimble-components/src/patterns/tabs/styles.ts
 create mode 100644 packages/nimble-components/src/patterns/tabs/template.ts
 create mode 100644 packages/nimble-components/src/patterns/tabs/testing/tabs-base.pageobject.ts
 create mode 100644 packages/nimble-components/src/patterns/tabs/types.ts
 create mode 100644 packages/nimble-components/src/tabs/testing/tabs.pageobject.ts
 create mode 100644 packages/storybook/src/nimble/patterns/tabs/types.ts

diff --git a/change/@ni-nimble-components-51de64d0-1537-4dce-89b5-e85857542ebb.json b/change/@ni-nimble-components-51de64d0-1537-4dce-89b5-e85857542ebb.json
new file mode 100644
index 0000000000..9a1b241e78
--- /dev/null
+++ b/change/@ni-nimble-components-51de64d0-1537-4dce-89b5-e85857542ebb.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Scrollable tabs for Tabs and AnchorTabs.",
+  "packageName": "@ni/nimble-components",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/anchor-tab/styles.ts b/packages/nimble-components/src/anchor-tab/styles.ts
index 2cac7fdab4..2ff874da16 100644
--- a/packages/nimble-components/src/anchor-tab/styles.ts
+++ b/packages/nimble-components/src/anchor-tab/styles.ts
@@ -26,6 +26,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;
diff --git a/packages/nimble-components/src/anchor-tabs/index.ts b/packages/nimble-components/src/anchor-tabs/index.ts
index b8077de9d0..9203bf7e33 100644
--- a/packages/nimble-components/src/anchor-tabs/index.ts
+++ b/packages/nimble-components/src/anchor-tabs/index.ts
@@ -26,9 +26,10 @@ import {
     FoundationElementDefinition,
     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';
 import type { AnchorTab } from '../anchor-tab';
+import type { TabsOwner } from '../patterns/tabs/types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -41,7 +42,7 @@ export type TabsOptions = FoundationElementDefinition & StartEndOptions;
 /**
  * A nimble-styled set of anchor tabs
  */
-export class AnchorTabs extends FoundationElement {
+export class AnchorTabs extends FoundationElement implements TabsOwner {
     /**
      * The id of the active tab
      *
@@ -58,6 +59,12 @@ export class AnchorTabs extends FoundationElement {
     @observable
     public tabs!: HTMLElement[];
 
+    /**
+     * @internal
+     */
+    @observable
+    public showScrollButtons = false;
+
     /**
      * A reference to the active tab
      * @public
@@ -70,14 +77,44 @@ export class AnchorTabs extends FoundationElement {
      */
     public tablist!: HTMLElement;
 
+    /**
+     * @internal
+     */
+    public readonly leftScrollButton?: HTMLElement;
+
+    /**
+     * @internal
+     */
+    public readonly tabSlotName = 'anchortab';
+
+    private readonly tabListResizeObserver: ResizeObserver;
     private tabIds: string[] = [];
 
+    public constructor() {
+        super();
+        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
      */
     public activeidChanged(_oldValue: string, _newValue: string): void {
         if (this.$fastController.isConnected) {
             this.setTabs();
+            this.activetab?.scrollIntoView({
+                block: 'nearest',
+                inline: 'start'
+            });
         }
     }
 
@@ -91,15 +128,43 @@ export class AnchorTabs extends FoundationElement {
         }
     }
 
+    /**
+     * @internal
+     */
+    public onScrollLeftClick(): void {
+        this.tablist.scrollBy({
+            left: -this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
+    }
+
+    /**
+     * @internal
+     */
+    public onScrollRightClick(): void {
+        this.tablist.scrollBy({
+            left: this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
+    }
+
     /**
      * @internal
      */
     public override connectedCallback(): void {
         super.connectedCallback();
-
+        this.tabListResizeObserver.observe(this.tablist);
         this.tabIds = this.getTabIds();
     }
 
+    /**
+     * @internal
+     */
+    public override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.tabListResizeObserver.disconnect();
+    }
+
     private readonly isDisabledElement = (el: Element): el is HTMLElement => {
         return el.getAttribute('aria-disabled') === 'true';
     };
@@ -277,6 +342,8 @@ export class AnchorTabs extends FoundationElement {
                 tab === focusedTab ? 'true' : 'false'
             );
         });
+
+        focusedTab.scrollIntoView({ block: 'nearest', inline: 'start' });
     };
 
     private getTabAnchor(tab: AnchorTab): HTMLAnchorElement {
diff --git a/packages/nimble-components/src/anchor-tabs/styles.ts b/packages/nimble-components/src/anchor-tabs/styles.ts
deleted file mode 100644
index c7611b7221..0000000000
--- a/packages/nimble-components/src/anchor-tabs/styles.ts
+++ /dev/null
@@ -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;
-    }
-`;
diff --git a/packages/nimble-components/src/anchor-tabs/template.ts b/packages/nimble-components/src/anchor-tabs/template.ts
deleted file mode 100644
index 6edd59c2ac..0000000000
--- a/packages/nimble-components/src/anchor-tabs/template.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { html, ref, slotted, ViewTemplate } from '@microsoft/fast-element';
-import {
-    endSlotTemplate,
-    FoundationElementTemplate,
-    startSlotTemplate
-} from '@microsoft/fast-foundation';
-import type { AnchorTabs, TabsOptions } from '.';
-
-export const template: FoundationElementTemplate<
-ViewTemplate<AnchorTabs>,
-TabsOptions
-> = (context, definition) => html<AnchorTabs>`
-    ${startSlotTemplate(context, definition)}
-    <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
-        <slot name="anchortab" ${slotted('tabs')}></slot>
-    </div>
-    ${endSlotTemplate(context, definition)}
-`;
diff --git a/packages/nimble-components/src/anchor-tabs/testing/anchor-tabs.pageobject.ts b/packages/nimble-components/src/anchor-tabs/testing/anchor-tabs.pageobject.ts
new file mode 100644
index 0000000000..a8b4caade1
--- /dev/null
+++ b/packages/nimble-components/src/anchor-tabs/testing/anchor-tabs.pageobject.ts
@@ -0,0 +1,13 @@
+import type { AnchorTabs } from '..';
+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<AnchorTabs> {
+    public constructor(tabsElement: AnchorTabs) {
+        super(tabsElement, anchorTabTag);
+    }
+}
diff --git a/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts b/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts
index e8bf245730..28b32d22a3 100644
--- a/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts
+++ b/packages/nimble-components/src/anchor-tabs/tests/anchor-tabs.spec.ts
@@ -14,11 +14,13 @@ import '../../anchor-tab';
 import { anchorTabTag, type AnchorTab } from '../../anchor-tab';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { fixture, Fixture } from '../../utilities/tests/fixture';
+import { AnchorTabsPageObject } from '../testing/anchor-tabs.pageobject';
 
 describe('AnchorTabs', () => {
     let element: AnchorTabs;
     let connect: () => Promise<void>;
     let disconnect: () => Promise<void>;
+    let pageObject: AnchorTabsPageObject;
 
     function tab(index: number): AnchorTab {
         return element.children[index] as AnchorTab;
@@ -42,6 +44,7 @@ describe('AnchorTabs', () => {
         beforeEach(async () => {
             ({ element, connect, disconnect } = await setup());
             await connect();
+            pageObject = new AnchorTabsPageObject(element);
         });
 
         afterEach(async () => {
@@ -118,8 +121,7 @@ describe('AnchorTabs', () => {
             expect(tab(0).tabIndex).toBe(-1);
             expect(tab(1).tabIndex).toBe(0);
             expect(tab(2).tabIndex).toBe(-1);
-            tab(0).dispatchEvent(new Event('click'));
-            await waitForUpdatesAsync();
+            await pageObject.clickTab(0);
             expect(tab(0).tabIndex).toBe(0);
             expect(tab(1).tabIndex).toBe(-1);
             expect(tab(2).tabIndex).toBe(-1);
@@ -130,9 +132,7 @@ describe('AnchorTabs', () => {
             anchor(0).addEventListener('click', () => {
                 timesClicked += 1;
             });
-            tab(0).dispatchEvent(
-                new KeyboardEvent('keydown', { key: keySpace })
-            );
+            await pageObject.pressKeyOnTab(0, keySpace);
             await waitForUpdatesAsync();
             expect(timesClicked).toBe(1);
         });
@@ -142,9 +142,7 @@ describe('AnchorTabs', () => {
             anchor(0).addEventListener('click', () => {
                 timesClicked += 1;
             });
-            tab(0).dispatchEvent(
-                new KeyboardEvent('keydown', { key: keyEnter })
-            );
+            await pageObject.pressKeyOnTab(0, keyEnter);
             await waitForUpdatesAsync();
             expect(timesClicked).toBe(1);
         });
@@ -374,4 +372,111 @@ describe('AnchorTabs', () => {
             expect(document.activeElement).toBe(tab(0));
         });
     });
+
+    describe('scroll buttons', () => {
+        async function setup(): Promise<Fixture<AnchorTabs>> {
+            return await fixture<AnchorTabs>(
+                html`<${anchorTabsTag} activeid="tab-two">
+                    <${anchorTabTag}>Tab 1</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-two">Tab 2</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-three">Tab 3</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-four">Tab 4</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-five">Tab 5</${anchorTabTag}>
+                    <${anchorTabTag} id="tab-six">Tab 6</${anchorTabTag}>
+                </${anchorTabsTag}>`
+            );
+        }
+
+        let tabsPageObject: AnchorTabsPageObject;
+
+        beforeEach(async () => {
+            ({ element, connect, disconnect } = await setup());
+            await connect();
+            tabsPageObject = new AnchorTabsPageObject(element);
+        });
+
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('should not show scroll buttons when the tabs fit within the container', () => {
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+
+        it('should show scroll buttons when the tabs overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+        });
+
+        it('should hide scroll buttons when the tabs no longer overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            await tabsPageObject.setTabsWidth(1000);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+
+        it('should scroll left when the left scroll button is clicked', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            element.activeid = 'tab-six'; // scrolls to the last tab
+            const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset();
+            await tabsPageObject.clickScrollLeftButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBeLessThan(
+                currentScrollOffset
+            );
+        });
+
+        it('should not scroll left when the left scroll button is clicked and the first tab is active', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            await tabsPageObject.clickScrollLeftButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBe(0);
+        });
+
+        it('should scroll right when the right scroll button is clicked', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            await tabsPageObject.clickScrollRightButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBeGreaterThan(0);
+        });
+
+        it('should not scroll right when the right scroll button is clicked and the last tab is active', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            element.activeid = 'tab-six'; // scrolls to the last tab
+            const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset();
+            await tabsPageObject.clickScrollRightButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBe(
+                currentScrollOffset
+            );
+        });
+
+        it('should show scroll buttons when new tab is added and tabs overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(450);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+            await tabsPageObject.addTab('New Tab With Extremely Long Name');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+        });
+
+        it('should hide scroll buttons when tab is removed and tabs no longer overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(500);
+            await tabsPageObject.addTab('New Tab With Extremely Long Name');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+            await tabsPageObject.removeTab(6);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+
+        it('should show scroll buttons when tab label is updated and tabs overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(450);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+            await tabsPageObject.updateTabLabel(
+                0,
+                'New Tab With Extremely Long Name'
+            );
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+        });
+
+        it('should hide scroll buttons when tab label is updated and tabs no longer overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(550);
+            await tabsPageObject.addTab('New Tab With Extremely Long Name');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+            await tabsPageObject.updateTabLabel(6, 'Tab 6');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+    });
 });
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
index fcdedad25c..65c5a9667f 100644
--- a/packages/nimble-components/src/label-provider/core/index.ts
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -10,7 +10,9 @@ import {
     popupIconInformationLabel,
     filterSearchLabel,
     filterNoResultsLabel,
-    loadingLabel
+    loadingLabel,
+    scrollBackwardLabel,
+    scrollForwardLabel
 } from './label-tokens';
 import { styles } from '../base/styles';
 
@@ -29,7 +31,9 @@ const supportedLabels = {
     popupIconInformation: popupIconInformationLabel,
     filterSearch: filterSearchLabel,
     filterNoResults: filterNoResultsLabel,
-    loading: loadingLabel
+    loading: loadingLabel,
+    scrollBackward: scrollBackwardLabel,
+    scrollForward: scrollForwardLabel
 } as const;
 
 /**
@@ -65,6 +69,12 @@ export class LabelProviderCore
     @attr({ attribute: 'loading' })
     public loading: string | undefined;
 
+    @attr({ attribute: 'scroll-backward' })
+    public scrollBackward: string | undefined;
+
+    @attr({ attribute: 'scroll-forward' })
+    public scrollForward: string | undefined;
+
     protected override readonly supportedLabels = supportedLabels;
 }
 
diff --git a/packages/nimble-components/src/label-provider/core/label-token-defaults.ts b/packages/nimble-components/src/label-provider/core/label-token-defaults.ts
index 1db1cd99b6..799784b176 100644
--- a/packages/nimble-components/src/label-provider/core/label-token-defaults.ts
+++ b/packages/nimble-components/src/label-provider/core/label-token-defaults.ts
@@ -11,5 +11,7 @@ export const coreLabelDefaults: { readonly [key in TokenName]: string } = {
     popupIconInformationLabel: 'Information',
     filterSearchLabel: 'Search',
     filterNoResultsLabel: 'No items found',
-    loadingLabel: 'Loading…'
+    loadingLabel: 'Loading…',
+    scrollBackwardLabel: 'Scroll backward',
+    scrollForwardLabel: 'Scroll forward'
 };
diff --git a/packages/nimble-components/src/label-provider/core/label-tokens.ts b/packages/nimble-components/src/label-provider/core/label-tokens.ts
index 6b8f4ceec9..c55717afb8 100644
--- a/packages/nimble-components/src/label-provider/core/label-tokens.ts
+++ b/packages/nimble-components/src/label-provider/core/label-tokens.ts
@@ -45,3 +45,13 @@ export const loadingLabel = DesignToken.create<string>({
     name: 'loading-label',
     cssCustomPropertyName: null
 }).withDefault(coreLabelDefaults.loadingLabel);
+
+export const scrollBackwardLabel = DesignToken.create<string>({
+    name: 'scroll-backward-label',
+    cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.scrollBackwardLabel);
+
+export const scrollForwardLabel = DesignToken.create<string>({
+    name: 'scroll-forward-label',
+    cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.scrollForwardLabel);
diff --git a/packages/nimble-components/src/patterns/tabs/styles.ts b/packages/nimble-components/src/patterns/tabs/styles.ts
new file mode 100644
index 0000000000..a274cf8247
--- /dev/null
+++ b/packages/nimble-components/src/patterns/tabs/styles.ts
@@ -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};
+    }
+`;
diff --git a/packages/nimble-components/src/patterns/tabs/template.ts b/packages/nimble-components/src/patterns/tabs/template.ts
new file mode 100644
index 0000000000..4719279847
--- /dev/null
+++ b/packages/nimble-components/src/patterns/tabs/template.ts
@@ -0,0 +1,70 @@
+import { html, ref, slotted, when } from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
+import {
+    endSlotTemplate,
+    startSlotTemplate,
+    FoundationElementTemplate,
+    TabsOptions
+} from '@microsoft/fast-foundation';
+import type { Tabs } from '../../tabs';
+import { buttonTag } from '../../button';
+import { iconArrowExpanderLeftTag } from '../../icons/arrow-expander-left';
+import { iconArrowExpanderRightTag } from '../../icons/arrow-expander-right';
+import type { TabsOwner } from './types';
+import { ButtonAppearance } from '../button/types';
+import {
+    scrollForwardLabel,
+    scrollBackwardLabel
+} from '../../label-provider/core/label-tokens';
+
+// prettier-ignore
+export const template: FoundationElementTemplate<
+ViewTemplate<TabsOwner>,
+TabsOptions
+> = (context, definition) => html`
+    <div
+        class="tab-bar"
+    >
+        ${startSlotTemplate(context, definition)}
+        ${when(x => x.showScrollButtons, html<TabsOwner>`
+            <${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<TabsOwner>`
+            <${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<Tabs>`
+        <div class="tabpanel" part="tabpanel">
+            <slot name="tabpanel" ${slotted('tabpanels')}></slot>
+        </div>
+    `)}
+`;
diff --git a/packages/nimble-components/src/patterns/tabs/testing/tabs-base.pageobject.ts b/packages/nimble-components/src/patterns/tabs/testing/tabs-base.pageobject.ts
new file mode 100644
index 0000000000..854aeac718
--- /dev/null
+++ b/packages/nimble-components/src/patterns/tabs/testing/tabs-base.pageobject.ts
@@ -0,0 +1,116 @@
+import type { Button } from '../../../button';
+import { waitForUpdatesAsync } from '../../../testing/async-helpers';
+import { waitTimeout } from '../../../utilities/testing/component';
+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 abstract class TabsBasePageObject<T extends TabsOwner> {
+    public constructor(
+        protected readonly tabsElement: T,
+        protected readonly tabElementName: string,
+        protected readonly tabPanelElementName?: string
+    ) {}
+
+    public async clickTab(index: number): Promise<void> {
+        if (index >= this.tabsElement.tabs.length) {
+            throw new Error(`Tab with index ${index} not found`);
+        }
+        this.tabsElement.tabs[index]!.click();
+        await waitForUpdatesAsync();
+    }
+
+    public async pressKeyOnTab(index: number, key: string): Promise<void> {
+        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();
+    }
+
+    public async setTabsWidth(width: number): Promise<void> {
+        this.tabsElement.style.width = `${width}px`;
+        await waitForUpdatesAsync();
+        await waitForUpdatesAsync(); // wait for the resize observer to fire
+    }
+
+    public async clickScrollLeftButton(): Promise<void> {
+        const leftButton = this.tabsElement.shadowRoot!.querySelector<Button>(
+            '.scroll-button.left'
+        );
+        if (!leftButton) {
+            throw new Error('Scroll left button not found');
+        }
+        leftButton.click();
+        await waitForUpdatesAsync();
+        await waitTimeout(50); // let animation run
+    }
+
+    public async clickScrollRightButton(): Promise<void> {
+        const rightButton = this.tabsElement.shadowRoot!.querySelector<Button>(
+            '.scroll-button.right'
+        );
+        if (!rightButton) {
+            throw new Error('Scroll right button not found');
+        }
+        rightButton.click();
+        await waitForUpdatesAsync();
+        await waitTimeout(50); // let animation run
+    }
+
+    public areScrollButtonsVisible(): boolean {
+        return (
+            this.tabsElement.shadowRoot!.querySelectorAll('.scroll-button')
+                .length > 0
+        );
+    }
+
+    public async addTab(label: string): Promise<void> {
+        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();
+    }
+
+    public async removeTab(index: number): Promise<void> {
+        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();
+    }
+
+    public async updateTabLabel(index: number, label: string): Promise<void> {
+        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();
+    }
+
+    public getTabsViewScrollOffset(): number {
+        return this.tabsElement.shadowRoot!.querySelector('.tablist')!
+            .scrollLeft;
+    }
+}
diff --git a/packages/nimble-components/src/patterns/tabs/types.ts b/packages/nimble-components/src/patterns/tabs/types.ts
new file mode 100644
index 0000000000..5ded06036e
--- /dev/null
+++ b/packages/nimble-components/src/patterns/tabs/types.ts
@@ -0,0 +1,9 @@
+export interface TabsOwner extends HTMLElement {
+    tabs: HTMLElement[];
+    tablist: HTMLElement;
+    leftScrollButton?: HTMLElement;
+    showScrollButtons: boolean;
+    tabSlotName: string;
+    onScrollLeftClick(): void;
+    onScrollRightClick(): void;
+}
diff --git a/packages/nimble-components/src/select/tests/select.foundation.spec.ts b/packages/nimble-components/src/select/tests/select.foundation.spec.ts
index 684fb02ca8..4f74f5d04c 100644
--- a/packages/nimble-components/src/select/tests/select.foundation.spec.ts
+++ b/packages/nimble-components/src/select/tests/select.foundation.spec.ts
@@ -15,18 +15,7 @@ import { fixture } from '../../utilities/tests/fixture';
 import { template } from '../template';
 import { ListOption, listOptionTag } from '../../list-option';
 import { template as listOptionTemplate } from '../../list-option/template';
-
-/**
- * Timeout for use in async tets.
- */
-export async function timeout(ms = 0): Promise<void> {
-    await new Promise((resolve, _reject) => {
-        window.setTimeout(() => {
-            // eslint-disable-next-line no-void
-            resolve(void 0);
-        }, ms);
-    });
-}
+import { waitTimeout } from '../../utilities/testing/component';
 
 describe('Select', () => {
     const select = Select.compose({
@@ -433,7 +422,7 @@ describe('Select', () => {
                     element.addEventListener('input', () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                timeout().then(() => false)
+                waitTimeout().then(() => false)
             ]);
 
             expect(wasInput).toBeFalse();
@@ -465,7 +454,7 @@ describe('Select', () => {
                     element.addEventListener('input', () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                timeout().then(() => false)
+                waitTimeout().then(() => false)
             ]);
 
             expect(wasInput).toBeFalse();
@@ -493,7 +482,7 @@ describe('Select', () => {
                     element.addEventListener('input', () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                timeout().then(() => false)
+                waitTimeout().then(() => false)
             ]);
 
             expect(wasInput).toBeFalse();
@@ -523,7 +512,7 @@ describe('Select', () => {
                     element.addEventListener('input', () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                timeout().then(() => false)
+                waitTimeout().then(() => false)
             ]);
 
             expect(wasInput).toBeFalse();
@@ -683,7 +672,7 @@ describe('Select', () => {
                         );
                         element.dispatchEvent(arrowUpEvent);
                     }),
-                    timeout().then(() => false)
+                    waitTimeout().then(() => false)
                 ])
             ).toBeTrue();
 
@@ -699,7 +688,7 @@ describe('Select', () => {
                         );
                         element.dispatchEvent(arrowDownEvent);
                     }),
-                    timeout().then(() => false)
+                    waitTimeout().then(() => false)
                 ])
             ).toBeTrue();
 
@@ -730,7 +719,7 @@ describe('Select', () => {
                     element.addEventListener('input', () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                timeout().then(() => false)
+                waitTimeout().then(() => false)
             ]);
 
             expect(wasInput).toBeTrue();
@@ -760,7 +749,7 @@ describe('Select', () => {
                     element.addEventListener('input', () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                timeout().then(() => false)
+                waitTimeout().then(() => false)
             ]);
 
             expect(wasInput).toBeTrue();
@@ -790,7 +779,7 @@ describe('Select', () => {
                     element.addEventListener('input', () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                timeout().then(() => false)
+                waitTimeout().then(() => false)
             ]);
 
             expect(wasInput).toBeTrue();
@@ -816,7 +805,7 @@ describe('Select', () => {
                     element.addEventListener('input', () => resolve(true));
                     element.dispatchEvent(event);
                 }),
-                timeout().then(() => false)
+                waitTimeout().then(() => false)
             ]);
 
             expect(wasInput).toBeTrue();
diff --git a/packages/nimble-components/src/tab/styles.ts b/packages/nimble-components/src/tab/styles.ts
index 92dd71f80a..28db6d4bad 100644
--- a/packages/nimble-components/src/tab/styles.ts
+++ b/packages/nimble-components/src/tab/styles.ts
@@ -26,6 +26,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;
diff --git a/packages/nimble-components/src/tabs/index.ts b/packages/nimble-components/src/tabs/index.ts
index f3e07da3ad..d34a109a00 100644
--- a/packages/nimble-components/src/tabs/index.ts
+++ b/packages/nimble-components/src/tabs/index.ts
@@ -1,10 +1,12 @@
+import { observable } from '@microsoft/fast-element';
 import {
     DesignSystem,
     Tabs as FoundationTabs,
-    TabsOptions,
-    tabsTemplate as template
+    TabsOptions
 } from '@microsoft/fast-foundation';
 import { styles } from './styles';
+import { template } from '../patterns/tabs/template';
+import type { TabsOwner } from '../patterns/tabs/types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -15,11 +17,89 @@ declare global {
 /**
  * A nimble-styled tabs control
  */
-export class Tabs extends FoundationTabs {
+export class Tabs extends FoundationTabs implements TabsOwner {
+    /**
+     * @internal
+     */
+    @observable
+    public showScrollButtons = false;
+
+    /**
+     * @internal
+     */
+    public readonly tablist!: HTMLElement;
+
+    /**
+     * @internal
+     */
+    public readonly leftScrollButton?: HTMLElement;
+
+    /**
+     * @internal
+     */
+    public readonly tabSlotName = 'tab';
+
+    private readonly tabListResizeObserver: ResizeObserver;
+
     public constructor() {
         super();
         // 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
+     */
+    public override connectedCallback(): void {
+        super.connectedCallback();
+        this.tabListResizeObserver.observe(this.tablist);
+    }
+
+    /**
+     * @internal
+     */
+    public override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.tabListResizeObserver.disconnect();
+    }
+
+    /**
+     * @internal
+     */
+    public override activeidChanged(oldValue: string, newValue: string): void {
+        super.activeidChanged(oldValue, newValue);
+        this.activetab?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+
+    /**
+     * @internal
+     */
+    public onScrollLeftClick(): void {
+        this.tablist.scrollBy({
+            left: -this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
+    }
+
+    /**
+     * @internal
+     */
+    public onScrollRightClick(): void {
+        this.tablist.scrollBy({
+            left: this.tablist.clientWidth,
+            behavior: 'smooth'
+        });
     }
 }
 
diff --git a/packages/nimble-components/src/tabs/styles.ts b/packages/nimble-components/src/tabs/styles.ts
index 486e0f601f..f1702b0d25 100644
--- a/packages/nimble-components/src/tabs/styles.ts
+++ b/packages/nimble-components/src/tabs/styles.ts
@@ -1,30 +1,10 @@
 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;
     }
 `;
diff --git a/packages/nimble-components/src/tabs/testing/tabs.pageobject.ts b/packages/nimble-components/src/tabs/testing/tabs.pageobject.ts
new file mode 100644
index 0000000000..e7b9fe2b05
--- /dev/null
+++ b/packages/nimble-components/src/tabs/testing/tabs.pageobject.ts
@@ -0,0 +1,14 @@
+import type { Tabs } from '..';
+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<Tabs> {
+    public constructor(tabsElement: Tabs) {
+        super(tabsElement, tabTag, tabPanelTag);
+    }
+}
diff --git a/packages/nimble-components/src/tabs/tests/tabs.spec.ts b/packages/nimble-components/src/tabs/tests/tabs.spec.ts
index 453308cd21..4dc6edc2c6 100644
--- a/packages/nimble-components/src/tabs/tests/tabs.spec.ts
+++ b/packages/nimble-components/src/tabs/tests/tabs.spec.ts
@@ -1,7 +1,154 @@
+import { html } from '@microsoft/fast-element';
 import { Tabs, tabsTag } from '..';
+import { fixture, Fixture } from '../../utilities/tests/fixture';
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { TabsPageObject } from '../testing/tabs.pageobject';
+import { tabTag } from '../../tab';
+
+async function setup(): Promise<Fixture<Tabs>> {
+    const viewTemplate = html`
+        <${tabsTag}>
+            <${tabTag} id="1">Tab 1</${tabTag}>
+            <${tabTag} id="2">Tab 2</${tabTag}>
+            <${tabTag} id="3">Tab 3</${tabTag}>
+            <${tabTag} id="4">Tab 4</${tabTag}>
+            <${tabTag} id="5">Tab 5</${tabTag}>
+            <${tabTag} id="6">Tab 6</${tabTag}>
+            <${tabTag}-panel>Panel 1</${tabTag}-panel>
+            <${tabTag}-panel>Panel 2</${tabTag}-panel>
+            <${tabTag}-panel>Panel 3</${tabTag}-panel>
+            <${tabTag}-panel>Panel 4</${tabTag}-panel>
+            <${tabTag}-panel>Panel 5</${tabTag}-panel>
+            <${tabTag}-panel>Panel 6</${tabTag}-panel>
+        </${tabsTag}>
+    `;
+
+    return await fixture<Tabs>(viewTemplate);
+}
 
 describe('Tabs', () => {
     it('can construct an element instance', () => {
         expect(document.createElement(tabsTag)).toBeInstanceOf(Tabs);
     });
+
+    it('setting activeid should scroll the active tab into view', async () => {
+        const { element, connect, disconnect } = await setup();
+        await connect();
+        const tabsPageObject = new TabsPageObject(element);
+        await tabsPageObject.setTabsWidth(300);
+        element.activeid = '6'; // scrolls to the last tab
+        await waitForUpdatesAsync();
+        expect(tabsPageObject.getTabsViewScrollOffset()).toBeGreaterThan(0);
+
+        await disconnect();
+    });
+
+    it('clicking on a tab that is completely in view should not scroll the tablist', async () => {
+        const { element, connect, disconnect } = await setup();
+        await connect();
+        const tabsPageObject = new TabsPageObject(element);
+        await tabsPageObject.setTabsWidth(300);
+        await tabsPageObject.clickTab(2); // clicks the third tab
+        await waitForUpdatesAsync();
+        expect(tabsPageObject.getTabsViewScrollOffset()).toBe(0);
+
+        await disconnect();
+    });
+
+    describe('Scroll buttons', () => {
+        let tabsPageObject: TabsPageObject;
+        let element: Tabs;
+        let connect: () => Promise<void>;
+        let disconnect: () => Promise<void>;
+
+        beforeEach(async () => {
+            ({ element, connect, disconnect } = await setup());
+            await connect();
+            tabsPageObject = new TabsPageObject(element);
+        });
+
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('should not show scroll buttons when the tabs fit within the container', () => {
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+
+        it('should show scroll buttons when the tabs overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+        });
+
+        it('should hide scroll buttons when the tabs no longer overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(300); // first make the tabs overflow
+            await tabsPageObject.setTabsWidth(1000); // then make the tabs fit
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+
+        it('should scroll left when the left scroll button is clicked', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            element.activeid = '6'; // scrolls to the last tab
+            const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset();
+            await tabsPageObject.clickScrollLeftButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBeLessThan(
+                currentScrollOffset
+            );
+        });
+
+        it('should not scroll left when the left scroll button is clicked and the first tab is active', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            await tabsPageObject.clickScrollLeftButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBe(0);
+        });
+
+        it('should scroll right when the right scroll button is clicked', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            await tabsPageObject.clickScrollRightButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBeGreaterThan(0);
+        });
+
+        it('should not scroll right when the right scroll button is clicked and the last tab is active', async () => {
+            await tabsPageObject.setTabsWidth(300);
+            element.activeid = '6'; // scrolls to the last tab
+            const currentScrollOffset = tabsPageObject.getTabsViewScrollOffset();
+            await tabsPageObject.clickScrollRightButton();
+            expect(tabsPageObject.getTabsViewScrollOffset()).toBe(
+                currentScrollOffset
+            );
+        });
+
+        it('should show scroll buttons when new tab is added and tabs overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(450);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+            await tabsPageObject.addTab('New Tab With Extremely Long Name');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+        });
+
+        it('should hide scroll buttons when tab is removed and tabs no longer overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(500);
+            await tabsPageObject.addTab('New Tab With Extremely Long Name');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+            await tabsPageObject.removeTab(6);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+
+        it('should show scroll buttons when tab label is updated and tabs overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(450);
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+            await tabsPageObject.updateTabLabel(
+                0,
+                'New Tab With Extremely Long Name'
+            );
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+        });
+
+        it('should hide scroll buttons when tab label is updated and tabs no longer overflow the container', async () => {
+            await tabsPageObject.setTabsWidth(550);
+            await tabsPageObject.addTab('New Tab With Extremely Long Name');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeTrue();
+            await tabsPageObject.updateTabLabel(6, 'Tab 6');
+            expect(tabsPageObject.areScrollButtonsVisible()).toBeFalse();
+        });
+    });
 });
diff --git a/packages/nimble-components/src/utilities/testing/component.ts b/packages/nimble-components/src/utilities/testing/component.ts
index c9a7390e17..1c8bff39f4 100644
--- a/packages/nimble-components/src/utilities/testing/component.ts
+++ b/packages/nimble-components/src/utilities/testing/component.ts
@@ -70,3 +70,12 @@ export async function waitAnimationFrame(): Promise<void> {
         requestAnimationFrame(() => resolve());
     });
 }
+
+/**
+ * Timeout for use in async tets.
+ */
+export async function waitTimeout(ms = 0): Promise<void> {
+    await new Promise(resolve => {
+        window.setTimeout(() => resolve(undefined), ms);
+    });
+}
diff --git a/packages/storybook/src/nimble/anchor-tabs/anchor-tabs-matrix.stories.ts b/packages/storybook/src/nimble/anchor-tabs/anchor-tabs-matrix.stories.ts
index 3c8a765a02..51f616bae9 100644
--- a/packages/storybook/src/nimble/anchor-tabs/anchor-tabs-matrix.stories.ts
+++ b/packages/storybook/src/nimble/anchor-tabs/anchor-tabs-matrix.stories.ts
@@ -17,6 +17,9 @@ import { textCustomizationWrapper } from '../../utilities/text-customization';
 const tabsToolbarStates = [false, true] as const;
 type TabsToolbarState = (typeof tabsToolbarStates)[number];
 
+const widthStates = ['', '250px'] as const;
+type WidthState = (typeof widthStates)[number];
+
 const metadata: Meta = {
     title: 'Tests/Anchor Tabs',
     parameters: {
@@ -29,9 +32,10 @@ export default metadata;
 // prettier-ignore
 const component = (
     toolbar: TabsToolbarState,
-    [disabledName, disabled]: DisabledState
+    [disabledName, disabled]: DisabledState,
+    widthValue: WidthState
 ): ViewTemplate => html`
-    <${anchorTabsTag} activeid="tab1" style="padding: 15px;">
+    <${anchorTabsTag} activeid="tab1" style="padding: 15px;${widthValue ? ` width: ${widthValue};` : ''}">
         ${when(() => toolbar, html`
             <${tabsToolbarTag}>
                 <${buttonTag} appearance="ghost">Toolbar Button</${buttonTag}>
@@ -43,11 +47,12 @@ const component = (
             Tab Two ${() => disabledName}
         </${anchorTabTag}>
         <${anchorTabTag} hidden>Tab Three</${anchorTabTag}>
+        <${anchorTabTag}>Tab Four</${anchorTabTag}>
     </${anchorTabsTag}>
 `;
 
 export const anchorTabsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [tabsToolbarStates, disabledStates])
+    createMatrix(component, [tabsToolbarStates, disabledStates, widthStates])
 );
 
 export const hiddenTabs: StoryFn = createStory(
diff --git a/packages/storybook/src/nimble/anchor-tabs/anchor-tabs.stories.ts b/packages/storybook/src/nimble/anchor-tabs/anchor-tabs.stories.ts
index fcb5d84be0..379b569d27 100644
--- a/packages/storybook/src/nimble/anchor-tabs/anchor-tabs.stories.ts
+++ b/packages/storybook/src/nimble/anchor-tabs/anchor-tabs.stories.ts
@@ -1,4 +1,4 @@
-import { html, when } from '@microsoft/fast-element';
+import { html, repeat, when } from '@microsoft/fast-element';
 import type { Meta, StoryObj } from '@storybook/html';
 import { anchorTabTag } from '../../../../nimble-components/src/anchor-tab';
 import { tabsToolbarTag } from '../../../../nimble-components/src/tabs-toolbar';
@@ -10,10 +10,12 @@ import {
     disabledDescription
 } from '../../utilities/storybook';
 import { hrefDescription } from '../patterns/anchor/anchor-docs';
+import { ExampleTabsType } from '../patterns/tabs/types';
 
 interface AnchorTabsArgs {
     activeid: string;
     content: undefined;
+    tabsType: ExampleTabsType;
 }
 
 interface AnchorTabArgs {
@@ -27,6 +29,49 @@ interface ToolbarArgs {
     toolbar: boolean;
 }
 
+const simpleTabs = [
+    {
+        title: 'Google',
+        id: '1',
+        disabled: true,
+        href: 'https://www.google.com'
+    },
+    { title: 'NI', id: '2', disabled: false, href: 'https://www.ni.com' },
+    { title: 'Nimble', id: '3', disabled: false, href: 'https://nimble.ni.dev' }
+] as const;
+
+const wideTabs = [
+    {
+        title: 'Tab 1 that is too long and should probably be shorter but is not',
+        id: '1',
+        disabled: false,
+        href: 'https://nimble.ni.dev'
+    },
+    {
+        title: 'Tab 2 that is also too long but disabled',
+        id: '2',
+        disabled: true,
+        href: 'https://nimble.ni.dev'
+    },
+    { title: 'Short', id: '3', disabled: false, href: 'https://nimble.ni.dev' }
+] as const;
+
+const manyTabs: AnchorTabArgs[] = [];
+for (let i = 1; i <= 100; i++) {
+    manyTabs.push({
+        title: `Tab ${i}`,
+        id: `${i}`,
+        disabled: false,
+        href: `https://nimble.ni.dev?tabid=${i}`
+    });
+}
+
+const tabSets = {
+    [ExampleTabsType.simpleTabs]: simpleTabs,
+    [ExampleTabsType.wideTabs]: wideTabs,
+    [ExampleTabsType.manyTabs]: manyTabs
+} as const;
+
 const metadata: Meta<AnchorTabsArgs> = {
     title: 'Components/Anchor Tabs'
 };
@@ -36,9 +81,18 @@ export default metadata;
 export const anchorTabs: StoryObj<AnchorTabsArgs> = {
     render: createUserSelectedThemeStory(html`
     <${anchorTabsTag} activeid="${x => x.activeid}">
-        <${anchorTabTag} id="1" disabled href="https://www.google.com">Google</${anchorTabTag}>
-        <${anchorTabTag} id="2" href="https://www.ni.com">NI</${anchorTabTag}>
-        <${anchorTabTag} id="3" href="https://nimble.ni.dev">Nimble</${anchorTabTag}>
+        ${repeat(
+        x => tabSets[x.tabsType] as AnchorTabArgs[],
+        html<AnchorTabArgs>`
+            <${anchorTabTag}
+                ?disabled="${x => x.disabled}"
+                id="${x => x.id}"
+                href="${x => x.href}"
+            >
+                ${x => x.title}
+            </${anchorTabTag}>
+        `
+    )}
     </${anchorTabsTag}>
     `),
     argTypes: {
@@ -48,16 +102,25 @@ export const anchorTabs: StoryObj<AnchorTabsArgs> = {
             description: `The \`id\` of the \`${anchorTabTag}\` that should be indicated as currently active/selected. It is the application's responsibility to set \`activeid\` to the tab matching the currently loaded URL.`,
             table: { category: apiCategory.attributes }
         },
-        content: {
+        tabsType: {
             name: 'default',
             description:
                 'Add tabs or a toolbar by slotting them as child content in the default slot.',
-            control: false,
+            options: Object.values(ExampleTabsType),
+            control: {
+                type: 'radio',
+                labels: {
+                    [ExampleTabsType.simpleTabs]: 'Simple tabs',
+                    [ExampleTabsType.manyTabs]: 'Many tabs',
+                    [ExampleTabsType.wideTabs]: 'Wide tabs'
+                }
+            },
             table: { category: apiCategory.slots }
         }
     },
     args: {
-        activeid: 'None'
+        activeid: 'None',
+        tabsType: ExampleTabsType.simpleTabs
     }
 };
 
diff --git a/packages/storybook/src/nimble/patterns/tabs/types.ts b/packages/storybook/src/nimble/patterns/tabs/types.ts
new file mode 100644
index 0000000000..70dd81e121
--- /dev/null
+++ b/packages/storybook/src/nimble/patterns/tabs/types.ts
@@ -0,0 +1,7 @@
+export const ExampleTabsType = {
+    simpleTabs: 'SimpleTabs',
+    manyTabs: 'ManyTabs',
+    wideTabs: 'WideTabs'
+} as const;
+export type ExampleTabsType =
+    (typeof ExampleTabsType)[keyof typeof ExampleTabsType];
diff --git a/packages/storybook/src/nimble/tabs/tabs-matrix.stories.ts b/packages/storybook/src/nimble/tabs/tabs-matrix.stories.ts
index 9e076bed91..47038c88f2 100644
--- a/packages/storybook/src/nimble/tabs/tabs-matrix.stories.ts
+++ b/packages/storybook/src/nimble/tabs/tabs-matrix.stories.ts
@@ -28,12 +28,17 @@ const metadata: Meta = {
 
 export default metadata;
 
+const widthStates = ['', '250px'] as const;
+type WidthState = (typeof widthStates)[number];
+
 // prettier-ignore
 const component = (
     toolbar: TabsToolbarState,
-    [disabledName, disabled]: DisabledState
+    [disabledName, disabled]: DisabledState,
+    widthValue: WidthState
+
 ): ViewTemplate => html`
-    <${tabsTag} style="padding: 15px;">
+    <${tabsTag} style="padding: 15px;${widthValue ? ` width: ${widthValue};` : ''}">
         ${when(() => toolbar, html`
             <${tabsToolbarTag}>
                 <${buttonTag} appearance="ghost">Toolbar Button</${buttonTag}>
@@ -45,14 +50,16 @@ const component = (
             Tab Two ${() => disabledName}
         </${tabTag}>
         <${tabTag} hidden>Tab Three</${tabTag}>
+        <${tabTag}>Tab Four</${tabTag}>
         <${tabPanelTag}>Tab content one</${tabPanelTag}>
         <${tabPanelTag}>Tab content two</${tabPanelTag}>
         <${tabPanelTag}>Tab content three</${tabPanelTag}>
+        <${tabPanelTag}>Tab content four</${tabPanelTag}>
     </${tabsTag}>
 `;
 
 export const tabsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [tabsToolbarStates, disabledStates])
+    createMatrix(component, [tabsToolbarStates, disabledStates, widthStates])
 );
 
 export const hiddenTabs: StoryFn = createStory(
diff --git a/packages/storybook/src/nimble/tabs/tabs.stories.ts b/packages/storybook/src/nimble/tabs/tabs.stories.ts
index ac5de50f44..4384ba58c9 100644
--- a/packages/storybook/src/nimble/tabs/tabs.stories.ts
+++ b/packages/storybook/src/nimble/tabs/tabs.stories.ts
@@ -1,4 +1,4 @@
-import { html, when } from '@microsoft/fast-element';
+import { html, repeat, when } from '@microsoft/fast-element';
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { HtmlRenderer, Meta, StoryObj } from '@storybook/html';
 import { buttonTag } from '../../../../nimble-components/src/button';
@@ -11,11 +11,13 @@ import {
     createUserSelectedThemeStory,
     disabledDescription
 } from '../../utilities/storybook';
+import { ExampleTabsType } from '../patterns/tabs/types';
 
 interface TabsArgs {
     activeid: string;
     content: undefined;
     change: undefined;
+    tabsType: ExampleTabsType;
 }
 
 interface TabArgs {
@@ -42,18 +44,58 @@ const metadata: Meta<TabsArgs> = {
     }
 };
 
+const simpleTabs = [
+    { title: 'Tab 1', id: '1', disabled: false },
+    { title: 'Tab 2', id: '2', disabled: true },
+    { title: 'Tab 3', id: '3', disabled: false }
+] as const;
+
+const wideTabs = [
+    {
+        title: 'Tab 1 that is too long and should probably be shorter but is not',
+        id: '1',
+        disabled: false
+    },
+    {
+        title: 'Tab 2 that is also too long but disabled',
+        id: '2',
+        disabled: true
+    },
+    { title: 'Short', id: '3', disabled: false }
+] as const;
+
+const manyTabs: TabArgs[] = [];
+for (let i = 1; i <= 100; i++) {
+    manyTabs.push({
+        title: `Tab ${i}`,
+        id: `${i}`,
+        disabled: false
+    });
+}
+
+const tabSets = {
+    [ExampleTabsType.simpleTabs]: simpleTabs,
+    [ExampleTabsType.wideTabs]: wideTabs,
+    [ExampleTabsType.manyTabs]: manyTabs
+} as const;
+
 export default metadata;
 
 export const tabs: StoryObj<TabsArgs> = {
     // prettier-ignore
     render: createUserSelectedThemeStory(html`
         <${tabsTag} activeid="${x => x.activeid}">
-            <${tabTag} id="1" disabled">Tab One</${tabTag}>
-            <${tabTag} id="2">Tab Two</${tabTag}>
-            <${tabTag} id="3">Tab Three</${tabTag}>
-            <${tabPanelTag}>Content of the first tab</${tabPanelTag}>
-            <${tabPanelTag}>Content of the second tab</${tabPanelTag}>
-            <${tabPanelTag}>Content of the third tab</${tabPanelTag}>
+        ${repeat(x => (tabSets[x.tabsType] as TabArgs[]), html<TabArgs>`
+            <${tabTag}
+                ?disabled="${x => x.disabled}"
+                id="${x => x.id}"
+            >
+                ${x => x.title}
+            </${tabTag}>
+        `)}
+        ${repeat(x => (tabSets[x.tabsType] as TabArgs[]), html<TabArgs>`
+            <${tabPanelTag}>Content of tab ${x => x.id}</${tabPanelTag}>
+        `, { positioning: true })}
         </${tabsTag}>
     `),
     argTypes: {
@@ -63,11 +105,19 @@ export const tabs: StoryObj<TabsArgs> = {
             description: `The \`id\` of the \`${tabTag}\` that should be indicated as currently active/selected.`,
             table: { category: apiCategory.attributes }
         },
-        content: {
+        tabsType: {
             name: 'default',
             description:
                 'Add tabs, tab panels, or a toolbar by slotting them as child content in the default slot.',
-            control: false,
+            options: Object.values(ExampleTabsType),
+            control: {
+                type: 'radio',
+                labels: {
+                    [ExampleTabsType.simpleTabs]: 'Simple tabs',
+                    [ExampleTabsType.manyTabs]: 'Many tabs',
+                    [ExampleTabsType.wideTabs]: 'Wide tabs'
+                }
+            },
             table: { category: apiCategory.slots }
         },
         change: {
@@ -77,7 +127,8 @@ export const tabs: StoryObj<TabsArgs> = {
         }
     },
     args: {
-        activeid: '1'
+        activeid: '1',
+        tabsType: ExampleTabsType.simpleTabs
     }
 };
 

From 6c1979e12fe9ce23479e369bc7c3ac127d649fc5 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 23 Oct 2024 14:20:53 -0500
Subject: [PATCH 2/6] applying package updates [skip ci]

---
 ...-51de64d0-1537-4dce-89b5-e85857542ebb.json |  7 ------
 package-lock.json                             | 22 +++++++++----------
 .../nimble-angular/CHANGELOG.json             | 15 +++++++++++++
 .../nimble-angular/CHANGELOG.md               | 10 ++++++++-
 .../nimble-angular/package.json               |  4 ++--
 .../spright-angular/CHANGELOG.json            | 15 +++++++++++++
 .../spright-angular/CHANGELOG.md              | 10 ++++++++-
 .../spright-angular/package.json              |  4 ++--
 .../NimbleBlazor/CHANGELOG.json               | 15 +++++++++++++
 .../NimbleBlazor/CHANGELOG.md                 | 10 ++++++++-
 .../NimbleBlazor/package.json                 |  4 ++--
 .../SprightBlazor/CHANGELOG.json              | 15 +++++++++++++
 .../SprightBlazor/CHANGELOG.md                | 10 ++++++++-
 .../SprightBlazor/package.json                |  4 ++--
 packages/nimble-components/CHANGELOG.json     | 15 +++++++++++++
 packages/nimble-components/CHANGELOG.md       | 10 ++++++++-
 packages/nimble-components/package.json       |  2 +-
 packages/spright-components/CHANGELOG.json    | 15 +++++++++++++
 packages/spright-components/CHANGELOG.md      | 10 ++++++++-
 packages/spright-components/package.json      |  4 ++--
 20 files changed, 166 insertions(+), 35 deletions(-)
 delete mode 100644 change/@ni-nimble-components-51de64d0-1537-4dce-89b5-e85857542ebb.json

diff --git a/change/@ni-nimble-components-51de64d0-1537-4dce-89b5-e85857542ebb.json b/change/@ni-nimble-components-51de64d0-1537-4dce-89b5-e85857542ebb.json
deleted file mode 100644
index 9a1b241e78..0000000000
--- a/change/@ni-nimble-components-51de64d0-1537-4dce-89b5-e85857542ebb.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "Scrollable tabs for Tabs and AnchorTabs.",
-  "packageName": "@ni/nimble-components",
-  "email": "26874831+atmgrifter00@users.noreply.github.com",
-  "dependentChangeType": "patch"
-}
diff --git a/package-lock.json b/package-lock.json
index 9fa6104791..2602c318ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28037,7 +28037,7 @@
     },
     "packages/angular-workspace/nimble-angular": {
       "name": "@ni/nimble-angular",
-      "version": "28.3.3",
+      "version": "28.3.4",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.2.0"
@@ -28048,12 +28048,12 @@
         "@angular/forms": "^17.3.12",
         "@angular/localize": "^17.3.12",
         "@angular/router": "^17.3.12",
-        "@ni/nimble-components": "^32.4.1"
+        "@ni/nimble-components": "^32.5.0"
       }
     },
     "packages/angular-workspace/spright-angular": {
       "name": "@ni/spright-angular",
-      "version": "5.1.15",
+      "version": "5.1.16",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.2.0"
@@ -28061,7 +28061,7 @@
       "peerDependencies": {
         "@angular/common": "^17.3.12",
         "@angular/core": "^17.3.12",
-        "@ni/spright-components": "^4.1.15"
+        "@ni/spright-components": "^4.1.16"
       }
     },
     "packages/blazor-workspace": {
@@ -28082,10 +28082,10 @@
     },
     "packages/blazor-workspace/NimbleBlazor": {
       "name": "@ni/nimble-blazor",
-      "version": "18.3.3",
+      "version": "18.3.4",
       "license": "MIT",
       "peerDependencies": {
-        "@ni/nimble-components": "^32.4.1",
+        "@ni/nimble-components": "^32.5.0",
         "@ni/nimble-tokens": "^8.4.0",
         "cross-env": "^7.0.3",
         "rimraf": "^6.0.0"
@@ -28156,10 +28156,10 @@
     },
     "packages/blazor-workspace/SprightBlazor": {
       "name": "@ni/spright-blazor",
-      "version": "2.1.15",
+      "version": "2.1.16",
       "license": "MIT",
       "peerDependencies": {
-        "@ni/spright-components": "^4.1.15",
+        "@ni/spright-components": "^4.1.16",
         "cross-env": "^7.0.3",
         "rimraf": "^6.0.0"
       }
@@ -28193,7 +28193,7 @@
     },
     "packages/nimble-components": {
       "name": "@ni/nimble-components",
-      "version": "32.4.1",
+      "version": "32.5.0",
       "license": "MIT",
       "dependencies": {
         "@microsoft/fast-colors": "^5.3.1",
@@ -28312,12 +28312,12 @@
     },
     "packages/spright-components": {
       "name": "@ni/spright-components",
-      "version": "4.1.15",
+      "version": "4.1.16",
       "license": "MIT",
       "dependencies": {
         "@microsoft/fast-element": "^1.12.0",
         "@microsoft/fast-foundation": "^2.49.6",
-        "@ni/nimble-components": "^32.4.1",
+        "@ni/nimble-components": "^32.5.0",
         "tslib": "^2.2.0"
       },
       "devDependencies": {
diff --git a/packages/angular-workspace/nimble-angular/CHANGELOG.json b/packages/angular-workspace/nimble-angular/CHANGELOG.json
index d40813d3c9..6ba3483b5c 100644
--- a/packages/angular-workspace/nimble-angular/CHANGELOG.json
+++ b/packages/angular-workspace/nimble-angular/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Wed, 23 Oct 2024 19:20:53 GMT",
+      "version": "28.3.4",
+      "tag": "@ni/nimble-angular_v28.3.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v32.5.0",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 13:33:55 GMT",
       "version": "28.3.3",
diff --git a/packages/angular-workspace/nimble-angular/CHANGELOG.md b/packages/angular-workspace/nimble-angular/CHANGELOG.md
index d1244f64f7..095de81134 100644
--- a/packages/angular-workspace/nimble-angular/CHANGELOG.md
+++ b/packages/angular-workspace/nimble-angular/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-angular
 
-<!-- This log was last generated on Wed, 23 Oct 2024 13:33:55 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 28.3.4
+
+Wed, 23 Oct 2024 19:20:53 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v32.5.0
+
 ## 28.3.3
 
 Wed, 23 Oct 2024 13:33:55 GMT
diff --git a/packages/angular-workspace/nimble-angular/package.json b/packages/angular-workspace/nimble-angular/package.json
index 6f4e1c18ca..5500e7774d 100644
--- a/packages/angular-workspace/nimble-angular/package.json
+++ b/packages/angular-workspace/nimble-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "28.3.3",
+  "version": "28.3.4",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "npm run invoke-publish:setup && cd ../dist/nimble-angular && npm publish",
@@ -32,7 +32,7 @@
     "@angular/forms": "^17.3.12",
     "@angular/localize": "^17.3.12",
     "@angular/router": "^17.3.12",
-    "@ni/nimble-components": "^32.4.1"
+    "@ni/nimble-components": "^32.5.0"
   },
   "dependencies": {
     "tslib": "^2.2.0"
diff --git a/packages/angular-workspace/spright-angular/CHANGELOG.json b/packages/angular-workspace/spright-angular/CHANGELOG.json
index b3127ac7b0..916a313c00 100644
--- a/packages/angular-workspace/spright-angular/CHANGELOG.json
+++ b/packages/angular-workspace/spright-angular/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/spright-angular",
   "entries": [
+    {
+      "date": "Wed, 23 Oct 2024 19:20:53 GMT",
+      "version": "5.1.16",
+      "tag": "@ni/spright-angular_v5.1.16",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/spright-angular",
+            "comment": "Bump @ni/spright-components to v4.1.16",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 13:33:55 GMT",
       "version": "5.1.15",
diff --git a/packages/angular-workspace/spright-angular/CHANGELOG.md b/packages/angular-workspace/spright-angular/CHANGELOG.md
index 1a882879d1..05671140ca 100644
--- a/packages/angular-workspace/spright-angular/CHANGELOG.md
+++ b/packages/angular-workspace/spright-angular/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/spright-angular
 
-<!-- This log was last generated on Wed, 23 Oct 2024 13:33:55 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 5.1.16
+
+Wed, 23 Oct 2024 19:20:53 GMT
+
+### Patches
+
+- Bump @ni/spright-components to v4.1.16
+
 ## 5.1.15
 
 Wed, 23 Oct 2024 13:33:55 GMT
diff --git a/packages/angular-workspace/spright-angular/package.json b/packages/angular-workspace/spright-angular/package.json
index 699e126890..de5bdb951e 100644
--- a/packages/angular-workspace/spright-angular/package.json
+++ b/packages/angular-workspace/spright-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-angular",
-  "version": "5.1.15",
+  "version": "5.1.16",
   "description": "Angular components for NI Spright",
   "scripts": {
     "invoke-publish": "npm run invoke-publish:setup && cd ../dist/spright-angular && npm publish",
@@ -24,7 +24,7 @@
   "peerDependencies": {
     "@angular/common": "^17.3.12",
     "@angular/core": "^17.3.12",
-    "@ni/spright-components": "^4.1.15"
+    "@ni/spright-components": "^4.1.16"
   },
   "dependencies": {
     "tslib": "^2.2.0"
diff --git a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
index 3d569a0546..5f45dd589e 100644
--- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
+++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-blazor",
   "entries": [
+    {
+      "date": "Wed, 23 Oct 2024 19:20:53 GMT",
+      "version": "18.3.4",
+      "tag": "@ni/nimble-blazor_v18.3.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-blazor",
+            "comment": "Bump @ni/nimble-components to v32.5.0",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 13:33:55 GMT",
       "version": "18.3.3",
diff --git a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
index 42bdf0e32e..05d319df1c 100644
--- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
+++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-blazor
 
-<!-- This log was last generated on Wed, 23 Oct 2024 13:33:55 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 18.3.4
+
+Wed, 23 Oct 2024 19:20:53 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v32.5.0
+
 ## 18.3.3
 
 Wed, 23 Oct 2024 13:33:55 GMT
diff --git a/packages/blazor-workspace/NimbleBlazor/package.json b/packages/blazor-workspace/NimbleBlazor/package.json
index 09afe71200..4595b447c3 100644
--- a/packages/blazor-workspace/NimbleBlazor/package.json
+++ b/packages/blazor-workspace/NimbleBlazor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-blazor",
-  "version": "18.3.3",
+  "version": "18.3.4",
   "description": "Blazor components for the NI Nimble Design System",
   "scripts": {
     "pack": "cross-env-shell dotnet pack -c Release -p:PackageVersion=$npm_package_version --output ../dist",
@@ -25,7 +25,7 @@
     "!*"
   ],
   "peerDependencies": {
-    "@ni/nimble-components": "^32.4.1",
+    "@ni/nimble-components": "^32.5.0",
     "@ni/nimble-tokens": "^8.4.0",
     "cross-env": "^7.0.3",
     "rimraf": "^6.0.0"
diff --git a/packages/blazor-workspace/SprightBlazor/CHANGELOG.json b/packages/blazor-workspace/SprightBlazor/CHANGELOG.json
index cfc2126144..97439d8f8d 100644
--- a/packages/blazor-workspace/SprightBlazor/CHANGELOG.json
+++ b/packages/blazor-workspace/SprightBlazor/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/spright-blazor",
   "entries": [
+    {
+      "date": "Wed, 23 Oct 2024 19:20:53 GMT",
+      "version": "2.1.16",
+      "tag": "@ni/spright-blazor_v2.1.16",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/spright-blazor",
+            "comment": "Bump @ni/spright-components to v4.1.16",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 13:33:55 GMT",
       "version": "2.1.15",
diff --git a/packages/blazor-workspace/SprightBlazor/CHANGELOG.md b/packages/blazor-workspace/SprightBlazor/CHANGELOG.md
index b81101c98c..9b223a49a0 100644
--- a/packages/blazor-workspace/SprightBlazor/CHANGELOG.md
+++ b/packages/blazor-workspace/SprightBlazor/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/spright-blazor
 
-<!-- This log was last generated on Wed, 23 Oct 2024 13:33:55 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 2.1.16
+
+Wed, 23 Oct 2024 19:20:53 GMT
+
+### Patches
+
+- Bump @ni/spright-components to v4.1.16
+
 ## 2.1.15
 
 Wed, 23 Oct 2024 13:33:55 GMT
diff --git a/packages/blazor-workspace/SprightBlazor/package.json b/packages/blazor-workspace/SprightBlazor/package.json
index 37c8b27f20..0033ed1f62 100644
--- a/packages/blazor-workspace/SprightBlazor/package.json
+++ b/packages/blazor-workspace/SprightBlazor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-blazor",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "description": "Blazor components for Spright",
   "scripts": {
     "pack": "cross-env-shell dotnet pack -c Release -p:PackageVersion=$npm_package_version --output ../dist",
@@ -25,7 +25,7 @@
     "!*"
   ],
   "peerDependencies": {
-    "@ni/spright-components": "^4.1.15",
+    "@ni/spright-components": "^4.1.16",
     "cross-env": "^7.0.3",
     "rimraf": "^6.0.0"
   }
diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json
index 31764cf234..e25a2af8d7 100644
--- a/packages/nimble-components/CHANGELOG.json
+++ b/packages/nimble-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-components",
   "entries": [
+    {
+      "date": "Wed, 23 Oct 2024 19:20:53 GMT",
+      "version": "32.5.0",
+      "tag": "@ni/nimble-components_v32.5.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "26874831+atmgrifter00@users.noreply.github.com",
+            "package": "@ni/nimble-components",
+            "commit": "4173c319a64f9c600b3cfbda2b90f2b336ea5f1c",
+            "comment": "Scrollable tabs for Tabs and AnchorTabs."
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 13:33:54 GMT",
       "version": "32.4.1",
diff --git a/packages/nimble-components/CHANGELOG.md b/packages/nimble-components/CHANGELOG.md
index ad2e296e39..0bd2beaa8e 100644
--- a/packages/nimble-components/CHANGELOG.md
+++ b/packages/nimble-components/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-components
 
-<!-- This log was last generated on Wed, 23 Oct 2024 13:33:54 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 32.5.0
+
+Wed, 23 Oct 2024 19:20:53 GMT
+
+### Minor changes
+
+- Scrollable tabs for Tabs and AnchorTabs. ([ni/nimble@4173c31](https://github.com/ni/nimble/commit/4173c319a64f9c600b3cfbda2b90f2b336ea5f1c))
+
 ## 32.4.1
 
 Wed, 23 Oct 2024 13:33:54 GMT
diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json
index 12ea81743b..5e4f9dba2f 100644
--- a/packages/nimble-components/package.json
+++ b/packages/nimble-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "32.4.1",
+  "version": "32.5.0",
   "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",
diff --git a/packages/spright-components/CHANGELOG.json b/packages/spright-components/CHANGELOG.json
index 98e655e3fb..ea3dacc6e9 100644
--- a/packages/spright-components/CHANGELOG.json
+++ b/packages/spright-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/spright-components",
   "entries": [
+    {
+      "date": "Wed, 23 Oct 2024 19:20:53 GMT",
+      "version": "4.1.16",
+      "tag": "@ni/spright-components_v4.1.16",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/spright-components",
+            "comment": "Bump @ni/nimble-components to v32.5.0",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 13:33:54 GMT",
       "version": "4.1.15",
diff --git a/packages/spright-components/CHANGELOG.md b/packages/spright-components/CHANGELOG.md
index cfb59a78f1..41783073a8 100644
--- a/packages/spright-components/CHANGELOG.md
+++ b/packages/spright-components/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/spright-components
 
-<!-- This log was last generated on Wed, 23 Oct 2024 13:33:54 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 4.1.16
+
+Wed, 23 Oct 2024 19:20:53 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v32.5.0
+
 ## 4.1.15
 
 Wed, 23 Oct 2024 13:33:54 GMT
diff --git a/packages/spright-components/package.json b/packages/spright-components/package.json
index cdfd72233d..d4877d9cf4 100644
--- a/packages/spright-components/package.json
+++ b/packages/spright-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-components",
-  "version": "4.1.15",
+  "version": "4.1.16",
   "description": "NI Spright Components",
   "scripts": {
     "build": "npm run build-components && npm run bundle-components",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@microsoft/fast-element": "^1.12.0",
     "@microsoft/fast-foundation": "^2.49.6",
-    "@ni/nimble-components": "^32.4.1",
+    "@ni/nimble-components": "^32.5.0",
     "tslib": "^2.2.0"
   },
   "devDependencies": {

From 868a8a67780160f0a224fbc62a27511ed97db2df Mon Sep 17 00:00:00 2001
From: Jonathan Meyer <jonathan.meyer@ni.com>
Date: Thu, 24 Oct 2024 07:18:41 -0500
Subject: [PATCH 3/6] Angular and Blazor label provider changes for scrollable
 tabs. (#2447)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 🤨 Rationale

- #1509

## 👩‍💻 Implementation

Standard boiler-plate implementation for exposing label provider
attributes to Angular/Blazor.

## 🧪 Testing

Typical boiler-plate unit tests.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [ ] I have updated the project documentation to reflect my changes or
determined no changes are needed.
---
 ...-7ed58bee-595b-437c-93a1-2ca90af348e5.json |   7 ++
 ...-75a260ae-162f-44e8-b558-702e359c9445.json |   7 ++
 ...l-provider-core-with-defaults.directive.ts |   2 +
 .../nimble-label-provider-core.directive.ts   |  16 +++
 ...vider-core-with-defaults.directive.spec.ts |   6 +-
 ...mble-label-provider-core.directive.spec.ts | 114 ++++++++++++++++++
 .../Components/NimbleLabelProviderCore.razor  |   2 +
 .../NimbleLabelProviderCore.razor.cs          |   6 +
 .../NimbleLabelProviderCoreTests.cs           |   2 +
 9 files changed, 161 insertions(+), 1 deletion(-)
 create mode 100644 change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json
 create mode 100644 change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json

diff --git a/change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json b/change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json
new file mode 100644
index 0000000000..55f6080106
--- /dev/null
+++ b/change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Angular and Blazor label provider changes for scrollable tabs.",
+  "packageName": "@ni/nimble-angular",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json b/change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json
new file mode 100644
index 0000000000..59eba2a9e4
--- /dev/null
+++ b/change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Angular and Blazor label provider changes for scrollable tabs.",
+  "packageName": "@ni/nimble-blazor",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/angular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts b/packages/angular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts
index 69607f2442..42bedfb967 100644
--- a/packages/angular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts
+++ b/packages/angular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts
@@ -21,5 +21,7 @@ export class NimbleLabelProviderCoreWithDefaultsDirective {
         this.elementRef.nativeElement.filterSearch = $localize`:Nimble select - search items|:Search`;
         this.elementRef.nativeElement.filterNoResults = $localize`:Nimble select - no items|:No items found`;
         this.elementRef.nativeElement.loading = $localize`:Nimble loading - loading|:Loading…`;
+        this.elementRef.nativeElement.scrollBackward = $localize`:Nimble scroll backward|:Scroll backward`;
+        this.elementRef.nativeElement.scrollForward = $localize`:Nimble scroll forward|:Scroll forward`;
     }
 }
\ No newline at end of file
diff --git a/packages/angular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts b/packages/angular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts
index eff2c01cd6..b3504c2c98 100644
--- a/packages/angular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts
+++ b/packages/angular-workspace/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts
@@ -85,4 +85,20 @@ export class NimbleLabelProviderCoreDirective {
     @Input('loading') public set loading(value: string | undefined) {
         this.renderer.setProperty(this.elementRef.nativeElement, 'loading', value);
     }
+
+    public get scrollBackward(): string | undefined {
+        return this.elementRef.nativeElement.scrollBackward;
+    }
+
+    @Input('scrollBackward') public set scrollBackward(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'scrollBackward', value);
+    }
+
+    public get scrollForward(): string | undefined {
+        return this.elementRef.nativeElement.scrollForward;
+    }
+
+    @Input('scrollForward') public set scrollForward(value: string | undefined) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'scrollForward', value);
+    }
 }
\ No newline at end of file
diff --git a/packages/angular-workspace/nimble-angular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts b/packages/angular-workspace/nimble-angular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts
index 759303c736..9e72b59513 100644
--- a/packages/angular-workspace/nimble-angular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts
+++ b/packages/angular-workspace/nimble-angular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts
@@ -36,7 +36,9 @@ describe('Nimble LabelProviderCore withDefaults directive', () => {
             [computeMsgId('Information', 'Nimble popup icon - information')]: 'Translated information',
             [computeMsgId('Search', 'Nimble select - search items')]: 'Translated search',
             [computeMsgId('No items found', 'Nimble select - no items')]: 'Translated no items found',
-            [computeMsgId('Loading…', 'Nimble loading - loading')]: 'Translated loading'
+            [computeMsgId('Loading…', 'Nimble loading - loading')]: 'Translated loading',
+            [computeMsgId('Scroll backward', 'Nimble scroll backward')]: 'Translated scroll backward',
+            [computeMsgId('Scroll forward', 'Nimble scroll forward')]: 'Translated scroll forward'
         });
         const fixture = TestBed.createComponent(TestHostComponent);
         const testHostComponent = fixture.componentInstance;
@@ -54,5 +56,7 @@ describe('Nimble LabelProviderCore withDefaults directive', () => {
         expect(labelProvider.filterSearch).toBe('Translated search');
         expect(labelProvider.filterNoResults).toBe('Translated no items found');
         expect(labelProvider.loading).toBe('Translated loading');
+        expect(labelProvider.scrollBackward).toBe('Translated scroll backward');
+        expect(labelProvider.scrollForward).toBe('Translated scroll forward');
     });
 });
diff --git a/packages/angular-workspace/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts b/packages/angular-workspace/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts
index 3249e7e4e4..420a973d07 100644
--- a/packages/angular-workspace/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts
+++ b/packages/angular-workspace/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts
@@ -12,6 +12,9 @@ describe('Nimble Label Provider Core', () => {
     const label6 = 'String 6';
     const label7 = 'String 7';
     const label8 = 'String 8';
+    const label9 = 'String 9';
+    const label10 = 'String 10';
+    const label11 = 'String `11';
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -88,6 +91,21 @@ describe('Nimble Label Provider Core', () => {
             expect(directive.filterNoResults).toBeUndefined();
             expect(nativeElement.filterNoResults).toBeUndefined();
         });
+
+        it('has expected defaults for loading', () => {
+            expect(directive.loading).toBeUndefined();
+            expect(nativeElement.loading).toBeUndefined();
+        });
+
+        it('has expected defaults for scrollBackward', () => {
+            expect(directive.scrollBackward).toBeUndefined();
+            expect(nativeElement.scrollBackward).toBeUndefined();
+        });
+
+        it('has expected defaults for scrollForward', () => {
+            expect(directive.scrollForward).toBeUndefined();
+            expect(nativeElement.scrollForward).toBeUndefined();
+        });
     });
 
     describe('with template string values', () => {
@@ -102,6 +120,9 @@ describe('Nimble Label Provider Core', () => {
                     popup-icon-information="${label6}"
                     filter-search="${label7}"
                     filter-no-results="${label8}"
+                    loading="${label9}"
+                    scroll-backward="${label10}"
+                    scroll-forward="${label11}"
                     >
                 </nimble-label-provider-core>
             `
@@ -165,6 +186,21 @@ describe('Nimble Label Provider Core', () => {
             expect(directive.filterNoResults).toBe(label8);
             expect(nativeElement.filterNoResults).toBe(label8);
         });
+
+        it('will use template string values for loading', () => {
+            expect(directive.loading).toBe(label9);
+            expect(nativeElement.loading).toBe(label9);
+        });
+
+        it('will use template string values for scrollBackward', () => {
+            expect(directive.scrollBackward).toBe(label10);
+            expect(nativeElement.scrollBackward).toBe(label10);
+        });
+
+        it('will use template string values for scrollForward', () => {
+            expect(directive.scrollForward).toBe(label11);
+            expect(nativeElement.scrollForward).toBe(label11);
+        });
     });
 
     describe('with property bound values', () => {
@@ -179,6 +215,9 @@ describe('Nimble Label Provider Core', () => {
                     [popupIconInformation]="popupIconInformation"
                     [filterSearch]="filterSearch"
                     [filterNoResults]="filterNoResults"
+                    [loading]="loading"
+                    [scrollBackward]="scrollBackward"
+                    [scrollForward]="scrollForward"
                     >
                 </nimble-label-provider-core>
             `
@@ -194,6 +233,9 @@ describe('Nimble Label Provider Core', () => {
             public popupIconInformation = label1;
             public filterSearch = label1;
             public filterNoResults = label1;
+            public loading = label1;
+            public scrollBackward = label1;
+            public scrollForward = label1;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -298,6 +340,39 @@ describe('Nimble Label Provider Core', () => {
             expect(directive.filterNoResults).toBe(label2);
             expect(nativeElement.filterNoResults).toBe(label2);
         });
+
+        it('can be configured with property binding for loading', () => {
+            expect(directive.loading).toBe(label1);
+            expect(nativeElement.loading).toBe(label1);
+
+            fixture.componentInstance.loading = label2;
+            fixture.detectChanges();
+
+            expect(directive.loading).toBe(label2);
+            expect(nativeElement.loading).toBe(label2);
+        });
+
+        it('can be configured with property binding for scrollBackward', () => {
+            expect(directive.scrollBackward).toBe(label1);
+            expect(nativeElement.scrollBackward).toBe(label1);
+
+            fixture.componentInstance.scrollBackward = label2;
+            fixture.detectChanges();
+
+            expect(directive.scrollBackward).toBe(label2);
+            expect(nativeElement.scrollBackward).toBe(label2);
+        });
+
+        it('can be configured with property binding for scrollForward', () => {
+            expect(directive.scrollForward).toBe(label1);
+            expect(nativeElement.scrollForward).toBe(label1);
+
+            fixture.componentInstance.scrollForward = label2;
+            fixture.detectChanges();
+
+            expect(directive.scrollForward).toBe(label2);
+            expect(nativeElement.scrollForward).toBe(label2);
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -312,6 +387,9 @@ describe('Nimble Label Provider Core', () => {
                     [attr.popup-icon-information]="popupIconInformation"
                     [attr.filter-search]="filterSearch"
                     [attr.filter-no-results]="filterNoResults"
+                    [attr.loading]="loading"
+                    [attr.scroll-backward]="scrollBackward"
+                    [attr.scroll-forward]="scrollForward"
                     >
                 </nimble-label-provider-core>
             `
@@ -327,6 +405,9 @@ describe('Nimble Label Provider Core', () => {
             public popupIconInformation = label1;
             public filterSearch = label1;
             public filterNoResults = label1;
+            public loading = label1;
+            public scrollBackward = label1;
+            public scrollForward = label1;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -431,5 +512,38 @@ describe('Nimble Label Provider Core', () => {
             expect(directive.filterNoResults).toBe(label2);
             expect(nativeElement.filterNoResults).toBe(label2);
         });
+
+        it('can be configured with attribute binding for loading', () => {
+            expect(directive.loading).toBe(label1);
+            expect(nativeElement.loading).toBe(label1);
+
+            fixture.componentInstance.loading = label2;
+            fixture.detectChanges();
+
+            expect(directive.loading).toBe(label2);
+            expect(nativeElement.loading).toBe(label2);
+        });
+
+        it('can be configured with attribute binding for scrollBackward', () => {
+            expect(directive.scrollBackward).toBe(label1);
+            expect(nativeElement.scrollBackward).toBe(label1);
+
+            fixture.componentInstance.scrollBackward = label2;
+            fixture.detectChanges();
+
+            expect(directive.scrollBackward).toBe(label2);
+            expect(nativeElement.scrollBackward).toBe(label2);
+        });
+
+        it('can be configured with attribute binding for scrollForward', () => {
+            expect(directive.scrollForward).toBe(label1);
+            expect(nativeElement.scrollForward).toBe(label1);
+
+            fixture.componentInstance.scrollForward = label2;
+            fixture.detectChanges();
+
+            expect(directive.scrollForward).toBe(label2);
+            expect(nativeElement.scrollForward).toBe(label2);
+        });
     });
 });
diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor b/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor
index 04e4a5e134..1dbd11e0d7 100644
--- a/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor
+++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor
@@ -9,5 +9,7 @@
     filter-search="@FilterSearch"
     filter-no-results="@FilterNoResults"
     loading="@Loading"
+    scroll-forward="@ScrollForward"
+    scroll-backward="@ScrollBackward"
     @attributes="AdditionalAttributes">
 </nimble-label-provider-core>
diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs b/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs
index 743aa336cd..09cfe693b2 100644
--- a/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs
+++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs
@@ -34,6 +34,12 @@ public partial class NimbleLabelProviderCore : ComponentBase
     [Parameter]
     public string? Loading { get; set; }
 
+    [Parameter]
+    public string? ScrollBackward { get; set; }
+
+    [Parameter]
+    public string? ScrollForward { get; set; }
+
     /// <summary>
     /// Gets or sets a collection of additional attributes that will be applied to the created element.
     /// </summary>
diff --git a/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderCoreTests.cs b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderCoreTests.cs
index d82acf3377..6a1f0d5242 100644
--- a/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderCoreTests.cs
+++ b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderCoreTests.cs
@@ -39,6 +39,8 @@ public void NimbleLabelProviderCore_SupportsAdditionalAttributes()
     [InlineData(nameof(NimbleLabelProviderCore.FilterSearch))]
     [InlineData(nameof(NimbleLabelProviderCore.FilterNoResults))]
     [InlineData(nameof(NimbleLabelProviderCore.Loading))]
+    [InlineData(nameof(NimbleLabelProviderCore.ScrollBackward))]
+    [InlineData(nameof(NimbleLabelProviderCore.ScrollForward))]
     public void NimbleLabelProviderCore_LabelIsSet(string propertyName)
     {
         var labelValue = propertyName + "UpdatedValue";

From c3d99272bad0d89c9dc6712dfb4c29c1a69fdc6f Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Thu, 24 Oct 2024 07:36:19 -0500
Subject: [PATCH 4/6] applying package updates [skip ci]

---
 ...ular-7ed58bee-595b-437c-93a1-2ca90af348e5.json |  7 -------
 ...azor-75a260ae-162f-44e8-b558-702e359c9445.json |  7 -------
 package-lock.json                                 |  4 ++--
 .../nimble-angular/CHANGELOG.json                 | 15 +++++++++++++++
 .../angular-workspace/nimble-angular/CHANGELOG.md | 10 +++++++++-
 .../angular-workspace/nimble-angular/package.json |  2 +-
 .../blazor-workspace/NimbleBlazor/CHANGELOG.json  | 15 +++++++++++++++
 .../blazor-workspace/NimbleBlazor/CHANGELOG.md    | 10 +++++++++-
 .../blazor-workspace/NimbleBlazor/package.json    |  2 +-
 9 files changed, 52 insertions(+), 20 deletions(-)
 delete mode 100644 change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json
 delete mode 100644 change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json

diff --git a/change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json b/change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json
deleted file mode 100644
index 55f6080106..0000000000
--- a/change/@ni-nimble-angular-7ed58bee-595b-437c-93a1-2ca90af348e5.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "Angular and Blazor label provider changes for scrollable tabs.",
-  "packageName": "@ni/nimble-angular",
-  "email": "26874831+atmgrifter00@users.noreply.github.com",
-  "dependentChangeType": "patch"
-}
diff --git a/change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json b/change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json
deleted file mode 100644
index 59eba2a9e4..0000000000
--- a/change/@ni-nimble-blazor-75a260ae-162f-44e8-b558-702e359c9445.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "minor",
-  "comment": "Angular and Blazor label provider changes for scrollable tabs.",
-  "packageName": "@ni/nimble-blazor",
-  "email": "26874831+atmgrifter00@users.noreply.github.com",
-  "dependentChangeType": "patch"
-}
diff --git a/package-lock.json b/package-lock.json
index 2602c318ae..aec6fc7868 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28037,7 +28037,7 @@
     },
     "packages/angular-workspace/nimble-angular": {
       "name": "@ni/nimble-angular",
-      "version": "28.3.4",
+      "version": "28.4.0",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.2.0"
@@ -28082,7 +28082,7 @@
     },
     "packages/blazor-workspace/NimbleBlazor": {
       "name": "@ni/nimble-blazor",
-      "version": "18.3.4",
+      "version": "18.4.0",
       "license": "MIT",
       "peerDependencies": {
         "@ni/nimble-components": "^32.5.0",
diff --git a/packages/angular-workspace/nimble-angular/CHANGELOG.json b/packages/angular-workspace/nimble-angular/CHANGELOG.json
index 6ba3483b5c..deca1d300d 100644
--- a/packages/angular-workspace/nimble-angular/CHANGELOG.json
+++ b/packages/angular-workspace/nimble-angular/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Thu, 24 Oct 2024 12:36:19 GMT",
+      "version": "28.4.0",
+      "tag": "@ni/nimble-angular_v28.4.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "26874831+atmgrifter00@users.noreply.github.com",
+            "package": "@ni/nimble-angular",
+            "commit": "868a8a67780160f0a224fbc62a27511ed97db2df",
+            "comment": "Angular and Blazor label provider changes for scrollable tabs."
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 19:20:53 GMT",
       "version": "28.3.4",
diff --git a/packages/angular-workspace/nimble-angular/CHANGELOG.md b/packages/angular-workspace/nimble-angular/CHANGELOG.md
index 095de81134..9de521eb1b 100644
--- a/packages/angular-workspace/nimble-angular/CHANGELOG.md
+++ b/packages/angular-workspace/nimble-angular/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-angular
 
-<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 24 Oct 2024 12:36:19 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 28.4.0
+
+Thu, 24 Oct 2024 12:36:19 GMT
+
+### Minor changes
+
+- Angular and Blazor label provider changes for scrollable tabs. ([ni/nimble@868a8a6](https://github.com/ni/nimble/commit/868a8a67780160f0a224fbc62a27511ed97db2df))
+
 ## 28.3.4
 
 Wed, 23 Oct 2024 19:20:53 GMT
diff --git a/packages/angular-workspace/nimble-angular/package.json b/packages/angular-workspace/nimble-angular/package.json
index 5500e7774d..a992318237 100644
--- a/packages/angular-workspace/nimble-angular/package.json
+++ b/packages/angular-workspace/nimble-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "28.3.4",
+  "version": "28.4.0",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "npm run invoke-publish:setup && cd ../dist/nimble-angular && npm publish",
diff --git a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
index 5f45dd589e..19dab8b1fc 100644
--- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
+++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-blazor",
   "entries": [
+    {
+      "date": "Thu, 24 Oct 2024 12:36:19 GMT",
+      "version": "18.4.0",
+      "tag": "@ni/nimble-blazor_v18.4.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "26874831+atmgrifter00@users.noreply.github.com",
+            "package": "@ni/nimble-blazor",
+            "commit": "868a8a67780160f0a224fbc62a27511ed97db2df",
+            "comment": "Angular and Blazor label provider changes for scrollable tabs."
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 19:20:53 GMT",
       "version": "18.3.4",
diff --git a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
index 05d319df1c..4ec5ddc032 100644
--- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
+++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-blazor
 
-<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 24 Oct 2024 12:36:19 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 18.4.0
+
+Thu, 24 Oct 2024 12:36:19 GMT
+
+### Minor changes
+
+- Angular and Blazor label provider changes for scrollable tabs. ([ni/nimble@868a8a6](https://github.com/ni/nimble/commit/868a8a67780160f0a224fbc62a27511ed97db2df))
+
 ## 18.3.4
 
 Wed, 23 Oct 2024 19:20:53 GMT
diff --git a/packages/blazor-workspace/NimbleBlazor/package.json b/packages/blazor-workspace/NimbleBlazor/package.json
index 4595b447c3..2a14763df3 100644
--- a/packages/blazor-workspace/NimbleBlazor/package.json
+++ b/packages/blazor-workspace/NimbleBlazor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-blazor",
-  "version": "18.3.4",
+  "version": "18.4.0",
   "description": "Blazor components for the NI Nimble Design System",
   "scripts": {
     "pack": "cross-env-shell dotnet pack -c Release -p:PackageVersion=$npm_package_version --output ../dist",

From 64ede95ba2420c6ef9a30d274ec7465d22b2959d Mon Sep 17 00:00:00 2001
From: Jonathan Meyer <jonathan.meyer@ni.com>
Date: Thu, 24 Oct 2024 15:35:05 -0500
Subject: [PATCH 5/6] Fix tabs toolbar content alignment (#2451)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 🤨 Rationale

[SLE bug: Nimble | nimble-tabs-toolbar | alignment of the child elements
has been
altered.](https://dev.azure.com/ni/DevCentral/_workitems/edit/2913486)

## 👩‍💻 Implementation

Just added styling that will expand the `end` slot to fill the rest of
the space of the `Tabs` width.

## 🧪 Testing

There is a Chromatic test in place that is already checking this case,
but I must have glossed over that change when examining it for the
scrollable tabs submission.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
---
 ...le-components-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json | 7 +++++++
 packages/nimble-components/src/patterns/tabs/styles.ts     | 4 ++++
 2 files changed, 11 insertions(+)
 create mode 100644 change/@ni-nimble-components-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json

diff --git a/change/@ni-nimble-components-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json b/change/@ni-nimble-components-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json
new file mode 100644
index 0000000000..82b0248442
--- /dev/null
+++ b/change/@ni-nimble-components-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix tabs styling.",
+  "packageName": "@ni/nimble-components",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/patterns/tabs/styles.ts b/packages/nimble-components/src/patterns/tabs/styles.ts
index a274cf8247..f77de85841 100644
--- a/packages/nimble-components/src/patterns/tabs/styles.ts
+++ b/packages/nimble-components/src/patterns/tabs/styles.ts
@@ -32,4 +32,8 @@ export const styles = css`
     .scroll-button.right {
         margin-left: ${smallPadding};
     }
+
+    [part='end'] {
+        flex: 1;
+    }
 `;

From fc0628690a5e09708c746627a0d26a9244a344f6 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Thu, 24 Oct 2024 15:52:01 -0500
Subject: [PATCH 6/6] applying package updates [skip ci]

---
 ...-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json |  7 ------
 package-lock.json                             | 22 +++++++++----------
 .../nimble-angular/CHANGELOG.json             | 15 +++++++++++++
 .../nimble-angular/CHANGELOG.md               | 10 ++++++++-
 .../nimble-angular/package.json               |  4 ++--
 .../spright-angular/CHANGELOG.json            | 15 +++++++++++++
 .../spright-angular/CHANGELOG.md              | 10 ++++++++-
 .../spright-angular/package.json              |  4 ++--
 .../NimbleBlazor/CHANGELOG.json               | 15 +++++++++++++
 .../NimbleBlazor/CHANGELOG.md                 | 10 ++++++++-
 .../NimbleBlazor/package.json                 |  4 ++--
 .../SprightBlazor/CHANGELOG.json              | 15 +++++++++++++
 .../SprightBlazor/CHANGELOG.md                | 10 ++++++++-
 .../SprightBlazor/package.json                |  4 ++--
 packages/nimble-components/CHANGELOG.json     | 15 +++++++++++++
 packages/nimble-components/CHANGELOG.md       | 10 ++++++++-
 packages/nimble-components/package.json       |  2 +-
 packages/spright-components/CHANGELOG.json    | 15 +++++++++++++
 packages/spright-components/CHANGELOG.md      | 10 ++++++++-
 packages/spright-components/package.json      |  4 ++--
 20 files changed, 166 insertions(+), 35 deletions(-)
 delete mode 100644 change/@ni-nimble-components-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json

diff --git a/change/@ni-nimble-components-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json b/change/@ni-nimble-components-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json
deleted file mode 100644
index 82b0248442..0000000000
--- a/change/@ni-nimble-components-6b9e5a53-7829-4004-820b-a1e8b8217fe1.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Fix tabs styling.",
-  "packageName": "@ni/nimble-components",
-  "email": "26874831+atmgrifter00@users.noreply.github.com",
-  "dependentChangeType": "patch"
-}
diff --git a/package-lock.json b/package-lock.json
index aec6fc7868..be8be7e976 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28037,7 +28037,7 @@
     },
     "packages/angular-workspace/nimble-angular": {
       "name": "@ni/nimble-angular",
-      "version": "28.4.0",
+      "version": "28.4.1",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.2.0"
@@ -28048,12 +28048,12 @@
         "@angular/forms": "^17.3.12",
         "@angular/localize": "^17.3.12",
         "@angular/router": "^17.3.12",
-        "@ni/nimble-components": "^32.5.0"
+        "@ni/nimble-components": "^32.5.1"
       }
     },
     "packages/angular-workspace/spright-angular": {
       "name": "@ni/spright-angular",
-      "version": "5.1.16",
+      "version": "5.1.17",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.2.0"
@@ -28061,7 +28061,7 @@
       "peerDependencies": {
         "@angular/common": "^17.3.12",
         "@angular/core": "^17.3.12",
-        "@ni/spright-components": "^4.1.16"
+        "@ni/spright-components": "^4.1.17"
       }
     },
     "packages/blazor-workspace": {
@@ -28082,10 +28082,10 @@
     },
     "packages/blazor-workspace/NimbleBlazor": {
       "name": "@ni/nimble-blazor",
-      "version": "18.4.0",
+      "version": "18.4.1",
       "license": "MIT",
       "peerDependencies": {
-        "@ni/nimble-components": "^32.5.0",
+        "@ni/nimble-components": "^32.5.1",
         "@ni/nimble-tokens": "^8.4.0",
         "cross-env": "^7.0.3",
         "rimraf": "^6.0.0"
@@ -28156,10 +28156,10 @@
     },
     "packages/blazor-workspace/SprightBlazor": {
       "name": "@ni/spright-blazor",
-      "version": "2.1.16",
+      "version": "2.1.17",
       "license": "MIT",
       "peerDependencies": {
-        "@ni/spright-components": "^4.1.16",
+        "@ni/spright-components": "^4.1.17",
         "cross-env": "^7.0.3",
         "rimraf": "^6.0.0"
       }
@@ -28193,7 +28193,7 @@
     },
     "packages/nimble-components": {
       "name": "@ni/nimble-components",
-      "version": "32.5.0",
+      "version": "32.5.1",
       "license": "MIT",
       "dependencies": {
         "@microsoft/fast-colors": "^5.3.1",
@@ -28312,12 +28312,12 @@
     },
     "packages/spright-components": {
       "name": "@ni/spright-components",
-      "version": "4.1.16",
+      "version": "4.1.17",
       "license": "MIT",
       "dependencies": {
         "@microsoft/fast-element": "^1.12.0",
         "@microsoft/fast-foundation": "^2.49.6",
-        "@ni/nimble-components": "^32.5.0",
+        "@ni/nimble-components": "^32.5.1",
         "tslib": "^2.2.0"
       },
       "devDependencies": {
diff --git a/packages/angular-workspace/nimble-angular/CHANGELOG.json b/packages/angular-workspace/nimble-angular/CHANGELOG.json
index deca1d300d..36b8fb1aff 100644
--- a/packages/angular-workspace/nimble-angular/CHANGELOG.json
+++ b/packages/angular-workspace/nimble-angular/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Thu, 24 Oct 2024 20:52:01 GMT",
+      "version": "28.4.1",
+      "tag": "@ni/nimble-angular_v28.4.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v32.5.1",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 24 Oct 2024 12:36:19 GMT",
       "version": "28.4.0",
diff --git a/packages/angular-workspace/nimble-angular/CHANGELOG.md b/packages/angular-workspace/nimble-angular/CHANGELOG.md
index 9de521eb1b..a37712c3e0 100644
--- a/packages/angular-workspace/nimble-angular/CHANGELOG.md
+++ b/packages/angular-workspace/nimble-angular/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-angular
 
-<!-- This log was last generated on Thu, 24 Oct 2024 12:36:19 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 24 Oct 2024 20:52:01 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 28.4.1
+
+Thu, 24 Oct 2024 20:52:01 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v32.5.1
+
 ## 28.4.0
 
 Thu, 24 Oct 2024 12:36:19 GMT
diff --git a/packages/angular-workspace/nimble-angular/package.json b/packages/angular-workspace/nimble-angular/package.json
index a992318237..582cf8a27b 100644
--- a/packages/angular-workspace/nimble-angular/package.json
+++ b/packages/angular-workspace/nimble-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "28.4.0",
+  "version": "28.4.1",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "npm run invoke-publish:setup && cd ../dist/nimble-angular && npm publish",
@@ -32,7 +32,7 @@
     "@angular/forms": "^17.3.12",
     "@angular/localize": "^17.3.12",
     "@angular/router": "^17.3.12",
-    "@ni/nimble-components": "^32.5.0"
+    "@ni/nimble-components": "^32.5.1"
   },
   "dependencies": {
     "tslib": "^2.2.0"
diff --git a/packages/angular-workspace/spright-angular/CHANGELOG.json b/packages/angular-workspace/spright-angular/CHANGELOG.json
index 916a313c00..0cca312f2d 100644
--- a/packages/angular-workspace/spright-angular/CHANGELOG.json
+++ b/packages/angular-workspace/spright-angular/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/spright-angular",
   "entries": [
+    {
+      "date": "Thu, 24 Oct 2024 20:52:01 GMT",
+      "version": "5.1.17",
+      "tag": "@ni/spright-angular_v5.1.17",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/spright-angular",
+            "comment": "Bump @ni/spright-components to v4.1.17",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 19:20:53 GMT",
       "version": "5.1.16",
diff --git a/packages/angular-workspace/spright-angular/CHANGELOG.md b/packages/angular-workspace/spright-angular/CHANGELOG.md
index 05671140ca..72c380e82b 100644
--- a/packages/angular-workspace/spright-angular/CHANGELOG.md
+++ b/packages/angular-workspace/spright-angular/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/spright-angular
 
-<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 24 Oct 2024 20:52:01 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 5.1.17
+
+Thu, 24 Oct 2024 20:52:01 GMT
+
+### Patches
+
+- Bump @ni/spright-components to v4.1.17
+
 ## 5.1.16
 
 Wed, 23 Oct 2024 19:20:53 GMT
diff --git a/packages/angular-workspace/spright-angular/package.json b/packages/angular-workspace/spright-angular/package.json
index de5bdb951e..6380c3efe8 100644
--- a/packages/angular-workspace/spright-angular/package.json
+++ b/packages/angular-workspace/spright-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-angular",
-  "version": "5.1.16",
+  "version": "5.1.17",
   "description": "Angular components for NI Spright",
   "scripts": {
     "invoke-publish": "npm run invoke-publish:setup && cd ../dist/spright-angular && npm publish",
@@ -24,7 +24,7 @@
   "peerDependencies": {
     "@angular/common": "^17.3.12",
     "@angular/core": "^17.3.12",
-    "@ni/spright-components": "^4.1.16"
+    "@ni/spright-components": "^4.1.17"
   },
   "dependencies": {
     "tslib": "^2.2.0"
diff --git a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
index 19dab8b1fc..f4ad357b80 100644
--- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
+++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-blazor",
   "entries": [
+    {
+      "date": "Thu, 24 Oct 2024 20:52:01 GMT",
+      "version": "18.4.1",
+      "tag": "@ni/nimble-blazor_v18.4.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-blazor",
+            "comment": "Bump @ni/nimble-components to v32.5.1",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 24 Oct 2024 12:36:19 GMT",
       "version": "18.4.0",
diff --git a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
index 4ec5ddc032..2c82a33737 100644
--- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
+++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-blazor
 
-<!-- This log was last generated on Thu, 24 Oct 2024 12:36:19 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 24 Oct 2024 20:52:01 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 18.4.1
+
+Thu, 24 Oct 2024 20:52:01 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v32.5.1
+
 ## 18.4.0
 
 Thu, 24 Oct 2024 12:36:19 GMT
diff --git a/packages/blazor-workspace/NimbleBlazor/package.json b/packages/blazor-workspace/NimbleBlazor/package.json
index 2a14763df3..f29ccf3b9d 100644
--- a/packages/blazor-workspace/NimbleBlazor/package.json
+++ b/packages/blazor-workspace/NimbleBlazor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-blazor",
-  "version": "18.4.0",
+  "version": "18.4.1",
   "description": "Blazor components for the NI Nimble Design System",
   "scripts": {
     "pack": "cross-env-shell dotnet pack -c Release -p:PackageVersion=$npm_package_version --output ../dist",
@@ -25,7 +25,7 @@
     "!*"
   ],
   "peerDependencies": {
-    "@ni/nimble-components": "^32.5.0",
+    "@ni/nimble-components": "^32.5.1",
     "@ni/nimble-tokens": "^8.4.0",
     "cross-env": "^7.0.3",
     "rimraf": "^6.0.0"
diff --git a/packages/blazor-workspace/SprightBlazor/CHANGELOG.json b/packages/blazor-workspace/SprightBlazor/CHANGELOG.json
index 97439d8f8d..a0652f8277 100644
--- a/packages/blazor-workspace/SprightBlazor/CHANGELOG.json
+++ b/packages/blazor-workspace/SprightBlazor/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/spright-blazor",
   "entries": [
+    {
+      "date": "Thu, 24 Oct 2024 20:52:01 GMT",
+      "version": "2.1.17",
+      "tag": "@ni/spright-blazor_v2.1.17",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/spright-blazor",
+            "comment": "Bump @ni/spright-components to v4.1.17",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 19:20:53 GMT",
       "version": "2.1.16",
diff --git a/packages/blazor-workspace/SprightBlazor/CHANGELOG.md b/packages/blazor-workspace/SprightBlazor/CHANGELOG.md
index 9b223a49a0..a23e1f9c74 100644
--- a/packages/blazor-workspace/SprightBlazor/CHANGELOG.md
+++ b/packages/blazor-workspace/SprightBlazor/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/spright-blazor
 
-<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 24 Oct 2024 20:52:01 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 2.1.17
+
+Thu, 24 Oct 2024 20:52:01 GMT
+
+### Patches
+
+- Bump @ni/spright-components to v4.1.17
+
 ## 2.1.16
 
 Wed, 23 Oct 2024 19:20:53 GMT
diff --git a/packages/blazor-workspace/SprightBlazor/package.json b/packages/blazor-workspace/SprightBlazor/package.json
index 0033ed1f62..4c94d04b05 100644
--- a/packages/blazor-workspace/SprightBlazor/package.json
+++ b/packages/blazor-workspace/SprightBlazor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-blazor",
-  "version": "2.1.16",
+  "version": "2.1.17",
   "description": "Blazor components for Spright",
   "scripts": {
     "pack": "cross-env-shell dotnet pack -c Release -p:PackageVersion=$npm_package_version --output ../dist",
@@ -25,7 +25,7 @@
     "!*"
   ],
   "peerDependencies": {
-    "@ni/spright-components": "^4.1.16",
+    "@ni/spright-components": "^4.1.17",
     "cross-env": "^7.0.3",
     "rimraf": "^6.0.0"
   }
diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json
index e25a2af8d7..64f8255372 100644
--- a/packages/nimble-components/CHANGELOG.json
+++ b/packages/nimble-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-components",
   "entries": [
+    {
+      "date": "Thu, 24 Oct 2024 20:52:01 GMT",
+      "version": "32.5.1",
+      "tag": "@ni/nimble-components_v32.5.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "26874831+atmgrifter00@users.noreply.github.com",
+            "package": "@ni/nimble-components",
+            "commit": "64ede95ba2420c6ef9a30d274ec7465d22b2959d",
+            "comment": "Fix tabs styling."
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 19:20:53 GMT",
       "version": "32.5.0",
diff --git a/packages/nimble-components/CHANGELOG.md b/packages/nimble-components/CHANGELOG.md
index 0bd2beaa8e..e75e27f308 100644
--- a/packages/nimble-components/CHANGELOG.md
+++ b/packages/nimble-components/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-components
 
-<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 24 Oct 2024 20:52:01 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 32.5.1
+
+Thu, 24 Oct 2024 20:52:01 GMT
+
+### Patches
+
+- Fix tabs styling. ([ni/nimble@64ede95](https://github.com/ni/nimble/commit/64ede95ba2420c6ef9a30d274ec7465d22b2959d))
+
 ## 32.5.0
 
 Wed, 23 Oct 2024 19:20:53 GMT
diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json
index 5e4f9dba2f..97efbdc858 100644
--- a/packages/nimble-components/package.json
+++ b/packages/nimble-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "32.5.0",
+  "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",
diff --git a/packages/spright-components/CHANGELOG.json b/packages/spright-components/CHANGELOG.json
index ea3dacc6e9..8f3682dce3 100644
--- a/packages/spright-components/CHANGELOG.json
+++ b/packages/spright-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/spright-components",
   "entries": [
+    {
+      "date": "Thu, 24 Oct 2024 20:52:01 GMT",
+      "version": "4.1.17",
+      "tag": "@ni/spright-components_v4.1.17",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/spright-components",
+            "comment": "Bump @ni/nimble-components to v32.5.1",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 23 Oct 2024 19:20:53 GMT",
       "version": "4.1.16",
diff --git a/packages/spright-components/CHANGELOG.md b/packages/spright-components/CHANGELOG.md
index 41783073a8..ebd3704c89 100644
--- a/packages/spright-components/CHANGELOG.md
+++ b/packages/spright-components/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/spright-components
 
-<!-- This log was last generated on Wed, 23 Oct 2024 19:20:53 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 24 Oct 2024 20:52:01 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 4.1.17
+
+Thu, 24 Oct 2024 20:52:01 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v32.5.1
+
 ## 4.1.16
 
 Wed, 23 Oct 2024 19:20:53 GMT
diff --git a/packages/spright-components/package.json b/packages/spright-components/package.json
index d4877d9cf4..2f4a1abdbe 100644
--- a/packages/spright-components/package.json
+++ b/packages/spright-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-components",
-  "version": "4.1.16",
+  "version": "4.1.17",
   "description": "NI Spright Components",
   "scripts": {
     "build": "npm run build-components && npm run bundle-components",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@microsoft/fast-element": "^1.12.0",
     "@microsoft/fast-foundation": "^2.49.6",
-    "@ni/nimble-components": "^32.5.0",
+    "@ni/nimble-components": "^32.5.1",
     "tslib": "^2.2.0"
   },
   "devDependencies": {