fix(core): memory leaks from connected callback states

- Added tests to ensure that the checked state of checkboxes and radio buttons resets to their native defaults upon calling the reset method.
- Improved the handling of observers in form controls to prevent duplication after reconnecting.
- Enhanced the Select component to stop observing removed options and to reset selected options to their native defaults.
- Added accessibility tests for the PagePanel component to ensure compliance with axe standards.

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/core/src/checkbox/checkbox.test.ts

@@ -89,6 +89,17 @@ describe(`${Checkbox.metadata.tag} - control base behavior`, () => {
     expect((e as Event).composed).toBe(true);
   });
 
+  it('should reset checked state to the native default', async () => {
+    const input = fixture.querySelector('input');
+    input.defaultChecked = true;
+    input.checked = false;
+
+    element.reset();
+    await elementIsStable(element);
+
+    expect(input.checked).toBe(true);
+  });
+
   it('should disconnect observers when removed from DOM', async () => {
     const input = fixture.querySelector('input');
     expect(element.matches(':state(checked)')).toBe(false);

projects/core/src/combobox/combobox.test.lighthouse.ts

@@ -25,7 +25,7 @@ describe('combobox lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(36);
+    expect(report.payload.javascript.kb).toBeLessThan(36.1);
   });
 
   test('combobox multi select with large dataset should meet lighthouse benchmarks', async () => {
@@ -42,6 +42,6 @@ describe('combobox lighthouse report', () => {
 
     expect(report.scores.performance).toBeGreaterThanOrEqual(96);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(36);
+    expect(report.payload.javascript.kb).toBeLessThan(36.1);
   });
 });

projects/core/src/dialog/dialog.test.lighthouse.ts

@@ -25,6 +25,6 @@ describe('dialog lighthouse report', () => {
     expect(report.scores.performance).toBeGreaterThan(97); // bfcache
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(24.8);
+    expect(report.payload.javascript.kb).toBeLessThan(24.9);
   });
 });

projects/core/src/drawer/drawer.test.lighthouse.ts

@@ -18,6 +18,6 @@ describe('drawer lighthouse report', () => {
     expect(report.scores.performance).toBeGreaterThan(98); // bfcache
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(25.3);
+    expect(report.payload.javascript.kb).toBeLessThan(25.4);
   });
 });

projects/core/src/dropdown-group/dropdown-group.test.lighthouse.ts

@@ -29,6 +29,6 @@ describe('dropdown-group lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(24.7);
+    expect(report.payload.javascript.kb).toBeLessThan(25);
   });
 });

projects/core/src/format-relative-time/format-relative-time.test.ts

@@ -408,5 +408,19 @@ describe(FormatRelativeTime.metadata.tag, () => {
       const time = element.shadowRoot!.querySelector('time');
       expect(time!.textContent!.trim()).toBe('2023-07-27T12:00:00.000Z');
     });
+
+    it('should fall back to raw string for relative values outside Intl range', async () => {
+      vi.useRealTimers();
+      const now = vi.spyOn(Date, 'now').mockReturnValue(Number.NEGATIVE_INFINITY);
+
+      element.date = '2023-07-27T12:00:00.000Z';
+      element.requestUpdate();
+      await elementIsStable(element);
+
+      const time = element.shadowRoot!.querySelector('time');
+      expect(time!.textContent!.trim()).toBe('2023-07-27T12:00:00.000Z');
+
+      now.mockRestore();
+    });
   });
 });

projects/core/src/format-relative-time/format-relative-time.ts

@@ -95,7 +95,7 @@ export class FormatRelativeTime extends LitElement {
       const value = Math.round(absDiff / UNIT_DIVISORS[unit]);
       if (value < max) return { value: sign * value, unit };
     }
-    throw new Error('format-relative-time: no relative time threshold matched');
+    return { value: sign * Math.round(absDiff / UNIT_DIVISORS.year), unit: 'year' };
   }
 
   #computeExplicitUnit(diffMs: number, unit: TimeUnitOption): number {

projects/core/src/forms/control-group/control-group.css

@@ -5,7 +5,7 @@
   --color: var(--nve-sys-interaction-field-color);
   --opacity: 1;
   --label-color: var(--nve-sys-interaction-field-color);
-  --label-text-transform: capitalize;
+  --label-text-transform: none;
   --label-font-weight: var(--nve-ref-font-weight-medium);
   --label-font-size: var(--nve-ref-font-size-100);
   --_label-width: var(--label-width, 180px);

projects/core/src/forms/control-group/control-group.ts

@@ -12,7 +12,12 @@ import {
   associateControlGroup
 } from '@nvidia-elements/core/internal';
 import type { ControlMessage } from '../control-message/control-message.js';
-import { setupControlStatusStates, setupControlGroupStates, inputQuery } from '../utils/states.js';
+import {
+  setupControlStatusStates,
+  setupControlGroupStates,
+  inputQuery,
+  type ControlStateCleanup
+} from '../utils/states.js';
 import { setupControlLayoutStates } from '../utils/layout.js';
 import styles from './control-group.css?inline';
 
@@ -53,7 +58,7 @@ export class ControlGroup extends LitElement {
     return this.querySelectorAll ? Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')) : [];
   }
 
-  #observers: (MutationObserver | ResizeObserver)[] = [];
+  #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];
 
   static styles = useStyles([styles]);
 

projects/core/src/forms/control/control.css

@@ -6,7 +6,7 @@
   --accent-color: var(--nve-sys-accent-secondary-background);
   --color: var(--nve-sys-interaction-field-color);
   --label-color: var(--nve-sys-interaction-field-color);
-  --label-text-transform: capitalize;
+  --label-text-transform: none;
   --label-font-weight: var(--nve-ref-font-weight-medium);
   --label-font-size: var(--nve-ref-font-size-100);
   --control-width: 100%;
@@ -18,10 +18,6 @@
   contain: content;
 }
 
-:host([nve-control='inline']) {
-  --control-height: auto;
-}
-
 ::slotted(*) {
   color-scheme: var(--nve-sys-color-scheme);
   font-family: inherit;
@@ -38,10 +34,6 @@
   align-self: center !important;
 }
 
-::slotted(label::first-letter) {
-  text-transform: capitalize;
-}
-
 :host(:state(disabled)),
 :host(:state(disabled)) ::slotted(nve-control-message:not([status])) {
   --cursor: not-allowed;
@@ -194,6 +186,9 @@ slot[name='messages'] {
 
 /** inline controls */
 :host([nve-control='inline']) {
+  --control-height: auto;
+  width: fit-content;
+
   [internal-host] {
     grid-template-areas: 'input input input';