From d928589a70a2c14d2845ac81863c6f6f56eade1c Mon Sep 17 00:00:00 2001
From: m-akinc <7282195+m-akinc@users.noreply.github.com>
Date: Wed, 8 Jun 2022 13:02:59 -0500
Subject: [PATCH 1/5] Change select test to use IntersectionObserver (#590)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 🤨 Rationale

IntersectionObserver provides a less brittle way for us to test that the select listbox is fully visible within the viewport.

## 👩‍💻 Implementation

Created an IntersectionObserver with a callback that sets a flag if the listbox intersects fully with the viewport. The test clicks the select, waits for rendering (actually just two DOM updates), then asserts that our callback has set the flag.

## 🧪 Testing

Test passes

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
---
 ...-189fc165-f9ed-4054-adf4-14e7b57b34c4.json |  7 +++
 .../src/select/tests/select.spec.ts           | 55 +++++++++++++------
 2 files changed, 44 insertions(+), 18 deletions(-)
 create mode 100644 change/@ni-nimble-components-189fc165-f9ed-4054-adf4-14e7b57b34c4.json

diff --git a/change/@ni-nimble-components-189fc165-f9ed-4054-adf4-14e7b57b34c4.json b/change/@ni-nimble-components-189fc165-f9ed-4054-adf4-14e7b57b34c4.json
new file mode 100644
index 0000000000..4dba31800b
--- /dev/null
+++ b/change/@ni-nimble-components-189fc165-f9ed-4054-adf4-14e7b57b34c4.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Change test to use IntersectionObserver",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/nimble-components/src/select/tests/select.spec.ts b/packages/nimble-components/src/select/tests/select.spec.ts
index 52564ab521..5ed90da457 100644
--- a/packages/nimble-components/src/select/tests/select.spec.ts
+++ b/packages/nimble-components/src/select/tests/select.spec.ts
@@ -24,6 +24,33 @@ async function setup(
     return fixture<Select>(viewTemplate);
 }
 
+async function clickAndWaitForOpen(select: Select): Promise<void> {
+    select.click();
+    // Takes two updates for listbox to be rendered
+    await DOM.nextUpdate();
+    await DOM.nextUpdate();
+}
+
+async function checkFullyInViewport(element: HTMLElement): Promise<boolean> {
+    return new Promise((resolve, _reject) => {
+        const intersectionObserver = new IntersectionObserver(
+            entries => {
+                intersectionObserver.disconnect();
+                if (
+                    entries[0]?.isIntersecting
+                    && entries[0].intersectionRatio === 1.0
+                ) {
+                    resolve(true);
+                } else {
+                    resolve(false);
+                }
+            },
+            { threshold: 1.0 }
+        );
+        intersectionObserver.observe(element);
+    });
+}
+
 describe('Select', () => {
     it('should respect value set before connect is completed', async () => {
         const { element, connect, disconnect } = await setup();
@@ -86,26 +113,18 @@ describe('Select', () => {
             const { element, connect, disconnect } = await setup500Options();
             await connect();
             const listbox: HTMLElement = element.shadowRoot!.querySelector('.listbox')!;
-
-            element.click();
-            await DOM.nextUpdate();
+            await clickAndWaitForOpen(element);
+            // The test is run in an iframe, and the containing window has a Karma header.
+            // It seems the window is sized without accounting for the header, so a header-height's
+            // worth of content is scrolled out of view. The approach we take with the
+            // IntersectionObserver only works if the full iframe is visible, so we scroll the
+            // containing window to the bottom (i.e. scrolling the Karma header out of view and
+            // the bottom of the iframe into view).
+            window.parent.scrollTo(0, window.parent.document.body.scrollHeight);
+            const fullyVisible = await checkFullyInViewport(listbox);
 
             expect(listbox.scrollHeight).toBeGreaterThan(window.innerHeight);
-
-            // listbox will pop up either above or below the element, depending on which has
-            // more space (the element is placed at a random vertical position within the window)
-            const listboxPadding = 4;
-            const controlPlusGapHeight = element.offsetHeight + listboxPadding;
-            const totalEmptyVerticalSpace = window.innerHeight - controlPlusGapHeight;
-            const largestEmptyVerticalSpan = element.offsetTop < totalEmptyVerticalSpace / 2
-                ? window.innerHeight
-                      - element.offsetTop
-                      - controlPlusGapHeight
-                : element.offsetTop - listboxPadding;
-
-            expect(listbox.offsetHeight).toBeLessThanOrEqual(
-                largestEmptyVerticalSpan
-            );
+            expect(fullyVisible).toBe(true);
 
             await disconnect();
         });

From 4a57122c696e208ea56f5816ca98d2914dec6de2 Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Wed, 8 Jun 2022 18:11:53 +0000
Subject: [PATCH 2/5] applying package updates [skip ci]

---
 ...ents-189fc165-f9ed-4054-adf4-14e7b57b34c4.json |  7 -------
 packages/nimble-components/CHANGELOG.json         | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 7 deletions(-)
 delete mode 100644 change/@ni-nimble-components-189fc165-f9ed-4054-adf4-14e7b57b34c4.json

diff --git a/change/@ni-nimble-components-189fc165-f9ed-4054-adf4-14e7b57b34c4.json b/change/@ni-nimble-components-189fc165-f9ed-4054-adf4-14e7b57b34c4.json
deleted file mode 100644
index 4dba31800b..0000000000
--- a/change/@ni-nimble-components-189fc165-f9ed-4054-adf4-14e7b57b34c4.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "none",
-  "comment": "Change test to use IntersectionObserver",
-  "packageName": "@ni/nimble-components",
-  "email": "7282195+m-akinc@users.noreply.github.com",
-  "dependentChangeType": "none"
-}
diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json
index 2a425506e1..62112a4633 100644
--- a/packages/nimble-components/CHANGELOG.json
+++ b/packages/nimble-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-components",
   "entries": [
+    {
+      "date": "Wed, 08 Jun 2022 18:11:53 GMT",
+      "tag": "@ni/nimble-components_v11.0.1",
+      "version": "11.0.1",
+      "comments": {
+        "none": [
+          {
+            "author": "7282195+m-akinc@users.noreply.github.com",
+            "package": "@ni/nimble-components",
+            "commit": "d928589a70a2c14d2845ac81863c6f6f56eade1c",
+            "comment": "Change test to use IntersectionObserver"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 07 Jun 2022 15:43:41 GMT",
       "tag": "@ni/nimble-components_v11.0.1",

From bae0d1346c8e382b703b9c33625291ed5c30c668 Mon Sep 17 00:00:00 2001
From: Milan Raj <rajsite@users.noreply.github.com>
Date: Thu, 9 Jun 2022 11:09:05 -0500
Subject: [PATCH 3/5] Update beachball patch (#594)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 🤨 Rationale

Doing an `npm install` we see the following warning message from `patch-package`:

```
> @ni/nimble@0.0.0 postinstall
> patch-package

patch-package 6.4.7
Applying patches...
beachball@2.20.0 ✔

Warning: patch-package detected a patch file version mismatch

  Don't worry! This is probably fine. The patch was still applied
  successfully. Here's the deets:

  Patch file created for

    beachball@2.20.0

  applied to

    beachball@2.22.4

  At path

    node_modules/beachball

  This warning is just to give you a heads-up. There is a small chance of
  breakage even though the patch was applied successfully. Make sure the package
  still behaves like you expect (you wrote tests, right?) and then run

    patch-package beachball

  to update the version in the patch file name and make this warning go away.

---
patch-package finished with 1 warning(s).

added 17 packages, removed 6 packages, changed 9 packages, and audited 3439 packages in 12s
```

## 👩‍💻 Implementation

Ran the `patch-package beachball` command and submitted the results

## 🧪 Testing

Doing it live.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
---
 patches/{beachball+2.20.0.patch => beachball+2.22.4.patch} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename patches/{beachball+2.20.0.patch => beachball+2.22.4.patch} (100%)

diff --git a/patches/beachball+2.20.0.patch b/patches/beachball+2.22.4.patch
similarity index 100%
rename from patches/beachball+2.20.0.patch
rename to patches/beachball+2.22.4.patch

From c930471568477d0b665ce9039cd13a73511b5c8e Mon Sep 17 00:00:00 2001
From: m-akinc <7282195+m-akinc@users.noreply.github.com>
Date: Mon, 13 Jun 2022 17:26:12 -0500
Subject: [PATCH 4/5] Text/number fields' hover indicator should grow from
 center (#597)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 🤨 Rationale

The text and number fields have a hover indicator of a thicker underline. The design doc dictates that this line should grow from the middle of the control outward. We already do this for the tab and the select.

Note that the design doc also specifies keyboard focus styling (a second bottom border) for text and number fields, but these controls don't have a distinct keyboard focus state. It's the same as clicking in the control. The number field was actually missing the colored underline when focused, so I added that, too.

## 👩‍💻 Implementation

Used the same approach as for the tab and select: a pseudo element (::after) with no content but a bottom border provides the hover indicator. We center it within the control, then animate its width changing from 0 to 100%.

I also tweaked the approach we take for styling the text field. Instead of having a bottom border by default and letting the block and frameless appearances remove it, I start with no border, and let each appearance add any borders necessary. This is a little easier to understand.

## 🧪 Testing

Tested in Storybook

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
---
 ...-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json |   7 +
 .../src/number-field/styles.ts                |  75 +++++++---
 .../src/text-field/styles.ts                  | 129 ++++++++----------
 3 files changed, 116 insertions(+), 95 deletions(-)
 create mode 100644 change/@ni-nimble-components-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json

diff --git a/change/@ni-nimble-components-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json b/change/@ni-nimble-components-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json
new file mode 100644
index 0000000000..7618c030d1
--- /dev/null
+++ b/change/@ni-nimble-components-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Text/Number fields hover indicator grows from middle",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/nimble-components/src/number-field/styles.ts b/packages/nimble-components/src/number-field/styles.ts
index 2b9788edd9..65da2cff1f 100644
--- a/packages/nimble-components/src/number-field/styles.ts
+++ b/packages/nimble-components/src/number-field/styles.ts
@@ -14,7 +14,9 @@ import {
     controlLabelFontColor,
     labelHeight,
     smallDelay,
-    bodyFont
+    bodyFont,
+    failColor,
+    standardPadding
 } from '../theme-provider/design-tokens';
 
 export const styles = css`
@@ -26,6 +28,7 @@ export const styles = css`
         user-select: none;
         color: ${bodyFontColor};
         height: calc(${labelHeight} + ${controlHeight});
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
     }
 
     :host([disabled]) {
@@ -33,32 +36,71 @@ export const styles = css`
         cursor: default;
     }
 
+    .label {
+        display: flex;
+        color: ${controlLabelFontColor};
+        font: ${controlLabelFont};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
+        justify-content: center;
         border-radius: 0px;
         border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
-        padding-bottom: 1px;
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+        gap: calc(${standardPadding} / 2);
+    }
+
+    .root:focus-within {
+        border-bottom-color: ${borderHoverColor};
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+    }
+
+    .root::before {
+        ${/* Empty string causes alignment issue */ ''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    .root::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
     }
 
     @media (prefers-reduced-motion) {
-        .root {
+        .root::after {
             transition-duration: 0s;
         }
     }
 
-    .root:hover {
-        border-bottom: 2px solid ${borderHoverColor};
-        padding-bottom: 0px;
+    :host(.invalid) .root::after {
+        border-bottom-color: ${failColor};
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
-        padding-bottom: 1px;
+    :host(:hover) .root::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover) .root::after {
+        width: 0px;
+    }
+
+    [part='start'] {
+        display: contents;
     }
 
     .control {
@@ -66,11 +108,10 @@ export const styles = css`
         font: inherit;
         background: transparent;
         color: inherit;
-        height: 28px;
+        height: calc(${controlHeight} - ${borderWidth});
         width: 100%;
-        margin-top: auto;
-        margin-bottom: auto;
         border: none;
+        padding: 0px;
     }
 
     .control:hover,
@@ -97,12 +138,6 @@ export const styles = css`
         color: ${bodyDisabledFontColor};
     }
 
-    .label {
-        display: flex;
-        color: ${controlLabelFontColor};
-        font: ${controlLabelFont};
-    }
-
     .controls {
         display: flex;
         flex-direction: column;
diff --git a/packages/nimble-components/src/text-field/styles.ts b/packages/nimble-components/src/text-field/styles.ts
index 0c460d6d5f..aa8b379966 100644
--- a/packages/nimble-components/src/text-field/styles.ts
+++ b/packages/nimble-components/src/text-field/styles.ts
@@ -35,6 +35,10 @@ export const styles = css`
         --webkit-user-select: none;
         color: ${bodyFontColor};
         height: calc(${labelHeight} + ${controlHeight});
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
+        --ni-private-height-within-border: calc(
+            ${controlHeight} - 2 * ${borderWidth}
+        );
     }
 
     :host([disabled]) {
@@ -58,22 +62,10 @@ export const styles = css`
         flex-direction: row;
         border-radius: 0px;
         font: inherit;
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
         align-items: center;
-        --ni-private-hover-bottom-border-width: 2px;
+        justify-content: center;
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
-        border-bottom-width: var(--ni-private-bottom-border-width);
         gap: calc(${standardPadding} / 2);
-        padding-bottom: calc(
-            var(--ni-private-hover-bottom-border-width) -
-                var(--ni-private-bottom-border-width)
-        );
-    }
-
-    @media (prefers-reduced-motion) {
-        .root {
-            transition-duration: 0s;
-        }
     }
 
     :host(.invalid) .root {
@@ -88,21 +80,6 @@ export const styles = css`
         border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
-    .root:hover {
-        --ni-private-bottom-border-width: var(
-            --ni-private-hover-bottom-border-width
-        );
-        border-bottom-color: ${borderHoverColor};
-    }
-
-    :host([readonly]) .root:hover {
-        --ni-private-bottom-border-width: 1px;
-    }
-
-    :host([disabled]) .root:hover {
-        --ni-private-bottom-border-width: 1px;
-    }
-
     .root:focus-within {
         border-bottom-color: ${borderHoverColor};
     }
@@ -150,10 +127,7 @@ export const styles = css`
         background: transparent;
         color: inherit;
         padding: 0px;
-        height: calc(
-            ${controlHeight} - ${borderWidth} -
-                var(--ni-private-hover-bottom-border-width)
-        );
+        height: ${controlHeight};
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
@@ -198,6 +172,36 @@ export const styles = css`
         display: contents;
     }
 
+    [part='end']::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        [part='end']::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(.invalid) [part='end']::after {
+        border-bottom-color: ${failColor};
+    }
+
+    :host(:hover) [part='end']::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover) [part='end']::after,
+    :host([readonly]:hover) [part='end']::after {
+        width: 0px;
+    }
+
     .error-content {
         display: none;
     }
@@ -256,19 +260,15 @@ export const styles = css`
                     TextFieldAppearance.underline,
                     css`
             .root {
-                --ni-private-bottom-border-width: 1px;
+                border-bottom-width: ${borderWidth};
+            }
+
+            .control {
+                height: var(--ni-private-height-within-border);
                 padding-top: ${borderWidth};
                 padding-left: ${borderWidth};
                 padding-right: ${borderWidth};
             }
-
-            :host([disabled]) .root {
-                border-color: rgba(${borderRgbPartialColor}, 0.1);
-            }
-
-            :host([disabled]) .root:hover {
-                --ni-private-bottom-border-width: 1px;
-            }
         `
                 ),
                 appearanceBehavior(
@@ -276,30 +276,21 @@ export const styles = css`
                     css`
             .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.1);
-                --ni-private-bottom-border-width: 0px;
-                padding-top: ${borderWidth};
-                padding-left: ${borderWidth};
-                padding-right: ${borderWidth};
             }
 
-            .root:focus-within {
-                --ni-private-bottom-border-width: 1px;
-            }
-
-            .root:focus-within:hover {
-                --ni-private-bottom-border-width: var(
-                    --ni-private-hover-bottom-border-width
-                );
+            .control {
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
             }
 
+            .root:focus-within,
             :host(.invalid) .root {
-                --ni-private-bottom-border-width: 1px;
+                border-bottom-width: ${borderWidth};
             }
 
-            :host(.invalid) .root:hover {
-                --ni-private-bottom-border-width: var(
-                    --ni-private-hover-bottom-border-width
-                );
+            .root:focus-within .control,
+            :host(.invalid) .control {
+                height: calc(${controlHeight} - ${borderWidth});
             }
 
             :host([readonly]) .root {
@@ -310,23 +301,17 @@ export const styles = css`
             :host([disabled]) .root {
                 background-color: rgba(${borderRgbPartialColor}, 0.07);
             }
-
-            :host([disabled]) .root:hover {
-                --ni-private-bottom-border-width: 0px;
-            }
-
-            :host(.invalid[disabled]) .root {
-                --ni-private-bottom-border-width: 1px;
-            }
         `
                 ),
                 appearanceBehavior(
                     TextFieldAppearance.outline,
                     css`
             .root {
-                --ni-private-bottom-border-width: 1px;
                 border-width: ${borderWidth};
-                border-bottom-width: var(--ni-private-bottom-border-width);
+            }
+
+            .control {
+                height: var(--ni-private-height-within-border);
             }
 
             :host(.invalid) .errortext {
@@ -337,9 +322,7 @@ export const styles = css`
                 appearanceBehavior(
                     TextFieldAppearance.frameless,
                     css`
-            .root {
-                --ni-private-bottom-border-width: 0px;
-                padding-top: ${borderWidth};
+            .control {
                 padding-left: ${borderWidth};
                 padding-right: ${borderWidth};
             }
@@ -347,10 +330,6 @@ export const styles = css`
             :host([readonly]) .root {
                 border-color: transparent;
             }
-
-            .root:hover {
-                --ni-private-bottom-border-width: 0px;
-            }
         `
                 ),
                 themeBehavior(

From 34452e51ee7d3a56df6e2f30ebdb38760ffd861d Mon Sep 17 00:00:00 2001
From: rajsite <rajsite@users.noreply.github.com>
Date: Mon, 13 Jun 2022 22:34:57 +0000
Subject: [PATCH 5/5] applying package updates [skip ci]

---
 .../projects/ni/nimble-angular/CHANGELOG.json     | 15 +++++++++++++++
 .../projects/ni/nimble-angular/CHANGELOG.md       | 10 +++++++++-
 .../projects/ni/nimble-angular/package.json       |  4 ++--
 ...ents-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json |  7 -------
 package-lock.json                                 |  8 ++++----
 packages/nimble-blazor/package.json               |  2 +-
 packages/nimble-components/CHANGELOG.json         | 15 +++++++++++++++
 packages/nimble-components/CHANGELOG.md           | 10 +++++++++-
 packages/nimble-components/package.json           |  2 +-
 9 files changed, 56 insertions(+), 17 deletions(-)
 delete mode 100644 change/@ni-nimble-components-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json

diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json
index 5433d8a700..0279762b7f 100644
--- a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json
+++ b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Mon, 13 Jun 2022 22:34:57 GMT",
+      "tag": "@ni/nimble-angular_v7.0.2",
+      "version": "7.0.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v11.0.2",
+            "commit": "c930471568477d0b665ce9039cd13a73511b5c8e"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 07 Jun 2022 15:43:41 GMT",
       "tag": "@ni/nimble-angular_v7.0.1",
diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md
index d4902fb491..88c9d828ba 100644
--- a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md
+++ b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-angular
 
-This log was last generated on Tue, 07 Jun 2022 15:43:41 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Jun 2022 22:34:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 7.0.2
+
+Mon, 13 Jun 2022 22:34:57 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v11.0.2
+
 ## 7.0.1
 
 Tue, 07 Jun 2022 15:43:41 GMT
diff --git a/angular-workspace/projects/ni/nimble-angular/package.json b/angular-workspace/projects/ni/nimble-angular/package.json
index 3c4ea7dc0b..ebcd6d6b5d 100644
--- a/angular-workspace/projects/ni/nimble-angular/package.json
+++ b/angular-workspace/projects/ni/nimble-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "cd ../../../ && npm run build:library && cd dist/ni/nimble-angular && npm publish"
@@ -22,7 +22,7 @@
     "@angular/core": "^12.1.0",
     "@angular/forms": "^12.1.0",
     "@angular/router": "^12.1.0",
-    "@ni/nimble-components": "^11.0.1"
+    "@ni/nimble-components": "^11.0.2"
   },
   "dependencies": {
     "tslib": "^2.2.0"
diff --git a/change/@ni-nimble-components-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json b/change/@ni-nimble-components-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json
deleted file mode 100644
index 7618c030d1..0000000000
--- a/change/@ni-nimble-components-51eaae06-fb48-4a4d-a3c0-3b8ede25eee5.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "type": "patch",
-  "comment": "Text/Number fields hover indicator grows from middle",
-  "packageName": "@ni/nimble-components",
-  "email": "7282195+m-akinc@users.noreply.github.com",
-  "dependentChangeType": "patch"
-}
diff --git a/package-lock.json b/package-lock.json
index 578e6e72a7..f70dd2b57f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -66,7 +66,7 @@
     },
     "angular-workspace/projects/ni/nimble-angular": {
       "name": "@ni/nimble-angular",
-      "version": "7.0.1",
+      "version": "7.0.2",
       "license": "UNLICENSED",
       "dependencies": {
         "tslib": "^2.2.0"
@@ -76,7 +76,7 @@
         "@angular/core": "^12.1.0",
         "@angular/forms": "^12.1.0",
         "@angular/router": "^12.1.0",
-        "@ni/nimble-components": "^11.0.1"
+        "@ni/nimble-components": "^11.0.2"
       }
     },
     "node_modules/@actions/core": {
@@ -41988,7 +41988,7 @@
     },
     "packages/nimble-blazor": {
       "name": "@ni/nimble-blazor",
-      "version": "5.0.1",
+      "version": "5.0.2",
       "license": "UNLICENSED",
       "devDependencies": {
         "@microsoft/fast-web-utilities": "^5.4.1",
@@ -42044,7 +42044,7 @@
     },
     "packages/nimble-components": {
       "name": "@ni/nimble-components",
-      "version": "11.0.1",
+      "version": "11.0.2",
       "license": "UNLICENSED",
       "dependencies": {
         "@microsoft/fast-animation": "^4.2.2",
diff --git a/packages/nimble-blazor/package.json b/packages/nimble-blazor/package.json
index 080f780909..1781a6dc07 100644
--- a/packages/nimble-blazor/package.json
+++ b/packages/nimble-blazor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-blazor",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Blazor components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build:release && npm run build:client",
diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json
index 62112a4633..88e328aa50 100644
--- a/packages/nimble-components/CHANGELOG.json
+++ b/packages/nimble-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-components",
   "entries": [
+    {
+      "date": "Mon, 13 Jun 2022 22:34:57 GMT",
+      "tag": "@ni/nimble-components_v11.0.2",
+      "version": "11.0.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "7282195+m-akinc@users.noreply.github.com",
+            "package": "@ni/nimble-components",
+            "commit": "c930471568477d0b665ce9039cd13a73511b5c8e",
+            "comment": "Text/Number fields hover indicator grows from middle"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 08 Jun 2022 18:11:53 GMT",
       "tag": "@ni/nimble-components_v11.0.1",
diff --git a/packages/nimble-components/CHANGELOG.md b/packages/nimble-components/CHANGELOG.md
index f8f4e297b3..2684dd7269 100644
--- a/packages/nimble-components/CHANGELOG.md
+++ b/packages/nimble-components/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-components
 
-This log was last generated on Tue, 07 Jun 2022 15:43:41 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Jun 2022 22:34:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 11.0.2
+
+Mon, 13 Jun 2022 22:34:57 GMT
+
+### Patches
+
+- Text/Number fields hover indicator grows from middle ([ni/nimble@c930471](https://github.com/ni/nimble/commit/c930471568477d0b665ce9039cd13a73511b5c8e))
+
 ## 11.0.1
 
 Tue, 07 Jun 2022 15:43:41 GMT
diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json
index 311070d073..b8623daa4c 100644
--- a/packages/nimble-components/package.json
+++ b/packages/nimble-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",