From 50ef08ede60e455c1ee84c52f0fd9adfedb61260 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 15 May 2024 16:55:01 -0500
Subject: [PATCH 01/14] Switch to custom display helper

---
 packages/eslint-config-nimble/typescript.js              | 6 ++++++
 packages/nimble-components/docs/css-guidelines.md        | 6 +++---
 .../nimble-components/src/anchor-menu-item/styles.ts     | 2 +-
 packages/nimble-components/src/anchor-tab/styles.ts      | 2 +-
 packages/nimble-components/src/anchor-tabs/styles.ts     | 2 +-
 .../nimble-components/src/anchor-tree-item/styles.ts     | 2 +-
 packages/nimble-components/src/anchor/styles.ts          | 2 +-
 packages/nimble-components/src/banner/styles.ts          | 2 +-
 packages/nimble-components/src/breadcrumb-item/styles.ts | 2 +-
 packages/nimble-components/src/breadcrumb/styles.ts      | 2 +-
 packages/nimble-components/src/card-button/styles.ts     | 2 +-
 packages/nimble-components/src/card/styles.ts            | 2 +-
 packages/nimble-components/src/checkbox/styles.ts        | 2 +-
 packages/nimble-components/src/dialog/styles.ts          | 2 +-
 packages/nimble-components/src/drawer/styles.ts          | 2 +-
 packages/nimble-components/src/icon-base/styles.ts       | 2 +-
 packages/nimble-components/src/list-option/styles.ts     | 2 +-
 packages/nimble-components/src/listbox/styles.ts         | 2 +-
 packages/nimble-components/src/menu-button/styles.ts     | 2 +-
 packages/nimble-components/src/menu-item/styles.ts       | 2 +-
 packages/nimble-components/src/menu/styles.ts            | 2 +-
 packages/nimble-components/src/number-field/styles.ts    | 2 +-
 packages/nimble-components/src/patterns/button/styles.ts | 2 +-
 .../nimble-components/src/patterns/dropdown/styles.ts    | 2 +-
 packages/nimble-components/src/radio-group/styles.ts     | 2 +-
 packages/nimble-components/src/radio/styles.ts           | 2 +-
 .../src/rich-text-mention/users/view/styles.ts           | 2 +-
 .../nimble-components/src/rich-text/editor/styles.ts     | 2 +-
 .../nimble-components/src/rich-text/viewer/styles.ts     | 2 +-
 packages/nimble-components/src/spinner/styles.ts         | 2 +-
 packages/nimble-components/src/switch/styles.ts          | 2 +-
 packages/nimble-components/src/tab-panel/styles.ts       | 2 +-
 packages/nimble-components/src/tab/styles.ts             | 2 +-
 .../src/table-column/mapping/cell-view/styles.ts         | 2 +-
 .../src/table-column/mapping/group-header-view/styles.ts | 2 +-
 .../src/table/components/cell/styles.ts                  | 2 +-
 .../src/table/components/group-row/styles.ts             | 2 +-
 .../src/table/components/header/styles.ts                | 2 +-
 .../nimble-components/src/table/components/row/styles.ts | 2 +-
 packages/nimble-components/src/table/styles.ts           | 2 +-
 packages/nimble-components/src/tabs-toolbar/styles.ts    | 2 +-
 packages/nimble-components/src/tabs/styles.ts            | 2 +-
 packages/nimble-components/src/text-area/styles.ts       | 2 +-
 packages/nimble-components/src/text-field/styles.ts      | 2 +-
 packages/nimble-components/src/tooltip/styles.ts         | 2 +-
 packages/nimble-components/src/tree-item/styles.ts       | 2 +-
 packages/nimble-components/src/tree-view/styles.ts       | 2 +-
 .../nimble-components/src/utilities/style/display.ts     | 9 +++++++++
 packages/spright-components/src/rectangle/styles.ts      | 2 +-
 .../spright-components/src/utilities/style/display.ts    | 9 +++++++++
 50 files changed, 73 insertions(+), 49 deletions(-)
 create mode 100644 packages/nimble-components/src/utilities/style/display.ts
 create mode 100644 packages/spright-components/src/utilities/style/display.ts

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/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/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/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/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/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/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/components/cell/styles.ts b/packages/nimble-components/src/table/components/cell/styles.ts
index 671049a444..4052d584f6 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,
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..3dbfd632b1 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,
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..bde48dd718 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,
diff --git a/packages/nimble-components/src/table/styles.ts b/packages/nimble-components/src/table/styles.ts
index db6708e4ac..83c8632e2f 100644
--- a/packages/nimble-components/src/table/styles.ts
+++ b/packages/nimble-components/src/table/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 { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import {
     applicationBackgroundColor,
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/tooltip/styles.ts b/packages/nimble-components/src/tooltip/styles.ts
index dafe34be3e..7478e5ad43 100644
--- a/packages/nimble-components/src/tooltip/styles.ts
+++ b/packages/nimble-components/src/tooltip/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 {
     BannerFail100DarkUi,
     Black15,
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/utilities/style/display.ts b/packages/nimble-components/src/utilities/style/display.ts
new file mode 100644
index 0000000000..ec8125f1b8
--- /dev/null
+++ b/packages/nimble-components/src/utilities/style/display.ts
@@ -0,0 +1,9 @@
+import {
+    type CSSDisplayPropertyValue,
+    // eslint-disable-next-line no-restricted-imports
+    display as foundationDisplay
+} from '@microsoft/fast-foundation';
+
+export const display: typeof foundationDisplay = (
+    displayValue: CSSDisplayPropertyValue
+) => `${foundationDisplay(displayValue)}`;
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..ec8125f1b8
--- /dev/null
+++ b/packages/spright-components/src/utilities/style/display.ts
@@ -0,0 +1,9 @@
+import {
+    type CSSDisplayPropertyValue,
+    // eslint-disable-next-line no-restricted-imports
+    display as foundationDisplay
+} from '@microsoft/fast-foundation';
+
+export const display: typeof foundationDisplay = (
+    displayValue: CSSDisplayPropertyValue
+) => `${foundationDisplay(displayValue)}`;

From 5bfccceb5dd2c17315a977aad5be1585990fd5d0 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 15 May 2024 18:22:13 -0500
Subject: [PATCH 02/14] Add missing display helper usages

---
 packages/nimble-components/src/anchored-region/styles.ts   | 7 +++++--
 packages/nimble-components/src/icon-base/index.ts          | 3 +--
 .../nimble-components/src/label-provider/base/styles.ts    | 6 ++++++
 .../nimble-components/src/label-provider/core/index.ts     | 4 +++-
 .../src/label-provider/rich-text/index.ts                  | 4 +++-
 .../nimble-components/src/label-provider/table/index.ts    | 4 +++-
 packages/nimble-components/src/mapping/base/styles.ts      | 6 ++++++
 packages/nimble-components/src/mapping/empty/index.ts      | 4 +++-
 packages/nimble-components/src/mapping/icon/index.ts       | 4 +++-
 packages/nimble-components/src/mapping/spinner/index.ts    | 4 +++-
 packages/nimble-components/src/mapping/text/index.ts       | 4 +++-
 packages/nimble-components/src/mapping/user/index.ts       | 4 +++-
 .../nimble-components/src/rich-text-mention/base/styles.ts | 6 ++++++
 .../nimble-components/src/rich-text-mention/users/index.ts | 4 +++-
 .../src/table-column/anchor/cell-view/styles.ts            | 4 ++++
 packages/nimble-components/src/table-column/base/styles.ts | 5 ++---
 .../src/table-column/text-base/cell-view/styles.ts         | 7 +++++++
 .../src/table-column/text-base/group-header-view/styles.ts | 3 +++
 .../nimble-components/src/table/components/cell/styles.ts  | 2 --
 .../src/table/components/group-row/styles.ts               | 1 -
 .../nimble-components/src/table/components/row/styles.ts   | 2 +-
 packages/nimble-components/src/table/styles.ts             | 2 +-
 packages/nimble-components/src/theme-provider/styles.ts    | 5 ++---
 packages/nimble-components/src/toolbar/styles.ts           | 3 +++
 packages/nimble-components/src/tooltip/styles.ts           | 2 +-
 packages/nimble-components/src/unit/base/styles.ts         | 6 ++++++
 packages/nimble-components/src/unit/byte/index.ts          | 4 +++-
 packages/nimble-components/src/unit/celsius/index.ts       | 4 +++-
 packages/nimble-components/src/unit/fahrenheit/index.ts    | 4 +++-
 packages/nimble-components/src/unit/volt/index.ts          | 4 +++-
 packages/nimble-components/src/wafer-map/styles.ts         | 4 +++-
 31 files changed, 96 insertions(+), 30 deletions(-)
 create mode 100644 packages/nimble-components/src/label-provider/base/styles.ts
 create mode 100644 packages/nimble-components/src/mapping/base/styles.ts
 create mode 100644 packages/nimble-components/src/rich-text-mention/base/styles.ts
 create mode 100644 packages/nimble-components/src/unit/base/styles.ts

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/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/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/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/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/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/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 4052d584f6..55c05ed6a4 100644
--- a/packages/nimble-components/src/table/components/cell/styles.ts
+++ b/packages/nimble-components/src/table/components/cell/styles.ts
@@ -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 3dbfd632b1..1e9c15e0d8 100644
--- a/packages/nimble-components/src/table/components/group-row/styles.ts
+++ b/packages/nimble-components/src/table/components/group-row/styles.ts
@@ -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/row/styles.ts b/packages/nimble-components/src/table/components/row/styles.ts
index bde48dd718..cf664f031e 100644
--- a/packages/nimble-components/src/table/components/row/styles.ts
+++ b/packages/nimble-components/src/table/components/row/styles.ts
@@ -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 83c8632e2f..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 '../utilities/style/display';
 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/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 7478e5ad43..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 '../utilities/style/display';
 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/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/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;
     }

From fb144384cc7be6a063de63b2f42d60f5c0eeb17a Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 15 May 2024 18:22:41 -0500
Subject: [PATCH 03/14] Change files

---
 ...le-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json | 7 +++++++
 ...ht-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json
 create mode 100644 change/@ni-spright-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json

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"
+}

From cd67419350cb3da82c9c4c0b0e1e33bce7b6f9b8 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 15 May 2024 19:08:02 -0500
Subject: [PATCH 04/14] Remove manual border-box definitions

---
 packages/nimble-components/src/anchor-menu-item/styles.ts      | 1 -
 packages/nimble-components/src/anchor-tab/styles.ts            | 1 -
 packages/nimble-components/src/anchor-tabs/styles.ts           | 1 -
 packages/nimble-components/src/anchor-tree-item/styles.ts      | 1 -
 packages/nimble-components/src/anchor/styles.ts                | 1 -
 packages/nimble-components/src/breadcrumb-item/styles.ts       | 1 -
 packages/nimble-components/src/breadcrumb/styles.ts            | 1 -
 packages/nimble-components/src/card-button/styles.ts           | 1 -
 packages/nimble-components/src/checkbox/styles.ts              | 1 -
 packages/nimble-components/src/drawer/styles.ts                | 1 -
 packages/nimble-components/src/menu-item/styles.ts             | 1 -
 packages/nimble-components/src/number-field/styles.ts          | 1 -
 packages/nimble-components/src/patterns/button/styles.ts       | 3 ---
 packages/nimble-components/src/patterns/dropdown/styles.ts     | 3 ---
 packages/nimble-components/src/radio/styles.ts                 | 1 -
 .../src/rich-text-mention/users/view/styles.ts                 | 1 -
 packages/nimble-components/src/rich-text/editor/styles.ts      | 3 ---
 packages/nimble-components/src/rich-text/viewer/styles.ts      | 1 -
 packages/nimble-components/src/switch/styles.ts                | 2 --
 packages/nimble-components/src/tab-panel/styles.ts             | 1 -
 packages/nimble-components/src/tab/styles.ts                   | 1 -
 .../nimble-components/src/table/components/group-row/styles.ts | 1 -
 packages/nimble-components/src/table/components/row/styles.ts  | 2 --
 packages/nimble-components/src/tabs-toolbar/styles.ts          | 1 -
 packages/nimble-components/src/tabs/styles.ts                  | 1 -
 packages/nimble-components/src/text-area/styles.ts             | 1 -
 packages/nimble-components/src/text-field/styles.ts            | 1 -
 packages/nimble-components/src/tooltip/styles.ts               | 1 -
 packages/nimble-components/src/tree-item/styles.ts             | 1 -
 29 files changed, 37 deletions(-)

diff --git a/packages/nimble-components/src/anchor-menu-item/styles.ts b/packages/nimble-components/src/anchor-menu-item/styles.ts
index 159d271958..1a7c04cdb0 100644
--- a/packages/nimble-components/src/anchor-menu-item/styles.ts
+++ b/packages/nimble-components/src/anchor-menu-item/styles.ts
@@ -37,7 +37,6 @@ export const styles = css`
         display: grid;
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;
diff --git a/packages/nimble-components/src/anchor-tab/styles.ts b/packages/nimble-components/src/anchor-tab/styles.ts
index 4ec2170d7d..2cac7fdab4 100644
--- a/packages/nimble-components/src/anchor-tab/styles.ts
+++ b/packages/nimble-components/src/anchor-tab/styles.ts
@@ -20,7 +20,6 @@ export const styles = css`
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};
diff --git a/packages/nimble-components/src/anchor-tabs/styles.ts b/packages/nimble-components/src/anchor-tabs/styles.ts
index b7e6ec5432..c7611b7221 100644
--- a/packages/nimble-components/src/anchor-tabs/styles.ts
+++ b/packages/nimble-components/src/anchor-tabs/styles.ts
@@ -5,7 +5,6 @@ export const styles = css`
     ${display('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }
diff --git a/packages/nimble-components/src/anchor-tree-item/styles.ts b/packages/nimble-components/src/anchor-tree-item/styles.ts
index 248179d541..d116bcc1e1 100644
--- a/packages/nimble-components/src/anchor-tree-item/styles.ts
+++ b/packages/nimble-components/src/anchor-tree-item/styles.ts
@@ -54,7 +54,6 @@ export const styles = css`
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
         width: 100%;
     }
