From d1adba2873ec4e6f46d62701e60fbaa0f4019e26 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 11 Mar 2024 15:56:45 -0500
Subject: [PATCH 01/25] Add pseudo-states storybook addon

---
 package-lock.json                             | 24 +++++++++++++++++++
 packages/nimble-components/.storybook/main.js |  3 ++-
 packages/nimble-components/package.json       |  1 +
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 9824d0ca80..c76597a8de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30071,6 +30071,29 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/storybook-addon-pseudo-states": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/storybook-addon-pseudo-states/-/storybook-addon-pseudo-states-2.2.1.tgz",
+      "integrity": "sha512-4LoaiML0BM9sZcQbXjDhRh9jUUKIRTWEQMl91ihP2wIE10n+rL/5c8IBpNiMZLV1rnm24degEncSMY9ck+bpgg==",
+      "dev": true,
+      "peerDependencies": {
+        "@storybook/components": "^7.4.6",
+        "@storybook/core-events": "^7.4.6",
+        "@storybook/manager-api": "^7.4.6",
+        "@storybook/preview-api": "^7.4.6",
+        "@storybook/theming": "^7.4.6",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/stream-shift": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
@@ -33951,6 +33974,7 @@
         "rollup-plugin-sourcemaps": "^0.6.3",
         "source-map-loader": "^5.0.0",
         "storybook": "^7.6.13",
+        "storybook-addon-pseudo-states": "^2.2.1",
         "ts-loader": "^9.2.5",
         "typescript": "~4.8.2",
         "webpack": "^5.75.0",
diff --git a/packages/nimble-components/.storybook/main.js b/packages/nimble-components/.storybook/main.js
index b342bf962e..499e1be910 100644
--- a/packages/nimble-components/.storybook/main.js
+++ b/packages/nimble-components/.storybook/main.js
@@ -23,7 +23,8 @@ export const addons = [
         }
     },
     '@storybook/addon-a11y',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    'storybook-addon-pseudo-states'
 ];
 export function webpackFinal(config) {
     config.module.rules.push({
diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json
index 381faa6616..eeff61b378 100644
--- a/packages/nimble-components/package.json
+++ b/packages/nimble-components/package.json
@@ -160,6 +160,7 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "source-map-loader": "^5.0.0",
     "storybook": "^7.6.13",
+    "storybook-addon-pseudo-states": "^2.2.1",
     "ts-loader": "^9.2.5",
     "typescript": "~4.8.2",
     "webpack": "^5.75.0",

From 23feb190387b281e6bcedac4319db055421eb1b3 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Tue, 13 Feb 2024 11:32:39 -0600
Subject: [PATCH 02/25] Add interaction stories for buttons, number field, and
 anchor

---
 .../tests/anchor-button-matrix.stories.ts     | 22 ++++++++++-
 .../src/anchor/tests/anchor-matrix.stories.ts | 18 ++++++++-
 .../src/button/tests/button-matrix.stories.ts | 22 ++++++++++-
 .../tests/menu-button-matrix.stories.ts       | 38 ++++++++++++++-----
 .../tests/number-field-matrix.stories.ts      | 21 ++++++++--
 .../tests/toggle-button-matrix.stories.ts     | 22 ++++++++++-
 .../src/utilities/tests/states.ts             | 14 +++++++
 7 files changed, 138 insertions(+), 19 deletions(-)

diff --git a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
index 8042bcfc73..ce27d9209e 100644
--- a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
@@ -10,7 +10,12 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { textCustomizationWrapper } from '../../utilities/tests/text-customization';
@@ -49,12 +54,14 @@ type AppearanceVariantState = (typeof appearanceVariantStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState,
     [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
 ): ViewTemplate => html`
     <${anchorButtonTag}
+        class="${() => interaction}"
         href="https://nimble.ni.dev"
         appearance="${() => appearance}"
         appearance-variant="${() => appearanceVariant}"
@@ -62,13 +69,14 @@ const component = (
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconLinkTag} slot="start"></${iconLinkTag}>`)}
-            ${() => `${appearanceVariantName} ${appearanceName} Link ${disabledName}`}
+            ${() => `${interactionName} ${appearanceVariantName} ${appearanceName} Link ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderRightTag} slot="end"></${iconArrowExpanderRightTag}>`)}
     </${anchorButtonTag}>
 `;
 
 export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
@@ -76,6 +84,16 @@ export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     ])
 );
 
+export const anchorButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.slice(1),
+        disabledStates,
+        appearanceStates,
+        appearanceVariantStates,
+        [[false, true, false]]
+    ])
+);
+
 export const hiddenAnchorButton: StoryFn = createStory(
     hiddenWrapper(
         html`<${anchorButtonTag} hidden
diff --git a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
index 255bc21f20..c9830f8629 100644
--- a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
@@ -12,6 +12,10 @@ import { textCustomizationWrapper } from '../../utilities/tests/text-customizati
 import { AnchorAppearance } from '../types';
 import { bodyFont } from '../../theme-provider/design-tokens';
 import { anchorTag } from '..';
+import {
+    interactionStates,
+    type InteractionState
+} from '../../utilities/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Anchor',
@@ -41,20 +45,32 @@ type AppearanceState = (typeof appearanceStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, href]: DisabledState,
     [underlineHiddenName, underlineHidden]: UnderlineHiddenState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${anchorTag}
+        class="${() => interaction}"
         href=${() => href}
         ?underline-hidden="${() => underlineHidden}"
         appearance="${() => appearance}"
         style="margin-right: 8px; margin-bottom: 8px;">
-            ${() => `${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
+            ${() => `${interactionName} ${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
 `;
 
 export const anchorThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
+        disabledStates,
+        underlineHiddenStates,
+        appearanceStates
+    ])
+);
+
+export const anchorInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.slice(1),
         disabledStates,
         underlineHiddenStates,
         appearanceStates
diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
index 353dd05d6c..ed96668227 100644
--- a/packages/nimble-components/src/button/tests/button-matrix.stories.ts
+++ b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
@@ -7,7 +7,12 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { textCustomizationWrapper } from '../../utilities/tests/text-customization';
@@ -47,25 +52,28 @@ type AppearanceVariantState = (typeof appearanceVariantStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState,
     [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
 ): ViewTemplate => html`
     <${buttonTag}
+        class="${() => interaction}"
         appearance="${() => appearance}"
         appearance-variant="${() => appearanceVariant}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${appearanceVariantName} ${appearanceName} Button ${disabledName}`}
+            ${() => `${interactionName} ${appearanceVariantName} ${appearanceName} Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
     </${buttonTag}>
 `;
 
 export const buttonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
@@ -73,6 +81,16 @@ export const buttonThemeMatrix: StoryFn = createMatrixThemeStory(
     ])
 );
 
+export const buttonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.slice(1),
+        disabledStates,
+        appearanceStates,
+        appearanceVariantStates,
+        [[false, true, false]]
+    ])
+);
+
 export const hiddenButton: StoryFn = createStory(
     hiddenWrapper(html`<${buttonTag} hidden>Hidden Button</${buttonTag}>`)
 );
diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
index 3b9de718a7..45924b26eb 100644
--- a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
+++ b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -7,14 +7,17 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { iconArrowExpanderDownTag } from '../../icons/arrow-expander-down';
 import { iconKeyTag } from '../../icons/key';
 import { menuButtonTag } from '..';
-import { menuTag } from '../../menu';
-import { menuItemTag } from '../../menu-item';
 
 const metadata: Meta = {
     title: 'Tests/Menu Button',
@@ -35,6 +38,12 @@ const partVisibilityStates = [
 ] as const;
 type PartVisibilityState = (typeof partVisibilityStates)[number];
 
+const openStates = [
+    ['', false],
+    ['Open', true]
+] as const;
+type OpenState = (typeof openStates)[number];
+
 const appearanceStates = Object.entries(ButtonAppearance).map(
     ([key, value]) => [pascalCase(key), value]
 );
@@ -42,29 +51,40 @@ type AppearanceState = (typeof appearanceStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
+    [openName, open]: OpenState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${menuButtonTag}
+        class="${() => interaction}"
         appearance="${() => appearance}"
+        ?open="${() => open}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${appearanceName!} Menu Button ${disabledName}`}
+            ${() => `${interactionName} ${openName} ${appearanceName!} Menu Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
-
-        <${menuTag} slot="menu">
-            <${menuItemTag}>Item 1</${menuItemTag}>
-            <${menuItemTag}>Item 2</${menuItemTag}>
-        </${menuTag}>
     </${menuButtonTag}>
 `;
 
 export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
         partVisibilityStates,
+        openStates,
+        disabledStates,
+        appearanceStates
+    ])
+);
+
+export const menuButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.slice(1),
+        [[false, true, false]],
+        openStates,
         disabledStates,
         appearanceStates
     ])
diff --git a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
index a6f3f35220..2e10ec1f41 100644
--- a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
@@ -11,7 +11,9 @@ import {
     disabledStates,
     DisabledState,
     errorStates,
-    ErrorState
+    ErrorState,
+    InteractionState,
+    interactionStates
 } from '../../utilities/tests/states';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { NumberFieldAppearance } from '../types';
@@ -44,6 +46,7 @@ const hideStepStates = [
 type HideStepState = (typeof hideStepStates)[number];
 
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [hideStepName, hideStep]: HideStepState,
     [valueName, valueValue, placeholderValue]: ValueState,
@@ -52,7 +55,7 @@ const component = (
 ): ViewTemplate => html`
     <${numberFieldTag}
         style="width: 250px; padding: 8px;"
-        class="${() => errorVisible}"
+        class="${() => errorVisible} ${() => interaction}"
         value="${() => valueValue}"
         placeholder="${() => placeholderValue}"
         appearance="${() => appearance}"
@@ -61,13 +64,14 @@ const component = (
         error-text="${() => errorText}"
         ?error-visible="${() => errorVisible}"
     >
-        ${() => errorName} ${() => appearanceName} ${() => valueName}
+    ${interactionName} ${() => errorName} ${() => appearanceName} ${() => valueName}
         ${() => hideStepName} ${() => disabledName}
     </${numberFieldTag}>
 `;
 
 export const numberFieldThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
         disabledStates,
         hideStepStates,
         valueStates,
@@ -76,6 +80,17 @@ export const numberFieldThemeMatrix: StoryFn = createMatrixThemeStory(
     ])
 );
 
+export const numberFieldInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.filter(x => x[0] && !x[0].includes('Active')),
+        disabledStates,
+        hideStepStates.slice(0, 1),
+        valueStates.slice(1, 2),
+        errorStates.slice(0, 2),
+        appearanceStates
+    ])
+);
+
 export const hiddenNumberField: StoryFn = createStory(
     hiddenWrapper(
         html`
diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
index a2772921b3..6cc1c7c7f3 100644
--- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
+++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -7,7 +7,12 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { textCustomizationWrapper } from '../../utilities/tests/text-customization';
@@ -47,25 +52,28 @@ type CheckedState = (typeof checkedStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
     [checkedName, checked]: CheckedState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${toggleButtonTag}
+        class="${() => interaction}"
         appearance="${() => appearance}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         ?checked=${() => checked}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${checkedName} ${appearanceName} Toggle Button ${disabledName}`}
+            ${() => `${interactionName} ${checkedName} ${appearanceName} Toggle Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
     </${toggleButtonTag}>
 `;
 
 export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        interactionStates.slice(0, 1),
         partVisibilityStates,
         checkedStates,
         disabledStates,
@@ -73,6 +81,16 @@ export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     ])
 );
 
