diff --git a/change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json b/change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json
new file mode 100644
index 0000000000..13752ce1b1
--- /dev/null
+++ b/change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Switch to custom display helper",
+  "packageName": "@ni/nimble-components",
+  "email": "rajsite@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@ni-spright-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json b/change/@ni-spright-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json
new file mode 100644
index 0000000000..6ef4f0c5dc
--- /dev/null
+++ b/change/@ni-spright-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Switch to custom display helper",
+  "packageName": "@ni/spright-components",
+  "email": "rajsite@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/eslint-config-nimble/typescript.js b/packages/eslint-config-nimble/typescript.js
index 8141b53c64..d02cc0cbe8 100644
--- a/packages/eslint-config-nimble/typescript.js
+++ b/packages/eslint-config-nimble/typescript.js
@@ -5,6 +5,12 @@ const restrictedImportsPaths = () => [
         message:
             'Please use focusVisible from src/utilities/style/focus instead.'
     },
+    {
+        name: '@microsoft/fast-foundation',
+        importNames: ['display'],
+        message:
+            'Please use display from src/utilities/style/display instead.'
+    },
     {
         name: '@microsoft/fast-components',
         message:
diff --git a/packages/nimble-components/docs/css-guidelines.md b/packages/nimble-components/docs/css-guidelines.md
index 2d0b3d5e9f..72487e53d4 100644
--- a/packages/nimble-components/docs/css-guidelines.md
+++ b/packages/nimble-components/docs/css-guidelines.md
@@ -198,13 +198,13 @@ When styling the invalid state of a form component, it may seem natural to use `
 
 Instead of styling based on `:invalid`, style the `[error-visible]` attribute. Then the client can create a binding to apply the `invalid` class based on the associated `FormControl`'s status properties, like `invalid`, `dirty`, and `touched`.
 
-## Use FAST's display utility for styling host element
+## Use the display utility for styling host element
 
-For consistent styling, use FAST's `display` utility when setting a `display` style on the host element.
+For consistent styling, use the `display` utility when setting a `display` style on the host element.
 
 ```ts
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 
 export const styles = css`
     ${display('flex')}
diff --git a/packages/nimble-components/src/anchor-menu-item/styles.ts b/packages/nimble-components/src/anchor-menu-item/styles.ts
index 0e8f5f0487..159d271958 100644
--- a/packages/nimble-components/src/anchor-menu-item/styles.ts
+++ b/packages/nimble-components/src/anchor-menu-item/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 
 import {
     bodyDisabledFontColor,
diff --git a/packages/nimble-components/src/anchor-tab/styles.ts b/packages/nimble-components/src/anchor-tab/styles.ts
index 979e65b672..4ec2170d7d 100644
--- a/packages/nimble-components/src/anchor-tab/styles.ts
+++ b/packages/nimble-components/src/anchor-tab/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 import {
     bodyDisabledFontColor,
diff --git a/packages/nimble-components/src/anchor-tabs/styles.ts b/packages/nimble-components/src/anchor-tabs/styles.ts
index 90c324115c..b7e6ec5432 100644
--- a/packages/nimble-components/src/anchor-tabs/styles.ts
+++ b/packages/nimble-components/src/anchor-tabs/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 
 export const styles = css`
     ${display('grid')}
diff --git a/packages/nimble-components/src/anchor-tree-item/styles.ts b/packages/nimble-components/src/anchor-tree-item/styles.ts
index f1b66ff96c..248179d541 100644
--- a/packages/nimble-components/src/anchor-tree-item/styles.ts
+++ b/packages/nimble-components/src/anchor-tree-item/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     bodyFontFamily,
     bodyFontWeight,
diff --git a/packages/nimble-components/src/anchor/styles.ts b/packages/nimble-components/src/anchor/styles.ts
index db4c6f3df0..bf85674dda 100644
--- a/packages/nimble-components/src/anchor/styles.ts
+++ b/packages/nimble-components/src/anchor/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 import {
     linkActiveFontColor,
diff --git a/packages/nimble-components/src/anchored-region/styles.ts b/packages/nimble-components/src/anchored-region/styles.ts
index 13e03f8203..7d14ce6ccc 100644
--- a/packages/nimble-components/src/anchored-region/styles.ts
+++ b/packages/nimble-components/src/anchored-region/styles.ts
@@ -1,15 +1,18 @@
 import { css } from '@microsoft/fast-element';
 import { ZIndexLevels } from '../utilities/style/types';
+import { display } from '../utilities/style/display';
 
 export const styles = css`
+    ${display('block')}
+
     :host {
-        /* Avoid using the 'display' helper to customize hidden behavior */
-        display: block;
         contain: layout;
         z-index: ${ZIndexLevels.zIndex1000};
     }
 
+    ${'' /* Override 'display' helper hidden behavior */}
     :host([hidden]) {
+        display: block;
         visibility: hidden;
     }
 `;
diff --git a/packages/nimble-components/src/banner/styles.ts b/packages/nimble-components/src/banner/styles.ts
index 7f9917c510..8a33c0352f 100644
--- a/packages/nimble-components/src/banner/styles.ts
+++ b/packages/nimble-components/src/banner/styles.ts
@@ -1,5 +1,4 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import {
     BannerFail100DarkUi,
     Black75,
@@ -10,6 +9,7 @@ import {
     Warning100LightUi,
     White
 } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 
 import {
     actionRgbPartialColor,
diff --git a/packages/nimble-components/src/breadcrumb-item/styles.ts b/packages/nimble-components/src/breadcrumb-item/styles.ts
index e59a1ffb4e..9ade8c8c51 100644
--- a/packages/nimble-components/src/breadcrumb-item/styles.ts
+++ b/packages/nimble-components/src/breadcrumb-item/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     bodyFontColor,
     borderHoverColor,
diff --git a/packages/nimble-components/src/breadcrumb/styles.ts b/packages/nimble-components/src/breadcrumb/styles.ts
index b96280ff39..6bb0809945 100644
--- a/packages/nimble-components/src/breadcrumb/styles.ts
+++ b/packages/nimble-components/src/breadcrumb/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     bodyEmphasizedFont,
     linkActiveFontColor,
diff --git a/packages/nimble-components/src/card-button/styles.ts b/packages/nimble-components/src/card-button/styles.ts
index ea689611c4..8763364a80 100644
--- a/packages/nimble-components/src/card-button/styles.ts
+++ b/packages/nimble-components/src/card-button/styles.ts
@@ -5,7 +5,7 @@ import {
     Black91,
     White
 } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 
 import {
diff --git a/packages/nimble-components/src/card/styles.ts b/packages/nimble-components/src/card/styles.ts
index f9528125df..cdfe8afecf 100644
--- a/packages/nimble-components/src/card/styles.ts
+++ b/packages/nimble-components/src/card/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     bodyEmphasizedFontWeight,
     bodyFont,
diff --git a/packages/nimble-components/src/checkbox/styles.ts b/packages/nimble-components/src/checkbox/styles.ts
index da0f731dab..8728a59779 100644
--- a/packages/nimble-components/src/checkbox/styles.ts
+++ b/packages/nimble-components/src/checkbox/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 
 import {
diff --git a/packages/nimble-components/src/dialog/styles.ts b/packages/nimble-components/src/dialog/styles.ts
index 5d0b1c3c1c..59d55031b5 100644
--- a/packages/nimble-components/src/dialog/styles.ts
+++ b/packages/nimble-components/src/dialog/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 
 import {
     applicationBackgroundColor,
diff --git a/packages/nimble-components/src/drawer/styles.ts b/packages/nimble-components/src/drawer/styles.ts
index 053ed86453..d6c94251f6 100644
--- a/packages/nimble-components/src/drawer/styles.ts
+++ b/packages/nimble-components/src/drawer/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     applicationBackgroundColor,
     bodyFont,
diff --git a/packages/nimble-components/src/icon-base/index.ts b/packages/nimble-components/src/icon-base/index.ts
index 2c7a85545f..c5e6a814a7 100644
--- a/packages/nimble-components/src/icon-base/index.ts
+++ b/packages/nimble-components/src/icon-base/index.ts
@@ -28,8 +28,7 @@ export const registerIcon = (baseName: string, iconClass: IconClass): void => {
     const composedIcon = iconClass.compose({
         baseName,
         template,
-        styles,
-        baseClass: iconClass
+        styles
     });
 
     DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
diff --git a/packages/nimble-components/src/icon-base/styles.ts b/packages/nimble-components/src/icon-base/styles.ts
index f1e8615b1d..efb5d2b79e 100644
--- a/packages/nimble-components/src/icon-base/styles.ts
+++ b/packages/nimble-components/src/icon-base/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     iconSize,
     warningColor,
diff --git a/packages/nimble-components/src/label-provider/base/styles.ts b/packages/nimble-components/src/label-provider/base/styles.ts
new file mode 100644
index 0000000000..4728207ab5
--- /dev/null
+++ b/packages/nimble-components/src/label-provider/base/styles.ts
@@ -0,0 +1,6 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
+
+export const styles = css`
+    ${display('none')}
+`;
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts
index b0a872a5e7..de6e12232e 100644
--- a/packages/nimble-components/src/label-provider/core/index.ts
+++ b/packages/nimble-components/src/label-provider/core/index.ts
@@ -11,6 +11,7 @@ import {
     filterSearchLabel,
     filterNoResultsLabel
 } from './label-tokens';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -63,7 +64,8 @@ export class LabelProviderCore
 }
 
 const nimbleLabelProviderCore = LabelProviderCore.compose({
-    baseName: 'label-provider-core'
+    baseName: 'label-provider-core',
+    styles
 });
 
 DesignSystem.getOrCreate()
diff --git a/packages/nimble-components/src/label-provider/rich-text/index.ts b/packages/nimble-components/src/label-provider/rich-text/index.ts
index e4dda852c4..fd77afc2c7 100644
--- a/packages/nimble-components/src/label-provider/rich-text/index.ts
+++ b/packages/nimble-components/src/label-provider/rich-text/index.ts
@@ -7,6 +7,7 @@ import {
     richTextToggleBulletedListLabel,
     richTextToggleNumberedListLabel
 } from './label-tokens';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -43,7 +44,8 @@ export class LabelProviderRichText
 }
 
 const nimbleLabelProviderRichText = LabelProviderRichText.compose({
-    baseName: 'label-provider-rich-text'
+    baseName: 'label-provider-rich-text',
+    styles
 });
 
 DesignSystem.getOrCreate()
diff --git a/packages/nimble-components/src/label-provider/table/index.ts b/packages/nimble-components/src/label-provider/table/index.ts
index 20668452e6..98baf903fe 100644
--- a/packages/nimble-components/src/label-provider/table/index.ts
+++ b/packages/nimble-components/src/label-provider/table/index.ts
@@ -19,6 +19,7 @@ import {
     tableGroupRowPlaceholderEmptyLabel,
     tableGroupRowPlaceholderNoValueLabel
 } from './label-tokens';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -103,7 +104,8 @@ export class LabelProviderTable
 }
 
 const nimbleLabelProviderTable = LabelProviderTable.compose({
-    baseName: 'label-provider-table'
+    baseName: 'label-provider-table',
+    styles
 });
 
 DesignSystem.getOrCreate()
diff --git a/packages/nimble-components/src/list-option/styles.ts b/packages/nimble-components/src/list-option/styles.ts
index 54d499448c..e8ace43746 100644
--- a/packages/nimble-components/src/list-option/styles.ts
+++ b/packages/nimble-components/src/list-option/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 
 import {
diff --git a/packages/nimble-components/src/listbox/styles.ts b/packages/nimble-components/src/listbox/styles.ts
index 15251c1c0e..51dac40ee4 100644
--- a/packages/nimble-components/src/listbox/styles.ts
+++ b/packages/nimble-components/src/listbox/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 
 import {
     applicationBackgroundColor,
diff --git a/packages/nimble-components/src/mapping/base/styles.ts b/packages/nimble-components/src/mapping/base/styles.ts
new file mode 100644
index 0000000000..4728207ab5
--- /dev/null
+++ b/packages/nimble-components/src/mapping/base/styles.ts
@@ -0,0 +1,6 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
+
+export const styles = css`
+    ${display('none')}
+`;
diff --git a/packages/nimble-components/src/mapping/empty/index.ts b/packages/nimble-components/src/mapping/empty/index.ts
index 6ad0fb3225..32dbeea74d 100644
--- a/packages/nimble-components/src/mapping/empty/index.ts
+++ b/packages/nimble-components/src/mapping/empty/index.ts
@@ -3,6 +3,7 @@ import { attr } from '@microsoft/fast-element';
 import { Mapping } from '../base';
 import { template } from '../base/template';
 import type { MappingKey } from '../base/types';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -22,7 +23,8 @@ export class MappingEmpty extends Mapping<MappingKey> {
 
 const emptyMapping = MappingEmpty.compose({
     baseName: 'mapping-empty',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 export const mappingEmptyTag = 'nimble-mapping-empty';
diff --git a/packages/nimble-components/src/mapping/icon/index.ts b/packages/nimble-components/src/mapping/icon/index.ts
index 732f3c9e0d..3538f45a98 100644
--- a/packages/nimble-components/src/mapping/icon/index.ts
+++ b/packages/nimble-components/src/mapping/icon/index.ts
@@ -5,6 +5,7 @@ import { template } from '../base/template';
 import type { IconSeverity } from '../../icon-base/types';
 import { Icon } from '../../icon-base';
 import type { MappingKey } from '../base/types';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -83,7 +84,8 @@ export class MappingIcon extends Mapping<MappingKey> {
 
 const iconMapping = MappingIcon.compose({
     baseName: 'mapping-icon',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 export const mappingIconTag = 'nimble-mapping-icon';
diff --git a/packages/nimble-components/src/mapping/spinner/index.ts b/packages/nimble-components/src/mapping/spinner/index.ts
index d80e969484..69ab312854 100644
--- a/packages/nimble-components/src/mapping/spinner/index.ts
+++ b/packages/nimble-components/src/mapping/spinner/index.ts
@@ -3,6 +3,7 @@ import { attr } from '@microsoft/fast-element';
 import { Mapping } from '../base';
 import { template } from '../base/template';
 import type { MappingKey } from '../base/types';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -25,7 +26,8 @@ export class MappingSpinner extends Mapping<MappingKey> {
 
 const spinnerMapping = MappingSpinner.compose({
     baseName: 'mapping-spinner',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 export const mappingSpinnerTag = 'nimble-mapping-spinner';
diff --git a/packages/nimble-components/src/mapping/text/index.ts b/packages/nimble-components/src/mapping/text/index.ts
index f70a923c3d..5676494c75 100644
--- a/packages/nimble-components/src/mapping/text/index.ts
+++ b/packages/nimble-components/src/mapping/text/index.ts
@@ -3,6 +3,7 @@ import { attr } from '@microsoft/fast-element';
 import { Mapping } from '../base';
 import { template } from '../base/template';
 import type { MappingKey } from '../base/types';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -22,7 +23,8 @@ export class MappingText extends Mapping<MappingKey> {
 
 const textMapping = MappingText.compose({
     baseName: 'mapping-text',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 export const mappingTextTag = 'nimble-mapping-text';
diff --git a/packages/nimble-components/src/mapping/user/index.ts b/packages/nimble-components/src/mapping/user/index.ts
index 433a674694..7b17b0dbb3 100644
--- a/packages/nimble-components/src/mapping/user/index.ts
+++ b/packages/nimble-components/src/mapping/user/index.ts
@@ -3,6 +3,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { Mapping } from '../base';
 import type { MappingUserKey } from '../base/types';
 import { template } from '../base/template';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -19,7 +20,8 @@ export class MappingUser extends Mapping<MappingUserKey> {
 }
 const mappingUser = MappingUser.compose({
     baseName: 'mapping-user',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(mappingUser());
 export const mappingUserTag = 'nimble-mapping-user';
diff --git a/packages/nimble-components/src/menu-button/styles.ts b/packages/nimble-components/src/menu-button/styles.ts
index afd556c21b..6526a0022c 100644
--- a/packages/nimble-components/src/menu-button/styles.ts
+++ b/packages/nimble-components/src/menu-button/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { controlHeight, smallPadding } from '../theme-provider/design-tokens';
 
 export const styles = css`
diff --git a/packages/nimble-components/src/menu-item/styles.ts b/packages/nimble-components/src/menu-item/styles.ts
index 74cc872f68..2245c95a12 100644
--- a/packages/nimble-components/src/menu-item/styles.ts
+++ b/packages/nimble-components/src/menu-item/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 
 import {
diff --git a/packages/nimble-components/src/menu/styles.ts b/packages/nimble-components/src/menu/styles.ts
index 1c809cb320..8b6b497d98 100644
--- a/packages/nimble-components/src/menu/styles.ts
+++ b/packages/nimble-components/src/menu/styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 
 import {
     applicationBackgroundColor,
diff --git a/packages/nimble-components/src/number-field/styles.ts b/packages/nimble-components/src/number-field/styles.ts
index 7daca461ef..1726525c32 100644
--- a/packages/nimble-components/src/number-field/styles.ts
+++ b/packages/nimble-components/src/number-field/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     borderRgbPartialColor,
     borderHoverColor,
diff --git a/packages/nimble-components/src/patterns/button/styles.ts b/packages/nimble-components/src/patterns/button/styles.ts
index ee8e4b4310..efb71a40ed 100644
--- a/packages/nimble-components/src/patterns/button/styles.ts
+++ b/packages/nimble-components/src/patterns/button/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../utilities/style/display';
 import { focusVisible } from '../../utilities/style/focus';
 import {
     actionRgbPartialColor,
diff --git a/packages/nimble-components/src/patterns/dropdown/styles.ts b/packages/nimble-components/src/patterns/dropdown/styles.ts
index c39ad78e39..7e8ee3162e 100644
--- a/packages/nimble-components/src/patterns/dropdown/styles.ts
+++ b/packages/nimble-components/src/patterns/dropdown/styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../../utilities/style/display';
 import {
     applicationBackgroundColor,
     bodyFont,
diff --git a/packages/nimble-components/src/radio-group/styles.ts b/packages/nimble-components/src/radio-group/styles.ts
index f435c9bf0c..37d2ac8d93 100644
--- a/packages/nimble-components/src/radio-group/styles.ts
+++ b/packages/nimble-components/src/radio-group/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     controlLabelDisabledFontColor,
     controlLabelFont,
diff --git a/packages/nimble-components/src/radio/styles.ts b/packages/nimble-components/src/radio/styles.ts
index 8afd5f4a5a..74ae826ea5 100644
--- a/packages/nimble-components/src/radio/styles.ts
+++ b/packages/nimble-components/src/radio/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     bodyDisabledFontColor,
     bodyFont,
diff --git a/packages/nimble-components/src/rich-text-mention/base/styles.ts b/packages/nimble-components/src/rich-text-mention/base/styles.ts
new file mode 100644
index 0000000000..4728207ab5
--- /dev/null
+++ b/packages/nimble-components/src/rich-text-mention/base/styles.ts
@@ -0,0 +1,6 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
+
+export const styles = css`
+    ${display('none')}
+`;
diff --git a/packages/nimble-components/src/rich-text-mention/users/index.ts b/packages/nimble-components/src/rich-text-mention/users/index.ts
index 9869f42056..00172591de 100644
--- a/packages/nimble-components/src/rich-text-mention/users/index.ts
+++ b/packages/nimble-components/src/rich-text-mention/users/index.ts
@@ -10,6 +10,7 @@ import type { Mapping } from '../../mapping/base';
 import type { MappingUserKey } from '../../mapping/base/types';
 import { RichTextMentionUsersValidator } from './models/rich-text-mention-users-validator';
 import { richTextMentionUsersViewTag } from './view';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -47,7 +48,8 @@ export class RichTextMentionUsers extends RichTextMention<RichTextMentionUsersVa
 }
 const nimbleRichTextMentionUsers = RichTextMentionUsers.compose({
     baseName: 'rich-text-mention-users',
-    template
+    template,
+    styles
 });
 
 DesignSystem.getOrCreate()
diff --git a/packages/nimble-components/src/rich-text-mention/users/view/styles.ts b/packages/nimble-components/src/rich-text-mention/users/view/styles.ts
index 85d20362ba..0da5e3a0bf 100644
--- a/packages/nimble-components/src/rich-text-mention/users/view/styles.ts
+++ b/packages/nimble-components/src/rich-text-mention/users/view/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../../utilities/style/display';
 import {
     mentionFont,
     mentionFontColor,
diff --git a/packages/nimble-components/src/rich-text/editor/styles.ts b/packages/nimble-components/src/rich-text/editor/styles.ts
index cafa15517c..a2a55fc862 100644
--- a/packages/nimble-components/src/rich-text/editor/styles.ts
+++ b/packages/nimble-components/src/rich-text/editor/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../utilities/style/display';
 import {
     bodyDisabledFontColor,
     bodyFont,
diff --git a/packages/nimble-components/src/rich-text/viewer/styles.ts b/packages/nimble-components/src/rich-text/viewer/styles.ts
index 240f012af1..830a27b52c 100644
--- a/packages/nimble-components/src/rich-text/viewer/styles.ts
+++ b/packages/nimble-components/src/rich-text/viewer/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../utilities/style/display';
 import {
     bodyFont,
     bodyFontColor,
diff --git a/packages/nimble-components/src/spinner/styles.ts b/packages/nimble-components/src/spinner/styles.ts
index 0f3c7390b2..2bce7f416b 100644
--- a/packages/nimble-components/src/spinner/styles.ts
+++ b/packages/nimble-components/src/spinner/styles.ts
@@ -1,5 +1,4 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import {
     Black15,
     Black91,
@@ -7,6 +6,7 @@ import {
     PowerGreen,
     White
 } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import { spinnerSmallHeight } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { themeBehavior } from '../utilities/style/theme';
diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts
index 0d7317a028..2d186b6bce 100644
--- a/packages/nimble-components/src/switch/styles.ts
+++ b/packages/nimble-components/src/switch/styles.ts
@@ -1,11 +1,11 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import {
     Black15,
     Black7,
     Black91,
     White
 } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import {
     bodyFont,
     borderHoverColor,
diff --git a/packages/nimble-components/src/tab-panel/styles.ts b/packages/nimble-components/src/tab-panel/styles.ts
index b57afffd5a..22025888bf 100644
--- a/packages/nimble-components/src/tab-panel/styles.ts
+++ b/packages/nimble-components/src/tab-panel/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     bodyFont,
     bodyFontColor,
diff --git a/packages/nimble-components/src/tab/styles.ts b/packages/nimble-components/src/tab/styles.ts
index f8eefd755a..b3b1bf54b4 100644
--- a/packages/nimble-components/src/tab/styles.ts
+++ b/packages/nimble-components/src/tab/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     borderHoverColor,
     borderWidth,
diff --git a/packages/nimble-components/src/table-column/anchor/cell-view/styles.ts b/packages/nimble-components/src/table-column/anchor/cell-view/styles.ts
index 21eb833b32..c2030197ac 100644
--- a/packages/nimble-components/src/table-column/anchor/cell-view/styles.ts
+++ b/packages/nimble-components/src/table-column/anchor/cell-view/styles.ts
@@ -5,13 +5,17 @@ import {
     placeholderFont,
     placeholderFontColor
 } from '../../../theme-provider/design-tokens';
+import { display } from '../../../utilities/style/display';
 
 export const styles = css`
+    ${display('flex')}
+
     :host {
         width: fit-content;
         max-width: 100%;
         height: fit-content;
         align-self: center;
+        align-items: center;
     }
 
     nimble-anchor {
diff --git a/packages/nimble-components/src/table-column/base/styles.ts b/packages/nimble-components/src/table-column/base/styles.ts
index c1eef69e76..edc69aff23 100644
--- a/packages/nimble-components/src/table-column/base/styles.ts
+++ b/packages/nimble-components/src/table-column/base/styles.ts
@@ -1,9 +1,8 @@
 import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
 
 export const styles = css`
-    :host {
-        display: contents;
-    }
+    ${display('contents')}
 
     .header-content {
         white-space: nowrap;
diff --git a/packages/nimble-components/src/table-column/mapping/cell-view/styles.ts b/packages/nimble-components/src/table-column/mapping/cell-view/styles.ts
index 7a65cc91e7..10ac4fe049 100644
--- a/packages/nimble-components/src/table-column/mapping/cell-view/styles.ts
+++ b/packages/nimble-components/src/table-column/mapping/cell-view/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../../utilities/style/display';
 import {
     bodyFont,
     bodyFontColor,
diff --git a/packages/nimble-components/src/table-column/mapping/group-header-view/styles.ts b/packages/nimble-components/src/table-column/mapping/group-header-view/styles.ts
index 7a65cc91e7..10ac4fe049 100644
--- a/packages/nimble-components/src/table-column/mapping/group-header-view/styles.ts
+++ b/packages/nimble-components/src/table-column/mapping/group-header-view/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../../utilities/style/display';
 import {
     bodyFont,
     bodyFontColor,
diff --git a/packages/nimble-components/src/table-column/text-base/cell-view/styles.ts b/packages/nimble-components/src/table-column/text-base/cell-view/styles.ts
index af765c9141..66448b7e23 100644
--- a/packages/nimble-components/src/table-column/text-base/cell-view/styles.ts
+++ b/packages/nimble-components/src/table-column/text-base/cell-view/styles.ts
@@ -5,8 +5,15 @@ import {
     placeholderFont,
     placeholderFontColor
 } from '../../../theme-provider/design-tokens';
+import { display } from '../../../utilities/style/display';
 
 export const styles = css`
+    ${display('flex')}
+
+    :host {
+        align-items: center;
+    }
+
     :host(.right-align) {
         margin-left: auto;
     }
diff --git a/packages/nimble-components/src/table-column/text-base/group-header-view/styles.ts b/packages/nimble-components/src/table-column/text-base/group-header-view/styles.ts
index 9e5198fcaa..ad405692b5 100644
--- a/packages/nimble-components/src/table-column/text-base/group-header-view/styles.ts
+++ b/packages/nimble-components/src/table-column/text-base/group-header-view/styles.ts
@@ -1,7 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';
+import { display } from '../../../utilities/style/display';
 
 export const styles = css`
+    ${display('flex')}
+
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};
diff --git a/packages/nimble-components/src/table/components/cell/styles.ts b/packages/nimble-components/src/table/components/cell/styles.ts
index 671049a444..55c05ed6a4 100644
--- a/packages/nimble-components/src/table/components/cell/styles.ts
+++ b/packages/nimble-components/src/table/components/cell/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../../utilities/style/display';
 import {
     controlHeight,
     controlSlimHeight,
@@ -24,8 +24,6 @@ export const styles = css`
 
     .cell-view {
         overflow: hidden;
-        display: flex;
-        align-items: center;
     }
 
     .action-menu {
diff --git a/packages/nimble-components/src/table/components/group-row/styles.ts b/packages/nimble-components/src/table/components/group-row/styles.ts
index c49b7d65d3..1e9c15e0d8 100644
--- a/packages/nimble-components/src/table/components/group-row/styles.ts
+++ b/packages/nimble-components/src/table/components/group-row/styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../../../utilities/style/display';
 import {
     applicationBackgroundColor,
     borderWidth,
@@ -71,7 +71,6 @@ export const styles = css`
         padding-left: ${mediumPadding};
         ${userSelectNone}
         overflow: hidden;
-        display: flex;
     }
 
     .group-row-child-count {
diff --git a/packages/nimble-components/src/table/components/header/styles.ts b/packages/nimble-components/src/table/components/header/styles.ts
index ae0492bc54..465763ec63 100644
--- a/packages/nimble-components/src/table/components/header/styles.ts
+++ b/packages/nimble-components/src/table/components/header/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../../../utilities/style/display';
 import {
     controlHeight,
     iconColor,
diff --git a/packages/nimble-components/src/table/components/row/styles.ts b/packages/nimble-components/src/table/components/row/styles.ts
index 72ed9e40cf..cf664f031e 100644
--- a/packages/nimble-components/src/table/components/row/styles.ts
+++ b/packages/nimble-components/src/table/components/row/styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../../../utilities/style/display';
 import {
     applicationBackgroundColor,
     borderWidth,
@@ -18,8 +18,8 @@ import { themeBehavior } from '../../../utilities/style/theme';
 import { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';
 
 export const styles = css`
-    ${expandCollapseStyles}
     ${display('flex')}
+    ${expandCollapseStyles}
 
     :host {
         width: fit-content;
diff --git a/packages/nimble-components/src/table/styles.ts b/packages/nimble-components/src/table/styles.ts
index db6708e4ac..c891be4946 100644
--- a/packages/nimble-components/src/table/styles.ts
+++ b/packages/nimble-components/src/table/styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import {
     applicationBackgroundColor,
     bodyFont,
diff --git a/packages/nimble-components/src/tabs-toolbar/styles.ts b/packages/nimble-components/src/tabs-toolbar/styles.ts
index cf908fb085..82318f32c8 100644
--- a/packages/nimble-components/src/tabs-toolbar/styles.ts
+++ b/packages/nimble-components/src/tabs-toolbar/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     bodyFont,
     bodyFontColor,
diff --git a/packages/nimble-components/src/tabs/styles.ts b/packages/nimble-components/src/tabs/styles.ts
index 29526fcd85..572acc2bbb 100644
--- a/packages/nimble-components/src/tabs/styles.ts
+++ b/packages/nimble-components/src/tabs/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 
 export const styles = css`
     ${display('grid')}
diff --git a/packages/nimble-components/src/text-area/styles.ts b/packages/nimble-components/src/text-area/styles.ts
index b5fc840c78..9a9dcacb5a 100644
--- a/packages/nimble-components/src/text-area/styles.ts
+++ b/packages/nimble-components/src/text-area/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import {
     borderRgbPartialColor,
     borderHoverColor,
diff --git a/packages/nimble-components/src/text-field/styles.ts b/packages/nimble-components/src/text-field/styles.ts
index 9bc8493ec3..5262c7dcfb 100644
--- a/packages/nimble-components/src/text-field/styles.ts
+++ b/packages/nimble-components/src/text-field/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 
 import {
     borderRgbPartialColor,
diff --git a/packages/nimble-components/src/theme-provider/styles.ts b/packages/nimble-components/src/theme-provider/styles.ts
index 915892c034..9013302cc1 100644
--- a/packages/nimble-components/src/theme-provider/styles.ts
+++ b/packages/nimble-components/src/theme-provider/styles.ts
@@ -1,7 +1,6 @@
 import { css } from '@microsoft/fast-element';
+import { display } from '../utilities/style/display';
 
 export const styles = css`
-    :host {
-        display: contents;
-    }
+    ${display('contents')}
 `;
diff --git a/packages/nimble-components/src/toolbar/styles.ts b/packages/nimble-components/src/toolbar/styles.ts
index 07e4ae2652..f9d39172bf 100644
--- a/packages/nimble-components/src/toolbar/styles.ts
+++ b/packages/nimble-components/src/toolbar/styles.ts
@@ -4,8 +4,11 @@ import {
     smallPadding,
     standardPadding
 } from '../theme-provider/design-tokens';
+import { display } from '../utilities/style/display';
 
 export const styles = css`
+    ${display('inline')}
+
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};
diff --git a/packages/nimble-components/src/tooltip/styles.ts b/packages/nimble-components/src/tooltip/styles.ts
index dafe34be3e..590fd63914 100644
--- a/packages/nimble-components/src/tooltip/styles.ts
+++ b/packages/nimble-components/src/tooltip/styles.ts
@@ -1,5 +1,4 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import {
     BannerFail100DarkUi,
     Black15,
@@ -10,6 +9,7 @@ import {
     Information100LightUi,
     White
 } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import {
     tooltipCaptionFont,
     tooltipCaptionFontColor,
diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts
index 94da5381f5..a34db49fb6 100644
--- a/packages/nimble-components/src/tree-item/styles.ts
+++ b/packages/nimble-components/src/tree-item/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 import {
     bodyFontColor,
diff --git a/packages/nimble-components/src/tree-view/styles.ts b/packages/nimble-components/src/tree-view/styles.ts
index 819b39cb1a..607ccbd4d7 100644
--- a/packages/nimble-components/src/tree-view/styles.ts
+++ b/packages/nimble-components/src/tree-view/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 
 export const styles = css`
diff --git a/packages/nimble-components/src/unit/base/styles.ts b/packages/nimble-components/src/unit/base/styles.ts
new file mode 100644
index 0000000000..4728207ab5
--- /dev/null
+++ b/packages/nimble-components/src/unit/base/styles.ts
@@ -0,0 +1,6 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
+
+export const styles = css`
+    ${display('none')}
+`;
diff --git a/packages/nimble-components/src/unit/byte/index.ts b/packages/nimble-components/src/unit/byte/index.ts
index 3606b11bc3..5cbe48a84a 100644
--- a/packages/nimble-components/src/unit/byte/index.ts
+++ b/packages/nimble-components/src/unit/byte/index.ts
@@ -4,6 +4,7 @@ import { template } from '../base/template';
 import { byte1024UnitScale } from '../../utilities/unit-format/unit-scale/byte-1024-unit-scale';
 import { byteUnitScale } from '../../utilities/unit-format/unit-scale/byte-unit-scale';
 import { Unit } from '../base/unit';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -36,7 +37,8 @@ export class UnitByte extends Unit {
 
 const nimbleUnitByte = UnitByte.compose({
     baseName: 'unit-byte',
-    template
+    template,
+    styles
 });
 
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
diff --git a/packages/nimble-components/src/unit/celsius/index.ts b/packages/nimble-components/src/unit/celsius/index.ts
index 81ba0b2973..676c9fe5db 100644
--- a/packages/nimble-components/src/unit/celsius/index.ts
+++ b/packages/nimble-components/src/unit/celsius/index.ts
@@ -2,6 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { template } from '../base/template';
 import { Unit } from '../base/unit';
 import { celsiusUnitScale } from '../../utilities/unit-format/unit-scale/celsius-unit-scale';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -21,7 +22,8 @@ export class UnitCelsius extends Unit {
 
 const nimbleUnitCelsius = UnitCelsius.compose({
     baseName: 'unit-celsius',
-    template
+    template,
+    styles
 });
 
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitCelsius());
diff --git a/packages/nimble-components/src/unit/fahrenheit/index.ts b/packages/nimble-components/src/unit/fahrenheit/index.ts
index 13242d7010..127c4fcd4e 100644
--- a/packages/nimble-components/src/unit/fahrenheit/index.ts
+++ b/packages/nimble-components/src/unit/fahrenheit/index.ts
@@ -2,6 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { template } from '../base/template';
 import { Unit } from '../base/unit';
 import { fahrenheitUnitScale } from '../../utilities/unit-format/unit-scale/fahrenheit-unit-scale';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -21,7 +22,8 @@ export class UnitFahrenheit extends Unit {
 
 const nimbleUnitFahrenheit = UnitFahrenheit.compose({
     baseName: 'unit-fahrenheit',
-    template
+    template,
+    styles
 });
 
 DesignSystem.getOrCreate()
diff --git a/packages/nimble-components/src/unit/volt/index.ts b/packages/nimble-components/src/unit/volt/index.ts
index 1922b6101a..d44e967a7a 100644
--- a/packages/nimble-components/src/unit/volt/index.ts
+++ b/packages/nimble-components/src/unit/volt/index.ts
@@ -2,6 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { template } from '../base/template';
 import { Unit } from '../base/unit';
 import { voltUnitScale } from '../../utilities/unit-format/unit-scale/volt-unit-scale';
+import { styles } from '../base/styles';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -21,7 +22,8 @@ export class UnitVolt extends Unit {
 
 const nimbleUnitVolt = UnitVolt.compose({
     baseName: 'unit-volt',
-    template
+    template,
+    styles
 });
 
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
diff --git a/packages/nimble-components/src/utilities/style/display.ts b/packages/nimble-components/src/utilities/style/display.ts
new file mode 100644
index 0000000000..94243d380b
--- /dev/null
+++ b/packages/nimble-components/src/utilities/style/display.ts
@@ -0,0 +1,13 @@
+import {
+    type CSSDisplayPropertyValue,
+    // eslint-disable-next-line no-restricted-imports
+    display as foundationDisplay
+} from '@microsoft/fast-foundation';
+
+/**
+ * This utility will generate the appropriate display style, as well as a style rule
+ * to hide the host element when its `hidden` attribute is set.
+ */
+export const display: typeof foundationDisplay = (
+    displayValue: CSSDisplayPropertyValue
+) => `${foundationDisplay(displayValue)}`;
diff --git a/packages/nimble-components/src/wafer-map/styles.ts b/packages/nimble-components/src/wafer-map/styles.ts
index e0bf7063a3..3f6968d85f 100644
--- a/packages/nimble-components/src/wafer-map/styles.ts
+++ b/packages/nimble-components/src/wafer-map/styles.ts
@@ -1,10 +1,12 @@
 import { css } from '@microsoft/fast-element';
 import { DigitalGreenLight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { borderColor, borderWidth } from '../theme-provider/design-tokens';
+import { display } from '../utilities/style/display';
 
 export const styles = css`
+    ${display('inline-block')}
+
     :host {
-        display: inline-block;
         width: 500px;
         height: 500px;
     }
diff --git a/packages/spright-components/src/rectangle/styles.ts b/packages/spright-components/src/rectangle/styles.ts
index bce209fe79..be412771ca 100644
--- a/packages/spright-components/src/rectangle/styles.ts
+++ b/packages/spright-components/src/rectangle/styles.ts
@@ -1,5 +1,4 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import {
     bodyDisabledFontColor,
     bodyFont,
@@ -7,6 +6,7 @@ import {
     borderHoverColor,
     borderRgbPartialColor
 } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../utilities/style/display';
 
 export const styles = css`
     ${display('inline-block')}
diff --git a/packages/spright-components/src/utilities/style/display.ts b/packages/spright-components/src/utilities/style/display.ts
new file mode 100644
index 0000000000..94243d380b
--- /dev/null
+++ b/packages/spright-components/src/utilities/style/display.ts
@@ -0,0 +1,13 @@
+import {
+    type CSSDisplayPropertyValue,
+    // eslint-disable-next-line no-restricted-imports
+    display as foundationDisplay
+} from '@microsoft/fast-foundation';
+
+/**
+ * This utility will generate the appropriate display style, as well as a style rule
+ * to hide the host element when its `hidden` attribute is set.
+ */
+export const display: typeof foundationDisplay = (
+    displayValue: CSSDisplayPropertyValue
+) => `${foundationDisplay(displayValue)}`;
diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
index 8660a4c23c..bfc9ddf582 100644
--- a/packages/storybook/.storybook/preview.js
+++ b/packages/storybook/.storybook/preview.js
@@ -104,3 +104,6 @@ export default {
 configureActions({
     depth: 1
 });
+
+// Update the GUID on this line to trigger a turbosnap full rebuild: 3e3470f8-2a6c-4474-b409-409c1dfbecea
+// See https://www.chromatic.com/docs/turbosnap/#full-rebuilds