diff --git a/packages/nimble-components/src/anchor/styles.ts b/packages/nimble-components/src/anchor/styles.ts
index bf85674dda..65166169e6 100644
--- a/packages/nimble-components/src/anchor/styles.ts
+++ b/packages/nimble-components/src/anchor/styles.ts
@@ -17,7 +17,6 @@ export const styles = css`
         ${display('inline')}
 
         :host {
-            box-sizing: border-box;
             font: ${linkFont};
         }
 
diff --git a/packages/nimble-components/src/breadcrumb-item/styles.ts b/packages/nimble-components/src/breadcrumb-item/styles.ts
index 9ade8c8c51..ddddab68b8 100644
--- a/packages/nimble-components/src/breadcrumb-item/styles.ts
+++ b/packages/nimble-components/src/breadcrumb-item/styles.ts
@@ -16,7 +16,6 @@ export const styles = css`
 
     :host {
         height: ${controlHeight};
-        box-sizing: border-box;
         padding-left: calc(4px - ${borderWidth});
 
         ${
diff --git a/packages/nimble-components/src/breadcrumb/styles.ts b/packages/nimble-components/src/breadcrumb/styles.ts
index 6bb0809945..fe5e033f55 100644
--- a/packages/nimble-components/src/breadcrumb/styles.ts
+++ b/packages/nimble-components/src/breadcrumb/styles.ts
@@ -13,7 +13,6 @@ export const styles = css`
     ${display('inline-block')}
 
     :host {
-        box-sizing: border-box;
         font: ${linkFont};
         --ni-private-breadcrumb-link-font-color: ${linkFontColor};
         --ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};
diff --git a/packages/nimble-components/src/card-button/styles.ts b/packages/nimble-components/src/card-button/styles.ts
index 8763364a80..faa34af143 100644
--- a/packages/nimble-components/src/card-button/styles.ts
+++ b/packages/nimble-components/src/card-button/styles.ts
@@ -29,7 +29,6 @@ export const styles = css`
         cursor: pointer;
         outline: none;
         border: none;
-        box-sizing: border-box;
         transition: box-shadow ${smallDelay};
     }
 
diff --git a/packages/nimble-components/src/checkbox/styles.ts b/packages/nimble-components/src/checkbox/styles.ts
index 8728a59779..8da0c9e22a 100644
--- a/packages/nimble-components/src/checkbox/styles.ts
+++ b/packages/nimble-components/src/checkbox/styles.ts
@@ -34,7 +34,6 @@ export const styles = css`
     .control {
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         padding: 2px;
diff --git a/packages/nimble-components/src/drawer/styles.ts b/packages/nimble-components/src/drawer/styles.ts
index d6c94251f6..9cb9904dc5 100644
--- a/packages/nimble-components/src/drawer/styles.ts
+++ b/packages/nimble-components/src/drawer/styles.ts
@@ -67,7 +67,6 @@ export const styles = css`
     }
 
     .dialog-contents {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: absolute;
diff --git a/packages/nimble-components/src/menu-item/styles.ts b/packages/nimble-components/src/menu-item/styles.ts
index 2245c95a12..a23b7e381c 100644
--- a/packages/nimble-components/src/menu-item/styles.ts
+++ b/packages/nimble-components/src/menu-item/styles.ts
@@ -20,7 +20,6 @@ export const styles = css`
     :host {
         contain: layout;
         overflow: visible;
-        box-sizing: border-box;
         height: ${controlHeight};
         grid-template-columns: 1fr;
         column-gap: 8px;
diff --git a/packages/nimble-components/src/number-field/styles.ts b/packages/nimble-components/src/number-field/styles.ts
index 1726525c32..73b1600ae3 100644
--- a/packages/nimble-components/src/number-field/styles.ts
+++ b/packages/nimble-components/src/number-field/styles.ts
@@ -52,7 +52,6 @@ export const styles = css`
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
diff --git a/packages/nimble-components/src/patterns/button/styles.ts b/packages/nimble-components/src/patterns/button/styles.ts
index efb71a40ed..e802c4525d 100644
--- a/packages/nimble-components/src/patterns/button/styles.ts
+++ b/packages/nimble-components/src/patterns/button/styles.ts
@@ -39,7 +39,6 @@ export const styles = css`
             cursor: pointer;
             outline: none;
             border: none;
-            box-sizing: border-box;
             ${
                 /*
                     Not sure why but this is needed to get buttons with icons and buttons
@@ -55,7 +54,6 @@ export const styles = css`
             height: 100%;
             width: 100%;
             border: ${borderWidth} solid transparent;
-            box-sizing: border-box;
             color: inherit;
             border-radius: inherit;
             fill: inherit;
@@ -89,7 +87,6 @@ export const styles = css`
             width: 100%;
             height: 100%;
             pointer-events: none;
-            box-sizing: border-box;
             outline: 0px solid transparent;
             color: transparent;
             background-clip: content-box;
diff --git a/packages/nimble-components/src/patterns/dropdown/styles.ts b/packages/nimble-components/src/patterns/dropdown/styles.ts
index 7e8ee3162e..949c3d5286 100644
--- a/packages/nimble-components/src/patterns/dropdown/styles.ts
+++ b/packages/nimble-components/src/patterns/dropdown/styles.ts
@@ -31,7 +31,6 @@ export const styles = css`
     ${display('inline-flex')}
 
     :host {
-        box-sizing: border-box;
         color: ${bodyFontColor};
         font: ${bodyFont};
         height: ${controlHeight};
@@ -109,7 +108,6 @@ export const styles = css`
 
     .control {
         align-items: center;
-        box-sizing: border-box;
         cursor: pointer;
         display: flex;
         min-height: 100%;
@@ -136,7 +134,6 @@ export const styles = css`
     }
 
     .listbox {
-        box-sizing: border-box;
         display: inline-flex;
         flex-direction: column;
         overflow-y: auto;
diff --git a/packages/nimble-components/src/radio/styles.ts b/packages/nimble-components/src/radio/styles.ts
index 74ae826ea5..3f11d3d828 100644
--- a/packages/nimble-components/src/radio/styles.ts
+++ b/packages/nimble-components/src/radio/styles.ts
@@ -33,7 +33,6 @@ export const styles = css`
         position: relative;
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         border-radius: 100%;
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 0da5e3a0bf..37a49032a5 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
@@ -10,7 +10,6 @@ export const styles = css`
     ${display('inline-block')}
 
     :host {
-        box-sizing: border-box;
         font: ${mentionFont};
     }
 
diff --git a/packages/nimble-components/src/rich-text/editor/styles.ts b/packages/nimble-components/src/rich-text/editor/styles.ts
index a2a55fc862..ac6fea8ac6 100644
--- a/packages/nimble-components/src/rich-text/editor/styles.ts
+++ b/packages/nimble-components/src/rich-text/editor/styles.ts
@@ -50,7 +50,6 @@ export const styles = css`
     }
 
     .container {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -132,7 +131,6 @@ export const styles = css`
             /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''
         }
         padding-right: calc(${iconSize});
-        box-sizing: border-box;
         position: relative;
         color: inherit;
     }