+export const toggleButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(component, [
+        interactionStates.filter(x => x[0] && !x[0].includes('Active')),
+        [[false, true, false]],
+        checkedStates,
+        disabledStates,
+        appearanceStates
+    ])
+);
+
 export const hiddenButton: StoryFn = createStory(
     hiddenWrapper(
         html`<${toggleButtonTag} hidden
diff --git a/packages/nimble-components/src/utilities/tests/states.ts b/packages/nimble-components/src/utilities/tests/states.ts
index a5b88d786c..9d8647cf79 100644
--- a/packages/nimble-components/src/utilities/tests/states.ts
+++ b/packages/nimble-components/src/utilities/tests/states.ts
@@ -41,3 +41,17 @@ export type ReadOnlyState = (typeof readOnlyStates)[number];
 
 export const iconVisibleStates = [false, true] as const;
 export type IconVisibleState = (typeof iconVisibleStates)[number];
+
+export const interactionStates = [
+    ['', ''],
+    // Using pseudo-*-all will turn on the effect for any nested custom elements (e.g. inc/dec buttons in number field).
+    // It works around the limitation that selectors for shadow elements can only see the immediate host's classes.
+    ['Hovered', 'hover pseudo-hover-all'],
+    ['Hovered Active', 'hover active pseudo-hover-all pseudo-active-all'],
+    ['Active', 'active pseudo-active-all'],
+    [
+        'Focused',
+        'focus-visible focus-within pseudo-focus-visible-all pseudo-focus-within-all'
+    ]
+] as const;
+export type InteractionState = (typeof interactionStates)[number];

From f1171a69723e76991bddacc6fa25c7d3236f7265 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 11 Mar 2024 16:04:16 -0500
Subject: [PATCH 03/25] Change files

---
 ...le-components-ceebd404-0fb3-43e5-8f98-04f4eed64531.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@ni-nimble-components-ceebd404-0fb3-43e5-8f98-04f4eed64531.json

diff --git a/change/@ni-nimble-components-ceebd404-0fb3-43e5-8f98-04f4eed64531.json b/change/@ni-nimble-components-ceebd404-0fb3-43e5-8f98-04f4eed64531.json
new file mode 100644
index 0000000000..7a92885914
--- /dev/null
+++ b/change/@ni-nimble-components-ceebd404-0fb3-43e5-8f98-04f4eed64531.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add interaction stories for buttons, number field, and anchor",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

From 32dce4b7e8754d975eba64f53a560f3202a3340c Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 13 Mar 2024 18:45:01 -0500
Subject: [PATCH 04/25] Feedback

---
 .../tests/anchor-button-matrix.stories.ts     | 24 +++---
 .../src/anchor/tests/anchor-matrix.stories.ts | 28 +++++--
 .../src/button/tests/button-matrix.stories.ts | 24 +++---
 .../tests/menu-button-matrix.stories.ts       | 59 ++++++++++----
 .../tests/number-field-matrix.stories.ts      | 26 ++++---
 .../tests/toggle-button-matrix.stories.ts     | 35 ++++++---
 .../src/utilities/tests/matrix.ts             | 77 ++++++++++++++++---
 .../src/utilities/tests/states.ts             | 14 +++-
 8 files changed, 214 insertions(+), 73 deletions(-)

diff --git a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
index ce27d9209e..156dee48ca 100644
--- a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
@@ -14,7 +14,9 @@ import {
     disabledStates,
     DisabledState,
     InteractionState,
-    interactionStates
+    interactionStates,
+    nonInteractionStates,
+    disabledInteractionsFilter
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -76,7 +78,7 @@ const component = (
 
 export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        interactionStates.slice(0, 1),
+        nonInteractionStates,
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
@@ -85,13 +87,17 @@ export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
 );
 
 export const anchorButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [
-        interactionStates.slice(1),
-        disabledStates,
-        appearanceStates,
-        appearanceVariantStates,
-        [[false, true, false]]
-    ])
+    createMatrix(
+        component,
+        [
+            interactionStates,
+            disabledStates,
+            appearanceStates,
+            appearanceVariantStates,
+            [[false, true, false]]
+        ],
+        disabledInteractionsFilter
+    )
 );
 
 export const hiddenAnchorButton: StoryFn = createStory(
diff --git a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
index c9830f8629..ab2ed7185b 100644
--- a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
@@ -14,7 +14,9 @@ import { bodyFont } from '../../theme-provider/design-tokens';
 import { anchorTag } from '..';
 import {
     interactionStates,
-    type InteractionState
+    nonInteractionStates,
+    type InteractionState,
+    disabledInteractionsFilter
 } from '../../utilities/tests/states';
 
 const metadata: Meta = {
@@ -61,7 +63,7 @@ const component = (
 
 export const anchorThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        interactionStates.slice(0, 1),
+        nonInteractionStates,
         disabledStates,
         underlineHiddenStates,
         appearanceStates
@@ -69,12 +71,22 @@ export const anchorThemeMatrix: StoryFn = createMatrixThemeStory(
 );
 
 export const anchorInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [
-        interactionStates.slice(1),
-        disabledStates,
-        underlineHiddenStates,
-        appearanceStates
-    ])
+    createMatrix(
+        component,
+        [
+            interactionStates,
+            disabledStates,
+            underlineHiddenStates,
+            appearanceStates
+        ],
+        // A custom DisabledState type is used in this file, so we can't use the shared disabledInteractionsFilter
+        (interactionState: InteractionState, disabledState: DisabledState) => {
+            return (
+                disabledState[0] !== 'Disabled'
+                || interactionState[0] === 'Hovered'
+            );
+        }
+    )
 );
 
 export const hiddenAnchor: StoryFn = createStory(
diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
index ed96668227..c7caa65f31 100644
--- a/packages/nimble-components/src/button/tests/button-matrix.stories.ts
+++ b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
@@ -11,7 +11,9 @@ import {
     disabledStates,
     DisabledState,
     InteractionState,
-    interactionStates
+    interactionStates,
+    nonInteractionStates,
+    disabledInteractionsFilter
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -73,7 +75,7 @@ const component = (
 
 export const buttonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        interactionStates.slice(0, 1),
+        nonInteractionStates,
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
@@ -82,13 +84,17 @@ export const buttonThemeMatrix: StoryFn = createMatrixThemeStory(
 );
 
 export const buttonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [
-        interactionStates.slice(1),
-        disabledStates,
-        appearanceStates,
-        appearanceVariantStates,
-        [[false, true, false]]
-    ])
+    createMatrix(
+        component,
+        [
+            interactionStates,
+            disabledStates,
+            appearanceStates,
+            appearanceVariantStates,
+            [[false, true, false]]
+        ],
+        disabledInteractionsFilter
+    )
 );
 
 export const hiddenButton: StoryFn = createStory(
diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
index 45924b26eb..47604a1ff4 100644
--- a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
+++ b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -11,7 +11,9 @@ import {
     disabledStates,
     DisabledState,
     InteractionState,
-    interactionStates
+    interactionStates,
+    nonInteractionStates,
+    disabledInteractionsFilter
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -71,23 +73,50 @@ const component = (
 `;
 
 export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [
-        interactionStates.slice(0, 1),
-        partVisibilityStates,
-        openStates,
-        disabledStates,
-        appearanceStates
-    ])
+    createMatrix(
+        component,
+        [
+            nonInteractionStates,
+            partVisibilityStates,
+            openStates,
+            disabledStates,
+            appearanceStates
+        ],
+        // Disabled and open is not a valid state
+        (
+            _interactionState: InteractionState,
+            _partVisibilityState: PartVisibilityState,
+            openState: OpenState,
+            disabledState: DisabledState
+        ) => {
+            return disabledState[0] !== 'Disabled' || openState[0] !== 'Open';
+        }
+    )
 );
 
 export const menuButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [
-        interactionStates.slice(1),
-        [[false, true, false]],
-        openStates,
-        disabledStates,
-        appearanceStates
-    ])
+    createMatrix(
+        component,
+        [
+            interactionStates,
+            [[false, true, false]],
+            openStates,
+            disabledStates,
+            appearanceStates
+        ],
+        // Only interaction relevant to disabled controls is hover
+        (
+            interactionState: InteractionState,
+            _partVisibilityState: PartVisibilityState,
+            _openState: OpenState,
+            disabledState: DisabledState
+        ) => {
+            return disabledInteractionsFilter(
+                interactionState,
+                disabledState
+            );
+        }
+    )
 );
 
 export const hiddenMenuButton: StoryFn = createStory(
diff --git a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
index 2e10ec1f41..6cb1f2cfa3 100644
--- a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
@@ -13,7 +13,9 @@ import {
     errorStates,
     ErrorState,
     InteractionState,
-    interactionStates
+    interactionStates,
+    nonInteractionStates,
+    disabledInteractionsFilter
 } from '../../utilities/tests/states';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { NumberFieldAppearance } from '../types';
@@ -71,7 +73,7 @@ const component = (
 
 export const numberFieldThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        interactionStates.slice(0, 1),
+        nonInteractionStates,
         disabledStates,
         hideStepStates,
         valueStates,
@@ -81,14 +83,18 @@ export const numberFieldThemeMatrix: StoryFn = createMatrixThemeStory(
 );
 
 export const numberFieldInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [
-        interactionStates.filter(x => x[0] && !x[0].includes('Active')),
-        disabledStates,
-        hideStepStates.slice(0, 1),
-        valueStates.slice(1, 2),
-        errorStates.slice(0, 2),
-        appearanceStates
-    ])
+    createMatrix(
+        component,
+        [
+            interactionStates.filter(x => !x[0].includes('Active')), // skip irrelevant active states
+            disabledStates,
+            hideStepStates.filter(x => x[0] !== 'Hide Step'), // always show inc/dec buttons
+            valueStates.filter(x => x[0] !== 'Placeholder'), // don't test placeholder text
+            errorStates.filter(x => x[0] !== 'Error No Message'), // don't test error state w/o error text
+            appearanceStates
+        ],
+        disabledInteractionsFilter
+    )
 );
 
 export const hiddenNumberField: StoryFn = createStory(
diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
index 6cc1c7c7f3..c41141cea3 100644
--- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
+++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -11,7 +11,9 @@ import {
     disabledStates,
     DisabledState,
     InteractionState,
-    interactionStates
+    interactionStates,
+    nonInteractionStates,
+    disabledInteractionsFilter
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -73,7 +75,7 @@ const component = (
 
 export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        interactionStates.slice(0, 1),
+        nonInteractionStates,
         partVisibilityStates,
         checkedStates,
         disabledStates,
@@ -82,13 +84,28 @@ export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
 );
 
 export const toggleButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [
-        interactionStates.filter(x => x[0] && !x[0].includes('Active')),
-        [[false, true, false]],
-        checkedStates,
-        disabledStates,
-        appearanceStates
-    ])
+    createMatrix(
+        component,
+        [
+            interactionStates,
+            [[false, true, false]],
+            checkedStates,
+            disabledStates,
+            appearanceStates
+        ],
+        // Only interaction relevant to disabled controls is hover
+        (
+            interactionState: InteractionState,
+            _partVisibilityState: PartVisibilityState,
+            _checkedState: CheckedState,
+            disabledState: DisabledState
+        ) => {
+            return disabledInteractionsFilter(
+                interactionState,
+                disabledState
+            );
+        }
+    )
 );
 
 export const hiddenButton: StoryFn = createStory(
diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index c98dc83b0b..959b9ffd0e 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -30,12 +30,14 @@ export function createMatrix(component: () => ViewTemplate): ViewTemplate;
 
 export function createMatrix<State1>(
     component: (state1: State1) => ViewTemplate,
-    dimensions: readonly [readonly State1[]]
+    dimensions: readonly [readonly State1[]],
+    filter?: (state1: State1) => boolean
 ): ViewTemplate;
 
 export function createMatrix<State1, State2>(
     component: (state1: State1, state2: State2) => ViewTemplate,
-    dimensions: readonly [readonly State1[], readonly State2[]]
+    dimensions: readonly [readonly State1[], readonly State2[]],
+    filter?: (state1: State1, state2: State2) => boolean
 ): ViewTemplate;
 
 export function createMatrix<State1, State2, State3>(
@@ -44,7 +46,8 @@ export function createMatrix<State1, State2, State3>(
         readonly State1[],
         readonly State2[],
         readonly State3[]
-    ]
+    ],
+    filter?: (state1: State1, state2: State2, state3: State3) => boolean
 ): ViewTemplate;
 
 export function createMatrix<State1, State2, State3, State4>(
@@ -59,7 +62,13 @@ export function createMatrix<State1, State2, State3, State4>(
         readonly State2[],
         readonly State3[],
         readonly State4[]
-    ]
+    ],
+    filter?: (
+        state1: State1,
+        state2: State2,
+        state3: State3,
+        state4: State4
+    ) => boolean
 ): ViewTemplate;
 
 export function createMatrix<State1, State2, State3, State4, State5>(
@@ -76,7 +85,14 @@ export function createMatrix<State1, State2, State3, State4, State5>(
         readonly State3[],
         readonly State4[],
         readonly State5[]
-    ]
+    ],
+    filter?: (
+        state1: State1,
+        state2: State2,
+        state3: State3,
+        state4: State4,
+        state5: State5
+    ) => boolean
 ): ViewTemplate;
 
 export function createMatrix<State1, State2, State3, State4, State5, State6>(
@@ -95,7 +111,15 @@ export function createMatrix<State1, State2, State3, State4, State5, State6>(
         readonly State4[],
         readonly State5[],
         readonly State6[]
-    ]
+    ],
+    filter?: (
+        state1: State1,
+        state2: State2,
+        state3: State3,
+        state4: State4,
+        state5: State5,
+        state6: State6
+    ) => boolean
 ): ViewTemplate;
 
 export function createMatrix<
@@ -124,7 +148,16 @@ export function createMatrix<
         readonly State5[],
         readonly State6[],
         readonly State7[]
-    ]
+    ],
+    filter?: (
+        state1: State1,
+        state2: State2,
+        state3: State3,
+        state4: State4,
+        state5: State5,
+        state6: State6,
+        state7: State7
+    ) => boolean
 ): ViewTemplate;
 
 export function createMatrix<
