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/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%;
@@ -38,10 +38,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;

projects/core/src/forms/control/control.test.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { html } from 'lit';
-import { describe, expect, it, beforeEach, afterEach } from 'vitest';
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
 import { createFixture, removeFixture, elementIsStable, untilEvent } from '@internals/testing';
 import { Control, ControlMessage } from '@nvidia-elements/core/forms';
 import '@nvidia-elements/core/forms/define.js';
@@ -167,6 +167,33 @@ describe(Control.metadata.tag, () => {
     expect(getComputedStyle(message).display).toBe('block');
     expect(validationMessage.hidden).toBe(true);
   });
+
+  it('should not duplicate form reset listeners after reconnect', async () => {
+    removeFixture(fixture);
+    fixture = await createFixture(html`
+      <form>
+        <nve-control>
+          <label>label</label>
+          <input type="text" required />
+          <nve-control-message>message</nve-control-message>
+        </nve-control>
+      </form>
+    `);
+    const form = fixture.querySelector('form');
+    element = fixture.querySelector(Control.metadata.tag);
+    await elementIsStable(element);
+
+    element.remove();
+    form.appendChild(element);
+    await elementIsStable(element);
+    element.shadowRoot!.dispatchEvent(new Event('slotchange'));
+    await elementIsStable(element);
+
+    const requestUpdate = vi.spyOn(element, 'requestUpdate');
+    form.dispatchEvent(new Event('reset'));
+
+    expect(requestUpdate).toHaveBeenCalledTimes(2);
+  });
 });
 
 describe(`${Control.metadata.tag}: custom`, () => {

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

@@ -21,12 +21,20 @@ import {
   setupControlValidationStates,
   setupControlStates,
   setupControlStatusStates,
-  inputQuery
+  inputQuery,
+  type ControlStateCleanup
 } from '../utils/states.js';
 import { setupControlLayoutStates } from '../utils/layout.js';
 import globalStyles from './control.global.css?inline';
 import styles from './control.css?inline';
 
+interface ResettableControl {
+  getAttribute: Element['getAttribute'];
+  value: string;
+}
+
+type ControlInput = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | ResettableControl;
+
 /**
  * @element nve-control
  * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.
@@ -118,7 +126,7 @@ export class Control extends LitElement {
   /** @private */
   declare _internals: ElementInternals;
 
-  #observers: (MutationObserver | ResizeObserver)[] = [];
+  #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];
 
   protected _associateDatalist = true;
 
@@ -181,15 +189,42 @@ export class Control extends LitElement {
 
   /** Resets control value to initial attribute value and clears any active validation rules. */
   reset() {
-    this.input.value = this.input.getAttribute('value') ?? '';
+    this.#resetInputValue(this.input as ControlInput);
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));
   }
 
-  #setupInput() {
-    setupControlValidationStates(this, this.#messages);
+  #resetInputValue(input: ControlInput) {
+    if (input instanceof HTMLSelectElement) {
+      this.#resetSelectValue(input);
+      return;
+    }
+
+    if (this.#isCheckedInput(input)) {
+      input.checked = input.defaultChecked;
+      input.indeterminate = false;
+      return;
+    }
 
+    input.value =
+      input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement
+        ? input.defaultValue
+        : (input.getAttribute('value') ?? '');
+  }
+
+  #resetSelectValue(input: HTMLSelectElement) {
+    const hasDefaultSelection = Array.from(input.options).some(option => option.defaultSelected);
+    Array.from(input.options).forEach(option => (option.selected = option.defaultSelected));
+    if (!input.multiple && !hasDefaultSelection) input.selectedIndex = 0;
+  }
+
+  #isCheckedInput(input: ControlInput): input is HTMLInputElement {
+    return input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'radio');
+  }
+
+  #setupInput() {
     this.#observers.push(
+      ...setupControlValidationStates(this, this.#messages),
       ...setupControlStates(this),
       ...setupControlStatusStates(this, this.#messages),
       setupControlLayoutStates(this),