@@ -258,7 +256,6 @@ export const styles = css`
     ${toolbarTag}::part(positioning-region) {
         background: transparent;
         padding-right: 8px;
-        box-sizing: border-box;
         gap: 0px;
         height: var(--ni-private-rich-text-editor-footer-section-height);
     }
diff --git a/packages/nimble-components/src/rich-text/viewer/styles.ts b/packages/nimble-components/src/rich-text/viewer/styles.ts
index 830a27b52c..17b2c1d815 100644
--- a/packages/nimble-components/src/rich-text/viewer/styles.ts
+++ b/packages/nimble-components/src/rich-text/viewer/styles.ts
@@ -21,7 +21,6 @@ export const styles = css`
     .viewer {
         font: inherit;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         overflow-wrap: anywhere;
diff --git a/packages/nimble-components/src/switch/styles.ts b/packages/nimble-components/src/switch/styles.ts
index 2d186b6bce..2b992a6991 100644
--- a/packages/nimble-components/src/switch/styles.ts
+++ b/packages/nimble-components/src/switch/styles.ts
@@ -72,7 +72,6 @@ export const styles = css`
         display: flex;
         height: var(--ni-private-switch-height);
         width: calc(var(--ni-private-switch-height) * 2);
-        box-sizing: border-box;
         background-color: ${fillHoverColor};
         border-radius: calc(var(--ni-private-switch-height) / 2);
         align-items: center;
@@ -101,7 +100,6 @@ export const styles = css`
         justify-content: center;
         align-items: center;
         background-color: var(--ni-private-switch-indicator-background-color);
-        box-sizing: border-box;
         width: var(--ni-private-switch-indicator-size);
         height: var(--ni-private-switch-indicator-size);
         border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
diff --git a/packages/nimble-components/src/tab-panel/styles.ts b/packages/nimble-components/src/tab-panel/styles.ts
index 22025888bf..02e5933446 100644
--- a/packages/nimble-components/src/tab-panel/styles.ts
+++ b/packages/nimble-components/src/tab-panel/styles.ts
@@ -10,7 +10,6 @@ export const styles = css`
     ${display('block')}
 
     :host {
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
         padding-top: ${standardPadding};
diff --git a/packages/nimble-components/src/tab/styles.ts b/packages/nimble-components/src/tab/styles.ts
index b3b1bf54b4..92dd71f80a 100644
--- a/packages/nimble-components/src/tab/styles.ts
+++ b/packages/nimble-components/src/tab/styles.ts
@@ -20,7 +20,6 @@ export const styles = css`
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};
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 1e9c15e0d8..662d30dbe7 100644
--- a/packages/nimble-components/src/table/components/group-row/styles.ts
+++ b/packages/nimble-components/src/table/components/group-row/styles.ts
@@ -23,7 +23,6 @@ export const styles = css`
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
-        box-sizing: border-box;
         grid-template-columns:
             calc(
                 ${controlHeight} *
diff --git a/packages/nimble-components/src/table/components/row/styles.ts b/packages/nimble-components/src/table/components/row/styles.ts
index cf664f031e..d1cb8f9822 100644
--- a/packages/nimble-components/src/table/components/row/styles.ts
+++ b/packages/nimble-components/src/table/components/row/styles.ts
@@ -27,7 +27,6 @@ export const styles = css`
         background-color: ${applicationBackgroundColor};
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid transparent;
-        box-sizing: border-box;
         background-clip: padding-box;
     }
 
