fix(top-nav): match indicator management strategy from Tabs

Author: Westbrook

packages/top-nav/src/TopNav.ts

@@ -87,7 +87,11 @@ export class TopNav extends SizedMixin(SpectrumElement) {
 
     protected override render(): TemplateResult {
         return html`
-            <div @click=${this.onClick} id="list">
+            <div
+                @click=${this.onClick}
+                id="list"
+                @sp-top-nav-item-contentchange=${this.updateSelectionIndicator}
+            >
                 <slot @slotchange=${this.onSlotChange}></slot>
                 <div
                     id="selection-indicator"

packages/top-nav/src/TopNavItem.ts

@@ -45,6 +45,18 @@ export class TopNavItem extends LikeAnchor(Focusable) {
 
     public value = '';
 
+    protected handleContentChange(): void {
+        /**
+         * When the content in a tab has changed, JS powered layout related to that content may also need to be changed.
+         */
+        this.dispatchEvent(
+            new Event('sp-top-nav-item-contentchange', {
+                bubbles: true,
+                composed: true,
+            })
+        );
+    }
+
     public override get focusElement(): HTMLAnchorElement {
         return this.anchor;
     }
@@ -73,10 +85,22 @@ export class TopNavItem extends LikeAnchor(Focusable) {
 
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
+        // @TODO - refactor this as a ResizeObserver up to `sp-tabs` so that it can be more
+        // resiliant to Tab content changes, as well as other content slotted into the "tablist".
+        this.shadowRoot.addEventListener(
+            'slotchange',
+            this.handleContentChange
+        );
     }
 
     protected override updated(changes: PropertyValues): void {
         super.updated(changes);
+        if (
+            changes.has('label') &&
+            typeof changes.get('label') !== 'undefined'
+        ) {
+            this.handleContentChange();
+        }
         this.value = this.anchor.href;
     }
 }

packages/top-nav/test/top-nav.test.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { elementUpdated, expect, fixture } from '@open-wc/testing';
+import { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';
 
 import { TopNav, TopNavItem } from '@spectrum-web-components/top-nav';
 import { Default, Selected } from '../stories/top-nav.stories.js';
@@ -33,6 +33,28 @@ describe('TopNav', () => {
 
         await expect(el).to.be.accessible();
     });
+    it('updates indicator size when Nav Item conten changes', async () => {
+        const el = await fixture<TopNav>(Selected());
+
+        await elementUpdated(el);
+
+        const indicator = el.shadowRoot.querySelector(
+            '#selection-indicator'
+        ) as HTMLDivElement;
+        const { width: widthStart } = indicator.getBoundingClientRect();
+
+        const selectedItem = el.querySelector(
+            `[href="${el.selected}"]`
+        ) as TopNavItem;
+        selectedItem.innerHTML = '0';
+
+        // Wait for slotchange time before continuing the test.
+        await nextFrame();
+
+        const { width: widthEnd } = indicator.getBoundingClientRect();
+
+        expect(widthStart).to.be.greaterThan(widthEnd);
+    });
 });
 
 describe('TopNavItem', () => {