From 4df8e18597788c157a8037b26a1c5d25e51e10fb Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Mon, 26 Jun 2023 15:52:46 -0500
Subject: [PATCH 01/18] Label changes

---
 packages/nimble-components/CONTRIBUTING.md    |  25 ++++
 packages/nimble-components/README.md          |  31 +++-
 .../nimble-components/src/all-components.ts   |   2 +
 .../nimble-components/src/banner/template.ts  |   3 +-
 .../src/banner/tests/banner.stories.ts        |  19 ++-
 .../src/label-provider/base/index.ts          |  70 +++++++++
 .../label-provider/base/label-name-utils.ts   |   9 ++
 .../base/label-provider-stories-utils.ts      | 113 +++++++++++++++
 .../base/label-user-stories-utils.ts          |  33 +++++
 .../src/label-provider/core/index.ts          |  79 +++++++++++
 .../core/label-token-defaults.ts              |   9 ++
 .../src/label-provider/core/label-tokens.ts   |  17 +++
 .../core/tests/label-provider-core.spec.ts    | 127 +++++++++++++++++
 .../core/tests/label-provider-core.stories.ts |  20 +++
 .../src/label-provider/table/index.ts         | 104 ++++++++++++++
 .../table/label-token-defaults.ts             |  11 ++
 .../src/label-provider/table/label-tokens.ts  |  27 ++++
 .../src/label-provider/table/name-utils.ts    |  12 ++
 .../table/tests/label-provider-table.spec.ts  | 134 ++++++++++++++++++
 .../tests/label-provider-table.stories.ts     |  21 +++
 .../src/number-field/index.ts                 |  12 +-
 .../tests/number-field.stories.ts             |  17 ++-
 .../table/components/group-row/template.ts    |   5 +
 .../src/table/components/header/template.ts   |   5 +-
 .../nimble-components/src/table/template.ts   |   2 +
 .../src/table/tests/table.stories.ts          |   8 +-
 26 files changed, 899 insertions(+), 16 deletions(-)
 create mode 100644 packages/nimble-components/src/label-provider/base/index.ts
 create mode 100644 packages/nimble-components/src/label-provider/base/label-name-utils.ts
 create mode 100644 packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
 create mode 100644 packages/nimble-components/src/label-provider/base/label-user-stories-utils.ts
 create mode 100644 packages/nimble-components/src/label-provider/core/index.ts
 create mode 100644 packages/nimble-components/src/label-provider/core/label-token-defaults.ts
 create mode 100644 packages/nimble-components/src/label-provider/core/label-tokens.ts
 create mode 100644 packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts
 create mode 100644 packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
 create mode 100644 packages/nimble-components/src/label-provider/table/index.ts
 create mode 100644 packages/nimble-components/src/label-provider/table/label-token-defaults.ts
 create mode 100644 packages/nimble-components/src/label-provider/table/label-tokens.ts
 create mode 100644 packages/nimble-components/src/label-provider/table/name-utils.ts
 create mode 100644 packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts
 create mode 100644 packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts

diff --git a/packages/nimble-components/CONTRIBUTING.md b/packages/nimble-components/CONTRIBUTING.md
index 5f1463d73e..bd92345db1 100644
--- a/packages/nimble-components/CONTRIBUTING.md
+++ b/packages/nimble-components/CONTRIBUTING.md
@@ -428,6 +428,31 @@ Nimble includes three NI-brand aligned themes (i.e. `light`, `dark`, & `color`).
 
 When creating a new component, create a `*-matrix.stories.ts` Storybook file to confirm that the component reflects the design intent across all themes and states.
 