@@ -36,7 +35,6 @@ export const styles = css`
         width: 100%;
         height: ${controlHeight};
         pointer-events: none;
-        box-sizing: border-box;
         bottom: 0px;
         position: absolute;
     }
diff --git a/packages/nimble-components/src/tabs-toolbar/styles.ts b/packages/nimble-components/src/tabs-toolbar/styles.ts
index 82318f32c8..dd6a7fdc9d 100644
--- a/packages/nimble-components/src/tabs-toolbar/styles.ts
+++ b/packages/nimble-components/src/tabs-toolbar/styles.ts
@@ -16,7 +16,6 @@ export const styles = css`
     :host {
         align-items: center;
         height: ${controlHeight};
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
     }
diff --git a/packages/nimble-components/src/tabs/styles.ts b/packages/nimble-components/src/tabs/styles.ts
index 572acc2bbb..486e0f601f 100644
--- a/packages/nimble-components/src/tabs/styles.ts
+++ b/packages/nimble-components/src/tabs/styles.ts
@@ -5,7 +5,6 @@ export const styles = css`
     ${display('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }
diff --git a/packages/nimble-components/src/text-area/styles.ts b/packages/nimble-components/src/text-area/styles.ts
index 9a9dcacb5a..a7ba8f33a1 100644
--- a/packages/nimble-components/src/text-area/styles.ts
+++ b/packages/nimble-components/src/text-area/styles.ts
@@ -92,7 +92,6 @@ export const styles = css`
         font: inherit;
         flex-grow: 1;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         border-radius: 0px;
