Repository: wagtail/wagtail
File: client/src/controllers/RevealController.ts (TypeScript)

Code before:
    store: { default: '', type: String },
  };

  declare closedValue: boolean;
  declare peekingValue: boolean;

  declare readonly closedClass: string;
  declare readonly closedClasses: string[];
  declare readonly closeIconClass: string;
  declare readonly contentTarget: HTMLElement;
  declare readonly contentTargets: HTMLElement[];
  declare readonly hasClosedClass: boolean;
  declare readonly hasCloseIconClass: string;
  declare readonly hasContentTarget: boolean;
  declare readonly hasOpenIconClass: string;
  declare readonly hasToggleTarget: boolean;
  declare readonly initialClasses: string[];
  declare readonly openedClasses: string[];
  declare readonly openedContentClasses: string[];
  declare readonly openIconClass: string;
  declare readonly peekTargetValue: string;
  declare readonly storeValue: string;
  declare readonly toggleTarget: HTMLButtonElement;
  declare readonly toggleTargets: HTMLButtonElement[];

  cleanUpPeekListener?: () => void;

  connect() {
    // If peeking is being used, set up listener and its removal on disconnect

    const peekZone = this.peekTargetValue
      ? this.element.closest<HTMLElement>(this.peekTargetValue)
      : false;

    if (peekZone) {
      const onMouseLeave = () => {
        if (this.peekingValue) this.close();
        this.peekingValue = false;
      };
      peekZone.addEventListener('mouseleave', onMouseLeave, { passive: true });
      this.cleanUpPeekListener = () => {
        peekZone.removeEventListener('mouseleave', onMouseLeave);
      };
    }

    // Dispatch initial event & class removal after timeout (allowing other JS content to load)

    new Promise((resolve) => {
      setTimeout(resolve);
    }).then(() => {
      this.dispatch('ready', {

Review comment (refactor):
Let's update this to `storageKeyValue` and while we are at it, do you mind doing a bit of a clean up of these, adding JSDoc.

See if this makes sense, this should replace the whole block after the `values` and before the `cleanUpPeekListener`. Also, there's a bunch of items unused, let's just remove them (historically we added more for future usage but it's just confusing).

```ts

  /** Value to track whether the reveal content should be closed. */
  declare closedValue: boolean;
  /** Value to track whether the content is currently being peeked (mouseover). */
  declare peekingValue: boolean;

  declare readonly closedClasses: string[];
  declare readonly closeIconClass: string;
  declare readonly hasCloseIconClass: string;
  declare readonly hasOpenIconClass: string;
  declare readonly openedClasses: string[];
  declare readonly openedContentClasses: string[];
  declare readonly openIconClass: string;

  /** Content element target, to be shown/hidden with classes when opened/closed. */
  declare readonly contentTargets: HTMLElement[];
  /** Global selector string to be used to determine the container to add the mouseleave listener to. */
  declare readonly peekTargetValue: string;
  /** Local storage key to be used to backup the open state of this controller,
   * this can be unique or shared across multiple controllers, it uses the controller identifier for the base.
   * If not provided, the controller will not attempt to store the state to local storage. */
  declare readonly storageKeyValue: string;
  /** Toggle button element(s) to have their classes and aria attributes updated. */
  declare readonly toggleTargets: HTMLButtonElement[];
```

Code after:
 * ```
 */
export class RevealController extends Controller<HTMLElement> {
  static classes = [
    'closed',
    'closeIcon',
    'opened',
    'openedContent',
    'openIcon',
  ];

  static targets = ['content', 'toggle'];

  static values = {
    closed: { default: false, type: Boolean },
    peeking: { default: false, type: Boolean },
    peekTarget: { default: '', type: String },
    storageKey: { default: '', type: String },
  };

  declare closedValue: boolean;
  declare peekingValue: boolean;

  declare readonly closedClasses: string[];
  declare readonly closeIconClass: string;
  declare readonly hasCloseIconClass: string;
  declare readonly hasOpenIconClass: string;
  declare readonly openedClasses: string[];
  declare readonly openedContentClasses: string[];
  declare readonly openIconClass: string;

  /** Content element target, to be shown/hidden with classes when opened/closed. */
  declare readonly contentTargets: HTMLElement[];
  /** Global selector string to be used to determine the container to add the mouseleave listener to. */
  declare readonly peekTargetValue: string;
  /**  Local storage key to be used to backup the open state of this controller, this can be unique or shared across multiple controllers, it uses the controller identifier for the base.If not provided, the controller will not attempt to store the state to local storage. */
  declare readonly storageKeyValue: string;
  /**  Toggle button element(s) to have their classes and aria attributes updated. */
  declare readonly toggleTargets: HTMLButtonElement[];

  cleanUpPeekListener?: () => void;

  /**
   * Connect the controller, setting up the peeking listener if required,
   * and setting the initial state based on the stored value if available.
   *
   * Finally, dispatch the ready event to signal the controller is ready.
   */
  connect() {
    // If peeking is being used, set up listener and its removal on disconnect