+## Localization
+
+Nimble components may need to use some strings/labels (such as the label for a close button in a component's template, or menu items in a component-provided menu). Nimble exposes these localizable labels as design tokens, to support both localization and the ability for clients to override the strings.
+
+Nimble provides English strings as the token defaults, and provides `nimble-label-provider-*` elements with APIs for overriding those values.  
+There are currently 2 label providers:
+
+-   `nimble-label-provider-core`: Used for labels for all components besides the table
+-   `nimble-label-provider-table`: Used for labels for the table (and table sub-components / column types)
+
+To add new labels to a label provider, follow the existing patterns (create a `DesignToken<string>`, an `@attr`-backed property, a `propertyChanged()` function that updates the token value, and add it to the `labelTokens` collection).
+
+The expected format for label token names is:
+
+-   element/type(s) to which the token applies, e.g. `number-field` or `table`
+    -   This may not be an exact element name, if this label applies to multiple elements or will be used in multiple contexts
+-   component part/category (optional), e.g. `column-header`
+-   specific functionality or sub-part, e.g. `decrement`
+-   the suffix `label` (will be omitted from the label-provider properties/attributes)
+
+Components using localized labels should document them in Storybook. To add a "Localizable Labels" section:
+
+-   Their story `Args` should extend `LabelUserArgs`
+-   Call `addLabelUseMetadata()` and pass their declared metadata object, the applicable label provider tag, and the label tokens that they're using
+
 ## Component naming
 
 Component custom element names are specified in `index.ts` when registering the element. Use the following structure when naming components.
diff --git a/packages/nimble-components/README.md b/packages/nimble-components/README.md
index 937c3db223..b9a1ab73b2 100644
--- a/packages/nimble-components/README.md
+++ b/packages/nimble-components/README.md
@@ -23,8 +23,8 @@ If you have an existing application that incorporates a module bundler like [Web
 
 1. Install the package from [the public NPM registry](https://www.npmjs.com/package/@ni/nimble-components) by running `npm install @ni/nimble-components`.
 2. Import the component you want to use from the file you want to use it in. For example: `import '@ni/nimble-components/dist/esm/icons/succeeded';`
-3. Add the HTML for the component to your page. You can see sample code for each component in the [Nimble Storybook](https://ni.github.io/nimble/storybook/) by going to the **Docs** tab for the component and clicking **Show code**. For example: `<nimble-icon-succeeded></nimble-icon-succeeded>`.
-4. Nimble components are [standard web components (custom elements)](https://developer.mozilla.org/en-US/docs/Web/Web_Components) so you can configure them via normal DOM APIs like attributes, properties, events, and methods. The [Storybook documentation](https://ni.github.io/nimble/storybook/) for each component describes its custom API.
+3. Add the HTML for the component to your page. You can see sample code for each component in the [Nimble Storybook](https://nimble.ni.dev/storybook/) by going to the **Docs** page for the component and clicking **Show code**. For example: `<nimble-icon-succeeded></nimble-icon-succeeded>`.
+4. Nimble components are [standard web components (custom elements)](https://developer.mozilla.org/en-US/docs/Web/Web_Components) so you can configure them via normal DOM APIs like attributes, properties, events, and methods. The [Storybook documentation](https://nimble.ni.dev/storybook/) for each component describes its custom API.
 
 ### Prototyping in a static webpage
 
@@ -96,9 +96,34 @@ The theming system is composed of:
 
 The goal of the Nimble design system is to provide a consistent style for applications. If you find that Nimble does not expose colors, fonts, sizes, etc. that you need in an application get in touch with the Nimble squad.
 
+## Localization
+
+Some Nimble components use strings/labels that need to be localized, if the consuming application supports localization. Nimble exposes these localizable labels as design tokens, to support both localization and the ability for clients to override the strings.
+
+Nimble provides English strings as the token defaults, and provides `nimble-label-provider-*` elements with APIs for overriding those values.  
+There are currently 2 label providers:
+
+-   `nimble-label-provider-core`: Used for labels for all components besides the table
+-   `nimble-label-provider-table`: Used for labels for the table (and table sub-components / column types)
+
+If a client is localized, it should:
+
+-   Add the `label-provider` element(s) as children of their root theme provider:
+    ```html
+    <body>
+        <nimble-theme-provider theme="light">
+            <nimble-label-provider-core></nimble-label-provider-core>
+            <!-- if using nimble-table, include nimble-label-provider-table: -->
+            <nimble-label-provider-table></nimble-label-provider-table>
+            <!-- everything else -->
+        </nimble-theme-provider>
+    </body>
+    ```
+-   For each label token on the label provider API, localize the English string, and set the corresponding HTML attribute or JS property on the label provider to the localized values. A list of all label tokens for each label provider (and their corresponding attribute/property names and English strings) can be found in the [Tokens/Label Providers section of Storybook](http://nimble.ni.dev/storybook/?path=/docs/tokens-label-providers--docs).
+
 ## Accessibility
 
-For accessibility information related to nimble components, see [ACCESSIBILITY.md](docs/ACCESSIBILITY.md).
+For accessibility information related to nimble components, see [accessibility.md](/packages/nimble-components/docs/accessibility.md).
 
 ## Contributing
 
diff --git a/packages/nimble-components/src/all-components.ts b/packages/nimble-components/src/all-components.ts
index 6abd2196f2..91e0b5bb4d 100644
--- a/packages/nimble-components/src/all-components.ts
+++ b/packages/nimble-components/src/all-components.ts
@@ -21,6 +21,8 @@ import './combobox';
 import './dialog';
 import './drawer';
 import './icons/all-icons';
+import './label-provider/core';
+import './label-provider/table';
 import './list-option';
 import './menu';
 import './menu-button';
diff --git a/packages/nimble-components/src/banner/template.ts b/packages/nimble-components/src/banner/template.ts
index 1047ec2d10..bb8ae99d02 100644
--- a/packages/nimble-components/src/banner/template.ts
+++ b/packages/nimble-components/src/banner/template.ts
@@ -6,6 +6,7 @@ import { iconInfoTag } from '../icons/info';
 import { iconTriangleFilledTag } from '../icons/triangle-filled';
 import { iconXmarkTag } from '../icons/xmark';
 import { BannerSeverity } from './types';
+import { alertDismissLabel } from '../label-provider/core/label-tokens';
 
 // prettier-ignore
 export const template = html<Banner>`
@@ -53,7 +54,7 @@ export const template = html<Banner>`
                 ${when(x => !x.preventDismiss, html<Banner>`
                     <${buttonTag} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
                         <${iconXmarkTag} slot="start"></${iconXmarkTag}>
-                        ${x => x.dismissButtonLabel ?? 'Close'}
+                        ${x => x.dismissButtonLabel ?? alertDismissLabel.getValueFor(x)}
                     </${buttonTag}>
                 `)}
             </div>
diff --git a/packages/nimble-components/src/banner/tests/banner.stories.ts b/packages/nimble-components/src/banner/tests/banner.stories.ts
index 5e2dba711c..ab6222421d 100644
--- a/packages/nimble-components/src/banner/tests/banner.stories.ts
+++ b/packages/nimble-components/src/banner/tests/banner.stories.ts
@@ -8,6 +8,12 @@ import { bannerTag } from '..';
 import { iconKeyTag } from '../../icons/key';
 import { buttonTag } from '../../button';
 import { anchorTag } from '../../anchor';
+import { labelProviderCoreTag } from '../../label-provider/core';
+import {
+    LabelUserArgs,
+    addLabelUseMetadata
+} from '../../label-provider/base/label-user-stories-utils';
+import { alertDismissLabel } from '../../label-provider/core/label-tokens';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const ActionType = {
@@ -20,7 +26,7 @@ const ActionType = {
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 type ActionType = (typeof ActionType)[keyof typeof ActionType];
 
-interface BannerArgs {
+interface BannerArgs extends LabelUserArgs {
     open: boolean;
     title: string;
     text: string;
@@ -55,6 +61,7 @@ const metadata: Meta<BannerArgs> = {
         }
     }
 };
+addLabelUseMetadata(metadata, labelProviderCoreTag, alertDismissLabel);
 
 export default metadata;
 
@@ -121,11 +128,13 @@ export const _banner: StoryObj<BannerArgs> = {
         dismissButtonLabel: {
             name: 'dismiss-button-label',
             description:
-                'Set to a localized label (e.g. `"Close"`) for the dismiss button. This provides an accessible name for assistive technologies.'
+                'Set to a localized label (e.g. `"Close"`) for the dismiss button. This provides an accessible name for assistive technologies.',
+            control: { type: 'none' }
         },
         toggle: {
             description:
-                'Event emitted by the banner when the `open` state changes. The event details include the booleans `oldState` and `newState`.'
+                'Event emitted by the banner when the `open` state changes. The event details include the booleans `oldState` and `newState`.',
+            control: { type: 'none' }
         }
     },
     args: {
@@ -135,6 +144,8 @@ export const _banner: StoryObj<BannerArgs> = {
         severity: BannerSeverity.error,
         action: 'none',
         preventDismiss: false,
-        titleHidden: false
+        titleHidden: false,
+        dismissButtonLabel: undefined,
+        toggle: undefined
     }
 };
diff --git a/packages/nimble-components/src/label-provider/base/index.ts b/packages/nimble-components/src/label-provider/base/index.ts
new file mode 100644
index 0000000000..345a274d0d
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/base/index.ts
@@ -0,0 +1,70 @@
+import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
+import { themeProviderTag } from '../../theme-provider';
+
+/**
+ * Base class for label providers
+ */
+export abstract class LabelProviderBase extends FoundationElement {
+    /**
+     * @internal
+     */
+    public abstract readonly labelTokens: {
+        [labelName: string]: DesignToken<string>
+    };
+
+    private readonly deferredTokenUpdates: Map<
+    DesignToken<string>,
+    string | undefined
+    > = new Map();
+
+    private themeProvider?: HTMLElement;
+
+    public override connectedCallback(): void {
+        super.connectedCallback();
+        this.updateThemeProvider();
+    }
+
+    public override disconnectedCallback(): void {
+        this.themeProvider = undefined;
+    }
+
+    /**
+     * Called from the [tokenPropertyName]Changed() methods to update the backing design token
+     * @param token DesignToken for the label
+     * @param newValue New value for the label
+     */
+    protected handleTokenChanged(
+        token: DesignToken<string>,
+        newValue: string | undefined
+    ): void {
+        if (this.themeProvider) {
+            this.updateTokenValue(this.themeProvider, token, newValue);
+        } else {
+            // For Blazor this method is called before this element is in the DOM. So cache the token value sets, and
+            // apply them after we're connected
+            this.deferredTokenUpdates.set(token, newValue);
+        }
+    }
+
+    private updateTokenValue(
+        target: HTMLElement,
+        token: DesignToken<string>,
+        newValue: string | undefined
+    ): void {
+        if (newValue !== undefined && newValue !== null) {
+            token.setValueFor(target, newValue);
+        } else {
+            token.deleteValueFor(target);
+        }
+    }
+
+    private updateThemeProvider(): void {
+        this.themeProvider = this.closest(themeProviderTag) ?? undefined;
+        if (this.themeProvider) {
+            for (const entry of this.deferredTokenUpdates.entries()) {
+                this.updateTokenValue(this.themeProvider, entry[0], entry[1]);
+            }
+            this.deferredTokenUpdates.clear();
+        }
+    }
+}
diff --git a/packages/nimble-components/src/label-provider/base/label-name-utils.ts b/packages/nimble-components/src/label-provider/base/label-name-utils.ts
new file mode 100644
index 0000000000..420a6c35f0
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/base/label-name-utils.ts
@@ -0,0 +1,9 @@
+import { spinalCase } from '@microsoft/fast-web-utilities';
+
+export function getPropertyName(jsKey: string): string {
+    return jsKey.replace(/Label$/, '');
+}
+
+export function getAttributeName(jsKey: string): string {
+    return spinalCase(getPropertyName(jsKey));
+}
diff --git a/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts b/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
new file mode 100644
index 0000000000..39b0db8326
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
@@ -0,0 +1,113 @@
+import { ViewTemplate, html, ref, repeat } from '@microsoft/fast-element';
+import type { Meta } from '@storybook/html';
+import type { DesignToken } from '@microsoft/fast-foundation';
+import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
+import type { LabelProviderBase } from '.';
+import {
+    bodyFont,
+    groupHeaderFont,
+    groupHeaderFontColor,
+    groupHeaderTextTransform
+} from '../../theme-provider/design-tokens';
+import { getAttributeName, getPropertyName } from './label-name-utils';
+
+export interface LabelProviderArgs {
+    labelProviderTag: string;
+    labelProviderRef: LabelProviderBase;
+    removeNamePrefix(tokenName: string): string;
+}
+
+const overviewText = `Some Nimble components use strings/labels that need to be localized, if the consuming application 
+supports localization. Nimble exposes these localizable labels as design tokens, to support both localization and the
+ability for clients to override the strings in specific contexts.
+
+Nimble provides English strings as the token defaults, and provides \`nimble-label-provider-*\` elements with APIs for
+overriding those values with localized versions.
+
+See the <a href="https://github.com/ni/nimble/tree/main/packages/nimble-components">nimble-components</a> readme and
+contributing docs for more information.`;
+
+const createTemplate = (
+    labelProviderTag: string
+): ViewTemplate<LabelProviderArgs> => html<LabelProviderArgs>`
+<${labelProviderTag} ${ref('labelProviderRef')}></${labelProviderTag}>
+<h2>${x => x.labelProviderTag}</h2>
+<hr/>
+<table>
+    <thead>
+        <th>Token name</th>
+        <th>HTML attribute name</th>
+        <th>JS property name</th>
+        <th>Default value (English)</th>
+    </thead>
+    <tbody>
+        ${repeat(
+        x => Object.entries(x.labelProviderRef.labelTokens),
+        html<[string, DesignToken<string>], LabelProviderArgs>`
+                <tr>
+                    <td>${x => x[0]}</td>
+                    <td>
+                        ${(x, c) => getAttributeName(c.parent.removeNamePrefix(x[0]))}
+                    </td>
+                    <td>
+                        ${(x, c) => getPropertyName(c.parent.removeNamePrefix(x[0]))}
+                    </td>
+                    <td>"${x => x[1].getValueFor(document.body)}"</td>
+                </tr>
+            `
+    )}
+    </tbody>
+</table>
+`;
+
+export const labelProviderMetadata: Meta<LabelProviderArgs> = {
+    parameters: {
+        docs: {
+            description: {
+                component: overviewText
+            }
+        },
+        chromatic: { disableSnapshot: true }
+    },
+    // prettier-ignore
+    render: createUserSelectedThemeStory(html<LabelProviderArgs>`
+        <div>
+            <style>
+                div {
+                    font: var(${bodyFont.cssCustomProperty});
+                }
+                thead {
+                    font: var(${groupHeaderFont.cssCustomProperty});
+                    color: var(${groupHeaderFontColor.cssCustomProperty});
+                    text-transform: var(${groupHeaderTextTransform.cssCustomProperty});
+                }
+                td { 
+                    padding: 10px 20px 10px 10px;
+                    height: 32px;
+                }
+            </style>
+            ${x => createTemplate(x.labelProviderTag)}
+        </div>
+    `),
+    argTypes: {
+        removeNamePrefix: {
+            table: {
+                disable: true
+            }
+        },
+        labelProviderTag: {
+            table: {
+                disable: true
+            }
+        },
+        labelProviderRef: {
+            table: {
+                disable: true
+            }
+        }
+    },
+    args: {
+        labelProviderTag: undefined,
+        removeNamePrefix: jsTokenName => jsTokenName
+    }
+};
diff --git a/packages/nimble-components/src/label-provider/base/label-user-stories-utils.ts b/packages/nimble-components/src/label-provider/base/label-user-stories-utils.ts
new file mode 100644
index 0000000000..87ddd4726b
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/base/label-user-stories-utils.ts
@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/html';
+import type { DesignToken } from '@microsoft/fast-foundation';
+
+export interface LabelUserArgs {
+    usedLabels: null;
+}
+
+export function addLabelUseMetadata<TArgs extends LabelUserArgs>(
+    metadata: Meta<TArgs>,
+    labelProviderTag: string,
+    ...labelTokens: DesignToken<string>[]
+): void {
+    let tokenContent: string;
+    if (labelTokens.length === 0) {
+        tokenContent = '- (All tokens on this provider are used)';
+    } else {
+        tokenContent = labelTokens
+            .map(token => `- \`${token.name}\``)
+            .join('\n');
+    }
+    if (metadata.argTypes === undefined) {
+        metadata.argTypes = {};
+    }
+    metadata.argTypes.usedLabels = {
+        name: 'Localizable labels',
+        description: `Label Provider:\`${labelProviderTag}\`
+${tokenContent}
+
+See the "Tokens/Label Providers" docs page for more information.
+`,
+        control: { type: 'none' }
+    };
+}
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
new file mode 100644
index 0000000000..c1005a9cf9
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -0,0 +1,79 @@
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem, DesignToken } from '@microsoft/fast-foundation';
+import { LabelProviderBase } from '../base';
+import type * as TokensNamespace from './label-tokens';
+import {
+    alertDismissLabel,
+    numberFieldDecrementLabel,
+    numberFieldIncrementLabel
+} from './label-tokens';
+import { coreLabelDefaults } from './label-token-defaults';
+
+type TokenName = keyof typeof TokensNamespace;
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-label-provider-core': LabelProviderCore;
+    }
+}
+
+/**
+ * Core label provider for Nimble
+ */
+export class LabelProviderCore extends LabelProviderBase {
+    public override readonly labelTokens: {
+        readonly [key in TokenName]: DesignToken<string>;
+    } = {
+            alertDismissLabel,
+            numberFieldIncrementLabel,
+            numberFieldDecrementLabel
+        };
+
+    @attr({
+        attribute: 'alert-dismiss',
+        mode: 'fromView'
+    })
+    public alertDismiss: string = coreLabelDefaults.alertDismissLabel;
+
+    @attr({
+        attribute: 'number-field-decrement',
+        mode: 'fromView'
+    })
+    public numberFieldDecrement: string = coreLabelDefaults.numberFieldDecrementLabel;
+
+    @attr({
+        attribute: 'number-field-increment',
+        mode: 'fromView'
+    })
+    public numberFieldIncrement: string = coreLabelDefaults.numberFieldIncrementLabel;
+
+    protected alertDismissChanged(
+        _prev: string | undefined,
+        next: string | undefined
+    ): void {
+        this.handleTokenChanged(alertDismissLabel, next);
+    }
+
+    protected numberFieldDecrementChanged(
+        _prev: string | undefined,
+        next: string | undefined
+    ): void {
+        this.handleTokenChanged(numberFieldDecrementLabel, next);
+    }
+
+    protected numberFieldIncrementChanged(
+        _prev: string | undefined,
+        next: string | undefined
+    ): void {
+        this.handleTokenChanged(numberFieldIncrementLabel, next);
+    }
+}
+
+const nimbleLabelProviderCore = LabelProviderCore.compose({
+    baseName: 'label-provider-core'
+});
+
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleLabelProviderCore());
+export const labelProviderCoreTag = DesignSystem.tagFor(LabelProviderCore);
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
new file mode 100644
index 0000000000..82ceeaf97f
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/label-token-defaults.ts
@@ -0,0 +1,9 @@
+import type * as TokensNamespace from './label-tokens';
+
+type TokenName = keyof typeof TokensNamespace;
+
+export const coreLabelDefaults: { readonly [key in TokenName]: string } = {
+    alertDismissLabel: 'Close',
+    numberFieldIncrementLabel: 'Increment',
+    numberFieldDecrementLabel: 'Decrement'
+};
diff --git a/packages/nimble-components/src/label-provider/core/label-tokens.ts b/packages/nimble-components/src/label-provider/core/label-tokens.ts
new file mode 100644
index 0000000000..988fb566ea
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/label-tokens.ts
@@ -0,0 +1,17 @@
+import { DesignToken } from '@microsoft/fast-foundation';
+import { coreLabelDefaults } from './label-token-defaults';
+
+export const alertDismissLabel = DesignToken.create<string>({
+    name: 'alert-dismiss-label',
+    cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.alertDismissLabel);
+
+export const numberFieldDecrementLabel = DesignToken.create<string>({
+    name: 'number-field-decrement-label',
+    cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.numberFieldDecrementLabel);
+
+export const numberFieldIncrementLabel = DesignToken.create<string>({
+    name: 'number-field-increment-label',
+    cssCustomPropertyName: null
+}).withDefault(coreLabelDefaults.numberFieldIncrementLabel);
diff --git a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts
new file mode 100644
index 0000000000..a3cb9203ed
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts
@@ -0,0 +1,127 @@
+import { spinalCase } from '@microsoft/fast-web-utilities';
+import { html } from '@microsoft/fast-element';
+import * as labelTokensNamespace from '../label-tokens';
+import { LabelProviderCore, labelProviderCoreTag } from '..';
+import { getSpecTypeByNamedList } from '../../../utilities/tests/parameterized';
+import { getAttributeName, getPropertyName } from '../../base/label-name-utils';
+import { ThemeProvider, themeProviderTag } from '../../../theme-provider';
+import { Fixture, fixture } from '../../../utilities/tests/fixture';
+
+type DesignTokenPropertyName = keyof typeof labelTokensNamespace;
+const designTokenPropertyNames = Object.keys(
+    labelTokensNamespace
+) as DesignTokenPropertyName[];
+
+async function setup(): Promise<Fixture<ThemeProvider>> {
+    return fixture<ThemeProvider>(html`
+        <${themeProviderTag}>
+            <${labelProviderCoreTag}></${labelProviderCoreTag}>
+        </${themeProviderTag}>
+    `);
+}
+
+describe('Label Provider Core', () => {
+    let element: LabelProviderCore;
+    let themeProvider: ThemeProvider;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+
+    beforeEach(async () => {
+        ({ element: themeProvider, connect, disconnect } = await setup());
+        element = themeProvider.querySelector(labelProviderCoreTag)!;
+        await connect();
+    });
+
+    afterEach(async () => {
+        await disconnect();
+    });
+
+    it('can construct an element instance', () => {
+        expect(
+            document.createElement('nimble-label-provider-core')
+        ).toBeInstanceOf(LabelProviderCore);
+    });
+
+    describe('token JS key should match DesignToken.name', () => {
+        const tokenEntries = designTokenPropertyNames.map(
+            (name: DesignTokenPropertyName) => ({
+                name,
+                labelToken: labelTokensNamespace[name]
+            })
+        );
+
+        for (const tokenEntry of tokenEntries) {
+            const focused: DesignTokenPropertyName[] = [];
+            const disabled: DesignTokenPropertyName[] = [];
+            const specType = getSpecTypeByNamedList(
+                tokenEntry,
+                focused,
+                disabled
+            );
+            specType(`for token name ${tokenEntry.name}`, () => {
+                const convertedTokenValue = spinalCase(tokenEntry.name);
+                expect(tokenEntry.labelToken.name).toBe(convertedTokenValue);
+            });
+        }
+    });
+
+    describe('token JS key should match a LabelProvider property/attribute', () => {
+        const tokenEntries = designTokenPropertyNames.map(
+            (name: DesignTokenPropertyName) => ({
+                name,
+                labelToken: labelTokensNamespace[name]
+            })
+        );
+
+        for (const tokenEntry of tokenEntries) {
+            const focused: DesignTokenPropertyName[] = [];
+            const disabled: DesignTokenPropertyName[] = [];
+            const specType = getSpecTypeByNamedList(
+                tokenEntry,
+                focused,
+                disabled
+            );
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(`for token name ${tokenEntry.name}`, () => {
+                const expectedPropertyName = getPropertyName(tokenEntry.name);
+                const expectedAttributeName = getAttributeName(tokenEntry.name);
+                const attributeDefinition = element.$fastController.definition.attributes.find(
+                    a => a.name === expectedPropertyName
+                );
+                expect(attributeDefinition).toBeDefined();
+                expect(expectedAttributeName).toEqual(
+                    attributeDefinition!.attribute
+                );
+            });
+        }
+    });
+
+    describe('token value is updated after setting corresponding LabelProvider attribute', () => {
+        const tokenEntries = designTokenPropertyNames.map(
+            (name: DesignTokenPropertyName) => ({
+                name,
+                labelToken: labelTokensNamespace[name]
+            })
+        );
+
+        for (const tokenEntry of tokenEntries) {
+            const focused: DesignTokenPropertyName[] = [];
+            const disabled: DesignTokenPropertyName[] = [];
+            const specType = getSpecTypeByNamedList(
+                tokenEntry,
+                focused,
+                disabled
+            );
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(`for token name ${tokenEntry.name}`, () => {
+                const attributeName = getAttributeName(tokenEntry.name);
+                const updatedValue = `NewString-${tokenEntry.name}`;
+                element.setAttribute(attributeName, updatedValue);
+
+                expect(tokenEntry.labelToken.getValueFor(themeProvider)).toBe(
+                    updatedValue
+                );
+            });
+        }
+    });
+});
diff --git a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
new file mode 100644
index 0000000000..6954d31b34
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/html';
+import {
+    LabelProviderArgs,
+    labelProviderMetadata
+} from '../../base/label-provider-stories-utils';
+import { labelProviderCoreTag } from '..';
+
+const metadata = {
+    ...labelProviderMetadata,
+    title: 'Tokens/Label Providers',
+    tags: ['autodocs']
+};
+
+export default metadata;
+
+export const coreLabelProvider: StoryObj<LabelProviderArgs> = {
+    args: {
+        labelProviderTag: labelProviderCoreTag
+    }
+};
diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts
new file mode 100644
index 0000000000..0f64b30cc4
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/index.ts
@@ -0,0 +1,104 @@
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { LabelProviderBase } from '../base';
+import {
+    tableCellActionMenuLabel,
+    tableColumnHeaderGroupedIndicatorLabel,
+    tableGroupCollapseLabel,
+    tableGroupExpandLabel,
+    tableGroupsCollapseAllLabel
+} from './label-tokens';
+import { tableLabelDefaults } from './label-token-defaults';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-label-provider-table': LabelProviderTable;
+    }
+}
+
+/**
+ * Label provider for the Nimble table (and its sub-components and columns)
+ */
+export class LabelProviderTable extends LabelProviderBase {
+    public override readonly labelTokens = {
+        tableGroupCollapseLabel,
+        tableGroupExpandLabel,
+        tableGroupsCollapseAllLabel,
+        tableCellActionMenuLabel,
+        tableColumnHeaderGroupedIndicatorLabel
+    };
+
+    @attr({
+        attribute: 'group-collapse',
+        mode: 'fromView'
+    })
+    public groupCollapse = tableLabelDefaults.tableGroupCollapseLabel;
+
+    @attr({
+        attribute: 'group-expand',
+        mode: 'fromView'
+    })
+    public groupExpand = tableLabelDefaults.tableGroupExpandLabel;
+
+    @attr({
+        attribute: 'groups-collapse-all',
+        mode: 'fromView'
+    })
+    public groupsCollapseAll = tableLabelDefaults.tableGroupsCollapseAllLabel;
+
+    @attr({
+        attribute: 'cell-action-menu',
+        mode: 'fromView'
+    })
+    public cellActionMenu = tableLabelDefaults.tableCellActionMenuLabel;
+
+    @attr({
+        attribute: 'column-header-grouped-indicator',
+        mode: 'fromView'
+    })
+    public columnHeaderGroupedIndicator = tableLabelDefaults.tableColumnHeaderGroupedIndicatorLabel;
+
+    protected groupCollapseChanged(
+        _prev: string | undefined,
+        next: string | undefined
+    ): void {
+        this.handleTokenChanged(tableGroupCollapseLabel, next);
+    }
+
+    protected groupExpandChanged(
+        _prev: string | undefined,
+        next: string | undefined
+    ): void {
+        this.handleTokenChanged(tableGroupExpandLabel, next);
+    }
+
+    protected groupsCollapseAllChanged(
+        _prev: string | undefined,
+        next: string | undefined
+    ): void {
+        this.handleTokenChanged(tableGroupsCollapseAllLabel, next);
+    }
+
+    protected cellActionMenuChanged(
+        _prev: string | undefined,
+        next: string | undefined
+    ): void {
+        this.handleTokenChanged(tableCellActionMenuLabel, next);
+    }
+
+    protected columnHeaderGroupedIndicatorChanged(
+        _prev: string | undefined,
+        next: string | undefined
+    ): void {
+        this.handleTokenChanged(tableColumnHeaderGroupedIndicatorLabel, next);
+    }
+}
+
+const nimbleLabelProviderTable = LabelProviderTable.compose({
+    baseName: 'label-provider-table'
+});
+
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleLabelProviderTable());
+export const labelProviderTableTag = DesignSystem.tagFor(LabelProviderTable);
diff --git a/packages/nimble-components/src/label-provider/table/label-token-defaults.ts b/packages/nimble-components/src/label-provider/table/label-token-defaults.ts
new file mode 100644
index 0000000000..b2a31d3de2
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/label-token-defaults.ts
@@ -0,0 +1,11 @@
+import type * as TokensNamespace from './label-tokens';
+
+type TokenName = keyof typeof TokensNamespace;
+
+export const tableLabelDefaults: { readonly [key in TokenName]: string } = {
+    tableGroupCollapseLabel: 'Collapse group',
+    tableGroupExpandLabel: 'Expand group',
+    tableGroupsCollapseAllLabel: 'Collapse all groups',
+    tableCellActionMenuLabel: 'Options',
+    tableColumnHeaderGroupedIndicatorLabel: 'Grouped'
+};
diff --git a/packages/nimble-components/src/label-provider/table/label-tokens.ts b/packages/nimble-components/src/label-provider/table/label-tokens.ts
new file mode 100644
index 0000000000..5d8a41394a
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/label-tokens.ts
@@ -0,0 +1,27 @@
+import { DesignToken } from '@microsoft/fast-foundation';
+import { tableLabelDefaults } from './label-token-defaults';
+
+export const tableGroupCollapseLabel = DesignToken.create<string>({
+    name: 'table-group-collapse-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableGroupCollapseLabel);
+
+export const tableGroupExpandLabel = DesignToken.create<string>({
+    name: 'table-group-expand-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableGroupExpandLabel);
+
+export const tableGroupsCollapseAllLabel = DesignToken.create<string>({
+    name: 'table-groups-collapse-all-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableGroupsCollapseAllLabel);
+
+export const tableCellActionMenuLabel = DesignToken.create<string>({
+    name: 'table-cell-action-menu-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableCellActionMenuLabel);
+
+export const tableColumnHeaderGroupedIndicatorLabel = DesignToken.create<string>({
+    name: 'table-column-header-grouped-indicator-label',
+    cssCustomPropertyName: null
+}).withDefault(tableLabelDefaults.tableColumnHeaderGroupedIndicatorLabel);
diff --git a/packages/nimble-components/src/label-provider/table/name-utils.ts b/packages/nimble-components/src/label-provider/table/name-utils.ts
new file mode 100644
index 0000000000..27fa0784ca
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/name-utils.ts
@@ -0,0 +1,12 @@
+/**
+ * Removes the table prefix and camelCases the input token name.
+ * (The design token name has the table prefix, but the properties on the LabelProviderTable do not, as they're already
+ * scoped to the table only)
+ */
+export function removeTablePrefixAndCamelCase(jsTokenName: string): string {
+    // Example: 'tableGroupExpandLabel' => 'groupExpandLabel'
+    return jsTokenName.replace(
+        /^table(\w)(\w+)/,
+        (_match: string, firstChar: string, restOfString: string) => `${firstChar.toLowerCase()}${restOfString}`
+    );
+}
diff --git a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts
new file mode 100644
index 0000000000..c5fee4e330
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts
@@ -0,0 +1,134 @@
+import { spinalCase } from '@microsoft/fast-web-utilities';
+import { html } from '@microsoft/fast-element';
+import * as labelTokensNamespace from '../label-tokens';
+import { LabelProviderTable, labelProviderTableTag } from '..';
+import { getSpecTypeByNamedList } from '../../../utilities/tests/parameterized';
+import { getAttributeName, getPropertyName } from '../../base/label-name-utils';
+import { ThemeProvider, themeProviderTag } from '../../../theme-provider';
+import { Fixture, fixture } from '../../../utilities/tests/fixture';
+import { removeTablePrefixAndCamelCase } from '../name-utils';
+
+type DesignTokenPropertyName = keyof typeof labelTokensNamespace;
+const designTokenPropertyNames = Object.keys(
+    labelTokensNamespace
+) as DesignTokenPropertyName[];
+
+async function setup(): Promise<Fixture<ThemeProvider>> {
+    return fixture<ThemeProvider>(html`
+        <${themeProviderTag}>
+            <${labelProviderTableTag}></${labelProviderTableTag}>
+        </${themeProviderTag}>
+    `);
+}
+
+describe('Label Provider Table', () => {
+    let element: LabelProviderTable;
+    let themeProvider: ThemeProvider;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+
+    beforeEach(async () => {
+        ({ element: themeProvider, connect, disconnect } = await setup());
+        element = themeProvider.querySelector(labelProviderTableTag)!;
+        await connect();
+    });
+
+    afterEach(async () => {
+        await disconnect();
+    });
+
+    it('can construct an element instance', () => {
+        expect(
+            document.createElement('nimble-label-provider-table')
+        ).toBeInstanceOf(LabelProviderTable);
+    });
+
+    describe('token JS key should match DesignToken.name', () => {
+        const tokenEntries = designTokenPropertyNames.map(
+            (name: DesignTokenPropertyName) => ({
+                name,
+                labelToken: labelTokensNamespace[name]
+            })
+        );
+
+        for (const tokenEntry of tokenEntries) {
+            const focused: DesignTokenPropertyName[] = [];
+            const disabled: DesignTokenPropertyName[] = [];
+            const specType = getSpecTypeByNamedList(
+                tokenEntry,
+                focused,
+                disabled
+            );
+            specType(`for token name ${tokenEntry.name}`, () => {
+                const convertedTokenValue = spinalCase(tokenEntry.name);
+                expect(tokenEntry.labelToken.name).toBe(convertedTokenValue);
+            });
+        }
+    });
+
+    describe('token JS key should match a LabelProvider property/attribute', () => {
+        const tokenEntries = designTokenPropertyNames.map(
+            (name: DesignTokenPropertyName) => ({
+                name,
+                labelToken: labelTokensNamespace[name]
+            })
+        );
+
+        for (const tokenEntry of tokenEntries) {
+            const focused: DesignTokenPropertyName[] = [];
+            const disabled: DesignTokenPropertyName[] = [];
+            const specType = getSpecTypeByNamedList(
+                tokenEntry,
+                focused,
+                disabled
+            );
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(`for token name ${tokenEntry.name}`, () => {
+                const tokenName = removeTablePrefixAndCamelCase(
+                    tokenEntry.name
+                );
+                const expectedPropertyName = getPropertyName(tokenName);
+                const expectedAttributeName = getAttributeName(tokenName);
+                const attributeDefinition = element.$fastController.definition.attributes.find(
+                    a => a.name === expectedPropertyName
+                );
+                expect(attributeDefinition).toBeDefined();
+                expect(expectedAttributeName).toEqual(
+                    attributeDefinition!.attribute
+                );
+            });
+        }
+    });
+
+    describe('token value is updated after setting corresponding LabelProvider attribute', () => {
+        const tokenEntries = designTokenPropertyNames.map(
+            (name: DesignTokenPropertyName) => ({
+                name,
+                labelToken: labelTokensNamespace[name]
+            })
+        );
+
+        for (const tokenEntry of tokenEntries) {
+            const focused: DesignTokenPropertyName[] = [];
+            const disabled: DesignTokenPropertyName[] = [];
+            const specType = getSpecTypeByNamedList(
+                tokenEntry,
+                focused,
+                disabled
+            );
+            // eslint-disable-next-line @typescript-eslint/no-loop-func
+            specType(`for token name ${tokenEntry.name}`, () => {
+                const tokenName = removeTablePrefixAndCamelCase(
+                    tokenEntry.name
+                );
+                const attributeName = getAttributeName(tokenName);
+                const updatedValue = `NewString-${tokenName}`;
+                element.setAttribute(attributeName, updatedValue);
+
+                expect(tokenEntry.labelToken.getValueFor(themeProvider)).toBe(
+                    updatedValue
+                );
+            });
+        }
+    });
+});
diff --git a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
new file mode 100644
index 0000000000..95dd6eb688
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/html';
+import {
+    LabelProviderArgs,
+    labelProviderMetadata
+} from '../../base/label-provider-stories-utils';
+import { labelProviderTableTag } from '..';
+import { removeTablePrefixAndCamelCase } from '../name-utils';
+
+const metadata = {
+    ...labelProviderMetadata,
+    title: 'Tokens/Label Providers'
+};
+
+export default metadata;
+
+export const tableLabelProvider: StoryObj<LabelProviderArgs> = {
+    args: {
+        labelProviderTag: labelProviderTableTag,
+        removeNamePrefix: removeTablePrefixAndCamelCase
+    }
+};
diff --git a/packages/nimble-components/src/number-field/index.ts b/packages/nimble-components/src/number-field/index.ts
index 9aecd6daae..063f7030c2 100644
--- a/packages/nimble-components/src/number-field/index.ts
+++ b/packages/nimble-components/src/number-field/index.ts
@@ -13,6 +13,10 @@ import { buttonTag } from '../button';
 import { iconMinusWideTag } from '../icons/minus-wide';
 import { iconAddTag } from '../icons/add';
 import { iconExclamationMarkTag } from '../icons/exclamation-mark';
+import {
+    numberFieldDecrementLabel,
+    numberFieldIncrementLabel
+} from '../label-provider/core/label-tokens';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -64,28 +68,28 @@ const nimbleNumberField = NumberField.compose<NumberFieldOptions>({
     shadowOptions: {
         delegatesFocus: true
     },
-    stepDownGlyph: html`
+    stepDownGlyph: html<NumberField>`
         <${buttonTag}
             class="step-up-down-button"
             appearance="ghost"
             content-hidden
             tabindex="-1"
         >
-            "Decrement"
+            ${x => numberFieldDecrementLabel.getValueFor(x)}
             <${iconMinusWideTag}
                 slot="start"
             >
             </${iconMinusWideTag}>
         </${buttonTag}>
     `,
-    stepUpGlyph: html`
+    stepUpGlyph: html<NumberField>`
         <${buttonTag}
             class="step-up-down-button"
             appearance="ghost"
             content-hidden
             tabindex="-1"
         >
-            "Increment"
+            ${x => numberFieldIncrementLabel.getValueFor(x)}
             <${iconAddTag}
                 slot="start">
             </${iconAddTag}>
diff --git a/packages/nimble-components/src/number-field/tests/number-field.stories.ts b/packages/nimble-components/src/number-field/tests/number-field.stories.ts
index 9fbfe9c48e..96e3464350 100644
--- a/packages/nimble-components/src/number-field/tests/number-field.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field.stories.ts
@@ -4,8 +4,17 @@ import type { Meta, StoryObj } from '@storybook/html';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
 import { NumberFieldAppearance } from '../types';
 import { numberFieldTag } from '..';
+import { labelProviderCoreTag } from '../../label-provider/core';
+import {
+    addLabelUseMetadata,
+    type LabelUserArgs
+} from '../../label-provider/base/label-user-stories-utils';
+import {
+    numberFieldDecrementLabel,
+    numberFieldIncrementLabel
+} from '../../label-provider/core/label-tokens';
 
-interface NumberFieldArgs {
+interface NumberFieldArgs extends LabelUserArgs {
     label: string;
     value: number;
     step: number;
@@ -71,6 +80,12 @@ const metadata: Meta<NumberFieldArgs> = {
         errorText: 'Value is invalid'
     }
 };
+addLabelUseMetadata(
+    metadata,
+    labelProviderCoreTag,
+    numberFieldDecrementLabel,
+    numberFieldIncrementLabel
+);
 
 export default metadata;
 
diff --git a/packages/nimble-components/src/table/components/group-row/template.ts b/packages/nimble-components/src/table/components/group-row/template.ts
index 4f80284dcc..01c23cea95 100644
--- a/packages/nimble-components/src/table/components/group-row/template.ts
+++ b/packages/nimble-components/src/table/components/group-row/template.ts
@@ -5,6 +5,10 @@ import { buttonTag } from '../../../button';
 import { ButtonAppearance } from '../../../button/types';
 import { iconArrowExpanderRightTag } from '../../../icons/arrow-expander-right';
 import { checkboxTag } from '../../../checkbox';
+import {
+    tableGroupCollapseLabel,
+    tableGroupExpandLabel
+} from '../../../label-provider/table/label-tokens';
 
 // prettier-ignore
 export const template = html<TableGroupRow>`
@@ -33,6 +37,7 @@ export const template = html<TableGroupRow>`
                 tabindex="-1"
             >
                 <${iconArrowExpanderRightTag} ${ref('expandIcon')} slot="start" class="expander-icon ${x => x.animationClass}"></${iconArrowExpanderRightTag}>
+                ${x => (x.expanded ? tableGroupCollapseLabel.getValueFor(x) : tableGroupExpandLabel.getValueFor(x))}
             </${buttonTag}>
         </span>
 
diff --git a/packages/nimble-components/src/table/components/header/template.ts b/packages/nimble-components/src/table/components/header/template.ts
index f7a1c0afc0..6e2104dddf 100644
--- a/packages/nimble-components/src/table/components/header/template.ts
+++ b/packages/nimble-components/src/table/components/header/template.ts
@@ -4,6 +4,7 @@ import { iconArrowDownTag } from '../../../icons/arrow-down';
 import { iconArrowUpTag } from '../../../icons/arrow-up';
 import { iconTwoSquaresInBracketsTag } from '../../../icons/two-squares-in-brackets';
 import { TableColumnSortDirection } from '../../types';
+import { tableColumnHeaderGroupedIndicatorLabel } from '../../../label-provider/table/label-tokens';
 
 // prettier-ignore
 export const template = html<TableHeader>`
@@ -20,8 +21,8 @@ export const template = html<TableHeader>`
         ${when(x => x.sortDirection === TableColumnSortDirection.descending, html`
             <${iconArrowDownTag} class="sort-indicator" aria-hidden="true"></${iconArrowDownTag}>
         `)}
-        ${when(x => x.isGrouped, html`
-            <${iconTwoSquaresInBracketsTag} class="grouped-indicator"></${iconTwoSquaresInBracketsTag}>
+        ${when(x => x.isGrouped, html<TableHeader>`
+            <${iconTwoSquaresInBracketsTag} class="grouped-indicator" title="${x => tableColumnHeaderGroupedIndicatorLabel.getValueFor(x)}"></${iconTwoSquaresInBracketsTag}>
         `)}
     </template>
 `;
diff --git a/packages/nimble-components/src/table/template.ts b/packages/nimble-components/src/table/template.ts
index 77368bef7c..34f1cb4b92 100644
--- a/packages/nimble-components/src/table/template.ts
+++ b/packages/nimble-components/src/table/template.ts
@@ -23,6 +23,7 @@ import { buttonTag } from '../button';
 import { ButtonAppearance } from '../button/types';
 import { iconTriangleTwoLinesHorizontalTag } from '../icons/triangle-two-lines-horizontal';
 import { checkboxTag } from '../checkbox';
+import { tableGroupsCollapseAllLabel } from '../label-provider/table/label-tokens';
 
 // prettier-ignore
 export const template = html<Table>`
@@ -59,6 +60,7 @@ export const template = html<Table>`
                             @click="${x => x.handleCollapseAllGroupRows()}"
                         >
                             <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>
+                            ${x => tableGroupsCollapseAllLabel.getValueFor(x)}
                         </${buttonTag}>
                     </span>
                     <span class="column-header-container">
diff --git a/packages/nimble-components/src/table/tests/table.stories.ts b/packages/nimble-components/src/table/tests/table.stories.ts
index b30d3afb51..5a916fe533 100644
--- a/packages/nimble-components/src/table/tests/table.stories.ts
+++ b/packages/nimble-components/src/table/tests/table.stories.ts
@@ -12,8 +12,13 @@ import { iconUserTag } from '../../icons/user';
 import { menuTag } from '../../menu';
 import { menuItemTag } from '../../menu-item';
 import { tableColumnTextTag } from '../../table-column/text';
+import {
+    addLabelUseMetadata,
+    type LabelUserArgs
+} from '../../label-provider/base/label-user-stories-utils';
+import { labelProviderTableTag } from '../../label-provider/table';
 
-interface TableArgs {
+interface TableArgs extends LabelUserArgs {
     data: ExampleDataType;
     selectionMode: keyof typeof TableRowSelectionMode;
     idFieldName: undefined;
@@ -268,6 +273,7 @@ const metadata: Meta<TableArgs> = {
         }
     }
 };
+addLabelUseMetadata(metadata, labelProviderTableTag);
 
 export default metadata;
 

From e1d83d038b2169fe1f8dd20a06c48a8ebe1b7eb1 Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Mon, 26 Jun 2023 16:21:11 -0500
Subject: [PATCH 02/18] Remove explicit LabelProviderBase.labelTokens property

---
 .../src/label-provider/base/index.ts                 |  7 -------
 .../base/label-provider-stories-utils.ts             | 12 +++++-------
 .../core/tests/label-provider-core.stories.ts        |  4 +++-
 .../src/label-provider/table/index.ts                |  8 --------
 .../table/tests/label-provider-table.stories.ts      |  2 ++
 5 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/packages/nimble-components/src/label-provider/base/index.ts b/packages/nimble-components/src/label-provider/base/index.ts
index 345a274d0d..0b419e4eff 100644
--- a/packages/nimble-components/src/label-provider/base/index.ts
+++ b/packages/nimble-components/src/label-provider/base/index.ts
@@ -5,13 +5,6 @@ import { themeProviderTag } from '../../theme-provider';
  * Base class for label providers
  */
 export abstract class LabelProviderBase extends FoundationElement {
-    /**
-     * @internal
-     */
-    public abstract readonly labelTokens: {
-        [labelName: string]: DesignToken<string>
-    };
-
     private readonly deferredTokenUpdates: Map<
     DesignToken<string>,
     string | undefined
diff --git a/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts b/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
index 39b0db8326..55e968eb26 100644
--- a/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
+++ b/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
@@ -1,8 +1,7 @@
-import { ViewTemplate, html, ref, repeat } from '@microsoft/fast-element';
+import { ViewTemplate, html, repeat } from '@microsoft/fast-element';
 import type { Meta } from '@storybook/html';
 import type { DesignToken } from '@microsoft/fast-foundation';
 import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
-import type { LabelProviderBase } from '.';
 import {
     bodyFont,
     groupHeaderFont,
@@ -13,7 +12,7 @@ import { getAttributeName, getPropertyName } from './label-name-utils';
 
 export interface LabelProviderArgs {
     labelProviderTag: string;
-    labelProviderRef: LabelProviderBase;
+    labelTokens: [string, DesignToken<string>][];
     removeNamePrefix(tokenName: string): string;
 }
 
@@ -30,7 +29,7 @@ contributing docs for more information.`;
 const createTemplate = (
     labelProviderTag: string
 ): ViewTemplate<LabelProviderArgs> => html<LabelProviderArgs>`
-<${labelProviderTag} ${ref('labelProviderRef')}></${labelProviderTag}>
+<${labelProviderTag}></${labelProviderTag}>
 <h2>${x => x.labelProviderTag}</h2>
 <hr/>
 <table>
@@ -42,7 +41,7 @@ const createTemplate = (
     </thead>
     <tbody>
         ${repeat(
-        x => Object.entries(x.labelProviderRef.labelTokens),
+        x => x.labelTokens,
         html<[string, DesignToken<string>], LabelProviderArgs>`
                 <tr>
                     <td>${x => x[0]}</td>
@@ -100,14 +99,13 @@ export const labelProviderMetadata: Meta<LabelProviderArgs> = {
                 disable: true
             }
         },
-        labelProviderRef: {
+        labelTokens: {
             table: {
                 disable: true
             }
         }
     },
     args: {
-        labelProviderTag: undefined,
         removeNamePrefix: jsTokenName => jsTokenName
     }
 };
diff --git a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
index 6954d31b34..8a3f3e45f9 100644
--- a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
+++ b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
@@ -4,6 +4,7 @@ import {
     labelProviderMetadata
 } from '../../base/label-provider-stories-utils';
 import { labelProviderCoreTag } from '..';
+import * as labelTokensNamespace from '../label-tokens';
 
 const metadata = {
     ...labelProviderMetadata,
@@ -15,6 +16,7 @@ export default metadata;
 
 export const coreLabelProvider: StoryObj<LabelProviderArgs> = {
     args: {
-        labelProviderTag: labelProviderCoreTag
+        labelProviderTag: labelProviderCoreTag,
+        labelTokens: Object.entries(labelTokensNamespace)
     }
 };
diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts
index 0f64b30cc4..9bb95077c4 100644
--- a/packages/nimble-components/src/label-provider/table/index.ts
+++ b/packages/nimble-components/src/label-provider/table/index.ts
@@ -20,14 +20,6 @@ declare global {
  * Label provider for the Nimble table (and its sub-components and columns)
  */
 export class LabelProviderTable extends LabelProviderBase {
-    public override readonly labelTokens = {
-        tableGroupCollapseLabel,
-        tableGroupExpandLabel,
-        tableGroupsCollapseAllLabel,
-        tableCellActionMenuLabel,
-        tableColumnHeaderGroupedIndicatorLabel
-    };
-
     @attr({
         attribute: 'group-collapse',
         mode: 'fromView'
diff --git a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
index 95dd6eb688..ca8a04a6f8 100644
--- a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
+++ b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
@@ -5,6 +5,7 @@ import {
 } from '../../base/label-provider-stories-utils';
 import { labelProviderTableTag } from '..';
 import { removeTablePrefixAndCamelCase } from '../name-utils';
+import * as labelTokensNamespace from '../label-tokens';
 
 const metadata = {
     ...labelProviderMetadata,
@@ -16,6 +17,7 @@ export default metadata;
 export const tableLabelProvider: StoryObj<LabelProviderArgs> = {
     args: {
         labelProviderTag: labelProviderTableTag,
+        labelTokens: Object.entries(labelTokensNamespace),
         removeNamePrefix: removeTablePrefixAndCamelCase
     }
 };

From 4a1404e49d2c34ccc5827b1ed52b00e3c3483aaf Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Mon, 26 Jun 2023 16:23:17 -0500
Subject: [PATCH 03/18] Change files

---
 ...le-components-6eb6eef1-eec2-4f6d-a98f-f7182ecdad50.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@ni-nimble-components-6eb6eef1-eec2-4f6d-a98f-f7182ecdad50.json

diff --git a/change/@ni-nimble-components-6eb6eef1-eec2-4f6d-a98f-f7182ecdad50.json b/change/@ni-nimble-components-6eb6eef1-eec2-4f6d-a98f-f7182ecdad50.json
new file mode 100644
index 0000000000..9fb64fece6
--- /dev/null
+++ b/change/@ni-nimble-components-6eb6eef1-eec2-4f6d-a98f-f7182ecdad50.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add nimble-label-provider-core and -table, along with localizable DesignTokens for labels/strings declared by Nimble components. Add docs for Localization.",
+  "packageName": "@ni/nimble-components",
+  "email": "20709258+msmithNI@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

From 6a518cd62bd9361dcb0e7045a93446812e71159e Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Mon, 26 Jun 2023 16:58:49 -0500
Subject: [PATCH 04/18] Add missing changes

---
 .../src/label-provider/core/index.ts                | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
index c1005a9cf9..98a0ba92a2 100644
--- a/packages/nimble-components/src/label-provider/core/index.ts
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -1,7 +1,6 @@
 import { attr } from '@microsoft/fast-element';
-import { DesignSystem, DesignToken } from '@microsoft/fast-foundation';
+import { DesignSystem } from '@microsoft/fast-foundation';
 import { LabelProviderBase } from '../base';
-import type * as TokensNamespace from './label-tokens';
 import {
     alertDismissLabel,
     numberFieldDecrementLabel,
@@ -9,8 +8,6 @@ import {
 } from './label-tokens';
 import { coreLabelDefaults } from './label-token-defaults';
 
-type TokenName = keyof typeof TokensNamespace;
-
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-label-provider-core': LabelProviderCore;
@@ -21,14 +18,6 @@ declare global {
  * Core label provider for Nimble
  */
 export class LabelProviderCore extends LabelProviderBase {
-    public override readonly labelTokens: {
-        readonly [key in TokenName]: DesignToken<string>;
-    } = {
-            alertDismissLabel,
-            numberFieldIncrementLabel,
-            numberFieldDecrementLabel
-        };
-
     @attr({
         attribute: 'alert-dismiss',
         mode: 'fromView'

From df11bcb8f26f23f88b4187298a13993121d1a1d3 Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Mon, 26 Jun 2023 17:05:50 -0500
Subject: [PATCH 05/18] Update CONTRIBUTING.md

---
 packages/nimble-components/CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nimble-components/CONTRIBUTING.md b/packages/nimble-components/CONTRIBUTING.md
index bd92345db1..b94ef19a9a 100644
--- a/packages/nimble-components/CONTRIBUTING.md
+++ b/packages/nimble-components/CONTRIBUTING.md
@@ -438,7 +438,7 @@ There are currently 2 label providers:
 -   `nimble-label-provider-core`: Used for labels for all components besides the table
 -   `nimble-label-provider-table`: Used for labels for the table (and table sub-components / column types)
 
-To add new labels to a label provider, follow the existing patterns (create a `DesignToken<string>`, an `@attr`-backed property, a `propertyChanged()` function that updates the token value, and add it to the `labelTokens` collection).
+To add new labels to a label provider, follow the existing patterns (create a `DesignToken<string>`, an `@attr`-backed property, and a `propertyChanged()` function that updates the token value).
 
 The expected format for label token names is:
 

From 0bcdbb4a0ac0449bd547d22630bae93f02e6ea02 Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Tue, 27 Jun 2023 17:22:51 -0500
Subject: [PATCH 06/18] Add missing test for deferredTokenUpdates code path
 (setting label tokens before attached to DOM)

---
 .../base/tests/label-provider-base.spec.ts    | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts

diff --git a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
new file mode 100644
index 0000000000..e298a176c0
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
@@ -0,0 +1,68 @@
+import { attr, customElement, html } from '@microsoft/fast-element';
+import { DesignToken } from '@microsoft/fast-foundation';
+import { LabelProviderBase } from '..';
+import { ThemeProvider, themeProviderTag } from '../../../theme-provider';
+import {
+    Fixture,
+    fixture,
+    uniqueElementName
+} from '../../../utilities/tests/fixture';
+
+async function setup(): Promise<Fixture<ThemeProvider>> {
+    return fixture<ThemeProvider>(html`
+        <${themeProviderTag}>
+        </${themeProviderTag}>
+    `);
+}
+
+const exampleLabelDefaultValue = 'Initial Value';
+const exampleLabel = DesignToken.create<string>({
+    name: 'test-example-label',
+    cssCustomPropertyName: null
+}).withDefault(exampleLabelDefaultValue);
+
+describe('Label Provider Base', () => {
+    let themeProvider: ThemeProvider;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+
+    const testLabelProviderTag = uniqueElementName();
+
+    @customElement({
+        name: testLabelProviderTag
+    })
+    class LabelProviderTest extends LabelProviderBase {
+        @attr({
+            attribute: 'test-example',
+            mode: 'fromView'
+        })
+        public exampleLabel: string = exampleLabelDefaultValue;
+
+        protected exampleLabelChanged(
+            _prev: string | undefined,
+            next: string | undefined
+        ): void {
+            this.handleTokenChanged(exampleLabel, next);
+        }
+    }
+
+    beforeEach(async () => {
+        ({ element: themeProvider, connect, disconnect } = await setup());
+        await connect();
+    });
+
+    afterEach(async () => {
+        await disconnect();
+    });
+
+    it('token values can be set before connected to DOM, and are set on target theme provider once attached', () => {
+        const element = document.createElement(
+            testLabelProviderTag
+        ) as LabelProviderTest;
+        element.exampleLabel = 'Updated Value';
+        themeProvider.appendChild(element);
+
+        const tokenValue = exampleLabel.getValueFor(themeProvider);
+        expect(tokenValue).toBe('Updated Value');
+    });
+});

From e070de537d61dfd326176d73e7f1070b39ca0c70 Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Tue, 27 Jun 2023 18:49:41 -0500
Subject: [PATCH 07/18] Storybook updates

---
 .../base/label-provider-stories-utils.ts      | 18 +-----------
 .../base/tests/label-providers.mdx            | 28 +++++++++++++++++++
 .../core/tests/label-provider-core.stories.ts |  3 +-
 3 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 packages/nimble-components/src/label-provider/base/tests/label-providers.mdx

diff --git a/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts b/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
index 55e968eb26..6a7caaa8a6 100644
--- a/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
+++ b/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
@@ -16,22 +16,11 @@ export interface LabelProviderArgs {
     removeNamePrefix(tokenName: string): string;
 }
 
-const overviewText = `Some Nimble components use strings/labels that need to be localized, if the consuming application 
-supports localization. Nimble exposes these localizable labels as design tokens, to support both localization and the
-ability for clients to override the strings in specific contexts.
-
-Nimble provides English strings as the token defaults, and provides \`nimble-label-provider-*\` elements with APIs for
-overriding those values with localized versions.
-
-See the <a href="https://github.com/ni/nimble/tree/main/packages/nimble-components">nimble-components</a> readme and
-contributing docs for more information.`;
-
 const createTemplate = (
     labelProviderTag: string
 ): ViewTemplate<LabelProviderArgs> => html<LabelProviderArgs>`
 <${labelProviderTag}></${labelProviderTag}>
-<h2>${x => x.labelProviderTag}</h2>
-<hr/>
+<p>Element name: <code>${x => x.labelProviderTag}</code></p>
 <table>
     <thead>
         <th>Token name</th>
@@ -61,11 +50,6 @@ const createTemplate = (
 
 export const labelProviderMetadata: Meta<LabelProviderArgs> = {
     parameters: {
-        docs: {
-            description: {
-                component: overviewText
-            }
-        },
         chromatic: { disableSnapshot: true }
     },
     // prettier-ignore
diff --git a/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx b/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx
new file mode 100644
index 0000000000..b34a192e8b
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx
@@ -0,0 +1,28 @@
+import { Canvas, Meta, Title } from '@storybook/blocks';
+import { coreLabelProvider } from '../../core/tests/label-provider-core.stories';
+import { tableLabelProvider } from '../../table/tests/label-provider-table.stories';
+
+<Meta title="Tokens/Label Providers" />
+<Title>Label Providers</Title>
+
+Some Nimble components use strings/labels that need to be localized, if the consuming application
+supports localization. Nimble exposes these localizable labels as design tokens, to support both localization and the
+ability for clients to override the strings in specific contexts.
+
+Nimble provides English strings as the token defaults, and provides `nimble-label-provider-*` elements with APIs for
+overriding those values with localized versions.
+
+See the <a href="https://github.com/ni/nimble/tree/main/packages/nimble-components">nimble-components</a> readme and
+contributing docs for more information.
+
+## Core Label Provider
+
+Provides labels for all Nimble components besides the table component.
+
+<Canvas of={coreLabelProvider} sourceState="none" />
+
+## Table Label Provider
+
+Provides labels for the `nimble-table` and all associated table sub-components / column types.
+
+<Canvas of={tableLabelProvider} sourceState="none" />
diff --git a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
index 8a3f3e45f9..1eb02078c2 100644
--- a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
+++ b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
@@ -8,8 +8,7 @@ import * as labelTokensNamespace from '../label-tokens';
 
 const metadata = {
     ...labelProviderMetadata,
-    title: 'Tokens/Label Providers',
-    tags: ['autodocs']
+    title: 'Tokens/Label Providers'
 };
 
 export default metadata;

From a404c09b6d59cd28269652be6993995038f9344b Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Wed, 28 Jun 2023 15:52:17 -0500
Subject: [PATCH 08/18] Update docs / move story/name utils into tests folder

---
 packages/nimble-components/CONTRIBUTING.md                 | 3 +--
 packages/nimble-components/README.md                       | 3 +--
 .../nimble-components/src/banner/tests/banner.stories.ts   | 2 +-
 .../label-provider/base/{ => tests}/label-name-utils.ts    | 0
 .../base/{ => tests}/label-provider-stories-utils.ts       | 4 ++--
 .../src/label-provider/base/tests/label-providers.mdx      | 7 +------
 .../base/{ => tests}/label-user-stories-utils.ts           | 0
 .../label-provider/core/tests/label-provider-core.spec.ts  | 5 ++++-
 .../core/tests/label-provider-core.stories.ts              | 2 +-
 .../table/tests/label-provider-table.spec.ts               | 5 ++++-
 .../table/tests/label-provider-table.stories.ts            | 2 +-
 .../src/number-field/tests/number-field.stories.ts         | 2 +-
 .../nimble-components/src/table/tests/table.stories.ts     | 2 +-
 13 files changed, 18 insertions(+), 19 deletions(-)
 rename packages/nimble-components/src/label-provider/base/{ => tests}/label-name-utils.ts (100%)
 rename packages/nimble-components/src/label-provider/base/{ => tests}/label-provider-stories-utils.ts (95%)
 rename packages/nimble-components/src/label-provider/base/{ => tests}/label-user-stories-utils.ts (100%)

diff --git a/packages/nimble-components/CONTRIBUTING.md b/packages/nimble-components/CONTRIBUTING.md
index b94ef19a9a..2a06f2eca0 100644
--- a/packages/nimble-components/CONTRIBUTING.md
+++ b/packages/nimble-components/CONTRIBUTING.md
@@ -430,9 +430,8 @@ When creating a new component, create a `*-matrix.stories.ts` Storybook file to
 
 ## Localization
 
-Nimble components may need to use some strings/labels (such as the label for a close button in a component's template, or menu items in a component-provided menu). Nimble exposes these localizable labels as design tokens, to support both localization and the ability for clients to override the strings.
+Most user-visible strings displayed by Nimble components are provided by the client application and are expected to be localized by the application if necessary. However, some strings are built into Nimble components and are provided only in English. An application can provide localized versions of these strings by using design tokens set on label provider elements.
 
-Nimble provides English strings as the token defaults, and provides `nimble-label-provider-*` elements with APIs for overriding those values.  
 There are currently 2 label providers:
 
 -   `nimble-label-provider-core`: Used for labels for all components besides the table
diff --git a/packages/nimble-components/README.md b/packages/nimble-components/README.md
index b9a1ab73b2..3529674cfa 100644
--- a/packages/nimble-components/README.md
+++ b/packages/nimble-components/README.md
@@ -98,9 +98,8 @@ The goal of the Nimble design system is to provide a consistent style for applic
 
 ## Localization
 
-Some Nimble components use strings/labels that need to be localized, if the consuming application supports localization. Nimble exposes these localizable labels as design tokens, to support both localization and the ability for clients to override the strings.
+Most user-visible strings displayed by Nimble components are provided by the client application and are expected to be localized by the application if necessary. However, some strings are built into Nimble components and are provided only in English. An application can provide localized versions of these strings by using design tokens set on label provider elements.
 
-Nimble provides English strings as the token defaults, and provides `nimble-label-provider-*` elements with APIs for overriding those values.  
 There are currently 2 label providers:
 
 -   `nimble-label-provider-core`: Used for labels for all components besides the table
diff --git a/packages/nimble-components/src/banner/tests/banner.stories.ts b/packages/nimble-components/src/banner/tests/banner.stories.ts
index ab6222421d..cb5a9f7cab 100644
--- a/packages/nimble-components/src/banner/tests/banner.stories.ts
+++ b/packages/nimble-components/src/banner/tests/banner.stories.ts
@@ -12,7 +12,7 @@ import { labelProviderCoreTag } from '../../label-provider/core';
 import {
     LabelUserArgs,
     addLabelUseMetadata
-} from '../../label-provider/base/label-user-stories-utils';
+} from '../../label-provider/base/tests/label-user-stories-utils';
 import { alertDismissLabel } from '../../label-provider/core/label-tokens';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/packages/nimble-components/src/label-provider/base/label-name-utils.ts b/packages/nimble-components/src/label-provider/base/tests/label-name-utils.ts
similarity index 100%
rename from packages/nimble-components/src/label-provider/base/label-name-utils.ts
rename to packages/nimble-components/src/label-provider/base/tests/label-name-utils.ts
diff --git a/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts b/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts
similarity index 95%
rename from packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
rename to packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts
index 6a7caaa8a6..3b6866395f 100644
--- a/packages/nimble-components/src/label-provider/base/label-provider-stories-utils.ts
+++ b/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts
@@ -1,13 +1,13 @@
 import { ViewTemplate, html, repeat } from '@microsoft/fast-element';
 import type { Meta } from '@storybook/html';
 import type { DesignToken } from '@microsoft/fast-foundation';
-import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
+import { createUserSelectedThemeStory } from '../../../utilities/tests/storybook';
 import {
     bodyFont,
     groupHeaderFont,
     groupHeaderFontColor,
     groupHeaderTextTransform
-} from '../../theme-provider/design-tokens';
+} from '../../../theme-provider/design-tokens';
 import { getAttributeName, getPropertyName } from './label-name-utils';
 
 export interface LabelProviderArgs {
diff --git a/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx b/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx
index b34a192e8b..26e742daa3 100644
--- a/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx
+++ b/packages/nimble-components/src/label-provider/base/tests/label-providers.mdx
@@ -5,12 +5,7 @@ import { tableLabelProvider } from '../../table/tests/label-provider-table.stori
 <Meta title="Tokens/Label Providers" />
 <Title>Label Providers</Title>
 
-Some Nimble components use strings/labels that need to be localized, if the consuming application
-supports localization. Nimble exposes these localizable labels as design tokens, to support both localization and the
-ability for clients to override the strings in specific contexts.
-
-Nimble provides English strings as the token defaults, and provides `nimble-label-provider-*` elements with APIs for
-overriding those values with localized versions.
+Most user-visible strings displayed by Nimble components are provided by the client application and are expected to be localized by the application if necessary. However, some strings are built into Nimble components and are provided only in English. An application can provide localized versions of these strings by using design tokens set on label provider elements.
 
 See the <a href="https://github.com/ni/nimble/tree/main/packages/nimble-components">nimble-components</a> readme and
 contributing docs for more information.
diff --git a/packages/nimble-components/src/label-provider/base/label-user-stories-utils.ts b/packages/nimble-components/src/label-provider/base/tests/label-user-stories-utils.ts
similarity index 100%
rename from packages/nimble-components/src/label-provider/base/label-user-stories-utils.ts
rename to packages/nimble-components/src/label-provider/base/tests/label-user-stories-utils.ts
diff --git a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts
index a3cb9203ed..5dca1cf8d0 100644
--- a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts
+++ b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.spec.ts
@@ -3,7 +3,10 @@ import { html } from '@microsoft/fast-element';
 import * as labelTokensNamespace from '../label-tokens';
 import { LabelProviderCore, labelProviderCoreTag } from '..';
 import { getSpecTypeByNamedList } from '../../../utilities/tests/parameterized';
-import { getAttributeName, getPropertyName } from '../../base/label-name-utils';
+import {
+    getAttributeName,
+    getPropertyName
+} from '../../base/tests/label-name-utils';
 import { ThemeProvider, themeProviderTag } from '../../../theme-provider';
 import { Fixture, fixture } from '../../../utilities/tests/fixture';
 
diff --git a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
index 1eb02078c2..6eff6fb29a 100644
--- a/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
+++ b/packages/nimble-components/src/label-provider/core/tests/label-provider-core.stories.ts
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/html';
 import {
     LabelProviderArgs,
     labelProviderMetadata
-} from '../../base/label-provider-stories-utils';
+} from '../../base/tests/label-provider-stories-utils';
 import { labelProviderCoreTag } from '..';
 import * as labelTokensNamespace from '../label-tokens';
 
diff --git a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts
index c5fee4e330..1659d7e4db 100644
--- a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts
+++ b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.spec.ts
@@ -3,7 +3,10 @@ import { html } from '@microsoft/fast-element';
 import * as labelTokensNamespace from '../label-tokens';
 import { LabelProviderTable, labelProviderTableTag } from '..';
 import { getSpecTypeByNamedList } from '../../../utilities/tests/parameterized';
-import { getAttributeName, getPropertyName } from '../../base/label-name-utils';
+import {
+    getAttributeName,
+    getPropertyName
+} from '../../base/tests/label-name-utils';
 import { ThemeProvider, themeProviderTag } from '../../../theme-provider';
 import { Fixture, fixture } from '../../../utilities/tests/fixture';
 import { removeTablePrefixAndCamelCase } from '../name-utils';
diff --git a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
index ca8a04a6f8..4904d06b56 100644
--- a/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
+++ b/packages/nimble-components/src/label-provider/table/tests/label-provider-table.stories.ts
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/html';
 import {
     LabelProviderArgs,
     labelProviderMetadata
-} from '../../base/label-provider-stories-utils';
+} from '../../base/tests/label-provider-stories-utils';
 import { labelProviderTableTag } from '..';
 import { removeTablePrefixAndCamelCase } from '../name-utils';
 import * as labelTokensNamespace from '../label-tokens';
diff --git a/packages/nimble-components/src/number-field/tests/number-field.stories.ts b/packages/nimble-components/src/number-field/tests/number-field.stories.ts
index 96e3464350..7d48e23c82 100644
--- a/packages/nimble-components/src/number-field/tests/number-field.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field.stories.ts
@@ -8,7 +8,7 @@ import { labelProviderCoreTag } from '../../label-provider/core';
 import {
     addLabelUseMetadata,
     type LabelUserArgs
-} from '../../label-provider/base/label-user-stories-utils';
+} from '../../label-provider/base/tests/label-user-stories-utils';
 import {
     numberFieldDecrementLabel,
     numberFieldIncrementLabel
diff --git a/packages/nimble-components/src/table/tests/table.stories.ts b/packages/nimble-components/src/table/tests/table.stories.ts
index 5a916fe533..c099704e6f 100644
--- a/packages/nimble-components/src/table/tests/table.stories.ts
+++ b/packages/nimble-components/src/table/tests/table.stories.ts
@@ -15,7 +15,7 @@ import { tableColumnTextTag } from '../../table-column/text';
 import {
     addLabelUseMetadata,
     type LabelUserArgs
-} from '../../label-provider/base/label-user-stories-utils';
+} from '../../label-provider/base/tests/label-user-stories-utils';
 import { labelProviderTableTag } from '../../label-provider/table';
 
 interface TableArgs extends LabelUserArgs {

From 8dbf4db338dc5795eb53e3af0191cb24c90efdfe Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Wed, 28 Jun 2023 16:22:45 -0500
Subject: [PATCH 09/18] Uptake nimble-table for label token stories

---
 .../tests/label-provider-stories-utils.ts     | 114 +++++++++++-------
 1 file changed, 71 insertions(+), 43 deletions(-)

diff --git a/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts b/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts
index 3b6866395f..be9696b401 100644
--- a/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts
+++ b/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts
@@ -1,19 +1,18 @@
-import { ViewTemplate, html, repeat } from '@microsoft/fast-element';
+import { ViewTemplate, html, ref } from '@microsoft/fast-element';
 import type { Meta } from '@storybook/html';
 import type { DesignToken } from '@microsoft/fast-foundation';
 import { createUserSelectedThemeStory } from '../../../utilities/tests/storybook';
-import {
-    bodyFont,
-    groupHeaderFont,
-    groupHeaderFontColor,
-    groupHeaderTextTransform
-} from '../../../theme-provider/design-tokens';
+import { bodyFont } from '../../../theme-provider/design-tokens';
 import { getAttributeName, getPropertyName } from './label-name-utils';
+import { Table, tableTag } from '../../../table';
+import { tableColumnTextTag } from '../../../table-column/text';
 
 export interface LabelProviderArgs {
+    tableRef: Table;
     labelProviderTag: string;
     labelTokens: [string, DesignToken<string>][];
     removeNamePrefix(tokenName: string): string;
+    updateData(args: LabelProviderArgs): void;
 }
 
 const createTemplate = (
@@ -21,32 +20,35 @@ const createTemplate = (
 ): ViewTemplate<LabelProviderArgs> => html<LabelProviderArgs>`
 <${labelProviderTag}></${labelProviderTag}>
 <p>Element name: <code>${x => x.labelProviderTag}</code></p>
-<table>
-    <thead>
-        <th>Token name</th>
-        <th>HTML attribute name</th>
-        <th>JS property name</th>
-        <th>Default value (English)</th>
-    </thead>
-    <tbody>
-        ${repeat(
-        x => x.labelTokens,
-        html<[string, DesignToken<string>], LabelProviderArgs>`
-                <tr>
-                    <td>${x => x[0]}</td>
-                    <td>
-                        ${(x, c) => getAttributeName(c.parent.removeNamePrefix(x[0]))}
-                    </td>
-                    <td>
-                        ${(x, c) => getPropertyName(c.parent.removeNamePrefix(x[0]))}
-                    </td>
-                    <td>"${x => x[1].getValueFor(document.body)}"</td>
-                </tr>
-            `
-    )}
-    </tbody>
-</table>
-`;
+<${tableTag}
+    ${ref('tableRef')}
+    data-unused="${x => x.updateData(x)}"
+>
+    <${tableColumnTextTag}
+        column-id="token-name-column"
+        field-name="tokenName"
+    >
+        Token name
+    </${tableColumnTextTag}>
+    <${tableColumnTextTag}
+        column-id="attribute-name-column"
+        field-name="htmlAttributeName"
+    >
+        HTML attribute name
+    </${tableColumnTextTag}>
+    <${tableColumnTextTag}
+        column-id="property-name-column"
+        field-name="jsPropertyName"
+    >
+        JS property name
+    </${tableColumnTextTag}>
+    <${tableColumnTextTag}
+        column-id="default-value-column"
+        field-name="defaultValue"
+    >
+        Default value (English)
+    </${tableColumnTextTag}>
+</${tableTag}>`;
 
 export const labelProviderMetadata: Meta<LabelProviderArgs> = {
     parameters: {
@@ -56,17 +58,11 @@ export const labelProviderMetadata: Meta<LabelProviderArgs> = {
     render: createUserSelectedThemeStory(html<LabelProviderArgs>`
         <div>
             <style>
-                div {
+                p {
                     font: var(${bodyFont.cssCustomProperty});
                 }
-                thead {
-                    font: var(${groupHeaderFont.cssCustomProperty});
-                    color: var(${groupHeaderFontColor.cssCustomProperty});
-                    text-transform: var(${groupHeaderTextTransform.cssCustomProperty});
-                }
-                td { 
-                    padding: 10px 20px 10px 10px;
-                    height: 32px;
+                ${tableTag} {
+                    height: auto;
                 }
             </style>
             ${x => createTemplate(x.labelProviderTag)}
@@ -87,9 +83,41 @@ export const labelProviderMetadata: Meta<LabelProviderArgs> = {
             table: {
                 disable: true
             }
+        },
+        tableRef: {
+            table: {
+                disable: true
+            }
+        },
+        updateData: {
+            table: {
+                disable: true
+            }
         }
     },
     args: {
-        removeNamePrefix: jsTokenName => jsTokenName
+        removeNamePrefix: jsTokenName => jsTokenName,
+        tableRef: undefined,
+        updateData: x => {
+            void (async () => {
+                // Safari workaround: the table element instance is made at this point
+                // but doesn't seem to be upgraded to a custom element yet
+                await customElements.whenDefined('nimble-table');
+
+                const data = x.labelTokens.map(token => {
+                    return {
+                        tokenName: token[0],
+                        htmlAttributeName: getAttributeName(
+                            x.removeNamePrefix(token[0])
+                        ),
+                        jsPropertyName: getPropertyName(
+                            x.removeNamePrefix(token[0])
+                        ),
+                        defaultValue: token[1].getValueFor(document.body)
+                    };
+                });
+                await x.tableRef.setData(data);
+            })();
+        }
     }
 };

From ff69c73a6aba1efa1886d1bbe47ea86455f497fd Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Wed, 28 Jun 2023 18:54:44 -0500
Subject: [PATCH 10/18] PR feedback

---
 .../src/label-provider/base/index.ts          | 66 ++++++--------
 .../base/tests/label-provider-base.spec.ts    | 18 ++--
 .../tests/label-provider-stories-utils.ts     |  4 -
 .../src/label-provider/core/index.ts          | 57 ++++--------
 .../src/label-provider/table/index.ts         | 91 +++++--------------
 5 files changed, 79 insertions(+), 157 deletions(-)

diff --git a/packages/nimble-components/src/label-provider/base/index.ts b/packages/nimble-components/src/label-provider/base/index.ts
index 0b419e4eff..6db6133d54 100644
--- a/packages/nimble-components/src/label-provider/base/index.ts
+++ b/packages/nimble-components/src/label-provider/base/index.ts
@@ -1,63 +1,57 @@
 import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
+import { Observable, Subscriber } from '@microsoft/fast-element';
 import { themeProviderTag } from '../../theme-provider';
 
 /**
  * Base class for label providers
  */
-export abstract class LabelProviderBase extends FoundationElement {
-    private readonly deferredTokenUpdates: Map<
-    DesignToken<string>,
-    string | undefined
-    > = new Map();
+export abstract class LabelProviderBase
+    extends FoundationElement
+    implements Subscriber {
+    protected abstract readonly supportedLabels: {
+        [P in keyof LabelProviderBase]?: DesignToken<string>;
+    };
 
     private themeProvider?: HTMLElement;
 
+    public constructor() {
+        super();
+        Observable.getNotifier(this).subscribe(this);
+    }
+
     public override connectedCallback(): void {
         super.connectedCallback();
-        this.updateThemeProvider();
+        this.initializeThemeProvider();
     }
 
     public override disconnectedCallback(): void {
         this.themeProvider = undefined;
     }
 
-    /**
-     * Called from the [tokenPropertyName]Changed() methods to update the backing design token
-     * @param token DesignToken for the label
-     * @param newValue New value for the label
-     */
-    protected handleTokenChanged(
-        token: DesignToken<string>,
-        newValue: string | undefined
+    public handleChange(
+        _element: LabelProviderBase,
+        property: keyof LabelProviderBase
     ): void {
-        if (this.themeProvider) {
-            this.updateTokenValue(this.themeProvider, token, newValue);
-        } else {
-            // For Blazor this method is called before this element is in the DOM. So cache the token value sets, and
-            // apply them after we're connected
-            this.deferredTokenUpdates.set(token, newValue);
-        }
-    }
-
-    private updateTokenValue(
-        target: HTMLElement,
-        token: DesignToken<string>,
-        newValue: string | undefined
-    ): void {
-        if (newValue !== undefined && newValue !== null) {
-            token.setValueFor(target, newValue);
-        } else {
-            token.deleteValueFor(target);
+        if (this.supportedLabels[property]) {
+            const token = this.supportedLabels[property]!;
+            let value = this[property] as string | undefined;
+            if (value === undefined) {
+                value = token.getValueFor(this);
+            }
+            token.setValueFor(this, value);
+            if (this.themeProvider) {
+                token.setValueFor(this.themeProvider, value);
+            }
         }
     }
 
-    private updateThemeProvider(): void {
+    private initializeThemeProvider(): void {
         this.themeProvider = this.closest(themeProviderTag) ?? undefined;
         if (this.themeProvider) {
-            for (const entry of this.deferredTokenUpdates.entries()) {
-                this.updateTokenValue(this.themeProvider, entry[0], entry[1]);
+            for (const token of Object.values(this.supportedLabels)) {
+                const value = token.getValueFor(this);
+                token.setValueFor(this.themeProvider, value);
             }
-            this.deferredTokenUpdates.clear();
         }
     }
 }
diff --git a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
index e298a176c0..7ccd4c51b6 100644
--- a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
+++ b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
@@ -32,18 +32,14 @@ describe('Label Provider Base', () => {
         name: testLabelProviderTag
     })
     class LabelProviderTest extends LabelProviderBase {
-        @attr({
-            attribute: 'test-example',
-            mode: 'fromView'
-        })
-        public exampleLabel: string = exampleLabelDefaultValue;
+        @attr({ attribute: 'test-example' })
+        public exampleLabel?: string;
 
-        protected exampleLabelChanged(
-            _prev: string | undefined,
-            next: string | undefined
-        ): void {
-            this.handleTokenChanged(exampleLabel, next);
-        }
+        protected override readonly supportedLabels: {
+            [P in keyof LabelProviderTest]?: DesignToken<string>;
+        } = {
+                exampleLabel
+            };
     }
 
     beforeEach(async () => {
diff --git a/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts b/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts
index be9696b401..658f244ba9 100644
--- a/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts
+++ b/packages/nimble-components/src/label-provider/base/tests/label-provider-stories-utils.ts
@@ -51,10 +51,6 @@ const createTemplate = (
 </${tableTag}>`;
 
 export const labelProviderMetadata: Meta<LabelProviderArgs> = {
-    parameters: {
-        chromatic: { disableSnapshot: true }
-    },
-    // prettier-ignore
     render: createUserSelectedThemeStory(html<LabelProviderArgs>`
         <div>
             <style>
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
index 98a0ba92a2..f054e91a4f 100644
--- a/packages/nimble-components/src/label-provider/core/index.ts
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -1,12 +1,11 @@
 import { attr } from '@microsoft/fast-element';
-import { DesignSystem } from '@microsoft/fast-foundation';
+import { DesignSystem, DesignToken } from '@microsoft/fast-foundation';
 import { LabelProviderBase } from '../base';
 import {
     alertDismissLabel,
     numberFieldDecrementLabel,
     numberFieldIncrementLabel
 } from './label-tokens';
-import { coreLabelDefaults } from './label-token-defaults';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -18,44 +17,22 @@ declare global {
  * Core label provider for Nimble
  */
 export class LabelProviderCore extends LabelProviderBase {
-    @attr({
-        attribute: 'alert-dismiss',
-        mode: 'fromView'
-    })
-    public alertDismiss: string = coreLabelDefaults.alertDismissLabel;
-
-    @attr({
-        attribute: 'number-field-decrement',
-        mode: 'fromView'
-    })
-    public numberFieldDecrement: string = coreLabelDefaults.numberFieldDecrementLabel;
-
-    @attr({
-        attribute: 'number-field-increment',
-        mode: 'fromView'
-    })
-    public numberFieldIncrement: string = coreLabelDefaults.numberFieldIncrementLabel;
-
-    protected alertDismissChanged(
-        _prev: string | undefined,
-        next: string | undefined
-    ): void {
-        this.handleTokenChanged(alertDismissLabel, next);
-    }
-
-    protected numberFieldDecrementChanged(
-        _prev: string | undefined,
-        next: string | undefined
-    ): void {
-        this.handleTokenChanged(numberFieldDecrementLabel, next);
-    }
-
-    protected numberFieldIncrementChanged(
-        _prev: string | undefined,
-        next: string | undefined
-    ): void {
-        this.handleTokenChanged(numberFieldIncrementLabel, next);
-    }
+    @attr({ attribute: 'alert-dismiss' })
+    public alertDismiss?: string;
+
+    @attr({ attribute: 'number-field-decrement' })
+    public numberFieldDecrement?: string;
+
+    @attr({ attribute: 'number-field-increment' })
+    public numberFieldIncrement?: string;
+
+    protected override readonly supportedLabels: {
+        [P in keyof LabelProviderCore]?: DesignToken<string>;
+    } = {
+            alertDismiss: alertDismissLabel,
+            numberFieldDecrement: numberFieldDecrementLabel,
+            numberFieldIncrement: numberFieldIncrementLabel
+        };
 }
 
 const nimbleLabelProviderCore = LabelProviderCore.compose({
diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts
index 9bb95077c4..e6dc41bc32 100644
--- a/packages/nimble-components/src/label-provider/table/index.ts
+++ b/packages/nimble-components/src/label-provider/table/index.ts
@@ -1,5 +1,5 @@
 import { attr } from '@microsoft/fast-element';
-import { DesignSystem } from '@microsoft/fast-foundation';
+import { DesignSystem, DesignToken } from '@microsoft/fast-foundation';
 import { LabelProviderBase } from '../base';
 import {
     tableCellActionMenuLabel,
@@ -8,7 +8,6 @@ import {
     tableGroupExpandLabel,
     tableGroupsCollapseAllLabel
 } from './label-tokens';
-import { tableLabelDefaults } from './label-token-defaults';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -20,70 +19,30 @@ declare global {
  * Label provider for the Nimble table (and its sub-components and columns)
  */
 export class LabelProviderTable extends LabelProviderBase {
-    @attr({
-        attribute: 'group-collapse',
-        mode: 'fromView'
-    })
-    public groupCollapse = tableLabelDefaults.tableGroupCollapseLabel;
-
-    @attr({
-        attribute: 'group-expand',
-        mode: 'fromView'
-    })
-    public groupExpand = tableLabelDefaults.tableGroupExpandLabel;
-
-    @attr({
-        attribute: 'groups-collapse-all',
-        mode: 'fromView'
-    })
-    public groupsCollapseAll = tableLabelDefaults.tableGroupsCollapseAllLabel;
-
-    @attr({
-        attribute: 'cell-action-menu',
-        mode: 'fromView'
-    })
-    public cellActionMenu = tableLabelDefaults.tableCellActionMenuLabel;
-
-    @attr({
-        attribute: 'column-header-grouped-indicator',
-        mode: 'fromView'
-    })
-    public columnHeaderGroupedIndicator = tableLabelDefaults.tableColumnHeaderGroupedIndicatorLabel;
-
-    protected groupCollapseChanged(
-        _prev: string | undefined,
-        next: string | undefined
-    ): void {
-        this.handleTokenChanged(tableGroupCollapseLabel, next);
-    }
-
-    protected groupExpandChanged(
-        _prev: string | undefined,
-        next: string | undefined
-    ): void {
-        this.handleTokenChanged(tableGroupExpandLabel, next);
-    }
-
-    protected groupsCollapseAllChanged(
-        _prev: string | undefined,
-        next: string | undefined
-    ): void {
-        this.handleTokenChanged(tableGroupsCollapseAllLabel, next);
-    }
-
-    protected cellActionMenuChanged(
-        _prev: string | undefined,
-        next: string | undefined
-    ): void {
-        this.handleTokenChanged(tableCellActionMenuLabel, next);
-    }
-
-    protected columnHeaderGroupedIndicatorChanged(
-        _prev: string | undefined,
-        next: string | undefined
-    ): void {
-        this.handleTokenChanged(tableColumnHeaderGroupedIndicatorLabel, next);
-    }
+    @attr({ attribute: 'group-collapse' })
+    public groupCollapse?: string;
+
+    @attr({ attribute: 'group-expand' })
+    public groupExpand?: string;
+
+    @attr({ attribute: 'groups-collapse-all' })
+    public groupsCollapseAll?: string;
+
+    @attr({ attribute: 'cell-action-menu' })
+    public cellActionMenu?: string;
+
+    @attr({ attribute: 'column-header-grouped-indicator' })
+    public columnHeaderGroupedIndicator?: string;
+
+    protected override readonly supportedLabels: {
+        [P in keyof LabelProviderTable]?: DesignToken<string>;
+    } = {
+            groupCollapse: tableGroupCollapseLabel,
+            groupExpand: tableGroupExpandLabel,
+            groupsCollapseAll: tableGroupsCollapseAllLabel,
+            cellActionMenu: tableCellActionMenuLabel,
+            columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel
+        };
 }
 
 const nimbleLabelProviderTable = LabelProviderTable.compose({

From 636de00fc6912b1bec293478eb2cb70a0ac5bcc4 Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Thu, 29 Jun 2023 18:47:55 -0500
Subject: [PATCH 11/18] Add per-control tests for labels, minor cleanup, hook
 up tableCellActionMenuLabel

---
 .../src/banner/tests/banner.spec.ts           |  54 +++++++-
 .../src/banner/tests/banner.stories.ts        |   2 +-
 .../number-field/tests/number-field.spec.ts   |  55 ++++++++
 .../src/table/components/cell/template.ts     |   3 +-
 .../src/table/tests/table-labels.spec.ts      | 128 ++++++++++++++++++
 5 files changed, 239 insertions(+), 3 deletions(-)
 create mode 100644 packages/nimble-components/src/table/tests/table-labels.spec.ts

diff --git a/packages/nimble-components/src/banner/tests/banner.spec.ts b/packages/nimble-components/src/banner/tests/banner.spec.ts
index e11fc9e207..3db3ef6520 100644
--- a/packages/nimble-components/src/banner/tests/banner.spec.ts
+++ b/packages/nimble-components/src/banner/tests/banner.spec.ts
@@ -1,9 +1,15 @@
 import { html } from '@microsoft/fast-element';
 import { fixture, Fixture } from '../../utilities/tests/fixture';
-import { Banner } from '..';
+import { Banner, bannerTag } from '..';
 import { BannerSeverity } from '../types';
 import { waitForUpdatesAsync } from '../../testing/async-helpers';
 import { createEventListener } from '../../utilities/tests/component';
+import { themeProviderTag, type ThemeProvider } from '../../theme-provider';
+import {
+    LabelProviderCore,
+    labelProviderCoreTag
+} from '../../label-provider/core';
+import { buttonTag } from '../../button';
 
 async function setup(): Promise<Fixture<Banner>> {
     return fixture<Banner>(html`
@@ -14,6 +20,18 @@ async function setup(): Promise<Fixture<Banner>> {
     `);
 }
 
+async function setupWithLabelProvider(): Promise<Fixture<ThemeProvider>> {
+    return fixture<ThemeProvider>(html`
+        <${themeProviderTag}>
+            <${labelProviderCoreTag}></${labelProviderCoreTag}>
+            <nimble-banner>
+                <span slot="title">Title</span>
+                Message text
+            </nimble-banner>
+        </${themeProviderTag}>
+    `);
+}
+
 describe('Banner', () => {
     let element: Banner;
     let connect: () => Promise<void>;
@@ -102,3 +120,37 @@ describe('Banner', () => {
         ).toBe('status');
     });
 });
+
+describe('Banner with LabelProviderCore', () => {
+    let element: Banner;
+    let labelProvider: LabelProviderCore;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+
+    beforeEach(async () => {
+        let themeProvider: ThemeProvider;
+        ({
+            element: themeProvider,
+            connect,
+            disconnect
+        } = await setupWithLabelProvider());
+        await connect();
+        element = themeProvider.querySelector(bannerTag)!;
+        labelProvider = themeProvider.querySelector(labelProviderCoreTag)!;
+    });
+
+    afterEach(async () => {
+        await disconnect();
+    });
+
+    it('uses CoreLabelProvider alertDismissLabel for the close button label when dismissButtonLabel is unset', async () => {
+        labelProvider.alertDismiss = 'Customized Close';
+        await waitForUpdatesAsync();
+
+        const actualCloseButtonText = element
+            .shadowRoot!.querySelector('.dismiss')!
+            .querySelector(buttonTag)!
+            .textContent!.trim();
+        expect(actualCloseButtonText).toBe('Customized Close');
+    });
+});
diff --git a/packages/nimble-components/src/banner/tests/banner.stories.ts b/packages/nimble-components/src/banner/tests/banner.stories.ts
index cb5a9f7cab..2c4397a892 100644
--- a/packages/nimble-components/src/banner/tests/banner.stories.ts
+++ b/packages/nimble-components/src/banner/tests/banner.stories.ts
@@ -128,7 +128,7 @@ export const _banner: StoryObj<BannerArgs> = {
         dismissButtonLabel: {
             name: 'dismiss-button-label',
             description:
-                'Set to a localized label (e.g. `"Close"`) for the dismiss button. This provides an accessible name for assistive technologies.',
+                'Set to a localized label (e.g. `"Close"`) for the dismiss button. This provides an accessible name for assistive technologies. <br>(Equivalent to setting `alert-dismiss` on `nimble-label-provider-core`)',
             control: { type: 'none' }
         },
         toggle: {
diff --git a/packages/nimble-components/src/number-field/tests/number-field.spec.ts b/packages/nimble-components/src/number-field/tests/number-field.spec.ts
index a8d5d981c3..4d7446499c 100644
--- a/packages/nimble-components/src/number-field/tests/number-field.spec.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field.spec.ts
@@ -1,4 +1,21 @@
+import { html } from '@microsoft/fast-element';
 import { NumberField, numberFieldTag } from '..';
+import {
+    LabelProviderCore,
+    labelProviderCoreTag
+} from '../../label-provider/core';
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { ThemeProvider, themeProviderTag } from '../../theme-provider';
+import { fixture, type Fixture } from '../../utilities/tests/fixture';
+
+async function setupWithLabelProvider(): Promise<Fixture<ThemeProvider>> {
+    return fixture<ThemeProvider>(html`
+        <${themeProviderTag}>
+            <${labelProviderCoreTag}></${labelProviderCoreTag}>
+            <${numberFieldTag}></${numberFieldTag}>
+        </${themeProviderTag}>
+    `);
+}
 
 describe('NumberField', () => {
     it('should export its tag', () => {
@@ -11,3 +28,41 @@ describe('NumberField', () => {
         );
     });
 });
+
+describe('NumberField with LabelProviderCore', () => {
+    let element: NumberField;
+    let labelProvider: LabelProviderCore;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+
+    beforeEach(async () => {
+        let themeProvider: ThemeProvider;
+        ({
+            element: themeProvider,
+            connect,
+            disconnect
+        } = await setupWithLabelProvider());
+        await connect();
+        element = themeProvider.querySelector(numberFieldTag)!;
+        labelProvider = themeProvider.querySelector(labelProviderCoreTag)!;
+    });
+
+    afterEach(async () => {
+        await disconnect();
+    });
+
+    it('uses CoreLabelProvider numberFieldIncrement/numberFieldDecrement labels for the inc/dec buttons', async () => {
+        labelProvider.numberFieldIncrement = 'Customized Increment';
+        labelProvider.numberFieldDecrement = 'Customized Decrement';
+        await waitForUpdatesAsync();
+
+        const actualIncrementText = element
+            .shadowRoot!.querySelector('slot[name="step-up-glyph"]')!
+            .textContent!.trim();
+        expect(actualIncrementText).toEqual('Customized Increment');
+        const actualDecrementText = element
+            .shadowRoot!.querySelector('slot[name="step-down-glyph"]')!
+            .textContent!.trim();
+        expect(actualDecrementText).toEqual('Customized Decrement');
+    });
+});
diff --git a/packages/nimble-components/src/table/components/cell/template.ts b/packages/nimble-components/src/table/components/cell/template.ts
index 3d139147a9..2d835667ac 100644
--- a/packages/nimble-components/src/table/components/cell/template.ts
+++ b/packages/nimble-components/src/table/components/cell/template.ts
@@ -6,6 +6,7 @@ import {
     ButtonAppearance,
     MenuButtonToggleEventDetail
 } from '../../../menu-button/types';
+import { tableCellActionMenuLabel } from '../../../label-provider/table/label-tokens';
 
 // prettier-ignore
 export const template = html<TableCell>`
@@ -21,7 +22,7 @@ export const template = html<TableCell>`
                 class="action-menu"
             >
                 <${iconThreeDotsLineTag} slot="start"></${iconThreeDotsLineTag}>
-                ${x => x.actionMenuLabel}
+                ${x => x.actionMenuLabel ?? tableCellActionMenuLabel.getValueFor(x)}
                 <slot name="cellActionMenu" slot="menu"></slot>
             </${menuButtonTag}>
         `)}
diff --git a/packages/nimble-components/src/table/tests/table-labels.spec.ts b/packages/nimble-components/src/table/tests/table-labels.spec.ts
new file mode 100644
index 0000000000..89d0d3cd44
--- /dev/null
+++ b/packages/nimble-components/src/table/tests/table-labels.spec.ts
@@ -0,0 +1,128 @@
+import { html } from '@microsoft/fast-element';
+import { tableTag, type Table } from '..';
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { type Fixture, fixture } from '../../utilities/tests/fixture';
+import type { TableRecord } from '../types';
+import { TablePageObject } from '../testing/table.pageobject';
+import { themeProviderTag, type ThemeProvider } from '../../theme-provider';
+import {
+    LabelProviderTable,
+    labelProviderTableTag
+} from '../../label-provider/table';
+import type { TableColumnText } from '../../table-column/text';
+import { tableGroupRowTag } from '../components/group-row';
+
+interface SimpleTableRecord extends TableRecord {
+    stringData: string;
+    moreStringData: string;
+}
+
+const simpleTableData = [
+    {
+        stringData: 'string 1',
+        moreStringData: 'foo'
+    },
+    {
+        stringData: 'hello world',
+        moreStringData: 'foo'
+    },
+    {
+        stringData: 'another string',
+        moreStringData: 'foo'
+    }
+] as const;
+
+// prettier-ignore
+async function setup(): Promise<Fixture<ThemeProvider>> {
+    return fixture<ThemeProvider>(
+        html`
+        <${themeProviderTag}>
+            <${labelProviderTableTag}></${labelProviderTableTag}>
+            <nimble-table style="width: 700px">
+                <nimble-table-column-text id="first-column" field-name="stringData">stringData</nimble-table-column-text>
+                <nimble-table-column-text id="second-column" field-name="moreStringData">moreStringData</nimble-table-column-text>
+            </nimble-table>
+        <${themeProviderTag}>`
+    );
+}
+
+describe('Table with LabelProviderTable', () => {
+    let element: Table<SimpleTableRecord>;
+    let labelProvider: LabelProviderTable;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+    let pageObject: TablePageObject<SimpleTableRecord>;
+    let column1: TableColumnText;
+
+    beforeEach(async () => {
+        let themeProvider: ThemeProvider;
+        ({ element: themeProvider, connect, disconnect } = await setup());
+        element = themeProvider.querySelector(tableTag)!;
+        labelProvider = themeProvider.querySelector(labelProviderTableTag)!;
+
+        pageObject = new TablePageObject<SimpleTableRecord>(element);
+        column1 = element.querySelector<TableColumnText>('#first-column')!;
+    });
+
+    afterEach(async () => {
+        await disconnect();
+    });
+
+    it('uses correct labels when a column is grouped (groupCollapse/groupExpand/groupsCollapseAll/columnHeaderGroupedIndicator)', async () => {
+        await element.setData(simpleTableData);
+        await connect();
+
+        labelProvider.groupsCollapseAll = 'Customized Collapse All';
+        labelProvider.groupExpand = 'Customized Expand';
+        labelProvider.groupCollapse = 'Customized Collapse';
+        labelProvider.columnHeaderGroupedIndicator = 'Customized Grouped';
+        column1.groupIndex = 0;
+        await waitForUpdatesAsync();
+
+        const actualGroupsCollapseAllLabel = element
+            .shadowRoot!.querySelector('.collapse-all-button')!
+            .textContent!.trim();
+        expect(actualGroupsCollapseAllLabel).toBe('Customized Collapse All');
+        const actualColumnHeaderGroupedIndicatorLabel = pageObject
+            .getHeaderElement(0)
+            .shadowRoot!.querySelector('.grouped-indicator')!
+            .getAttribute('title');
+        expect(actualColumnHeaderGroupedIndicatorLabel).toBe(
+            'Customized Grouped'
+        );
+        const firstGroupRow: HTMLElement = element.shadowRoot!.querySelector(tableGroupRowTag)!;
+        const actualGroupCollapseLabel = firstGroupRow
+            .shadowRoot!.querySelector('.expand-collapse-button')!
+            .textContent!.trim();
+        expect(actualGroupCollapseLabel).toBe('Customized Collapse');
+
+        firstGroupRow.click();
+        await waitForUpdatesAsync();
+
+        const actualGroupExpandLabel = firstGroupRow
+            .shadowRoot!.querySelector('.expand-collapse-button')!
+            .textContent!.trim();
+        expect(actualGroupExpandLabel).toBe('Customized Expand');
+    });
+
+    it('uses correct labels when a column has an action menu (cellActionMenu)', async () => {
+        const slot = 'my-action-menu';
+        column1.actionMenuSlot = slot;
+        const menu = document.createElement('nimble-menu');
+        const menuItem1 = document.createElement('nimble-menu-item');
+        menuItem1.textContent = 'menu item 1';
+        menu.appendChild(menuItem1);
+        menu.slot = slot;
+        element.appendChild(menu);
+        await element.setData(simpleTableData);
+        await connect();
+
+        labelProvider.cellActionMenu = 'Customized Cell Options';
+        await waitForUpdatesAsync();
+
+        const actualCellActionMenuLabel = pageObject
+            .getCellActionMenu(0, 0)!
+            .textContent!.trim();
+        expect(actualCellActionMenuLabel).toBe('Customized Cell Options');
+    });
+});

From 79b8cc9c490a224fbd6646fbbef26d0f676d6548 Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Fri, 30 Jun 2023 20:09:41 -0500
Subject: [PATCH 12/18] PR feedback to handle token value cascades

---
 .../src/label-provider/base/index.ts          |  73 ++++++--
 .../base/tests/label-provider-base.spec.ts    | 157 ++++++++++++++----
 .../src/label-provider/core/index.ts          |   9 +-
 .../src/label-provider/table/index.ts         |   9 +-
 4 files changed, 195 insertions(+), 53 deletions(-)

diff --git a/packages/nimble-components/src/label-provider/base/index.ts b/packages/nimble-components/src/label-provider/base/index.ts
index 6db6133d54..08899fbbdc 100644
--- a/packages/nimble-components/src/label-provider/base/index.ts
+++ b/packages/nimble-components/src/label-provider/base/index.ts
@@ -1,22 +1,46 @@
-import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
-import { Observable, Subscriber } from '@microsoft/fast-element';
+import {
+    DesignToken,
+    DesignTokenChangeRecord,
+    FoundationElement
+} from '@microsoft/fast-foundation';
+import { Observable, type Subscriber } from '@microsoft/fast-element';
 import { themeProviderTag } from '../../theme-provider';
 
+type LabelTokenCollection = {
+    [P in keyof LabelProviderBase]?: DesignToken<string>;
+};
+
 /**
  * Base class for label providers
  */
 export abstract class LabelProviderBase
     extends FoundationElement
     implements Subscriber {
-    protected abstract readonly supportedLabels: {
-        [P in keyof LabelProviderBase]?: DesignToken<string>;
-    };
+    protected readonly supportedLabels: LabelTokenCollection;
 
     private themeProvider?: HTMLElement;
+    private suppressChangesForToken?: DesignToken<string>;
 
-    public constructor() {
+    public constructor(supportedLabels: LabelTokenCollection) {
         super();
+
+        if (supportedLabels === undefined) {
+            throw new Error('supportedLabels constructor argument is required');
+        }
+        this.supportedLabels = supportedLabels;
         Observable.getNotifier(this).subscribe(this);
+        for (const token of Object.values(supportedLabels)) {
+            token.subscribe(
+                {
+                    handleChange: (
+                        record: DesignTokenChangeRecord<DesignToken<string>>
+                    ) => {
+                        this.handleDesignTokenChange(record.token);
+                    }
+                },
+                this
+            );
+        }
     }
 
     public override connectedCallback(): void {
@@ -28,19 +52,28 @@ export abstract class LabelProviderBase
         this.themeProvider = undefined;
     }
 
+    public handleDesignTokenChange(token: DesignToken<string>): void {
+        if (token !== this.suppressChangesForToken && this.themeProvider) {
+            token.setValueFor(this.themeProvider, token.getValueFor(this));
+        }
+    }
+
     public handleChange(
         _element: LabelProviderBase,
         property: keyof LabelProviderBase
     ): void {
         if (this.supportedLabels[property]) {
             const token = this.supportedLabels[property]!;
-            let value = this[property] as string | undefined;
-            if (value === undefined) {
-                value = token.getValueFor(this);
-            }
-            token.setValueFor(this, value);
-            if (this.themeProvider) {
-                token.setValueFor(this.themeProvider, value);
+            const value = this[property] as string | undefined | null;
+            if (value !== undefined && value !== null) {
+                token.setValueFor(this, value);
+            } else {
+                this.suppressChangesForToken = token;
+                token.deleteValueFor(this);
+                if (this.themeProvider) {
+                    token.deleteValueFor(this.themeProvider);
+                }
+                this.suppressChangesForToken = undefined;
             }
         }
     }
@@ -48,9 +81,17 @@ export abstract class LabelProviderBase
     private initializeThemeProvider(): void {
         this.themeProvider = this.closest(themeProviderTag) ?? undefined;
         if (this.themeProvider) {
-            for (const token of Object.values(this.supportedLabels)) {
-                const value = token.getValueFor(this);
-                token.setValueFor(this.themeProvider, value);
+            for (const [property, token] of Object.entries(
+                this.supportedLabels
+            ) as [keyof LabelProviderBase, DesignToken<string>][]) {
+                const propertyValue = this[property] as
+                    | string
+                    | null
+                    | undefined;
+                if (propertyValue !== null && propertyValue !== undefined) {
+                    const value = token.getValueFor(this);
+                    token.setValueFor(this.themeProvider, value);
+                }
             }
         }
     }
diff --git a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
index 7ccd4c51b6..f2c2bdf814 100644
--- a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
+++ b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
@@ -7,19 +7,13 @@ import {
     fixture,
     uniqueElementName
 } from '../../../utilities/tests/fixture';
+import { buttonTag } from '../../../button';
 
-async function setup(): Promise<Fixture<ThemeProvider>> {
-    return fixture<ThemeProvider>(html`
-        <${themeProviderTag}>
-        </${themeProviderTag}>
-    `);
-}
-
-const exampleLabelDefaultValue = 'Initial Value';
-const exampleLabel = DesignToken.create<string>({
-    name: 'test-example-label',
+const exampleMessageLabelDefaultValue = 'Initial Value';
+const exampleMessageLabel = DesignToken.create<string>({
+    name: 'test-example-message-label',
     cssCustomPropertyName: null
-}).withDefault(exampleLabelDefaultValue);
+}).withDefault(exampleMessageLabelDefaultValue);
 
 describe('Label Provider Base', () => {
     let themeProvider: ThemeProvider;
@@ -27,38 +21,139 @@ describe('Label Provider Base', () => {
     let disconnect: () => Promise<void>;
 
     const testLabelProviderTag = uniqueElementName();
-
     @customElement({
         name: testLabelProviderTag
     })
     class LabelProviderTest extends LabelProviderBase {
-        @attr({ attribute: 'test-example' })
-        public exampleLabel?: string;
+        @attr({ attribute: 'example-message' })
+        public exampleMessage?: string;
 
-        protected override readonly supportedLabels: {
-            [P in keyof LabelProviderTest]?: DesignToken<string>;
-        } = {
-                exampleLabel
+        public constructor() {
+            const supportedLabels: {
+                [P in keyof LabelProviderTest]?: DesignToken<string>;
+            } = {
+                exampleMessage: exampleMessageLabel
             };
+            super(supportedLabels);
+        }
     }
 
-    beforeEach(async () => {
-        ({ element: themeProvider, connect, disconnect } = await setup());
-        await connect();
+    describe('with single theme provider', () => {
+        async function setup(): Promise<Fixture<ThemeProvider>> {
+            return fixture<ThemeProvider>(html`
+                <${themeProviderTag}>
+                </${themeProviderTag}>
+            `);
+        }
+
+        beforeEach(async () => {
+            ({ element: themeProvider, connect, disconnect } = await setup());
+            await connect();
+        });
+
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('token values can be set before connected to DOM, and are set on target theme provider once attached', () => {
+            const element = document.createElement(
+                testLabelProviderTag
+            ) as LabelProviderTest;
+            element.exampleMessage = 'Updated Value';
+            themeProvider.appendChild(element);
+
+            const tokenValue = exampleMessageLabel.getValueFor(themeProvider);
+            expect(tokenValue).toBe('Updated Value');
+        });
     });
 
-    afterEach(async () => {
-        await disconnect();
+    describe('with 2 nested theme providers and initial label values', () => {
+        async function setup(): Promise<Fixture<ThemeProvider>> {
+            return fixture<ThemeProvider>(html`
+                <${themeProviderTag}>
+                    <${testLabelProviderTag} class="parent-provider" example-message="test-parent"></${testLabelProviderTag}>        
+                    <${themeProviderTag}>
+                        <${testLabelProviderTag} class="child-provider" example-message="test-child"></${testLabelProviderTag}>
+                        <${buttonTag}></${buttonTag}>
+                    </${themeProviderTag}>
+                </${themeProviderTag}>
+            `);
+        }
+
+        beforeEach(async () => {
+            ({ element: themeProvider, connect, disconnect } = await setup());
+            await connect();
+        });
+
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('token values cascade from parent providers correctly', () => {
+            const parentLabelProvider: LabelProviderTest = themeProvider.querySelector('.parent-provider')!;
+            const childLabelProvider: LabelProviderTest = themeProvider.querySelector('.child-provider')!;
+            const elementUsingLabels: HTMLElement = themeProvider.querySelector(buttonTag)!;
+
+            expect(exampleMessageLabel.getValueFor(elementUsingLabels)).toBe(
+                'test-child'
+            );
+
+            childLabelProvider.exampleMessage = undefined;
+            expect(exampleMessageLabel.getValueFor(elementUsingLabels)).toBe(
+                'test-parent'
+            );
+
+            parentLabelProvider.exampleMessage = 'test-parent-new-value';
+            expect(exampleMessageLabel.getValueFor(elementUsingLabels)).toBe(
+                'test-parent-new-value'
+            );
+
+            childLabelProvider.exampleMessage = 'test-child-new-value';
+            expect(exampleMessageLabel.getValueFor(elementUsingLabels)).toBe(
+                'test-child-new-value'
+            );
+
+            childLabelProvider.removeAttribute('example-message');
+            expect(exampleMessageLabel.getValueFor(elementUsingLabels)).toBe(
+                'test-parent-new-value'
+            );
+        });
     });
 
-    it('token values can be set before connected to DOM, and are set on target theme provider once attached', () => {
-        const element = document.createElement(
-            testLabelProviderTag
-        ) as LabelProviderTest;
-        element.exampleLabel = 'Updated Value';
-        themeProvider.appendChild(element);
+    describe('with 2 nested theme providers without initial label values', () => {
+        async function setup(): Promise<Fixture<ThemeProvider>> {
+            return fixture<ThemeProvider>(html`
+                <${themeProviderTag}>
+                    <${testLabelProviderTag} class="parent-provider"></${testLabelProviderTag}>        
+                    <${themeProviderTag}>
+                        <${testLabelProviderTag} class="child-provider"></${testLabelProviderTag}>
+                        <${buttonTag}></${buttonTag}>
+                    </${themeProviderTag}>
+                </${themeProviderTag}>
+            `);
+        }
+
+        beforeEach(async () => {
+            ({ element: themeProvider, connect, disconnect } = await setup());
+            await connect();
+        });
+
+        afterEach(async () => {
+            await disconnect();
+        });
+
+        it('token values cascade from parent providers correctly', () => {
+            const parentLabelProvider: LabelProviderTest = themeProvider.querySelector('.parent-provider')!;
+            const elementUsingLabels: HTMLElement = themeProvider.querySelector(buttonTag)!;
+
+            expect(exampleMessageLabel.getValueFor(elementUsingLabels)).toBe(
+                exampleMessageLabelDefaultValue
+            );
 
-        const tokenValue = exampleLabel.getValueFor(themeProvider);
-        expect(tokenValue).toBe('Updated Value');
+            parentLabelProvider.exampleMessage = 'test-parent-new-value';
+            expect(exampleMessageLabel.getValueFor(elementUsingLabels)).toBe(
+                'test-parent-new-value'
+            );
+        });
     });
 });
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
index f054e91a4f..79e2a62cf2 100644
--- a/packages/nimble-components/src/label-provider/core/index.ts
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -26,13 +26,16 @@ export class LabelProviderCore extends LabelProviderBase {
     @attr({ attribute: 'number-field-increment' })
     public numberFieldIncrement?: string;
 
-    protected override readonly supportedLabels: {
-        [P in keyof LabelProviderCore]?: DesignToken<string>;
-    } = {
+    public constructor() {
+        const supportedLabels: {
+            [P in keyof LabelProviderCore]?: DesignToken<string>;
+        } = {
             alertDismiss: alertDismissLabel,
             numberFieldDecrement: numberFieldDecrementLabel,
             numberFieldIncrement: numberFieldIncrementLabel
         };
+        super(supportedLabels);
+    }
 }
 
 const nimbleLabelProviderCore = LabelProviderCore.compose({
diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts
index e6dc41bc32..f9d55ef6de 100644
--- a/packages/nimble-components/src/label-provider/table/index.ts
+++ b/packages/nimble-components/src/label-provider/table/index.ts
@@ -34,15 +34,18 @@ export class LabelProviderTable extends LabelProviderBase {
     @attr({ attribute: 'column-header-grouped-indicator' })
     public columnHeaderGroupedIndicator?: string;
 
-    protected override readonly supportedLabels: {
-        [P in keyof LabelProviderTable]?: DesignToken<string>;
-    } = {
+    public constructor() {
+        const supportedLabels: {
+            [P in keyof LabelProviderTable]?: DesignToken<string>;
+        } = {
             groupCollapse: tableGroupCollapseLabel,
             groupExpand: tableGroupExpandLabel,
             groupsCollapseAll: tableGroupsCollapseAllLabel,
             cellActionMenu: tableCellActionMenuLabel,
             columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel
         };
+        super(supportedLabels);
+    }
 }
 
 const nimbleLabelProviderTable = LabelProviderTable.compose({

From 078b1008fb687bd80a457e92aebfeb6a03816493 Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Mon, 10 Jul 2023 15:56:19 -0500
Subject: [PATCH 13/18] PR feedback

---
 packages/nimble-components/CONTRIBUTING.md    |  2 --
 .../nimble-components/src/banner/template.ts  |  4 ++--
 .../src/banner/tests/banner.spec.ts           |  4 ++--
 .../src/banner/tests/banner.stories.ts        |  6 ++---
 .../src/label-provider/core/index.ts          | 24 +++++++++----------
 .../core/label-token-defaults.ts              |  6 ++---
 .../src/label-provider/core/label-tokens.ts   | 18 +++++++-------
 .../src/number-field/index.ts                 |  8 +++----
 .../number-field/tests/number-field.spec.ts   |  6 ++---
 .../tests/number-field.stories.ts             |  8 +++----
 .../src/table/components/header/template.ts   |  2 +-
 .../nimble-components/src/table/template.ts   |  1 +
 12 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/packages/nimble-components/CONTRIBUTING.md b/packages/nimble-components/CONTRIBUTING.md
index 2a06f2eca0..6c619afd54 100644
--- a/packages/nimble-components/CONTRIBUTING.md
+++ b/packages/nimble-components/CONTRIBUTING.md
@@ -437,8 +437,6 @@ There are currently 2 label providers:
 -   `nimble-label-provider-core`: Used for labels for all components besides the table
 -   `nimble-label-provider-table`: Used for labels for the table (and table sub-components / column types)
 
-To add new labels to a label provider, follow the existing patterns (create a `DesignToken<string>`, an `@attr`-backed property, and a `propertyChanged()` function that updates the token value).
-
 The expected format for label token names is:
 
 -   element/type(s) to which the token applies, e.g. `number-field` or `table`
diff --git a/packages/nimble-components/src/banner/template.ts b/packages/nimble-components/src/banner/template.ts
index bb8ae99d02..3309fba30b 100644
--- a/packages/nimble-components/src/banner/template.ts
+++ b/packages/nimble-components/src/banner/template.ts
@@ -6,7 +6,7 @@ import { iconInfoTag } from '../icons/info';
 import { iconTriangleFilledTag } from '../icons/triangle-filled';
 import { iconXmarkTag } from '../icons/xmark';
 import { BannerSeverity } from './types';
-import { alertDismissLabel } from '../label-provider/core/label-tokens';
+import { popupDismissLabel } from '../label-provider/core/label-tokens';
 
 // prettier-ignore
 export const template = html<Banner>`
@@ -54,7 +54,7 @@ export const template = html<Banner>`
                 ${when(x => !x.preventDismiss, html<Banner>`
                     <${buttonTag} appearance="ghost" content-hidden @click="${x => x.dismissBanner()}">
                         <${iconXmarkTag} slot="start"></${iconXmarkTag}>
-                        ${x => x.dismissButtonLabel ?? alertDismissLabel.getValueFor(x)}
+                        ${x => x.dismissButtonLabel ?? popupDismissLabel.getValueFor(x)}
                     </${buttonTag}>
                 `)}
             </div>
diff --git a/packages/nimble-components/src/banner/tests/banner.spec.ts b/packages/nimble-components/src/banner/tests/banner.spec.ts
index 3db3ef6520..93fa2a5cfc 100644
--- a/packages/nimble-components/src/banner/tests/banner.spec.ts
+++ b/packages/nimble-components/src/banner/tests/banner.spec.ts
@@ -143,8 +143,8 @@ describe('Banner with LabelProviderCore', () => {
         await disconnect();
     });
 
-    it('uses CoreLabelProvider alertDismissLabel for the close button label when dismissButtonLabel is unset', async () => {
-        labelProvider.alertDismiss = 'Customized Close';
+    it('uses CoreLabelProvider popupDismissLabel for the close button label when dismissButtonLabel is unset', async () => {
+        labelProvider.popupDismiss = 'Customized Close';
         await waitForUpdatesAsync();
 
         const actualCloseButtonText = element
diff --git a/packages/nimble-components/src/banner/tests/banner.stories.ts b/packages/nimble-components/src/banner/tests/banner.stories.ts
index 2c4397a892..c579aba58b 100644
--- a/packages/nimble-components/src/banner/tests/banner.stories.ts
+++ b/packages/nimble-components/src/banner/tests/banner.stories.ts
@@ -13,7 +13,7 @@ import {
     LabelUserArgs,
     addLabelUseMetadata
 } from '../../label-provider/base/tests/label-user-stories-utils';
-import { alertDismissLabel } from '../../label-provider/core/label-tokens';
+import { popupDismissLabel } from '../../label-provider/core/label-tokens';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const ActionType = {
@@ -61,7 +61,7 @@ const metadata: Meta<BannerArgs> = {
         }
     }
 };
-addLabelUseMetadata(metadata, labelProviderCoreTag, alertDismissLabel);
+addLabelUseMetadata(metadata, labelProviderCoreTag, popupDismissLabel);
 
 export default metadata;
 
@@ -128,7 +128,7 @@ export const _banner: StoryObj<BannerArgs> = {
         dismissButtonLabel: {
             name: 'dismiss-button-label',
             description:
-                'Set to a localized label (e.g. `"Close"`) for the dismiss button. This provides an accessible name for assistive technologies. <br>(Equivalent to setting `alert-dismiss` on `nimble-label-provider-core`)',
+                'Set to a localized label (e.g. `"Close"`) for the dismiss button. This provides an accessible name for assistive technologies. <br>(Equivalent to setting `popup-dismiss` on `nimble-label-provider-core`)',
             control: { type: 'none' }
         },
         toggle: {
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
index 79e2a62cf2..ffb7a1b00c 100644
--- a/packages/nimble-components/src/label-provider/core/index.ts
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -2,9 +2,9 @@ import { attr } from '@microsoft/fast-element';
 import { DesignSystem, DesignToken } from '@microsoft/fast-foundation';
 import { LabelProviderBase } from '../base';
 import {
-    alertDismissLabel,
-    numberFieldDecrementLabel,
-    numberFieldIncrementLabel
+    popupDismissLabel,
+    numericDecrementLabel,
+    numericIncrementLabel
 } from './label-tokens';
 
 declare global {
@@ -17,22 +17,22 @@ declare global {
  * Core label provider for Nimble
  */
 export class LabelProviderCore extends LabelProviderBase {
-    @attr({ attribute: 'alert-dismiss' })
-    public alertDismiss?: string;
+    @attr({ attribute: 'popup-dismiss' })
+    public popupDismiss?: string;
 
-    @attr({ attribute: 'number-field-decrement' })
-    public numberFieldDecrement?: string;
+    @attr({ attribute: 'numeric-decrement' })
+    public numericDecrement?: string;
 
-    @attr({ attribute: 'number-field-increment' })
-    public numberFieldIncrement?: string;
+    @attr({ attribute: 'numeric-increment' })
+    public numericIncrement?: string;
 
     public constructor() {
         const supportedLabels: {
             [P in keyof LabelProviderCore]?: DesignToken<string>;
         } = {
-            alertDismiss: alertDismissLabel,
-            numberFieldDecrement: numberFieldDecrementLabel,
-            numberFieldIncrement: numberFieldIncrementLabel
+            popupDismiss: popupDismissLabel,
+            numericDecrement: numericDecrementLabel,
+            numericIncrement: numericIncrementLabel
         };
         super(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 82ceeaf97f..23a312e2f1 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
@@ -3,7 +3,7 @@ import type * as TokensNamespace from './label-tokens';
 type TokenName = keyof typeof TokensNamespace;
 
 export const coreLabelDefaults: { readonly [key in TokenName]: string } = {
-    alertDismissLabel: 'Close',
-    numberFieldIncrementLabel: 'Increment',
-    numberFieldDecrementLabel: 'Decrement'
+    popupDismissLabel: 'Close',
+    numericIncrementLabel: 'Increment',
+    numericDecrementLabel: 'Decrement'
 };
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 988fb566ea..cddd101ce3 100644
--- a/packages/nimble-components/src/label-provider/core/label-tokens.ts
+++ b/packages/nimble-components/src/label-provider/core/label-tokens.ts
@@ -1,17 +1,17 @@
 import { DesignToken } from '@microsoft/fast-foundation';
 import { coreLabelDefaults } from './label-token-defaults';
 
-export const alertDismissLabel = DesignToken.create<string>({
-    name: 'alert-dismiss-label',
+export const popupDismissLabel = DesignToken.create<string>({
+    name: 'popup-dismiss-label',
     cssCustomPropertyName: null
-}).withDefault(coreLabelDefaults.alertDismissLabel);
+}).withDefault(coreLabelDefaults.popupDismissLabel);
 
-export const numberFieldDecrementLabel = DesignToken.create<string>({
-    name: 'number-field-decrement-label',
+export const numericDecrementLabel = DesignToken.create<string>({
+    name: 'numeric-decrement-label',
     cssCustomPropertyName: null
-}).withDefault(coreLabelDefaults.numberFieldDecrementLabel);
+}).withDefault(coreLabelDefaults.numericDecrementLabel);
 
-export const numberFieldIncrementLabel = DesignToken.create<string>({
-    name: 'number-field-increment-label',
+export const numericIncrementLabel = DesignToken.create<string>({
+    name: 'numeric-increment-label',
     cssCustomPropertyName: null
-}).withDefault(coreLabelDefaults.numberFieldIncrementLabel);
+}).withDefault(coreLabelDefaults.numericIncrementLabel);
diff --git a/packages/nimble-components/src/number-field/index.ts b/packages/nimble-components/src/number-field/index.ts
index 063f7030c2..9fdf5ea622 100644
--- a/packages/nimble-components/src/number-field/index.ts
+++ b/packages/nimble-components/src/number-field/index.ts
@@ -14,8 +14,8 @@ import { iconMinusWideTag } from '../icons/minus-wide';
 import { iconAddTag } from '../icons/add';
 import { iconExclamationMarkTag } from '../icons/exclamation-mark';
 import {
-    numberFieldDecrementLabel,
-    numberFieldIncrementLabel
+    numericDecrementLabel,
+    numericIncrementLabel
 } from '../label-provider/core/label-tokens';
 
 declare global {
@@ -75,7 +75,7 @@ const nimbleNumberField = NumberField.compose<NumberFieldOptions>({
             content-hidden
             tabindex="-1"
         >
-            ${x => numberFieldDecrementLabel.getValueFor(x)}
+            ${x => numericDecrementLabel.getValueFor(x)}
             <${iconMinusWideTag}
                 slot="start"
             >
@@ -89,7 +89,7 @@ const nimbleNumberField = NumberField.compose<NumberFieldOptions>({
             content-hidden
             tabindex="-1"
         >
-            ${x => numberFieldIncrementLabel.getValueFor(x)}
+            ${x => numericIncrementLabel.getValueFor(x)}
             <${iconAddTag}
                 slot="start">
             </${iconAddTag}>
diff --git a/packages/nimble-components/src/number-field/tests/number-field.spec.ts b/packages/nimble-components/src/number-field/tests/number-field.spec.ts
index 4d7446499c..7be7bc6a19 100644
--- a/packages/nimble-components/src/number-field/tests/number-field.spec.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field.spec.ts
@@ -51,9 +51,9 @@ describe('NumberField with LabelProviderCore', () => {
         await disconnect();
     });
 
-    it('uses CoreLabelProvider numberFieldIncrement/numberFieldDecrement labels for the inc/dec buttons', async () => {
-        labelProvider.numberFieldIncrement = 'Customized Increment';
-        labelProvider.numberFieldDecrement = 'Customized Decrement';
+    it('uses CoreLabelProvider numericIncrement/numericDecrement labels for the inc/dec buttons', async () => {
+        labelProvider.numericDecrement = 'Customized Increment';
+        labelProvider.numericIncrement = 'Customized Decrement';
         await waitForUpdatesAsync();
 
         const actualIncrementText = element
diff --git a/packages/nimble-components/src/number-field/tests/number-field.stories.ts b/packages/nimble-components/src/number-field/tests/number-field.stories.ts
index 7d48e23c82..d5d2fc5295 100644
--- a/packages/nimble-components/src/number-field/tests/number-field.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field.stories.ts
@@ -10,8 +10,8 @@ import {
     type LabelUserArgs
 } from '../../label-provider/base/tests/label-user-stories-utils';
 import {
-    numberFieldDecrementLabel,
-    numberFieldIncrementLabel
+    numericDecrementLabel,
+    numericIncrementLabel
 } from '../../label-provider/core/label-tokens';
 
 interface NumberFieldArgs extends LabelUserArgs {
@@ -83,8 +83,8 @@ const metadata: Meta<NumberFieldArgs> = {
 addLabelUseMetadata(
     metadata,
     labelProviderCoreTag,
-    numberFieldDecrementLabel,
-    numberFieldIncrementLabel
+    numericDecrementLabel,
+    numericIncrementLabel
 );
 
 export default metadata;
diff --git a/packages/nimble-components/src/table/components/header/template.ts b/packages/nimble-components/src/table/components/header/template.ts
index 6e2104dddf..cf0f48dcfb 100644
--- a/packages/nimble-components/src/table/components/header/template.ts
+++ b/packages/nimble-components/src/table/components/header/template.ts
@@ -14,7 +14,7 @@ export const template = html<TableHeader>`
         @mousedown="${(_x, c) => !((c.event as MouseEvent).detail > 1)}"
     >
         <slot></slot>
-
+        ${'' /* Omit title attribute for sort indicators because aria-sort is set on the 1st sorted column */}
         ${when(x => x.sortDirection === TableColumnSortDirection.ascending, html`
             <${iconArrowUpTag} class="sort-indicator" aria-hidden="true"></${iconArrowUpTag}>
         `)}
diff --git a/packages/nimble-components/src/table/template.ts b/packages/nimble-components/src/table/template.ts
index 34f1cb4b92..dc9df1b544 100644
--- a/packages/nimble-components/src/table/template.ts
+++ b/packages/nimble-components/src/table/template.ts
@@ -57,6 +57,7 @@ export const template = html<Table>`
                             class="collapse-all-button ${x => `${x.showCollapseAll ? 'visible' : ''}`}"
                             content-hidden
                             appearance="${ButtonAppearance.ghost}"
+                            title="${x => tableGroupsCollapseAllLabel.getValueFor(x)}"
                             @click="${x => x.handleCollapseAllGroupRows()}"
                         >
                             <${iconTriangleTwoLinesHorizontalTag} slot="start"></${iconTriangleTwoLinesHorizontalTag}>

From e56df92e20b0235bd0b889b57ae5b28f5ef569c7 Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Mon, 10 Jul 2023 17:23:55 -0500
Subject: [PATCH 14/18] Fix test

---
 .../src/number-field/tests/number-field.spec.ts               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nimble-components/src/number-field/tests/number-field.spec.ts b/packages/nimble-components/src/number-field/tests/number-field.spec.ts
index 7be7bc6a19..f4794170df 100644
--- a/packages/nimble-components/src/number-field/tests/number-field.spec.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field.spec.ts
@@ -52,8 +52,8 @@ describe('NumberField with LabelProviderCore', () => {
     });
 
     it('uses CoreLabelProvider numericIncrement/numericDecrement labels for the inc/dec buttons', async () => {
-        labelProvider.numericDecrement = 'Customized Increment';
-        labelProvider.numericIncrement = 'Customized Decrement';
+        labelProvider.numericIncrement = 'Customized Increment';
+        labelProvider.numericDecrement = 'Customized Decrement';
         await waitForUpdatesAsync();
 
         const actualIncrementText = element

From 1e16eec1fefc80c60f4eb5e6e9943566a20ed2fe Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Mon, 10 Jul 2023 19:32:38 -0500
Subject: [PATCH 15/18] PR feedback

---
 .../src/label-provider/base/index.ts          | 81 ++++++-------------
 .../base/tests/label-provider-base.spec.ts    |  9 +--
 .../src/label-provider/core/index.ts          |  9 +--
 .../src/label-provider/table/index.ts         |  9 +--
 4 files changed, 34 insertions(+), 74 deletions(-)

diff --git a/packages/nimble-components/src/label-provider/base/index.ts b/packages/nimble-components/src/label-provider/base/index.ts
index 08899fbbdc..81ea8efdac 100644
--- a/packages/nimble-components/src/label-provider/base/index.ts
+++ b/packages/nimble-components/src/label-provider/base/index.ts
@@ -1,60 +1,34 @@
-import {
-    DesignToken,
-    DesignTokenChangeRecord,
-    FoundationElement
-} from '@microsoft/fast-foundation';
-import { Observable, type Subscriber } from '@microsoft/fast-element';
+import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
+import { Notifier, Observable, type Subscriber } from '@microsoft/fast-element';
 import { themeProviderTag } from '../../theme-provider';
 
-type LabelTokenCollection = {
-    [P in keyof LabelProviderBase]?: DesignToken<string>;
-};
-
 /**
  * Base class for label providers
  */
 export abstract class LabelProviderBase
     extends FoundationElement
     implements Subscriber {
-    protected readonly supportedLabels: LabelTokenCollection;
+    protected abstract readonly supportedLabels: {
+        [P in keyof LabelProviderBase]?: DesignToken<string>;
+    };
 
+    private propertyNotifier?: Notifier;
     private themeProvider?: HTMLElement;
-    private suppressChangesForToken?: DesignToken<string>;
-
-    public constructor(supportedLabels: LabelTokenCollection) {
-        super();
-
-        if (supportedLabels === undefined) {
-            throw new Error('supportedLabels constructor argument is required');
-        }
-        this.supportedLabels = supportedLabels;
-        Observable.getNotifier(this).subscribe(this);
-        for (const token of Object.values(supportedLabels)) {
-            token.subscribe(
-                {
-                    handleChange: (
-                        record: DesignTokenChangeRecord<DesignToken<string>>
-                    ) => {
-                        this.handleDesignTokenChange(record.token);
-                    }
-                },
-                this
-            );
-        }
-    }
 
     public override connectedCallback(): void {
         super.connectedCallback();
         this.initializeThemeProvider();
+        this.propertyNotifier = Observable.getNotifier(this);
+        this.propertyNotifier.subscribe(this);
     }
 
     public override disconnectedCallback(): void {
-        this.themeProvider = undefined;
-    }
-
-    public handleDesignTokenChange(token: DesignToken<string>): void {
-        if (token !== this.suppressChangesForToken && this.themeProvider) {
-            token.setValueFor(this.themeProvider, token.getValueFor(this));
+        this.propertyNotifier?.unsubscribe(this);
+        if (this.themeProvider) {
+            for (const token of Object.values(this.supportedLabels)) {
+                token.deleteValueFor(this.themeProvider);
+            }
+            this.themeProvider = undefined;
         }
     }
 
@@ -64,16 +38,13 @@ export abstract class LabelProviderBase
     ): void {
         if (this.supportedLabels[property]) {
             const token = this.supportedLabels[property]!;
-            const value = this[property] as string | undefined | null;
-            if (value !== undefined && value !== null) {
-                token.setValueFor(this, value);
-            } else {
-                this.suppressChangesForToken = token;
-                token.deleteValueFor(this);
-                if (this.themeProvider) {
+            const value = this[property];
+            if (this.themeProvider) {
+                if (value === null || value === undefined) {
                     token.deleteValueFor(this.themeProvider);
+                } else {
+                    token.setValueFor(this.themeProvider, value as string);
                 }
-                this.suppressChangesForToken = undefined;
             }
         }
     }
@@ -83,14 +54,12 @@ export abstract class LabelProviderBase
         if (this.themeProvider) {
             for (const [property, token] of Object.entries(
                 this.supportedLabels
-            ) as [keyof LabelProviderBase, DesignToken<string>][]) {
-                const propertyValue = this[property] as
-                    | string
-                    | null
-                    | undefined;
-                if (propertyValue !== null && propertyValue !== undefined) {
-                    const value = token.getValueFor(this);
-                    token.setValueFor(this.themeProvider, value);
+            )) {
+                const value = this[property as keyof LabelProviderBase];
+                if (value === null || value === undefined) {
+                    token.deleteValueFor(this.themeProvider);
+                } else {
+                    token.setValueFor(this.themeProvider, value as string);
                 }
             }
         }
diff --git a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
index f2c2bdf814..d4ce23de50 100644
--- a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
+++ b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
@@ -28,14 +28,11 @@ describe('Label Provider Base', () => {
         @attr({ attribute: 'example-message' })
         public exampleMessage?: string;
 
-        public constructor() {
-            const supportedLabels: {
-                [P in keyof LabelProviderTest]?: DesignToken<string>;
-            } = {
+        protected override readonly supportedLabels: {
+            [P in keyof LabelProviderTest]?: DesignToken<string>;
+        } = {
                 exampleMessage: exampleMessageLabel
             };
-            super(supportedLabels);
-        }
     }
 
     describe('with single theme provider', () => {
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
index ffb7a1b00c..e7722e0a20 100644
--- a/packages/nimble-components/src/label-provider/core/index.ts
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -26,16 +26,13 @@ export class LabelProviderCore extends LabelProviderBase {
     @attr({ attribute: 'numeric-increment' })
     public numericIncrement?: string;
 
-    public constructor() {
-        const supportedLabels: {
-            [P in keyof LabelProviderCore]?: DesignToken<string>;
-        } = {
+    protected override readonly supportedLabels: {
+        [P in keyof LabelProviderCore]?: DesignToken<string>;
+    } = {
             popupDismiss: popupDismissLabel,
             numericDecrement: numericDecrementLabel,
             numericIncrement: numericIncrementLabel
         };
-        super(supportedLabels);
-    }
 }
 
 const nimbleLabelProviderCore = LabelProviderCore.compose({
diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts
index f9d55ef6de..e6dc41bc32 100644
--- a/packages/nimble-components/src/label-provider/table/index.ts
+++ b/packages/nimble-components/src/label-provider/table/index.ts
@@ -34,18 +34,15 @@ export class LabelProviderTable extends LabelProviderBase {
     @attr({ attribute: 'column-header-grouped-indicator' })
     public columnHeaderGroupedIndicator?: string;
 
-    public constructor() {
-        const supportedLabels: {
-            [P in keyof LabelProviderTable]?: DesignToken<string>;
-        } = {
+    protected override readonly supportedLabels: {
+        [P in keyof LabelProviderTable]?: DesignToken<string>;
+    } = {
             groupCollapse: tableGroupCollapseLabel,
             groupExpand: tableGroupExpandLabel,
             groupsCollapseAll: tableGroupsCollapseAllLabel,
             cellActionMenu: tableCellActionMenuLabel,
             columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel
         };
-        super(supportedLabels);
-    }
 }
 
 const nimbleLabelProviderTable = LabelProviderTable.compose({

From fbcf8f5fd0ce523b88e80b10121ab7b528423643 Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Mon, 10 Jul 2023 19:47:46 -0500
Subject: [PATCH 16/18] Cleanup

---
 packages/nimble-components/src/label-provider/base/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nimble-components/src/label-provider/base/index.ts b/packages/nimble-components/src/label-provider/base/index.ts
index 81ea8efdac..c8f3f691a0 100644
--- a/packages/nimble-components/src/label-provider/base/index.ts
+++ b/packages/nimble-components/src/label-provider/base/index.ts
@@ -23,7 +23,10 @@ export abstract class LabelProviderBase
     }
 
     public override disconnectedCallback(): void {
-        this.propertyNotifier?.unsubscribe(this);
+        if (this.propertyNotifier) {
+            this.propertyNotifier.unsubscribe(this);
+            this.propertyNotifier = undefined;
+        }
         if (this.themeProvider) {
             for (const token of Object.values(this.supportedLabels)) {
                 token.deleteValueFor(this.themeProvider);

From fd4de3d89311ba1db090d65c9e0ac9b84aa4d5be Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Thu, 13 Jul 2023 16:47:43 -0500
Subject: [PATCH 17/18] PR feedback

---
 .../src/label-provider/base/index.ts          | 26 ++++++-------
 .../base/tests/label-provider-base.spec.ts    | 14 ++++---
 .../src/label-provider/core/index.ts          | 30 ++++++++-------
 .../src/label-provider/table/index.ts         | 38 ++++++++++---------
 4 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/packages/nimble-components/src/label-provider/base/index.ts b/packages/nimble-components/src/label-provider/base/index.ts
index c8f3f691a0..90502086dd 100644
--- a/packages/nimble-components/src/label-provider/base/index.ts
+++ b/packages/nimble-components/src/label-provider/base/index.ts
@@ -2,31 +2,31 @@ import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
 import { Notifier, Observable, type Subscriber } from '@microsoft/fast-element';
 import { themeProviderTag } from '../../theme-provider';
 
+export type DesignTokensFor<ObjectT> = {
+    [key in keyof ObjectT]: string | undefined;
+};
+
 /**
  * Base class for label providers
  */
-export abstract class LabelProviderBase
+export abstract class LabelProviderBase<
+    SupportedLabels extends { [key: string]: DesignToken<string> }
+>
     extends FoundationElement
     implements Subscriber {
-    protected abstract readonly supportedLabels: {
-        [P in keyof LabelProviderBase]?: DesignToken<string>;
-    };
+    protected abstract supportedLabels: SupportedLabels;
 
-    private propertyNotifier?: Notifier;
+    private readonly propertyNotifier: Notifier = Observable.getNotifier(this);
     private themeProvider?: HTMLElement;
 
     public override connectedCallback(): void {
         super.connectedCallback();
         this.initializeThemeProvider();
-        this.propertyNotifier = Observable.getNotifier(this);
         this.propertyNotifier.subscribe(this);
     }
 
     public override disconnectedCallback(): void {
-        if (this.propertyNotifier) {
-            this.propertyNotifier.unsubscribe(this);
-            this.propertyNotifier = undefined;
-        }
+        this.propertyNotifier.unsubscribe(this);
         if (this.themeProvider) {
             for (const token of Object.values(this.supportedLabels)) {
                 token.deleteValueFor(this.themeProvider);
@@ -36,8 +36,8 @@ export abstract class LabelProviderBase
     }
 
     public handleChange(
-        _element: LabelProviderBase,
-        property: keyof LabelProviderBase
+        _element: LabelProviderBase<SupportedLabels>,
+        property: keyof LabelProviderBase<SupportedLabels>
     ): void {
         if (this.supportedLabels[property]) {
             const token = this.supportedLabels[property]!;
@@ -58,7 +58,7 @@ export abstract class LabelProviderBase
             for (const [property, token] of Object.entries(
                 this.supportedLabels
             )) {
-                const value = this[property as keyof LabelProviderBase];
+                const value = this[property as keyof LabelProviderBase<SupportedLabels>];
                 if (value === null || value === undefined) {
                     token.deleteValueFor(this.themeProvider);
                 } else {
diff --git a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
index d4ce23de50..41b402798d 100644
--- a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
+++ b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
@@ -15,6 +15,10 @@ const exampleMessageLabel = DesignToken.create<string>({
     cssCustomPropertyName: null
 }).withDefault(exampleMessageLabelDefaultValue);
 
+const exampleSupportedLabels = {
+    exampleMessage: exampleMessageLabel
+} as const;
+
 describe('Label Provider Base', () => {
     let themeProvider: ThemeProvider;
     let connect: () => Promise<void>;
@@ -24,15 +28,13 @@ describe('Label Provider Base', () => {
     @customElement({
         name: testLabelProviderTag
     })
-    class LabelProviderTest extends LabelProviderBase {
+    class LabelProviderTest extends LabelProviderBase<
+        typeof exampleSupportedLabels
+        > {
         @attr({ attribute: 'example-message' })
         public exampleMessage?: string;
 
-        protected override readonly supportedLabels: {
-            [P in keyof LabelProviderTest]?: DesignToken<string>;
-        } = {
-                exampleMessage: exampleMessageLabel
-            };
+        protected override readonly supportedLabels = exampleSupportedLabels;
     }
 
     describe('with single theme provider', () => {
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
index e7722e0a20..af5860a5d2 100644
--- a/packages/nimble-components/src/label-provider/core/index.ts
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -1,6 +1,6 @@
 import { attr } from '@microsoft/fast-element';
-import { DesignSystem, DesignToken } from '@microsoft/fast-foundation';
-import { LabelProviderBase } from '../base';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { DesignTokensFor, LabelProviderBase } from '../base';
 import {
     popupDismissLabel,
     numericDecrementLabel,
@@ -13,26 +13,28 @@ declare global {
     }
 }
 
+const supportedLabels = {
+    popupDismiss: popupDismissLabel,
+    numericDecrement: numericDecrementLabel,
+    numericIncrement: numericIncrementLabel
+} as const;
+
 /**
  * Core label provider for Nimble
  */
-export class LabelProviderCore extends LabelProviderBase {
+export class LabelProviderCore
+    extends LabelProviderBase<typeof supportedLabels>
+    implements DesignTokensFor<typeof supportedLabels> {
     @attr({ attribute: 'popup-dismiss' })
-    public popupDismiss?: string;
+    public popupDismiss: string | undefined;
 
     @attr({ attribute: 'numeric-decrement' })
-    public numericDecrement?: string;
+    public numericDecrement: string | undefined;
 
     @attr({ attribute: 'numeric-increment' })
-    public numericIncrement?: string;
-
-    protected override readonly supportedLabels: {
-        [P in keyof LabelProviderCore]?: DesignToken<string>;
-    } = {
-            popupDismiss: popupDismissLabel,
-            numericDecrement: numericDecrementLabel,
-            numericIncrement: numericIncrementLabel
-        };
+    public numericIncrement: string | undefined;
+
+    protected override readonly supportedLabels = supportedLabels;
 }
 
 const nimbleLabelProviderCore = LabelProviderCore.compose({
diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts
index e6dc41bc32..1c3ada4972 100644
--- a/packages/nimble-components/src/label-provider/table/index.ts
+++ b/packages/nimble-components/src/label-provider/table/index.ts
@@ -1,6 +1,6 @@
 import { attr } from '@microsoft/fast-element';
-import { DesignSystem, DesignToken } from '@microsoft/fast-foundation';
-import { LabelProviderBase } from '../base';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import { DesignTokensFor, LabelProviderBase } from '../base';
 import {
     tableCellActionMenuLabel,
     tableColumnHeaderGroupedIndicatorLabel,
@@ -15,34 +15,36 @@ declare global {
     }
 }
 
+const supportedLabels = {
+    groupCollapse: tableGroupCollapseLabel,
+    groupExpand: tableGroupExpandLabel,
+    groupsCollapseAll: tableGroupsCollapseAllLabel,
+    cellActionMenu: tableCellActionMenuLabel,
+    columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel
+} as const;
+
 /**
  * Label provider for the Nimble table (and its sub-components and columns)
  */
-export class LabelProviderTable extends LabelProviderBase {
+export class LabelProviderTable
+    extends LabelProviderBase<typeof supportedLabels>
+    implements DesignTokensFor<typeof supportedLabels> {
     @attr({ attribute: 'group-collapse' })
-    public groupCollapse?: string;
+    public groupCollapse: string | undefined;
 
     @attr({ attribute: 'group-expand' })
-    public groupExpand?: string;
+    public groupExpand: string | undefined;
 
     @attr({ attribute: 'groups-collapse-all' })
-    public groupsCollapseAll?: string;
+    public groupsCollapseAll: string | undefined;
 
     @attr({ attribute: 'cell-action-menu' })
-    public cellActionMenu?: string;
+    public cellActionMenu: string | undefined;
 
     @attr({ attribute: 'column-header-grouped-indicator' })
-    public columnHeaderGroupedIndicator?: string;
-
-    protected override readonly supportedLabels: {
-        [P in keyof LabelProviderTable]?: DesignToken<string>;
-    } = {
-            groupCollapse: tableGroupCollapseLabel,
-            groupExpand: tableGroupExpandLabel,
-            groupsCollapseAll: tableGroupsCollapseAllLabel,
-            cellActionMenu: tableCellActionMenuLabel,
-            columnHeaderGroupedIndicator: tableColumnHeaderGroupedIndicatorLabel
-        };
+    public columnHeaderGroupedIndicator: string | undefined;
+
+    protected override readonly supportedLabels = supportedLabels;
 }
 
 const nimbleLabelProviderTable = LabelProviderTable.compose({

From 9e0e9d75eedf437df58b4f84320c68e388c32cbd Mon Sep 17 00:00:00 2001
From: Malcolm Smith <20709258+msmithNI@users.noreply.github.com>
Date: Thu, 13 Jul 2023 17:59:41 -0500
Subject: [PATCH 18/18] Test rebuild

---
 .../src/label-provider/base/tests/label-provider-base.spec.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
index 41b402798d..29858068f8 100644
--- a/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
+++ b/packages/nimble-components/src/label-provider/base/tests/label-provider-base.spec.ts
@@ -1,6 +1,5 @@
 import { attr, customElement, html } from '@microsoft/fast-element';
 import { DesignToken } from '@microsoft/fast-foundation';
-import { LabelProviderBase } from '..';
 import { ThemeProvider, themeProviderTag } from '../../../theme-provider';
 import {
     Fixture,
@@ -8,6 +7,7 @@ import {
     uniqueElementName
 } from '../../../utilities/tests/fixture';
 import { buttonTag } from '../../../button';
+import { LabelProviderBase } from '..';
 
 const exampleMessageLabelDefaultValue = 'Initial Value';
 const exampleMessageLabel = DesignToken.create<string>({