diff --git a/packages/nimble-components/src/text-field/styles.ts b/packages/nimble-components/src/text-field/styles.ts
index 5262c7dcfb..9d311e9d9f 100644
--- a/packages/nimble-components/src/text-field/styles.ts
+++ b/packages/nimble-components/src/text-field/styles.ts
@@ -54,7 +54,6 @@ export const styles = css`
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
diff --git a/packages/nimble-components/src/tooltip/styles.ts b/packages/nimble-components/src/tooltip/styles.ts
index 590fd63914..980ad49fb0 100644
--- a/packages/nimble-components/src/tooltip/styles.ts
+++ b/packages/nimble-components/src/tooltip/styles.ts
@@ -34,7 +34,6 @@ export const styles = css`
     }
 
     .tooltip {
-        box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
         box-shadow: ${elevation2BoxShadow};
diff --git a/packages/nimble-components/src/tree-item/styles.ts b/packages/nimble-components/src/tree-item/styles.ts
index a34db49fb6..5be269a6cc 100644
--- a/packages/nimble-components/src/tree-item/styles.ts
+++ b/packages/nimble-components/src/tree-item/styles.ts
@@ -57,7 +57,6 @@ export const styles = css`
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
     }
 

From f6b23d870fd58b8ea10196dcb69d21fb0ad18ec9 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 15 May 2024 19:10:53 -0500
Subject: [PATCH 05/14] Consistent shadowroot border-box

---
 packages/nimble-components/src/utilities/style/display.ts  | 2 +-
 packages/spright-components/src/utilities/style/display.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nimble-components/src/utilities/style/display.ts b/packages/nimble-components/src/utilities/style/display.ts
index ec8125f1b8..42add1bd46 100644
--- a/packages/nimble-components/src/utilities/style/display.ts
+++ b/packages/nimble-components/src/utilities/style/display.ts
@@ -6,4 +6,4 @@ import {
 
 export const display: typeof foundationDisplay = (
     displayValue: CSSDisplayPropertyValue
-) => `${foundationDisplay(displayValue)}`;
+) => `${foundationDisplay(displayValue)}:host,:host::before,:host::after,*,::before,::after{box-sizing:border-box}`;
diff --git a/packages/spright-components/src/utilities/style/display.ts b/packages/spright-components/src/utilities/style/display.ts
index ec8125f1b8..42add1bd46 100644
--- a/packages/spright-components/src/utilities/style/display.ts
+++ b/packages/spright-components/src/utilities/style/display.ts
@@ -6,4 +6,4 @@ import {
 
 export const display: typeof foundationDisplay = (
     displayValue: CSSDisplayPropertyValue
-) => `${foundationDisplay(displayValue)}`;
+) => `${foundationDisplay(displayValue)}:host,:host::before,:host::after,*,::before,::after{box-sizing:border-box}`;

From 0e3415da5df517519df3bf9ea6eab39284d78538 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 15 May 2024 19:35:41 -0500
Subject: [PATCH 06/14] Trigger a new sb

---
 packages/nimble-components/src/menu/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nimble-components/src/menu/styles.ts b/packages/nimble-components/src/menu/styles.ts
index 8b6b497d98..46fedfe66d 100644
--- a/packages/nimble-components/src/menu/styles.ts
+++ b/packages/nimble-components/src/menu/styles.ts
@@ -48,7 +48,7 @@ export const styles = css`
     }
 
     ::slotted(hr) {
-        box-sizing: content-box;
+        box-sizing: border-box;
         height: 2px;
         margin: ${smallPadding};
         border: none;

From f91f2142017ba1808809ce6392e66c446a2b3a97 Mon Sep 17 00:00:00 2001
From: Milan Raj <rajsite@users.noreply.github.com>
Date: Thu, 16 May 2024 14:52:44 -0500
Subject: [PATCH 07/14] Update preview.js guid

---
 packages/storybook/.storybook/preview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
index bfc9ddf582..651d296859 100644
--- a/packages/storybook/.storybook/preview.js
+++ b/packages/storybook/.storybook/preview.js
@@ -105,5 +105,5 @@ configureActions({
     depth: 1
 });
 
-// Update the GUID on this line to trigger a turbosnap full rebuild: 3e3470f8-2a6c-4474-b409-409c1dfbecea
+// Update the GUID on this line to trigger a turbosnap full rebuild: 2a2e23c5-4d3b-4d0b-b063-b34abff68b3b
 // See https://www.chromatic.com/docs/turbosnap/#full-rebuilds

From b2922e0d8b14359ced016725fe7a0cfb2d1f32a6 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Sun, 9 Jun 2024 19:15:08 -0500
Subject: [PATCH 08/14] Make look nicer in devtools

---
 packages/nimble-components/src/utilities/style/display.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nimble-components/src/utilities/style/display.ts b/packages/nimble-components/src/utilities/style/display.ts
index da8753b08b..e129523091 100644
--- a/packages/nimble-components/src/utilities/style/display.ts
+++ b/packages/nimble-components/src/utilities/style/display.ts
@@ -10,4 +10,4 @@ import {
  */
 export const display: typeof foundationDisplay = (
     displayValue: CSSDisplayPropertyValue
-) => `${foundationDisplay(displayValue)}:host,:host::before,:host::after,*,::before,::after{box-sizing:border-box}`;
+) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box}*{box-sizing:border-box}:host::before,:host::after,::before,::after{box-sizing:border-box}`;

From b5909916ceb60c44c57a2abb2feb6d3ff3531b46 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Mon, 10 Jun 2024 09:56:21 -0500
Subject: [PATCH 09/14] Align with spright

---
 packages/nimble-components/src/utilities/style/display.ts  | 2 +-
 packages/spright-components/src/utilities/style/display.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nimble-components/src/utilities/style/display.ts b/packages/nimble-components/src/utilities/style/display.ts
index e129523091..8b33f9c691 100644
--- a/packages/nimble-components/src/utilities/style/display.ts
+++ b/packages/nimble-components/src/utilities/style/display.ts
@@ -10,4 +10,4 @@ import {
  */
 export const display: typeof foundationDisplay = (
     displayValue: CSSDisplayPropertyValue
-) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box}*{box-sizing:border-box}:host::before,:host::after,::before,::after{box-sizing:border-box}`;
+) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
diff --git a/packages/spright-components/src/utilities/style/display.ts b/packages/spright-components/src/utilities/style/display.ts
index da8753b08b..8b33f9c691 100644
--- a/packages/spright-components/src/utilities/style/display.ts
+++ b/packages/spright-components/src/utilities/style/display.ts
@@ -10,4 +10,4 @@ import {
  */
 export const display: typeof foundationDisplay = (
     displayValue: CSSDisplayPropertyValue
-) => `${foundationDisplay(displayValue)}:host,:host::before,:host::after,*,::before,::after{box-sizing:border-box}`;
+) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;