@@ -156,7 +189,17 @@ export function createMatrix<
         readonly State6[],
         readonly State7[],
         readonly State8[]
-    ]
+    ],
+    filter?: (
+        state1: State1,
+        state2: State2,
+        state3: State3,
+        state4: State4,
+        state5: State5,
+        state6: State6,
+        state7: State7,
+        state8: State8
+    ) => boolean
 ): ViewTemplate;
 
 export function createMatrix<
@@ -191,12 +234,24 @@ export function createMatrix<
         readonly State7[],
         readonly State8[],
         readonly State9[]
-    ]
+    ],
+    filter?: (
+        state1: State1,
+        state2: State2,
+        state3: State3,
+        state4: State4,
+        state5: State5,
+        state6: State6,
+        state7: State7,
+        state8: State8,
+        state9: State9
+    ) => boolean
 ): ViewTemplate;
 
 export function createMatrix(
     component: (...states: readonly unknown[]) => ViewTemplate,
-    dimensions?: readonly (readonly unknown[])[]
+    dimensions?: readonly (readonly unknown[])[],
+    filter?: (...states: readonly unknown[]) => boolean
 ): ViewTemplate {
     const matrix: ViewTemplate[] = [];
     const recurseDimensions = (
@@ -208,7 +263,7 @@ export function createMatrix(
             for (const currentState of currentDimension!) {
                 recurseDimensions(remainingDimensions, ...states, currentState);
             }
-        } else {
+        } else if (!filter || filter(...states)) {
             matrix.push(component(...states));
         }
     };
diff --git a/packages/nimble-components/src/utilities/tests/states.ts b/packages/nimble-components/src/utilities/tests/states.ts
index 9d8647cf79..72387d0f85 100644
--- a/packages/nimble-components/src/utilities/tests/states.ts
+++ b/packages/nimble-components/src/utilities/tests/states.ts
@@ -42,8 +42,8 @@ export type ReadOnlyState = (typeof readOnlyStates)[number];
 export const iconVisibleStates = [false, true] as const;
 export type IconVisibleState = (typeof iconVisibleStates)[number];
 
+export const nonInteractionStates = [['', '']] as const;
 export const interactionStates = [
-    ['', ''],
     // Using pseudo-*-all will turn on the effect for any nested custom elements (e.g. inc/dec buttons in number field).
     // It works around the limitation that selectors for shadow elements can only see the immediate host's classes.
     ['Hovered', 'hover pseudo-hover-all'],
@@ -54,4 +54,14 @@ export const interactionStates = [
         'focus-visible focus-within pseudo-focus-visible-all pseudo-focus-within-all'
     ]
 ] as const;
-export type InteractionState = (typeof interactionStates)[number];
+export type InteractionState =
+    | (typeof interactionStates)[number]
+    | (typeof nonInteractionStates)[number];
+
+// Only interaction relevant to disabled controls is hover
+export function disabledInteractionsFilter(
+    interactionState: InteractionState,
+    disabledState: DisabledState
+): boolean {
+    return disabledState[0] !== 'Disabled' || interactionState[0] === 'Hovered';
+}

From e8831ed8293bcc9eaa60934b6e2385d809dcb183 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:05:24 -0500
Subject: [PATCH 05/25] Lint fix

---
 .../src/anchor/tests/anchor-matrix.stories.ts                  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
index ab2ed7185b..1abdcc55a0 100644
--- a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
@@ -15,8 +15,7 @@ import { anchorTag } from '..';
 import {
     interactionStates,
     nonInteractionStates,
-    type InteractionState,
-    disabledInteractionsFilter
+    type InteractionState
 } from '../../utilities/tests/states';
 
 const metadata: Meta = {

From 463c3575b5ca1855f50eeae6a954e1f3dd70752e Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Thu, 14 Mar 2024 10:55:19 -0500
Subject: [PATCH 06/25] Feedback

---
 .../tests/menu-button-matrix.stories.ts       | 23 +++++--------------
 .../tests/number-field-matrix.stories.ts      |  2 +-
 .../tests/toggle-button-matrix.stories.ts     | 19 ++++-----------
 3 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
index 47604a1ff4..cd1d51ec52 100644
--- a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
+++ b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -54,9 +54,9 @@ type AppearanceState = (typeof appearanceStates)[number];
 // prettier-ignore
 const component = (
     [interactionName, interaction]: InteractionState,
+    [disabledName, disabled]: DisabledState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
     [openName, open]: OpenState,
-    [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${menuButtonTag}
@@ -77,17 +77,17 @@ export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
         component,
         [
             nonInteractionStates,
+            disabledStates,
             partVisibilityStates,
             openStates,
-            disabledStates,
             appearanceStates
         ],
         // Disabled and open is not a valid state
         (
             _interactionState: InteractionState,
+            disabledState: DisabledState,
             _partVisibilityState: PartVisibilityState,
-            openState: OpenState,
-            disabledState: DisabledState
+            openState: OpenState
         ) => {
             return disabledState[0] !== 'Disabled' || openState[0] !== 'Open';
         }
@@ -99,23 +99,12 @@ export const menuButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory
         component,
         [
             interactionStates,
+            disabledStates,
             [[false, true, false]],
             openStates,
-            disabledStates,
             appearanceStates
         ],
-        // Only interaction relevant to disabled controls is hover
-        (
-            interactionState: InteractionState,
-            _partVisibilityState: PartVisibilityState,
-            _openState: OpenState,
-            disabledState: DisabledState
-        ) => {
-            return disabledInteractionsFilter(
-                interactionState,
-                disabledState
-            );
-        }
+        disabledInteractionsFilter
     )
 );
 
diff --git a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
index 6cb1f2cfa3..8077450a3a 100644
--- a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
@@ -86,7 +86,7 @@ export const numberFieldInteractionsThemeMatrix: StoryFn = createMatrixThemeStor
     createMatrix(
         component,
         [
-            interactionStates.filter(x => !x[0].includes('Active')), // skip irrelevant active states
+            interactionStates,
             disabledStates,
             hideStepStates.filter(x => x[0] !== 'Hide Step'), // always show inc/dec buttons
             valueStates.filter(x => x[0] !== 'Placeholder'), // don't test placeholder text
diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
index c41141cea3..fb548ff68c 100644
--- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
+++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -55,9 +55,9 @@ type CheckedState = (typeof checkedStates)[number];
 // prettier-ignore
 const component = (
     [interactionName, interaction]: InteractionState,
+    [disabledName, disabled]: DisabledState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
     [checkedName, checked]: CheckedState,
-    [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${toggleButtonTag}
@@ -76,9 +76,9 @@ const component = (
 export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
         nonInteractionStates,
+        disabledStates,
         partVisibilityStates,
         checkedStates,
-        disabledStates,
         appearanceStates
     ])
 );
@@ -88,23 +88,12 @@ export const toggleButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeSto
         component,
         [
             interactionStates,
+            disabledStates,
             [[false, true, false]],
             checkedStates,
-            disabledStates,
             appearanceStates
         ],
-        // Only interaction relevant to disabled controls is hover
-        (
-            interactionState: InteractionState,
-            _partVisibilityState: PartVisibilityState,
-            _checkedState: CheckedState,
-            disabledState: DisabledState
-        ) => {
-            return disabledInteractionsFilter(
-                interactionState,
-                disabledState
-            );
-        }
+        disabledInteractionsFilter
     )
 );
 

From b510032246b8bc1ba3859370998e449572c82e55 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Thu, 14 Mar 2024 11:42:00 -0500
Subject: [PATCH 07/25] Improve comments

---
 .../src/number-field/tests/number-field-matrix.stories.ts   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
index 8077450a3a..fa41777306 100644
--- a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
@@ -88,9 +88,9 @@ export const numberFieldInteractionsThemeMatrix: StoryFn = createMatrixThemeStor
         [
             interactionStates,
             disabledStates,
-            hideStepStates.filter(x => x[0] !== 'Hide Step'), // always show inc/dec buttons
-            valueStates.filter(x => x[0] !== 'Placeholder'), // don't test placeholder text
-            errorStates.filter(x => x[0] !== 'Error No Message'), // don't test error state w/o error text
+            hideStepStates.filter(x => x[0] !== 'Hide Step'), // always show inc/dec buttons (no need to test without)
+            valueStates.filter(x => x[0] !== 'Placeholder'), // value states shouldn't affect styling, so just test one (non-placeholder)
+            errorStates.filter(x => x[0] !== 'Error No Message'), // with or without message shouldn't matter, so just test with message
             appearanceStates
         ],
         disabledInteractionsFilter

From 68420bc91d2a2d3880b911a4820a36e60c5bbc8b Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 18 Mar 2024 16:11:43 -0500
Subject: [PATCH 08/25] Disable toolbar item for pseudo-states addon

---
 packages/nimble-components/.storybook/manager.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nimble-components/.storybook/manager.js b/packages/nimble-components/.storybook/manager.js
index e3348a08d2..b9fb2208c1 100644
--- a/packages/nimble-components/.storybook/manager.js
+++ b/packages/nimble-components/.storybook/manager.js
@@ -15,5 +15,8 @@ addons.setConfig({
             }
         }
     },
-    theme
+    theme,
+    toolbar: {
+        'storybook/pseudo-states/tool': { hidden: true }
+    }
 });

From d8e329c5278271baf468257c828706085d0233fd Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 20 Mar 2024 14:17:49 -0500
Subject: [PATCH 09/25] Fix matrix typing

use variadic tuple types https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#variadic-tuple-types
---
 .../src/utilities/tests/matrix.ts             | 235 +-----------------
 1 file changed, 7 insertions(+), 228 deletions(-)

diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index 959b9ffd0e..acc622346e 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -26,232 +26,11 @@ export const sharedMatrixParameters = () => ({
 /**
  * Takes an array of state values that can be used with the template to match the permutations of the provided states.
  */
-export function createMatrix(component: () => ViewTemplate): ViewTemplate;
-
-export function createMatrix<State1>(
-    component: (state1: State1) => ViewTemplate,
-    dimensions: readonly [readonly State1[]],
-    filter?: (state1: State1) => boolean
-): ViewTemplate;
-
-export function createMatrix<State1, State2>(
-    component: (state1: State1, state2: State2) => ViewTemplate,
-    dimensions: readonly [readonly State1[], readonly State2[]],
-    filter?: (state1: State1, state2: State2) => boolean
-): ViewTemplate;
-
-export function createMatrix<State1, State2, State3>(
-    component: (state1: State1, state2: State2, state3: State3) => ViewTemplate,
-    dimensions: readonly [
-        readonly State1[],
-        readonly State2[],
-        readonly State3[]
-    ],
-    filter?: (state1: State1, state2: State2, state3: State3) => boolean
-): ViewTemplate;
-
-export function createMatrix<State1, State2, State3, State4>(
-    component: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4
-    ) => ViewTemplate,
-    dimensions: readonly [
-        readonly State1[],
-        readonly State2[],
-        readonly State3[],
-        readonly State4[]
-    ],
-    filter?: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4
-    ) => boolean
-): ViewTemplate;
-
-export function createMatrix<State1, State2, State3, State4, State5>(
-    component: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5
-    ) => ViewTemplate,
-    dimensions: readonly [
-        readonly State1[],
-        readonly State2[],
-        readonly State3[],
-        readonly State4[],
-        readonly State5[]
-    ],
-    filter?: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5
-    ) => boolean
-): ViewTemplate;
-
-export function createMatrix<State1, State2, State3, State4, State5, State6>(
-    component: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5,
-        state6: State6
-    ) => ViewTemplate,
-    dimensions: readonly [
-        readonly State1[],
-        readonly State2[],
-        readonly State3[],
-        readonly State4[],
-        readonly State5[],
-        readonly State6[]
-    ],
-    filter?: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5,
-        state6: State6
-    ) => boolean
-): ViewTemplate;
-
-export function createMatrix<
-    State1,
-    State2,
-    State3,
-    State4,
-    State5,
-    State6,
-    State7
->(
-    component: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5,
-        state6: State6,
-        state7: State7
-    ) => ViewTemplate,
-    dimensions: readonly [
-        readonly State1[],
-        readonly State2[],
-        readonly State3[],
-        readonly State4[],
-        readonly State5[],
-        readonly State6[],
-        readonly State7[]
-    ],
-    filter?: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5,
-        state6: State6,
-        state7: State7
-    ) => boolean
-): ViewTemplate;
-
-export function createMatrix<
-    State1,
-    State2,
-    State3,
-    State4,
-    State5,
-    State6,
-    State7,
-    State8
->(
-    component: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5,
-        state6: State6,
-        state7: State7,
-        state8: State8
-    ) => ViewTemplate,
-    dimensions: readonly [
-        readonly State1[],
-        readonly State2[],
-        readonly State3[],
-        readonly State4[],
-        readonly State5[],
-        readonly State6[],
-        readonly State7[],
-        readonly State8[]
-    ],
-    filter?: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5,
-        state6: State6,
-        state7: State7,
-        state8: State8
-    ) => boolean
-): ViewTemplate;
-
-export function createMatrix<
-    State1,
-    State2,
-    State3,
-    State4,
-    State5,
-    State6,
-    State7,
-    State8,
-    State9
->(
-    component: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5,
-        state6: State6,
-        state7: State7,
-        state8: State8,
-        state9: State9
-    ) => ViewTemplate,
-    dimensions: readonly [
-        readonly State1[],
-        readonly State2[],
-        readonly State3[],
-        readonly State4[],
-        readonly State5[],
-        readonly State6[],
-        readonly State7[],
-        readonly State8[],
-        readonly State9[]
-    ],
-    filter?: (
-        state1: State1,
-        state2: State2,
-        state3: State3,
-        state4: State4,
-        state5: State5,
-        state6: State6,
-        state7: State7,
-        state8: State8,
-        state9: State9
-    ) => boolean
-): ViewTemplate;
-
-export function createMatrix(
-    component: (...states: readonly unknown[]) => ViewTemplate,
-    dimensions?: readonly (readonly unknown[])[],
-    filter?: (...states: readonly unknown[]) => boolean
+type MakeTupleEntriesArrays<T> = { [K in keyof T]: readonly T[K][] };
+export function createMatrix<T extends readonly unknown[]>(
+    component: (...states: T) => ViewTemplate,
+    dimensions?: MakeTupleEntriesArrays<T>,
+    filter?: (...states: T) => boolean
 ): ViewTemplate {
     const matrix: ViewTemplate[] = [];
     const recurseDimensions = (
@@ -263,8 +42,8 @@ export function createMatrix(
             for (const currentState of currentDimension!) {
                 recurseDimensions(remainingDimensions, ...states, currentState);
             }
-        } else if (!filter || filter(...states)) {
-            matrix.push(component(...states));
+        } else if (!filter || filter(...states as T)) {
+            matrix.push(component(...states as T));
         }
     };
     recurseDimensions(dimensions);

From d17850905651c384f08c66de09c6951419b5260e Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 20 Mar 2024 14:28:08 -0500
Subject: [PATCH 10/25] lint

---
 packages/nimble-components/src/utilities/tests/matrix.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index acc622346e..d0da710003 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -23,10 +23,10 @@ export const sharedMatrixParameters = () => ({
     }
 }) as const;
 
+type MakeTupleEntriesArrays<T> = { [K in keyof T]: readonly T[K][] };
 /**
  * Takes an array of state values that can be used with the template to match the permutations of the provided states.
  */
-type MakeTupleEntriesArrays<T> = { [K in keyof T]: readonly T[K][] };
 export function createMatrix<T extends readonly unknown[]>(
     component: (...states: T) => ViewTemplate,
     dimensions?: MakeTupleEntriesArrays<T>,
@@ -42,8 +42,8 @@ export function createMatrix<T extends readonly unknown[]>(
             for (const currentState of currentDimension!) {
                 recurseDimensions(remainingDimensions, ...states, currentState);
             }
-        } else if (!filter || filter(...states as T)) {
-            matrix.push(component(...states as T));
+        } else if (!filter || filter(...(states as T))) {
+            matrix.push(component(...(states as T)));
         }
     };
     recurseDimensions(dimensions);

From de2727791e9c094a95ee73975e84b186c1edabed Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 20 Mar 2024 15:40:12 -0500
Subject: [PATCH 11/25] Split permutations from createMatrix

---
 .../src/utilities/tests/matrix.ts             | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index d0da710003..3287733409 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -25,14 +25,12 @@ export const sharedMatrixParameters = () => ({
 
 type MakeTupleEntriesArrays<T> = { [K in keyof T]: readonly T[K][] };
 /**
- * Takes an array of state values that can be used with the template to match the permutations of the provided states.
+ * Takes an array of state values and finds the permutations of the provided states.
  */
-export function createMatrix<T extends readonly unknown[]>(
-    component: (...states: T) => ViewTemplate,
-    dimensions?: MakeTupleEntriesArrays<T>,
-    filter?: (...states: T) => boolean
-): ViewTemplate {
-    const matrix: ViewTemplate[] = [];
+function permute<T extends readonly unknown[]>(
+    dimensions?: MakeTupleEntriesArrays<T>
+): T[] {
+    const permutations: T[] = [];
     const recurseDimensions = (
         currentDimensions?: readonly (readonly unknown[])[],
         ...states: readonly unknown[]
@@ -42,11 +40,25 @@ export function createMatrix<T extends readonly unknown[]>(
             for (const currentState of currentDimension!) {
                 recurseDimensions(remainingDimensions, ...states, currentState);
             }
-        } else if (!filter || filter(...(states as T))) {
-            matrix.push(component(...(states as T)));
+        } else {
+            permutations.push(states as T);
         }
     };
     recurseDimensions(dimensions);
+    return permutations;
+}
+
+/**
+ * Takes an array of state values that can be used with the template to match the permutations of the provided states.
+ */
+export function createMatrix<T extends readonly unknown[]>(
+    component: (...states: T) => ViewTemplate,
+    dimensions?: MakeTupleEntriesArrays<T>,
+    filter?: (...states: T) => boolean
+): ViewTemplate {
+    const matrix = permute(dimensions)
+        .filter(states => !filter || filter(...states))
+        .map(states => component(...states));
     // prettier-ignore
     return html`
         ${repeat(() => matrix, html`

From 719ec905a2caea6de5b70dbc7511d09858e4bee4 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 20 Mar 2024 16:47:51 -0500
Subject: [PATCH 12/25] Add createMatrixFromStates

---
 .../src/utilities/tests/matrix.ts             | 54 +++++++++++--------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index 3287733409..7476556282 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -27,7 +27,7 @@ type MakeTupleEntriesArrays<T> = { [K in keyof T]: readonly T[K][] };
 /**
  * Takes an array of state values and finds the permutations of the provided states.
  */
-function permute<T extends readonly unknown[]>(
+export function permute<T extends readonly unknown[]>(
     dimensions?: MakeTupleEntriesArrays<T>
 ): T[] {
     const permutations: T[] = [];
@@ -48,6 +48,22 @@ function permute<T extends readonly unknown[]>(
     return permutations;
 }
 
+/**
+ * Takes an array of state values that can be used with a template.
+ */
+export function createMatrixFromStates<T extends readonly unknown[]>(
+    component: (...states: T) => ViewTemplate,
+    states: T[]
+): ViewTemplate {
+    const matrix = states.map(state => component(...state));
+    // prettier-ignore
+    return html`
+    ${repeat(() => matrix, html`
+        ${(x: ViewTemplate): ViewTemplate => x}
+    `)}
+`;
+}
+
 /**
  * Takes an array of state values that can be used with the template to match the permutations of the provided states.
  */
@@ -56,15 +72,10 @@ export function createMatrix<T extends readonly unknown[]>(
     dimensions?: MakeTupleEntriesArrays<T>,
     filter?: (...states: T) => boolean
 ): ViewTemplate {
-    const matrix = permute(dimensions)
-        .filter(states => !filter || filter(...states))
-        .map(states => component(...states));
-    // prettier-ignore
-    return html`
-        ${repeat(() => matrix, html`
-            ${(x: ViewTemplate): ViewTemplate => x}
-        `)}
-    `;
+    const states = permute(dimensions).filter(
+        state => !filter || filter(...state)
+    );
+    return createMatrixFromStates(component, states);
 }
 
 /**
@@ -74,17 +85,18 @@ export const createMatrixThemeStory = <TSource>(
     viewTemplate: ViewTemplate<TSource>
 ): ((source: TSource) => Element) => {
     return (source: TSource): Element => {
-        const matrixTemplate = createMatrix(
-            ({ theme, value }: BackgroundState) => html`
-                <${themeProviderTag}
-                    theme="${theme}">
-                    <div style="background-color: ${value}; padding:20px;">
-                        ${viewTemplate}
-                    </div>
-                </${themeProviderTag}>
-            `,
-            [backgroundStates]
-        );
+        const component = ({
+            theme,
+            value
+        }: BackgroundState): ViewTemplate => html`
+            <${themeProviderTag}
+                theme="${theme}">
+                <div style="background-color: ${value}; padding:20px;">
+                    ${viewTemplate}
+                </div>
+            </${themeProviderTag}>
+        `;
+        const matrixTemplate = createMatrix(component, [backgroundStates]);
         const wrappedMatrixTemplate = html<TSource>`
             <div class="code-hide-top-container">${matrixTemplate}</div>
         `;

From 2962347ef2dc132b036e92418b4a67898b7ab1ba Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 20 Mar 2024 17:37:24 -0500
Subject: [PATCH 13/25] Fix permute return strictness

---
 packages/nimble-components/src/utilities/tests/matrix.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index 7476556282..b54594aa9b 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -29,8 +29,8 @@ type MakeTupleEntriesArrays<T> = { [K in keyof T]: readonly T[K][] };
  */
 export function permute<T extends readonly unknown[]>(
     dimensions?: MakeTupleEntriesArrays<T>
-): T[] {
-    const permutations: T[] = [];
+): [...T][] {
+    const permutations: [...T][] = [];
     const recurseDimensions = (
         currentDimensions?: readonly (readonly unknown[])[],
         ...states: readonly unknown[]
@@ -41,7 +41,7 @@ export function permute<T extends readonly unknown[]>(
                 recurseDimensions(remainingDimensions, ...states, currentState);
             }
         } else {
-            permutations.push(states as T);
+            permutations.push(states as [...T]);
         }
     };
     recurseDimensions(dimensions);

From 6fdde22d8b1b1894afb6ea1854ff60ec6f1b8e72 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 20 Mar 2024 19:06:15 -0500
Subject: [PATCH 14/25] interactionsWrapper initial prototype

---
 .../tests/toggle-button-matrix.stories.ts     | 26 +++++++++----------
 .../src/utilities/tests/states.ts             | 25 +++++++++++++++++-
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
index fb548ff68c..8441a3a91d 100644
--- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
+++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -5,15 +5,16 @@ import { ButtonAppearance } from '../types';
 import {
     createMatrix,
     sharedMatrixParameters,
-    createMatrixThemeStory
+    createMatrixThemeStory,
+    createMatrixFromStates,
+    permute
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
     DisabledState,
-    InteractionState,
     interactionStates,
-    nonInteractionStates,
-    disabledInteractionsFilter
+    removeUnusuedDisabledInteractions,
+    interactionsWrapper
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -40,6 +41,7 @@ const partVisibilityStates = [
     [false, true, true]
 ] as const;
 type PartVisibilityState = (typeof partVisibilityStates)[number];
+const partVisibilityStatesOnlyLabel = partVisibilityStates[2];
 
 const appearanceStates: [string, string | undefined][] = Object.entries(
     ButtonAppearance
@@ -54,28 +56,25 @@ type CheckedState = (typeof checkedStates)[number];
 
 // prettier-ignore
 const component = (
-    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
     [checkedName, checked]: CheckedState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${toggleButtonTag}
-        class="${() => interaction}"
         appearance="${() => appearance}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         ?checked=${() => checked}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${interactionName} ${checkedName} ${appearanceName} Toggle Button ${disabledName}`}
+            ${() => `${checkedName} ${appearanceName} Toggle Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
     </${toggleButtonTag}>
 `;
 
 export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        nonInteractionStates,
         disabledStates,
         partVisibilityStates,
         checkedStates,
@@ -84,16 +83,15 @@ export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
 );
 
 export const toggleButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(
-        component,
-        [
+    createMatrixFromStates(
+        interactionsWrapper(component),
+        permute([
             interactionStates,
             disabledStates,
-            [[false, true, false]],
+            [partVisibilityStatesOnlyLabel],
             checkedStates,
             appearanceStates
-        ],
-        disabledInteractionsFilter
+        ] as const).filter(removeUnusuedDisabledInteractions)
     )
 );
 
diff --git a/packages/nimble-components/src/utilities/tests/states.ts b/packages/nimble-components/src/utilities/tests/states.ts
index 72387d0f85..9f0b2222bd 100644
--- a/packages/nimble-components/src/utilities/tests/states.ts
+++ b/packages/nimble-components/src/utilities/tests/states.ts
@@ -1,3 +1,4 @@
+import { html, type ViewTemplate } from '@microsoft/fast-element';
 import { Theme } from '../../theme-provider/types';
 
 export const backgroundStates = [
@@ -25,6 +26,7 @@ export const disabledStates = [
     ['Disabled', true]
 ] as const;
 export type DisabledState = (typeof disabledStates)[number];
+const disabledStateDisabled = disabledStates[1];
 
 export const errorStates = [
     ['', false, ''],
@@ -57,11 +59,32 @@ export const interactionStates = [
 export type InteractionState =
     | (typeof interactionStates)[number]
     | (typeof nonInteractionStates)[number];
+const interactionStateHovered = interactionStates[0];
+
+export function interactionsWrapper<T extends readonly unknown[]>(
+    component: (...states: T) => ViewTemplate
+): (interactionState: InteractionState, ...states: T) => ViewTemplate {
+    return ([interactionName, interaction]: InteractionState, ...original) => html`
+        <div class="${interaction}">
+            <span>${interactionName}</span>
+            ${component(...original)}
+        </div>
+    `;
+}
 
-// Only interaction relevant to disabled controls is hover
 export function disabledInteractionsFilter(
     interactionState: InteractionState,
     disabledState: DisabledState
 ): boolean {
     return disabledState[0] !== 'Disabled' || interactionState[0] === 'Hovered';
 }
+
+export function removeUnusuedDisabledInteractions<U extends unknown[], T extends [InteractionState, DisabledState, ...U]>([
+    interactionState,
+    disabledState,
+]: T): boolean {
+    if (disabledState === disabledStateDisabled && interactionState !== interactionStateHovered) {
+        return false;
+    }
+    return true;
+}

From 87db133a2029106a32ba1c165637f46b5c4a18ce Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 20 Mar 2024 19:11:20 -0500
Subject: [PATCH 15/25] lint

---
 .../src/utilities/tests/states.ts              | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/nimble-components/src/utilities/tests/states.ts b/packages/nimble-components/src/utilities/tests/states.ts
index 9f0b2222bd..001de31489 100644
--- a/packages/nimble-components/src/utilities/tests/states.ts
+++ b/packages/nimble-components/src/utilities/tests/states.ts
@@ -64,7 +64,10 @@ const interactionStateHovered = interactionStates[0];
 export function interactionsWrapper<T extends readonly unknown[]>(
     component: (...states: T) => ViewTemplate
 ): (interactionState: InteractionState, ...states: T) => ViewTemplate {
-    return ([interactionName, interaction]: InteractionState, ...original) => html`
+    return (
+        [interactionName, interaction]: InteractionState,
+        ...original
+    ) => html`
         <div class="${interaction}">
             <span>${interactionName}</span>
             ${component(...original)}
@@ -79,11 +82,14 @@ export function disabledInteractionsFilter(
     return disabledState[0] !== 'Disabled' || interactionState[0] === 'Hovered';
 }
 
-export function removeUnusuedDisabledInteractions<U extends unknown[], T extends [InteractionState, DisabledState, ...U]>([
-    interactionState,
-    disabledState,
-]: T): boolean {
-    if (disabledState === disabledStateDisabled && interactionState !== interactionStateHovered) {
+export function removeUnusuedDisabledInteractions<
+    U extends unknown[],
+    T extends [InteractionState, DisabledState, ...U]
+>([interactionState, disabledState]: T): boolean {
+    if (
+        disabledState === disabledStateDisabled
+        && interactionState !== interactionStateHovered
+    ) {
         return false;
     }
     return true;

From c52471c4348bb9b597b9984ddf5a729f58dd09d6 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 20 Mar 2024 20:23:33 -0500
Subject: [PATCH 16/25] Rename to cartesian product

---
 .../tests/toggle-button-matrix.stories.ts        |  4 ++--
 .../src/utilities/tests/matrix.ts                | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
index 8441a3a91d..52f6d8a1b6 100644
--- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
+++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -7,7 +7,7 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory,
     createMatrixFromStates,
-    permute
+    cartesianProduct
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
@@ -85,7 +85,7 @@ export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
 export const toggleButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrixFromStates(
         interactionsWrapper(component),
-        permute([
+        cartesianProduct([
             interactionStates,
             disabledStates,
             [partVisibilityStatesOnlyLabel],
diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index b54594aa9b..32df8fe12c 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -25,12 +25,12 @@ export const sharedMatrixParameters = () => ({
 
 type MakeTupleEntriesArrays<T> = { [K in keyof T]: readonly T[K][] };
 /**
- * Takes an array of state values and finds the permutations of the provided states.
+ * Calculates the cartesian product of an array of sets.
  */
-export function permute<T extends readonly unknown[]>(
+export function cartesianProduct<T extends readonly unknown[]>(
     dimensions?: MakeTupleEntriesArrays<T>
 ): [...T][] {
-    const permutations: [...T][] = [];
+    const result: [...T][] = [];
     const recurseDimensions = (
         currentDimensions?: readonly (readonly unknown[])[],
         ...states: readonly unknown[]
@@ -41,15 +41,15 @@ export function permute<T extends readonly unknown[]>(
                 recurseDimensions(remainingDimensions, ...states, currentState);
             }
         } else {
-            permutations.push(states as [...T]);
+            result.push(states as [...T]);
         }
     };
     recurseDimensions(dimensions);
-    return permutations;
+    return result;
 }
 
 /**
- * Takes an array of state values that can be used with a template.
+ * Takes a template rendered with an array of states.
  */
 export function createMatrixFromStates<T extends readonly unknown[]>(
     component: (...states: T) => ViewTemplate,
@@ -65,14 +65,14 @@ export function createMatrixFromStates<T extends readonly unknown[]>(
 }
 
 /**
- * Takes an array of state values that can be used with the template to match the permutations of the provided states.
+ * Takes a template rendered with the cartesian product the provided states.
  */
 export function createMatrix<T extends readonly unknown[]>(
     component: (...states: T) => ViewTemplate,
     dimensions?: MakeTupleEntriesArrays<T>,
     filter?: (...states: T) => boolean
 ): ViewTemplate {
-    const states = permute(dimensions).filter(
+    const states = cartesianProduct(dimensions).filter(
         state => !filter || filter(...state)
     );
     return createMatrixFromStates(component, states);

From e949d6ec6b0acad9cd977375ec959dd0ef3c6af2 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:29:20 -0500
Subject: [PATCH 17/25] Add createMatrixInteractionsfromStates

---
 .../tests/anchor-button-matrix.stories.ts     | 45 ++++++-----
 .../src/anchor/tests/anchor-matrix.stories.ts | 56 +++++++-------
 .../src/button/tests/button-matrix.stories.ts | 45 ++++++-----
 .../tests/menu-button-matrix.stories.ts       | 60 +++++++--------
 .../tests/number-field-matrix.stories.ts      | 51 ++++++++-----
 .../tests/toggle-button-matrix.stories.ts     | 39 ++++++----
 .../src/utilities/tests/matrix.ts             | 75 ++++++++++++++-----
 .../src/utilities/tests/states.ts             | 57 +-------------
 8 files changed, 227 insertions(+), 201 deletions(-)

diff --git a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
index 156dee48ca..e57526452d 100644
--- a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
@@ -8,15 +8,14 @@ import {
 import {
     createMatrix,
     sharedMatrixParameters,
-    createMatrixThemeStory
+    createMatrixThemeStory,
+    cartesianProduct,
+    createMatrixInteractionsfromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
     DisabledState,
-    InteractionState,
-    interactionStates,
-    nonInteractionStates,
-    disabledInteractionsFilter
+    disabledStateIsEnabled
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -43,6 +42,7 @@ const partVisibilityStates = [
     [false, true, true]
 ] as const;
 type PartVisibilityState = (typeof partVisibilityStates)[number];
+const partVisibilityStatesOnlyLabel = partVisibilityStates[2];
 
 const appearanceStates: [string, string | undefined][] = Object.entries(
     ButtonAppearance
@@ -56,14 +56,12 @@ type AppearanceVariantState = (typeof appearanceVariantStates)[number];
 
 // prettier-ignore
 const component = (
-    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState,
     [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
 ): ViewTemplate => html`
     <${anchorButtonTag}
-        class="${() => interaction}"
         href="https://nimble.ni.dev"
         appearance="${() => appearance}"
         appearance-variant="${() => appearanceVariant}"
@@ -71,14 +69,13 @@ const component = (
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconLinkTag} slot="start"></${iconLinkTag}>`)}
-            ${() => `${interactionName} ${appearanceVariantName} ${appearanceName} Link ${disabledName}`}
+            ${() => `${appearanceVariantName} ${appearanceName} Link ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderRightTag} slot="end"></${iconArrowExpanderRightTag}>`)}
     </${anchorButtonTag}>
 `;
 
 export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        nonInteractionStates,
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
@@ -86,17 +83,29 @@ export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     ])
 );
 
+const interactionStatesHover = cartesianProduct([
+    disabledStates,
+    appearanceStates,
+    appearanceVariantStates,
+    [partVisibilityStatesOnlyLabel]
+] as const);
+
+const interactionStates = cartesianProduct([
+    [disabledStateIsEnabled],
+    appearanceStates,
+    appearanceVariantStates,
+    [partVisibilityStatesOnlyLabel]
+] as const);
+
 export const anchorButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(
+    createMatrixInteractionsfromStates(
         component,
-        [
-            interactionStates,
-            disabledStates,
-            appearanceStates,
-            appearanceVariantStates,
-            [[false, true, false]]
-        ],
-        disabledInteractionsFilter
+        {
+            hover: interactionStatesHover,
+            hoverActive: interactionStates,
+            active: interactionStates,
+            focus: interactionStates,
+        }
     )
 );
 
diff --git a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
index 1abdcc55a0..2dde09d761 100644
--- a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
@@ -4,7 +4,9 @@ import { pascalCase } from '@microsoft/fast-web-utilities';
 import {
     createMatrix,
     sharedMatrixParameters,
-    createMatrixThemeStory
+    createMatrixThemeStory,
+    cartesianProduct,
+    createMatrixInteractionsfromStates
 } from '../../utilities/tests/matrix';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -12,11 +14,7 @@ import { textCustomizationWrapper } from '../../utilities/tests/text-customizati
 import { AnchorAppearance } from '../types';
 import { bodyFont } from '../../theme-provider/design-tokens';
 import { anchorTag } from '..';
-import {
-    interactionStates,
-    nonInteractionStates,
-    type InteractionState
-} from '../../utilities/tests/states';
+import { disabledStates, type DisabledState, disabledStateIsEnabled } from '../../utilities/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Anchor',
@@ -27,12 +25,6 @@ const metadata: Meta = {
 
 export default metadata;
 
-const disabledStates = [
-    ['', 'https://nimble.ni.dev'],
-    ['Disabled', null]
-] as const;
-type DisabledState = (typeof disabledStates)[number];
-
 const underlineHiddenStates = [
     ['', false],
     ['Underline Hidden', true]
@@ -46,44 +38,46 @@ type AppearanceState = (typeof appearanceStates)[number];
 
 // prettier-ignore
 const component = (
-    [interactionName, interaction]: InteractionState,
-    [disabledName, href]: DisabledState,
+    [disabledName, disabled]: DisabledState,
     [underlineHiddenName, underlineHidden]: UnderlineHiddenState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${anchorTag}
-        class="${() => interaction}"
-        href=${() => href}
+        href=${() => (disabled ? undefined : 'https://nimble.ni.dev')}
         ?underline-hidden="${() => underlineHidden}"
         appearance="${() => appearance}"
         style="margin-right: 8px; margin-bottom: 8px;">
-            ${() => `${interactionName} ${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
+            ${() => `${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
 `;
 
 export const anchorThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        nonInteractionStates,
         disabledStates,
         underlineHiddenStates,
         appearanceStates
     ])
 );
 
+const interactionStatesHover = cartesianProduct([
+    disabledStates,
+    underlineHiddenStates,
+    appearanceStates
+] as const);
+
+const interactionStates = cartesianProduct([
+    [disabledStateIsEnabled],
+    underlineHiddenStates,
+    appearanceStates
+] as const);
+
 export const anchorInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(
+    createMatrixInteractionsfromStates(
         component,
-        [
-            interactionStates,
-            disabledStates,
-            underlineHiddenStates,
-            appearanceStates
-        ],
-        // A custom DisabledState type is used in this file, so we can't use the shared disabledInteractionsFilter
-        (interactionState: InteractionState, disabledState: DisabledState) => {
-            return (
-                disabledState[0] !== 'Disabled'
-                || interactionState[0] === 'Hovered'
-            );
+        {
+            hover: interactionStatesHover,
+            hoverActive: interactionStates,
+            active: interactionStates,
+            focus: interactionStates,
         }
     )
 );
diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
index c7caa65f31..a114062c1b 100644
--- a/packages/nimble-components/src/button/tests/button-matrix.stories.ts
+++ b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
@@ -5,15 +5,14 @@ import { ButtonAppearance, ButtonAppearanceVariant } from '../types';
 import {
     createMatrix,
     sharedMatrixParameters,
-    createMatrixThemeStory
+    createMatrixThemeStory,
+    cartesianProduct,
+    createMatrixInteractionsfromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
     DisabledState,
-    InteractionState,
-    interactionStates,
-    nonInteractionStates,
-    disabledInteractionsFilter
+    disabledStateIsEnabled,
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -41,6 +40,7 @@ const partVisibilityStates = [
     [false, true, true]
 ] as const;
 type PartVisibilityState = (typeof partVisibilityStates)[number];
+const partVisibilityStatesOnlyLabel = partVisibilityStates[2];
 
 const appearanceStates: [string, string | undefined][] = Object.entries(
     ButtonAppearance
@@ -54,28 +54,25 @@ type AppearanceVariantState = (typeof appearanceVariantStates)[number];
 
 // prettier-ignore
 const component = (
-    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState,
     [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
 ): ViewTemplate => html`
     <${buttonTag}
-        class="${() => interaction}"
         appearance="${() => appearance}"
         appearance-variant="${() => appearanceVariant}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${interactionName} ${appearanceVariantName} ${appearanceName} Button ${disabledName}`}
+            ${() => `${appearanceVariantName} ${appearanceName} Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
     </${buttonTag}>
 `;
 
 export const buttonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        nonInteractionStates,
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
@@ -83,17 +80,29 @@ export const buttonThemeMatrix: StoryFn = createMatrixThemeStory(
     ])
 );
 
+const interactionStates = cartesianProduct([
+    [disabledStateIsEnabled],
+    appearanceStates,
+    appearanceVariantStates,
+    [partVisibilityStatesOnlyLabel]
+] as const);
+
+const interactionStatesHover = cartesianProduct([
+    disabledStates,
+    appearanceStates,
+    appearanceVariantStates,
+    [partVisibilityStatesOnlyLabel]
+] as const);
+
 export const buttonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(
+    createMatrixInteractionsfromStates(
         component,
-        [
-            interactionStates,
-            disabledStates,
-            appearanceStates,
-            appearanceVariantStates,
-            [[false, true, false]]
-        ],
-        disabledInteractionsFilter
+        {
+            hover: interactionStatesHover,
+            hoverActive: interactionStates,
+            active: interactionStates,
+            focus: interactionStates,
+        }
     )
 );
 
diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
index cd1d51ec52..210e305e73 100644
--- a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
+++ b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -5,15 +5,14 @@ import { ButtonAppearance } from '../types';
 import {
     createMatrix,
     sharedMatrixParameters,
-    createMatrixThemeStory
+    createMatrixThemeStory,
+    cartesianProduct,
+    createMatrixInteractionsfromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
     DisabledState,
-    InteractionState,
-    interactionStates,
-    nonInteractionStates,
-    disabledInteractionsFilter
+    disabledStateIsEnabled
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -39,6 +38,7 @@ const partVisibilityStates = [
     [false, true, true]
 ] as const;
 type PartVisibilityState = (typeof partVisibilityStates)[number];
+const partVisibilityStatesOnlyLabel = partVisibilityStates[2];
 
 const openStates = [
     ['', false],
@@ -53,21 +53,19 @@ type AppearanceState = (typeof appearanceStates)[number];
 
 // prettier-ignore
 const component = (
-    [interactionName, interaction]: InteractionState,
-    [disabledName, disabled]: DisabledState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
+    [disabledName, disabled]: DisabledState,
     [openName, open]: OpenState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${menuButtonTag}
-        class="${() => interaction}"
         appearance="${() => appearance}"
         ?open="${() => open}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${interactionName} ${openName} ${appearanceName!} Menu Button ${disabledName}`}
+            ${() => `${openName} ${appearanceName!} Menu Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
     </${menuButtonTag}>
 `;
@@ -76,35 +74,37 @@ export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(
         component,
         [
-            nonInteractionStates,
-            disabledStates,
             partVisibilityStates,
+            disabledStates,
             openStates,
             appearanceStates
-        ],
-        // Disabled and open is not a valid state
-        (
-            _interactionState: InteractionState,
-            disabledState: DisabledState,
-            _partVisibilityState: PartVisibilityState,
-            openState: OpenState
-        ) => {
-            return disabledState[0] !== 'Disabled' || openState[0] !== 'Open';
-        }
+        ]
     )
 );
 
+const interactionStatesHover = cartesianProduct([
+    [partVisibilityStatesOnlyLabel],
+    disabledStates,
+    openStates,
+    appearanceStates
+] as const);
+
+const interactionStates = cartesianProduct([
+    [partVisibilityStatesOnlyLabel],
+    [disabledStateIsEnabled],
+    openStates,
+    appearanceStates
+] as const);
+
 export const menuButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(
+    createMatrixInteractionsfromStates(
         component,
-        [
-            interactionStates,
-            disabledStates,
-            [[false, true, false]],
-            openStates,
-            appearanceStates
-        ],
-        disabledInteractionsFilter
+        {
+            hover: interactionStatesHover,
+            hoverActive: interactionStates,
+            active: interactionStates,
+            focus: interactionStates,
+        }
     )
 );
 
diff --git a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
index fa41777306..65a80ac18a 100644
--- a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
@@ -5,17 +5,18 @@ import { createStory } from '../../utilities/tests/storybook';
 import {
     createMatrixThemeStory,
     createMatrix,
-    sharedMatrixParameters
+    sharedMatrixParameters,
+    cartesianProduct,
+    createMatrixInteractionsfromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
     DisabledState,
     errorStates,
     ErrorState,
-    InteractionState,
-    interactionStates,
-    nonInteractionStates,
-    disabledInteractionsFilter
+    disabledStateIsEnabled,
+    errorStatesNoError,
+    errorStatesErrorWithMessage
 } from '../../utilities/tests/states';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { NumberFieldAppearance } from '../types';
@@ -35,6 +36,7 @@ const valueStates = [
     ['Value', '1234', null]
 ] as const;
 type ValueState = (typeof valueStates)[number];
+const valueStatesHasValue = valueStates[1];
 
 const appearanceStates = Object.entries(NumberFieldAppearance).map(
     ([key, value]) => [pascalCase(key), value]
@@ -46,9 +48,9 @@ const hideStepStates = [
     ['Hide Step', true]
 ] as const;
 type HideStepState = (typeof hideStepStates)[number];
+const hideStepStateStepVisible = hideStepStates[0];
 
 const component = (
-    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [hideStepName, hideStep]: HideStepState,
     [valueName, valueValue, placeholderValue]: ValueState,
@@ -57,7 +59,6 @@ const component = (
 ): ViewTemplate => html`
     <${numberFieldTag}
         style="width: 250px; padding: 8px;"
-        class="${() => errorVisible} ${() => interaction}"
         value="${() => valueValue}"
         placeholder="${() => placeholderValue}"
         appearance="${() => appearance}"
@@ -66,14 +67,13 @@ const component = (
         error-text="${() => errorText}"
         ?error-visible="${() => errorVisible}"
     >
-    ${interactionName} ${() => errorName} ${() => appearanceName} ${() => valueName}
+    ${() => errorName} ${() => appearanceName} ${() => valueName}
         ${() => hideStepName} ${() => disabledName}
     </${numberFieldTag}>
 `;
 
 export const numberFieldThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        nonInteractionStates,
         disabledStates,
         hideStepStates,
         valueStates,
@@ -82,18 +82,31 @@ export const numberFieldThemeMatrix: StoryFn = createMatrixThemeStory(
     ])
 );
 
+const interactionStatesHover = cartesianProduct([
+    disabledStates,
+    [hideStepStateStepVisible],
+    [valueStatesHasValue],
+    [errorStatesNoError, errorStatesErrorWithMessage],
+    appearanceStates
+] as const);
+
+const interactionStates = cartesianProduct([
+    [disabledStateIsEnabled],
+    [hideStepStateStepVisible],
+    [valueStatesHasValue],
+    [errorStatesNoError, errorStatesErrorWithMessage],
+    appearanceStates
+] as const);
+
 export const numberFieldInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(
+    createMatrixInteractionsfromStates(
         component,
-        [
-            interactionStates,
-            disabledStates,
-            hideStepStates.filter(x => x[0] !== 'Hide Step'), // always show inc/dec buttons (no need to test without)
-            valueStates.filter(x => x[0] !== 'Placeholder'), // value states shouldn't affect styling, so just test one (non-placeholder)
-            errorStates.filter(x => x[0] !== 'Error No Message'), // with or without message shouldn't matter, so just test with message
-            appearanceStates
-        ],
-        disabledInteractionsFilter
+        {
+            hover: interactionStatesHover,
+            hoverActive: interactionStates,
+            active: interactionStates,
+            focus: interactionStates,
+        }
     )
 );
 
diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
index 52f6d8a1b6..231f6792dd 100644
--- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
+++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -6,15 +6,13 @@ import {
     createMatrix,
     sharedMatrixParameters,
     createMatrixThemeStory,
-    createMatrixFromStates,
-    cartesianProduct
+    cartesianProduct,
+    createMatrixInteractionsfromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
     DisabledState,
-    interactionStates,
-    removeUnusuedDisabledInteractions,
-    interactionsWrapper
+    disabledStateIsEnabled,
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -82,16 +80,29 @@ export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     ])
 );
 
+const interactionStatesHover = cartesianProduct([
+    disabledStates,
+    [partVisibilityStatesOnlyLabel],
+    checkedStates,
+    appearanceStates
+] as const);
+
+const interactionStates = cartesianProduct([
+    [disabledStateIsEnabled],
+    [partVisibilityStatesOnlyLabel],
+    checkedStates,
+    appearanceStates
+] as const);
+
 export const toggleButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixFromStates(
-        interactionsWrapper(component),
-        cartesianProduct([
-            interactionStates,
-            disabledStates,
-            [partVisibilityStatesOnlyLabel],
-            checkedStates,
-            appearanceStates
-        ] as const).filter(removeUnusuedDisabledInteractions)
+    createMatrixInteractionsfromStates(
+        component,
+        {
+            hover: interactionStatesHover,
+            hoverActive: interactionStates,
+            active: interactionStates,
+            focus: interactionStates,
+        }
     )
 );
 
diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index 32df8fe12c..739079fec8 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -2,6 +2,7 @@ import { html, repeat, ViewTemplate } from '@microsoft/fast-element';
 import { fastParameters, renderViewTemplate } from './storybook';
 import { themeProviderTag } from '../../theme-provider';
 import { type BackgroundState, backgroundStates } from './states';
+import { bodyFont, bodyFontColor } from '../../theme-provider/design-tokens';
 
 export const sharedMatrixParameters = () => ({
     ...fastParameters(),
@@ -51,7 +52,7 @@ export function cartesianProduct<T extends readonly unknown[]>(
 /**
  * Takes a template rendered with an array of states.
  */
-export function createMatrixFromStates<T extends readonly unknown[]>(
+function createMatrixFromStates<T extends readonly unknown[]>(
     component: (...states: T) => ViewTemplate,
     states: T[]
 ): ViewTemplate {
@@ -69,12 +70,9 @@ export function createMatrixFromStates<T extends readonly unknown[]>(
  */
 export function createMatrix<T extends readonly unknown[]>(
     component: (...states: T) => ViewTemplate,
-    dimensions?: MakeTupleEntriesArrays<T>,
-    filter?: (...states: T) => boolean
+    dimensions?: MakeTupleEntriesArrays<T>
 ): ViewTemplate {
-    const states = cartesianProduct(dimensions).filter(
-        state => !filter || filter(...state)
-    );
+    const states = cartesianProduct(dimensions);
     return createMatrixFromStates(component, states);
 }
 
@@ -85,18 +83,17 @@ export const createMatrixThemeStory = <TSource>(
     viewTemplate: ViewTemplate<TSource>
 ): ((source: TSource) => Element) => {
     return (source: TSource): Element => {
-        const component = ({
-            theme,
-            value
-        }: BackgroundState): ViewTemplate => html`
-            <${themeProviderTag}
-                theme="${theme}">
-                <div style="background-color: ${value}; padding:20px;">
-                    ${viewTemplate}
-                </div>
-            </${themeProviderTag}>
-        `;
-        const matrixTemplate = createMatrix(component, [backgroundStates]);
+        const matrixTemplate = createMatrix(
+            ({ theme, value }: BackgroundState) => html`
+                <${themeProviderTag}
+                    theme="${theme}">
+                    <div style="background-color: ${value}; padding:20px;">
+                        ${viewTemplate}
+                    </div>
+                </${themeProviderTag}>
+            `,
+            [backgroundStates]
+        );
         const wrappedMatrixTemplate = html<TSource>`
             <div class="code-hide-top-container">${matrixTemplate}</div>
         `;
@@ -105,3 +102,45 @@ export const createMatrixThemeStory = <TSource>(
         return content;
     };
 };
+
+export function createMatrixInteractionsfromStates<
+    THover extends readonly unknown[],
+    THoverActive extends readonly unknown[],
+    TActive extends readonly unknown[],
+    TFocus extends readonly unknown[]
+>(
+    component: (
+        ...states: THover | TActive | THoverActive | TFocus
+    ) => ViewTemplate,
+    states: {
+        hover: THover[],
+        hoverActive: THoverActive[],
+        active: TActive[],
+        focus: TFocus[]
+    }
+): ViewTemplate {
+    // prettier-ignore
+    return html`
+    <div style="
+        font: var(${bodyFont.cssCustomProperty});
+        color: var(${bodyFontColor.cssCustomProperty});
+    ">
+        <div class="pseudo-hover-all">
+            <p>Hover</p>
+            ${createMatrixFromStates(component, states.hover)}
+        </div>
+        <div class="pseudo-hover-all pseudo-active-all">
+            <p>Hover and active</p>
+            ${createMatrixFromStates(component, states.hoverActive)}
+        </div>
+        <div class="pseudo-active-all">
+            <p>Active</p>
+            ${createMatrixFromStates(component, states.active)}
+        </div>
+        <div class="pseudo-focus-visible-all pseudo-focus-within-all">
+            <p>Focus</p>
+            ${createMatrixFromStates(component, states.focus)}
+        </div>
+    </div>
+`;
+}
diff --git a/packages/nimble-components/src/utilities/tests/states.ts b/packages/nimble-components/src/utilities/tests/states.ts
index 001de31489..1f8bf6877b 100644
--- a/packages/nimble-components/src/utilities/tests/states.ts
+++ b/packages/nimble-components/src/utilities/tests/states.ts
@@ -1,4 +1,3 @@
-import { html, type ViewTemplate } from '@microsoft/fast-element';
 import { Theme } from '../../theme-provider/types';
 
 export const backgroundStates = [
@@ -26,7 +25,7 @@ export const disabledStates = [
     ['Disabled', true]
 ] as const;
 export type DisabledState = (typeof disabledStates)[number];
-const disabledStateDisabled = disabledStates[1];
+export const disabledStateIsEnabled = disabledStates[0];
 
 export const errorStates = [
     ['', false, ''],
@@ -34,6 +33,9 @@ export const errorStates = [
     ['Error No Message', true, '']
 ] as const;
 export type ErrorState = (typeof errorStates)[number];
+export const errorStatesNoError = errorStates[0];
+export const errorStatesErrorWithMessage = errorStates[1];
+export const errorStatesErrorNoMessage = errorStates[2];
 
 export const readOnlyStates = [
     ['', false],
@@ -43,54 +45,3 @@ export type ReadOnlyState = (typeof readOnlyStates)[number];
 
 export const iconVisibleStates = [false, true] as const;
 export type IconVisibleState = (typeof iconVisibleStates)[number];
-
-export const nonInteractionStates = [['', '']] as const;
-export const interactionStates = [
-    // Using pseudo-*-all will turn on the effect for any nested custom elements (e.g. inc/dec buttons in number field).
-    // It works around the limitation that selectors for shadow elements can only see the immediate host's classes.
-    ['Hovered', 'hover pseudo-hover-all'],
-    ['Hovered Active', 'hover active pseudo-hover-all pseudo-active-all'],
-    ['Active', 'active pseudo-active-all'],
-    [
-        'Focused',
-        'focus-visible focus-within pseudo-focus-visible-all pseudo-focus-within-all'
-    ]
-] as const;
-export type InteractionState =
-    | (typeof interactionStates)[number]
-    | (typeof nonInteractionStates)[number];
-const interactionStateHovered = interactionStates[0];
-
-export function interactionsWrapper<T extends readonly unknown[]>(
-    component: (...states: T) => ViewTemplate
-): (interactionState: InteractionState, ...states: T) => ViewTemplate {
-    return (
-        [interactionName, interaction]: InteractionState,
-        ...original
-    ) => html`
-        <div class="${interaction}">
-            <span>${interactionName}</span>
-            ${component(...original)}
-        </div>
-    `;
-}
-
-export function disabledInteractionsFilter(
-    interactionState: InteractionState,
-    disabledState: DisabledState
-): boolean {
-    return disabledState[0] !== 'Disabled' || interactionState[0] === 'Hovered';
-}
-
-export function removeUnusuedDisabledInteractions<
-    U extends unknown[],
-    T extends [InteractionState, DisabledState, ...U]
->([interactionState, disabledState]: T): boolean {
-    if (
-        disabledState === disabledStateDisabled
-        && interactionState !== interactionStateHovered
-    ) {
-        return false;
-    }
-    return true;
-}

From 03c7464e047564691768b736af625dfbf0bd11ed Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:46:20 -0500
Subject: [PATCH 18/25] Clean-up merge

---
 .../tests/anchor-button-matrix.stories.ts     |  3 +-
 .../src/button/tests/button-matrix.stories.ts |  3 +-
 .../tests/menu-button-matrix.stories.ts       | 37 +++++++++----------
 .../src/patterns/button/tests/states.ts       |  1 +
 .../tests/toggle-button-matrix.stories.ts     | 15 ++++----
 5 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
index c9ce80bf79..3a8a2ed8f6 100644
--- a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
@@ -24,7 +24,8 @@ import {
     type AppearanceVariantState,
     type PartVisibilityState,
     appearanceVariantStates,
-    partVisibilityStates
+    partVisibilityStates,
+    partVisibilityStatesOnlyLabel
 } from '../../patterns/button/tests/states';
 
 const metadata: Meta = {
diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
index 6d954040a1..744970500b 100644
--- a/packages/nimble-components/src/button/tests/button-matrix.stories.ts
+++ b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
@@ -25,7 +25,8 @@ import {
     type AppearanceVariantState,
     type PartVisibilityState,
     appearanceVariantStates,
-    partVisibilityStates
+    partVisibilityStates,
+    partVisibilityStatesOnlyLabel
 } from '../../patterns/button/tests/states';
 
 const metadata: Meta = {
diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
index 8904eab192..a07ebbfd51 100644
--- a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
+++ b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -17,6 +17,14 @@ import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { iconArrowExpanderDownTag } from '../../icons/arrow-expander-down';
 import { iconKeyTag } from '../../icons/key';
 import { menuButtonTag } from '..';
+import {
+    appearanceStates,
+    type AppearanceState,
+    type AppearanceVariantState,
+    type PartVisibilityState,
+    appearanceVariantStates,
+    partVisibilityStates
+} from '../../patterns/button/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Menu Button',
@@ -27,15 +35,6 @@ const metadata: Meta = {
 
 export default metadata;
 
-/* array of iconVisible, labelVisible, endIconVisible */
-const partVisibilityStates = [
-    [true, true, false],
-    [true, false, false],
-    [false, true, false],
-    [true, true, true],
-    [false, true, true]
-] as const;
-type PartVisibilityState = (typeof partVisibilityStates)[number];
 const partVisibilityStatesOnlyLabel = partVisibilityStates[2];
 
 const openStates = [
@@ -44,26 +43,23 @@ const openStates = [
 ] as const;
 type OpenState = (typeof openStates)[number];
 
-const appearanceStates = Object.entries(ButtonAppearance).map(
-    ([key, value]) => [pascalCase(key), value]
-);
-type AppearanceState = (typeof appearanceStates)[number];
-
 // prettier-ignore
 const component = (
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
     [disabledName, disabled]: DisabledState,
     [openName, open]: OpenState,
-    [appearanceName, appearance]: AppearanceState
+    [appearanceName, appearance]: AppearanceState,
+    [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
 ): ViewTemplate => html`
     <${menuButtonTag}
         appearance="${() => appearance}"
+        appearance-variant="${() => appearanceVariant}"
         ?open="${() => open}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${openName} ${appearanceName!} Menu Button ${disabledName}`}
+            ${() => `${openName} ${appearanceVariantName} ${appearanceName} Menu Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
     </${menuButtonTag}>
 `;
@@ -75,7 +71,8 @@ export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
             partVisibilityStates,
             disabledStates,
             openStates,
-            appearanceStates
+            appearanceStates,
+            appearanceVariantStates
         ]
     )
 );
@@ -84,14 +81,16 @@ const interactionStatesHover = cartesianProduct([
     [partVisibilityStatesOnlyLabel],
     disabledStates,
     openStates,
-    appearanceStates
+    appearanceStates,
+    appearanceVariantStates
 ] as const);
 
 const interactionStates = cartesianProduct([
     [partVisibilityStatesOnlyLabel],
     [disabledStateIsEnabled],
     openStates,
-    appearanceStates
+    appearanceStates,
+    appearanceVariantStates
 ] as const);
 
 export const menuButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
diff --git a/packages/nimble-components/src/patterns/button/tests/states.ts b/packages/nimble-components/src/patterns/button/tests/states.ts
index 7ea753741f..bbc0eb425b 100644
--- a/packages/nimble-components/src/patterns/button/tests/states.ts
+++ b/packages/nimble-components/src/patterns/button/tests/states.ts
@@ -9,6 +9,7 @@ export const partVisibilityStates = [
     [false, true, true]
 ] as const;
 export type PartVisibilityState = (typeof partVisibilityStates)[number];
+export const partVisibilityStatesOnlyLabel = partVisibilityStates[2];
 
 export const appearanceStates = [
     ['Outline', ButtonAppearance.outline],
diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
index 07cbbaccbd..4970331cfd 100644
--- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
+++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -24,7 +24,8 @@ import {
     type AppearanceVariantState,
     type PartVisibilityState,
     appearanceVariantStates,
-    partVisibilityStates
+    partVisibilityStates,
+    partVisibilityStatesOnlyLabel
 } from '../../patterns/button/tests/states';
 
 const metadata: Meta = {
@@ -44,7 +45,6 @@ type CheckedState = (typeof checkedStates)[number];
 
 // prettier-ignore
 const component = (
-    [disabledName, disabled]: DisabledState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
     [checkedName, checked]: CheckedState,
     [disabledName, disabled]: DisabledState,
@@ -66,7 +66,6 @@ const component = (
 
 export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
-        disabledStates,
         partVisibilityStates,
         checkedStates,
         disabledStates,
@@ -76,17 +75,19 @@ export const toggleButtonThemeMatrix: StoryFn = createMatrixThemeStory(
 );
 
 const interactionStatesHover = cartesianProduct([
-    disabledStates,
     [partVisibilityStatesOnlyLabel],
     checkedStates,
-    appearanceStates
+    disabledStates,
+    appearanceStates,
+    appearanceVariantStates
 ] as const);
 
 const interactionStates = cartesianProduct([
-    [disabledStateIsEnabled],
     [partVisibilityStatesOnlyLabel],
     checkedStates,
-    appearanceStates
+    [disabledStateIsEnabled],
+    appearanceStates,
+    appearanceVariantStates
 ] as const);
 
 export const toggleButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(

From 2c362eda925bd929c6cd00ab1e7aa8cfb728f5cd Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:59:16 -0500
Subject: [PATCH 19/25] lint

---
 .../tests/anchor-button-matrix.stories.ts     | 15 ++++-----
 .../src/anchor/tests/anchor-matrix.stories.ts | 21 ++++++------
 .../src/button/tests/button-matrix.stories.ts | 17 ++++------
 .../tests/menu-button-matrix.stories.ts       | 32 ++++++++-----------
 .../tests/number-field-matrix.stories.ts      | 15 ++++-----
 .../tests/toggle-button-matrix.stories.ts     | 17 ++++------
 6 files changed, 50 insertions(+), 67 deletions(-)

diff --git a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
index 3a8a2ed8f6..c1fb80c3aa 100644
--- a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
@@ -81,15 +81,12 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const anchorButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(
-        component,
-        {
-            hover: interactionStatesHover,
-            hoverActive: interactionStates,
-            active: interactionStates,
-            focus: interactionStates,
-        }
-    )
+    createMatrixInteractionsfromStates(component, {
+        hover: interactionStatesHover,
+        hoverActive: interactionStates,
+        active: interactionStates,
+        focus: interactionStates
+    })
 );
 
 export const hiddenAnchorButton: StoryFn = createStory(
diff --git a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
index 2dde09d761..ba57618534 100644
--- a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
@@ -14,7 +14,11 @@ import { textCustomizationWrapper } from '../../utilities/tests/text-customizati
 import { AnchorAppearance } from '../types';
 import { bodyFont } from '../../theme-provider/design-tokens';
 import { anchorTag } from '..';
-import { disabledStates, type DisabledState, disabledStateIsEnabled } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    type DisabledState,
+    disabledStateIsEnabled
+} from '../../utilities/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Anchor',
@@ -71,15 +75,12 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const anchorInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(
-        component,
-        {
-            hover: interactionStatesHover,
-            hoverActive: interactionStates,
-            active: interactionStates,
-            focus: interactionStates,
-        }
-    )
+    createMatrixInteractionsfromStates(component, {
+        hover: interactionStatesHover,
+        hoverActive: interactionStates,
+        active: interactionStates,
+        focus: interactionStates
+    })
 );
 
 export const hiddenAnchor: StoryFn = createStory(
diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
index 744970500b..a7bda3f4b8 100644
--- a/packages/nimble-components/src/button/tests/button-matrix.stories.ts
+++ b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
@@ -10,7 +10,7 @@ import {
 import {
     disabledStates,
     DisabledState,
-    disabledStateIsEnabled,
+    disabledStateIsEnabled
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -81,15 +81,12 @@ const interactionStatesHover = cartesianProduct([
 ] as const);
 
 export const buttonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(
-        component,
-        {
-            hover: interactionStatesHover,
-            hoverActive: interactionStates,
-            active: interactionStates,
-            focus: interactionStates,
-        }
-    )
+    createMatrixInteractionsfromStates(component, {
+        hover: interactionStatesHover,
+        hoverActive: interactionStates,
+        active: interactionStates,
+        focus: interactionStates
+    })
 );
 
 export const hiddenButton: StoryFn = createStory(
diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
index a07ebbfd51..be48debb96 100644
--- a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
+++ b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -65,16 +65,13 @@ const component = (
 `;
 
 export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(
-        component,
-        [
-            partVisibilityStates,
-            disabledStates,
-            openStates,
-            appearanceStates,
-            appearanceVariantStates
-        ]
-    )
+    createMatrix(component, [
+        partVisibilityStates,
+        disabledStates,
+        openStates,
+        appearanceStates,
+        appearanceVariantStates
+    ])
 );
 
 const interactionStatesHover = cartesianProduct([
@@ -94,15 +91,12 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const menuButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(
-        component,
-        {
-            hover: interactionStatesHover,
-            hoverActive: interactionStates,
-            active: interactionStates,
-            focus: interactionStates,
-        }
-    )
+    createMatrixInteractionsfromStates(component, {
+        hover: interactionStatesHover,
+        hoverActive: interactionStates,
+        active: interactionStates,
+        focus: interactionStates
+    })
 );
 
 export const hiddenMenuButton: StoryFn = createStory(
diff --git a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
index 65a80ac18a..12ed42a44e 100644
--- a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
@@ -99,15 +99,12 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const numberFieldInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(
-        component,
-        {
-            hover: interactionStatesHover,
-            hoverActive: interactionStates,
-            active: interactionStates,
-            focus: interactionStates,
-        }
-    )
+    createMatrixInteractionsfromStates(component, {
+        hover: interactionStatesHover,
+        hoverActive: interactionStates,
+        active: interactionStates,
+        focus: interactionStates
+    })
 );
 
 export const hiddenNumberField: StoryFn = createStory(
diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
index 4970331cfd..400aad35cc 100644
--- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
+++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -10,7 +10,7 @@ import {
 import {
     disabledStates,
     DisabledState,
-    disabledStateIsEnabled,
+    disabledStateIsEnabled
 } from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -91,15 +91,12 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const toggleButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(
-        component,
-        {
-            hover: interactionStatesHover,
-            hoverActive: interactionStates,
-            active: interactionStates,
-            focus: interactionStates,
-        }
-    )
+    createMatrixInteractionsfromStates(component, {
+        hover: interactionStatesHover,
+        hoverActive: interactionStates,
+        active: interactionStates,
+        focus: interactionStates
+    })
 );
 
 export const hiddenButton: StoryFn = createStory(

From 5ef30972e20439a47b34c4dcedeb0b0812297a26 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Tue, 26 Mar 2024 17:12:38 -0500
Subject: [PATCH 20/25] Make open menu-button first dimension

---
 .../src/menu-button/tests/menu-button-matrix.stories.ts   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
index be48debb96..32034463b0 100644
--- a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
+++ b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -45,9 +45,9 @@ type OpenState = (typeof openStates)[number];
 
 // prettier-ignore
 const component = (
+    [openName, open]: OpenState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
     [disabledName, disabled]: DisabledState,
-    [openName, open]: OpenState,
     [appearanceName, appearance]: AppearanceState,
     [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
 ): ViewTemplate => html`
@@ -66,26 +66,26 @@ const component = (
 
 export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        openStates,
         partVisibilityStates,
         disabledStates,
-        openStates,
         appearanceStates,
         appearanceVariantStates
     ])
 );
 
 const interactionStatesHover = cartesianProduct([
+    openStates,
     [partVisibilityStatesOnlyLabel],
     disabledStates,
-    openStates,
     appearanceStates,
     appearanceVariantStates
 ] as const);
 
 const interactionStates = cartesianProduct([
+    openStates,
     [partVisibilityStatesOnlyLabel],
     [disabledStateIsEnabled],
-    openStates,
     appearanceStates,
     appearanceVariantStates
 ] as const);

From 8c551fdab8516d95981bd24bbe162bd3e090f5c7 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Tue, 26 Mar 2024 17:20:40 -0500
Subject: [PATCH 21/25] Use shared  partVisibility reference

---
 .../src/menu-button/tests/menu-button-matrix.stories.ts      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
index 32034463b0..88e2a8ee73 100644
--- a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
+++ b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -23,7 +23,8 @@ import {
     type AppearanceVariantState,
     type PartVisibilityState,
     appearanceVariantStates,
-    partVisibilityStates
+    partVisibilityStates,
+    partVisibilityStatesOnlyLabel
 } from '../../patterns/button/tests/states';
 
 const metadata: Meta = {
@@ -35,8 +36,6 @@ const metadata: Meta = {
 
 export default metadata;
 
-const partVisibilityStatesOnlyLabel = partVisibilityStates[2];
-
 const openStates = [
     ['', false],
     ['Open', true]

From 3d8ec4cade1257c0835879fb7729739b46356126 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 27 Mar 2024 14:10:29 -0500
Subject: [PATCH 22/25] lockfile update

---
 package-lock.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package-lock.json b/package-lock.json
index 45d39f34fa..4a3a423cf9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33310,6 +33310,7 @@
         "rollup-plugin-sourcemaps": "^0.6.3",
         "source-map-loader": "^5.0.0",
         "storybook": "^8.0.4",
+        "storybook-addon-pseudo-states": "^2.2.1",
         "terser-webpack-plugin": "^5.3.10",
         "ts-loader": "^9.2.5",
         "typescript": "~4.9.5",

From 401dbc20b5afa831f3ba1e1a41ba2906d0380cd2 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 27 Mar 2024 14:32:38 -0500
Subject: [PATCH 23/25] Remove unnecessary whitespace change

---
 .../src/number-field/tests/number-field-matrix.stories.ts       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
index 12ed42a44e..239020fdde 100644
--- a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
@@ -67,7 +67,7 @@ const component = (
         error-text="${() => errorText}"
         ?error-visible="${() => errorVisible}"
     >
-    ${() => errorName} ${() => appearanceName} ${() => valueName}
+        ${() => errorName} ${() => appearanceName} ${() => valueName}
         ${() => hideStepName} ${() => disabledName}
     </${numberFieldTag}>
 `;

From 3429e9c9821ae3f633d65cde11e3a0d8336ae79d Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 27 Mar 2024 14:42:32 -0500
Subject: [PATCH 24/25] Minor changes

---
 .../nimble-components/src/utilities/tests/matrix.ts    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index 739079fec8..a91099a927 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -25,6 +25,7 @@ export const sharedMatrixParameters = () => ({
 }) as const;
 
 type MakeTupleEntriesArrays<T> = { [K in keyof T]: readonly T[K][] };
+
 /**
  * Calculates the cartesian product of an array of sets.
  */
@@ -50,23 +51,22 @@ export function cartesianProduct<T extends readonly unknown[]>(
 }
 
 /**
- * Takes a template rendered with an array of states.
+ * Passes each of the given state combinations into a template function and returns the combined output.
  */
 function createMatrixFromStates<T extends readonly unknown[]>(
     component: (...states: T) => ViewTemplate,
     states: T[]
 ): ViewTemplate {
-    const matrix = states.map(state => component(...state));
     // prettier-ignore
     return html`
-    ${repeat(() => matrix, html`
-        ${(x: ViewTemplate): ViewTemplate => x}
+    ${repeat(() => states, html`
+        ${(x: T): ViewTemplate => component(...x)}
     `)}
 `;
 }
 
 /**
- * Takes a template rendered with the cartesian product the provided states.
+ * Creates a template that renders all combinations of states in the given dimensions.
  */
 export function createMatrix<T extends readonly unknown[]>(
     component: (...states: T) => ViewTemplate,

From e277a9ff119c7e3e41901a98e8baaa5e1ffe9b92 Mon Sep 17 00:00:00 2001
From: Mert Akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 27 Mar 2024 18:33:59 -0500
Subject: [PATCH 25/25] Fix capitalization error in
 createMatrixInteractionsfromStates

---
 .../src/anchor-button/tests/anchor-button-matrix.stories.ts   | 4 ++--
 .../src/anchor/tests/anchor-matrix.stories.ts                 | 4 ++--
 .../src/button/tests/button-matrix.stories.ts                 | 4 ++--
 .../src/menu-button/tests/menu-button-matrix.stories.ts       | 4 ++--
 .../src/number-field/tests/number-field-matrix.stories.ts     | 4 ++--
 .../src/toggle-button/tests/toggle-button-matrix.stories.ts   | 4 ++--
 packages/nimble-components/src/utilities/tests/matrix.ts      | 2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
index c1fb80c3aa..e2cdb65459 100644
--- a/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts
@@ -5,7 +5,7 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory,
     cartesianProduct,
-    createMatrixInteractionsfromStates
+    createMatrixInteractionsFromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
@@ -81,7 +81,7 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const anchorButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(component, {
+    createMatrixInteractionsFromStates(component, {
         hover: interactionStatesHover,
         hoverActive: interactionStates,
         active: interactionStates,
diff --git a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
index ba57618534..8d05a24f04 100644
--- a/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
+++ b/packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts
@@ -6,7 +6,7 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory,
     cartesianProduct,
-    createMatrixInteractionsfromStates
+    createMatrixInteractionsFromStates
 } from '../../utilities/tests/matrix';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
@@ -75,7 +75,7 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const anchorInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(component, {
+    createMatrixInteractionsFromStates(component, {
         hover: interactionStatesHover,
         hoverActive: interactionStates,
         active: interactionStates,
diff --git a/packages/nimble-components/src/button/tests/button-matrix.stories.ts b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
index a7bda3f4b8..2b0231ede1 100644
--- a/packages/nimble-components/src/button/tests/button-matrix.stories.ts
+++ b/packages/nimble-components/src/button/tests/button-matrix.stories.ts
@@ -5,7 +5,7 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory,
     cartesianProduct,
-    createMatrixInteractionsfromStates
+    createMatrixInteractionsFromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
@@ -81,7 +81,7 @@ const interactionStatesHover = cartesianProduct([
 ] as const);
 
 export const buttonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(component, {
+    createMatrixInteractionsFromStates(component, {
         hover: interactionStatesHover,
         hoverActive: interactionStates,
         active: interactionStates,
diff --git a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
index 88e2a8ee73..65a5598338 100644
--- a/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
+++ b/packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts
@@ -5,7 +5,7 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory,
     cartesianProduct,
-    createMatrixInteractionsfromStates
+    createMatrixInteractionsFromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
@@ -90,7 +90,7 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const menuButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(component, {
+    createMatrixInteractionsFromStates(component, {
         hover: interactionStatesHover,
         hoverActive: interactionStates,
         active: interactionStates,
diff --git a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
index 239020fdde..56ea4cbcc2 100644
--- a/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
+++ b/packages/nimble-components/src/number-field/tests/number-field-matrix.stories.ts
@@ -7,7 +7,7 @@ import {
     createMatrix,
     sharedMatrixParameters,
     cartesianProduct,
-    createMatrixInteractionsfromStates
+    createMatrixInteractionsFromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
@@ -99,7 +99,7 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const numberFieldInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(component, {
+    createMatrixInteractionsFromStates(component, {
         hover: interactionStatesHover,
         hoverActive: interactionStates,
         active: interactionStates,
diff --git a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
index 400aad35cc..1be9058b29 100644
--- a/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
+++ b/packages/nimble-components/src/toggle-button/tests/toggle-button-matrix.stories.ts
@@ -5,7 +5,7 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory,
     cartesianProduct,
-    createMatrixInteractionsfromStates
+    createMatrixInteractionsFromStates
 } from '../../utilities/tests/matrix';
 import {
     disabledStates,
@@ -91,7 +91,7 @@ const interactionStates = cartesianProduct([
 ] as const);
 
 export const toggleButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrixInteractionsfromStates(component, {
+    createMatrixInteractionsFromStates(component, {
         hover: interactionStatesHover,
         hoverActive: interactionStates,
         active: interactionStates,
diff --git a/packages/nimble-components/src/utilities/tests/matrix.ts b/packages/nimble-components/src/utilities/tests/matrix.ts
index a91099a927..1e641a4592 100644
--- a/packages/nimble-components/src/utilities/tests/matrix.ts
+++ b/packages/nimble-components/src/utilities/tests/matrix.ts
@@ -103,7 +103,7 @@ export const createMatrixThemeStory = <TSource>(
     };
 };
 
-export function createMatrixInteractionsfromStates<
+export function createMatrixInteractionsFromStates<
     THover extends readonly unknown[],
     THoverActive extends readonly unknown[],
     TActive extends readonly unknown[],