From 0186d3e80d2324e596a69bb7034af9a181d418fe Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:16:00 -0500
Subject: [PATCH 10/14] Remaining non-border box updates

---
 packages/nimble-components/src/patterns/button/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nimble-components/src/patterns/button/styles.ts b/packages/nimble-components/src/patterns/button/styles.ts
index e802c4525d..de79e5a9cf 100644
--- a/packages/nimble-components/src/patterns/button/styles.ts
+++ b/packages/nimble-components/src/patterns/button/styles.ts
@@ -89,7 +89,7 @@ export const styles = css`
             pointer-events: none;
             outline: 0px solid transparent;
             color: transparent;
-            background-clip: content-box;
+            background-clip: border-box;
             transition: outline ${smallDelay} ease-in-out;
         }
 

From 95debf5495166394f9c32ebe706330400b6250db Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:16:18 -0500
Subject: [PATCH 11/14] Story tweaks to minimize diffs

---
 packages/storybook/src/docs/component-status.stories.ts     | 6 ++++++
 .../src/nimble/number-field/number-field-matrix.stories.ts  | 2 +-
 .../rich-text/editor/rich-text-editor-matrix.stories.ts     | 2 +-
 .../src/nimble/text-field/text-field-matrix.stories.ts      | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/storybook/src/docs/component-status.stories.ts b/packages/storybook/src/docs/component-status.stories.ts
index 0621f4282e..a1221659f1 100644
--- a/packages/storybook/src/docs/component-status.stories.ts
+++ b/packages/storybook/src/docs/component-status.stories.ts
@@ -316,6 +316,9 @@ const components = [
     {
         componentName: 'Rich Text Editor',
         componentHref: './?path=/docs/incubating-rich-text-editor--docs',
+        designHref:
+        'https://www.figma.com/design/Q5SU1OwrnD08keon3zObRX/SystemLink-orig?node-id=6280-94045&m=dev',
+        designLabel: 'Figma',
         issueHref: 'https://github.com/ni/nimble/issues/1288',
         issueLabel: 'Issue',
         componentStatus: ComponentFrameworkStatus.incubating,
@@ -325,6 +328,9 @@ const components = [
     {
         componentName: 'Rich Text Viewer',
         componentHref: './?path=/docs/incubating-rich-text-viewer--docs',
+        designHref:
+        'https://www.figma.com/design/Q5SU1OwrnD08keon3zObRX/SystemLink-orig?node-id=6280-94045&m=dev',
+        designLabel: 'Figma',
         issueHref: 'https://github.com/ni/nimble/issues/1288',
         issueLabel: 'Issue',
         componentStatus: ComponentFrameworkStatus.incubating,
diff --git a/packages/storybook/src/nimble/number-field/number-field-matrix.stories.ts b/packages/storybook/src/nimble/number-field/number-field-matrix.stories.ts
index 48ccdb34af..8a4f5ea08c 100644
--- a/packages/storybook/src/nimble/number-field/number-field-matrix.stories.ts
+++ b/packages/storybook/src/nimble/number-field/number-field-matrix.stories.ts
@@ -60,7 +60,7 @@ const component = (
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${numberFieldTag}
-        style="width: 250px; padding: 8px;"
+        style="width: 250px; margin: 8px;"
         value="${() => valueValue}"
         placeholder="${() => placeholderValue}"
         appearance="${() => appearance}"
diff --git a/packages/storybook/src/nimble/rich-text/editor/rich-text-editor-matrix.stories.ts b/packages/storybook/src/nimble/rich-text/editor/rich-text-editor-matrix.stories.ts
index 1a26ba8ee7..f2f5b5471a 100644
--- a/packages/storybook/src/nimble/rich-text/editor/rich-text-editor-matrix.stories.ts
+++ b/packages/storybook/src/nimble/rich-text/editor/rich-text-editor-matrix.stories.ts
@@ -186,7 +186,7 @@ export const richTextEditorSlotButtons: StoryFn = createStory(html`
 
 // prettier-ignore
 const mobileWidthComponent = html`
-    <${richTextEditorTag} style="padding: 20px; width: 360px; height: 250px;">
+    <${richTextEditorTag} style="margin: 20px; width: 360px; height: 250px;">
         <${richTextMentionUsersTag} pattern="^user:(.*)">
             <${mappingUserTag} key="user:1" display-name="John Doe"></${mappingUserTag}>
         </${richTextMentionUsersTag}>
diff --git a/packages/storybook/src/nimble/text-field/text-field-matrix.stories.ts b/packages/storybook/src/nimble/text-field/text-field-matrix.stories.ts
index 42e6545fa1..ee0abc03e2 100644
--- a/packages/storybook/src/nimble/text-field/text-field-matrix.stories.ts
+++ b/packages/storybook/src/nimble/text-field/text-field-matrix.stories.ts
@@ -99,7 +99,7 @@ const component = (
     [valueName, valueValue, placeholderValue]: ValueState
 ): ViewTemplate => html`
     <${textFieldTag}
-        style="width: 350px; padding: 8px;"
+        style="width: 350px; margin: 8px;"
         ?full-bleed="${() => fullBleed}"
         ?disabled="${() => disabled}"
         type="${() => type}"

From 3798b294cf971f78b04991e7485b1bfaf17714f8 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:17:14 -0500
Subject: [PATCH 12/14] Update change message

---
 ...-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json | 2 +-
 ...spright-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json b/change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json
index 13752ce1b1..515943da84 100644
--- a/change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json
+++ b/change/@ni-nimble-components-83fac5bb-4bc6-4067-951d-def8c7404d0c.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "Switch to custom display helper",
+  "comment": "Switch to custom box-sizing: border-box consistently",
   "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
index 6ef4f0c5dc..26a11b9135 100644
--- a/change/@ni-spright-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json
+++ b/change/@ni-spright-components-ba62118f-2f23-45ac-aa65-e24740d4b5d7.json
@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "Switch to custom display helper",
+  "comment": "Switch to custom box-sizing: border-box consistently",
   "packageName": "@ni/spright-components",
   "email": "rajsite@users.noreply.github.com",
   "dependentChangeType": "patch"

From f1b6686d90bbc5731c304e0e15716de0fb7cc558 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Mon, 10 Jun 2024 15:42:00 -0500
Subject: [PATCH 13/14] lint

---
 packages/storybook/src/docs/component-status.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/storybook/src/docs/component-status.stories.ts b/packages/storybook/src/docs/component-status.stories.ts
index a1221659f1..67c4339499 100644
--- a/packages/storybook/src/docs/component-status.stories.ts
+++ b/packages/storybook/src/docs/component-status.stories.ts
@@ -317,7 +317,7 @@ const components = [
         componentName: 'Rich Text Editor',
         componentHref: './?path=/docs/incubating-rich-text-editor--docs',
         designHref:
-        'https://www.figma.com/design/Q5SU1OwrnD08keon3zObRX/SystemLink-orig?node-id=6280-94045&m=dev',
+            'https://www.figma.com/design/Q5SU1OwrnD08keon3zObRX/SystemLink-orig?node-id=6280-94045&m=dev',
         designLabel: 'Figma',
         issueHref: 'https://github.com/ni/nimble/issues/1288',
         issueLabel: 'Issue',
@@ -329,7 +329,7 @@ const components = [
         componentName: 'Rich Text Viewer',
         componentHref: './?path=/docs/incubating-rich-text-viewer--docs',
         designHref:
-        'https://www.figma.com/design/Q5SU1OwrnD08keon3zObRX/SystemLink-orig?node-id=6280-94045&m=dev',
+            'https://www.figma.com/design/Q5SU1OwrnD08keon3zObRX/SystemLink-orig?node-id=6280-94045&m=dev',
         designLabel: 'Figma',
         issueHref: 'https://github.com/ni/nimble/issues/1288',
         issueLabel: 'Issue',

From ef3b7a03d64bf1b16f326927747e0b5abfaaf5fe Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Mon, 10 Jun 2024 16:09:48 -0500
Subject: [PATCH 14/14] Tweaks to error icon styles

---
 packages/nimble-components/src/combobox/styles.ts     | 2 +-
 packages/nimble-components/src/number-field/styles.ts | 2 +-
 packages/storybook/.storybook/preview.js              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nimble-components/src/combobox/styles.ts b/packages/nimble-components/src/combobox/styles.ts
index e2650c2823..168f767ec7 100644
--- a/packages/nimble-components/src/combobox/styles.ts
+++ b/packages/nimble-components/src/combobox/styles.ts
@@ -75,7 +75,7 @@ export const styles = css`
         border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);
         height: calc(${controlHeight} - 12px);
         align-self: center;
-        padding-left: 4px;
+        margin-left: 4px;
     }
 
     .dropdown-button {
diff --git a/packages/nimble-components/src/number-field/styles.ts b/packages/nimble-components/src/number-field/styles.ts
index 73b1600ae3..3622eeff5c 100644
--- a/packages/nimble-components/src/number-field/styles.ts
+++ b/packages/nimble-components/src/number-field/styles.ts
@@ -169,7 +169,7 @@ export const styles = css`
 
     .error-icon {
         order: 1;
-        padding-right: ${smallPadding};
+        margin-right: ${smallPadding};
     }
 `.withBehaviors(
     appearanceBehavior(
diff --git a/packages/storybook/.storybook/preview.js b/packages/storybook/.storybook/preview.js
index 0d09cf0e3b..b361f9744b 100644
--- a/packages/storybook/.storybook/preview.js
+++ b/packages/storybook/.storybook/preview.js
@@ -105,5 +105,5 @@ configureActions({
     depth: 1
 });
 
-// Update the GUID on this line to trigger a turbosnap full rebuild: 9f3ae3e3-8c77-48f2-a209-8c746b76ad49
+// Update the GUID on this line to trigger a turbosnap full rebuild: 48e02ae5-fcf1-48ed-8108-b7a1f54b7b3b
 // See https://www.chromatic.com/docs/turbosnap/#full-rebuilds