@internetarchive/modal-manager 2.0.4-alpha-webdev7960.0 → 2.0.4

package/src/assets/ia-logo-icon.ts

@@ -1,30 +1,30 @@
-import { html } from 'lit';
-
-export default html`
-  <svg
-    class="ia-logo"
-    viewBox="0 0 27 30"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby="logoTitleID logoDescID"
-  >
-    <title id="logoTitleID">Internet Archive logo</title>
-    <desc id="logoDescID">
-      A line drawing of the Internet Archive headquarters building façade.
-    </desc>
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <mask id="mask-2" class="fill-color">
-        <path
-          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
-          id="path-1"
-        ></path>
-      </mask>
-      <use class="fill-color" xlink:href="#path-1"></use>
-      <g mask="url(#mask-2)" class="fill-color">
-        <path
-          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
-          id="swatch"
-        ></path>
-      </g>
-    </g>
-  </svg>
-`;
+import { html } from 'lit';
+
+export default html`
+  <svg
+    class="ia-logo"
+    viewBox="0 0 27 30"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="logoTitleID logoDescID"
+  >
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">
+      A line drawing of the Internet Archive headquarters building façade.
+    </desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" class="fill-color">
+        <path
+          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
+          id="path-1"
+        ></path>
+      </mask>
+      <use class="fill-color" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" class="fill-color">
+        <path
+          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
+          id="swatch"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;

package/src/modal-config.ts

@@ -1,133 +1,133 @@
-import { TemplateResult } from 'lit';
-
-/**
- * Configuration to show a modal
- *
- * @export
- * @class ModalConfig
- */
-export class ModalConfig {
-  /**
-   * The title that shows in the header
-   *
-   * @type {(TemplateResult | undefined)}
-   * @memberof ModalConfig
-   */
-  title?: TemplateResult;
-
-  /**
-   * The subtitle shown in the header under the title
-   *
-   * @type {(TemplateResult | undefined)}
-   * @memberof ModalConfig
-   */
-  subtitle?: TemplateResult;
-
-  /**
-   * The headline shown at the top of the content section
-   *
-   * @type {(TemplateResult | undefined)}
-   * @memberof ModalConfig
-   */
-  headline?: TemplateResult;
-
-  /**
-   * The text shown below the headline in the content section
-   *
-   * @type {(TemplateResult | undefined)}
-   * @memberof ModalConfig
-   */
-  message?: TemplateResult;
-
-  /**
-   * The background color of the header
-   *
-   * @memberof ModalConfig
-   */
-  headerColor: string;
-
-  /**
-   * The background color of the body
-   *
-   * @memberof ModalConfig
-   */
-  bodyColor: string;
-
-  /**
-   * Show or hide the processing indicator
-   *
-   * @memberof ModalConfig
-   */
-  showProcessingIndicator: boolean;
-
-  /**
-   * Set the processing image mode, currently `processing` or `complete`
-   *
-   * @memberof ModalConfig
-   */
-  processingImageMode: 'processing' | 'complete';
-
-  /**
-   * Show the close button
-   *
-   * @memberof ModalConfig
-   */
-  showCloseButton: boolean;
-
-  /**
-   * Show the left nav button
-   *
-   * @memberof ModalConfig
-   */
-  showLeftNavButton: boolean;
-
-  /**
-   * Left nav button text
-   */
-  leftNavButtonText: string;
-
-  /**
-   * Show the close button
-   *
-   * @memberof ModalConfig
-   */
-  showHeaderLogo: boolean;
-
-  /**
-   * Close the modal if the user taps on the background
-   *
-   * @memberof ModalConfig
-   */
-  closeOnBackdropClick: boolean;
-
-  constructor(options?: {
-    title?: TemplateResult;
-    subtitle?: TemplateResult;
-    headline?: TemplateResult;
-    message?: TemplateResult;
-    headerColor?: string;
-    bodyColor?: string;
-    showProcessingIndicator?: boolean;
-    processingImageMode?: 'processing' | 'complete';
-    showCloseButton?: boolean;
-    showLeftNavButton?: boolean;
-    leftNavButtonText?: string;
-    showHeaderLogo?: boolean;
-    closeOnBackdropClick?: boolean;
-  }) {
-    this.title = options?.title;
-    this.subtitle = options?.subtitle;
-    this.headline = options?.headline;
-    this.message = options?.message;
-
-    this.headerColor = options?.headerColor ?? '#55A183';
-    this.bodyColor = options?.bodyColor ?? '#fbfbfd';
-    this.showProcessingIndicator = options?.showProcessingIndicator ?? false;
-    this.processingImageMode = options?.processingImageMode ?? 'complete';
-    this.showCloseButton = options?.showCloseButton ?? true;
-    this.showLeftNavButton = options?.showLeftNavButton ?? false;
-    this.leftNavButtonText = options?.leftNavButtonText ?? '';
-    this.showHeaderLogo = options?.showHeaderLogo ?? true;
-    this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;
-  }
-}
+import { TemplateResult } from 'lit';
+
+/**
+ * Configuration to show a modal
+ *
+ * @export
+ * @class ModalConfig
+ */
+export class ModalConfig {
+  /**
+   * The title that shows in the header
+   *
+   * @type {(TemplateResult | undefined)}
+   * @memberof ModalConfig
+   */
+  title?: TemplateResult;
+
+  /**
+   * The subtitle shown in the header under the title
+   *
+   * @type {(TemplateResult | undefined)}
+   * @memberof ModalConfig
+   */
+  subtitle?: TemplateResult;
+
+  /**
+   * The headline shown at the top of the content section
+   *
+   * @type {(TemplateResult | undefined)}
+   * @memberof ModalConfig
+   */
+  headline?: TemplateResult;
+
+  /**
+   * The text shown below the headline in the content section
+   *
+   * @type {(TemplateResult | undefined)}
+   * @memberof ModalConfig
+   */
+  message?: TemplateResult;
+
+  /**
+   * The background color of the header
+   *
+   * @memberof ModalConfig
+   */
+  headerColor: string;
+
+  /**
+   * The background color of the body
+   *
+   * @memberof ModalConfig
+   */
+  bodyColor: string;
+
+  /**
+   * Show or hide the processing indicator
+   *
+   * @memberof ModalConfig
+   */
+  showProcessingIndicator: boolean;
+
+  /**
+   * Set the processing image mode, currently `processing` or `complete`
+   *
+   * @memberof ModalConfig
+   */
+  processingImageMode: 'processing' | 'complete';
+
+  /**
+   * Show the close button
+   *
+   * @memberof ModalConfig
+   */
+  showCloseButton: boolean;
+
+  /**
+   * Show the left nav button
+   *
+   * @memberof ModalConfig
+   */
+  showLeftNavButton: boolean;
+
+  /**
+   * Left nav button text
+   */
+  leftNavButtonText: string;
+
+  /**
+   * Show the close button
+   *
+   * @memberof ModalConfig
+   */
+  showHeaderLogo: boolean;
+
+  /**
+   * Close the modal if the user taps on the background
+   *
+   * @memberof ModalConfig
+   */
+  closeOnBackdropClick: boolean;
+
+  constructor(options?: {
+    title?: TemplateResult;
+    subtitle?: TemplateResult;
+    headline?: TemplateResult;
+    message?: TemplateResult;
+    headerColor?: string;
+    bodyColor?: string;
+    showProcessingIndicator?: boolean;
+    processingImageMode?: 'processing' | 'complete';
+    showCloseButton?: boolean;
+    showLeftNavButton?: boolean;
+    leftNavButtonText?: string;
+    showHeaderLogo?: boolean;
+    closeOnBackdropClick?: boolean;
+  }) {
+    this.title = options?.title;
+    this.subtitle = options?.subtitle;
+    this.headline = options?.headline;
+    this.message = options?.message;
+
+    this.headerColor = options?.headerColor ?? '#55A183';
+    this.bodyColor = options?.bodyColor ?? '#fbfbfd';
+    this.showProcessingIndicator = options?.showProcessingIndicator ?? false;
+    this.processingImageMode = options?.processingImageMode ?? 'complete';
+    this.showCloseButton = options?.showCloseButton ?? true;
+    this.showLeftNavButton = options?.showLeftNavButton ?? false;
+    this.leftNavButtonText = options?.leftNavButtonText ?? '';
+    this.showHeaderLogo = options?.showHeaderLogo ?? true;
+    this.closeOnBackdropClick = options?.closeOnBackdropClick ?? true;
+  }
+}

package/src/modal-manager-host-bridge-interface.ts

@@ -1,13 +1,13 @@
-import { ModalManagerMode } from './modal-manager-mode';
-
-/**
- * The ModalManagerHostBridgeInterface is a delegate interface for
- * the host to implement environment-specific changes when the modal
- * is open or closed.
- *
- * A default implementation is provided, but can be overridden if
- * it does not work for the environment.
- */
-export interface ModalManagerHostBridgeInterface {
-  handleModeChange(mode: ModalManagerMode): void;
-}
+import { ModalManagerMode } from './modal-manager-mode';
+
+/**
+ * The ModalManagerHostBridgeInterface is a delegate interface for
+ * the host to implement environment-specific changes when the modal
+ * is open or closed.
+ *
+ * A default implementation is provided, but can be overridden if
+ * it does not work for the environment.
+ */
+export interface ModalManagerHostBridgeInterface {
+  handleModeChange(mode: ModalManagerMode): void;
+}

package/src/modal-manager-host-bridge.ts

@@ -1,82 +1,82 @@
-import { throttle } from 'throttle-debounce';
-
-import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
-import { ModalManagerInterface } from './modal-manager-interface';
-import { ModalManagerMode } from './modal-manager-mode';
-
-/**
- * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
- * host that sets up environment-specific changes when the modal opens and closes.
- *
- * For instance, when the modal opens, this adds a class to the `<body>` tag for styling
- * and adds a `resize` listener to fix a Safari shadow root issue.
- *
- * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
- * them into the `ModalManager` if this one does not work for their environment.
- *
- * @export
- * @class ModalManagerHostBridge
- * @implements {ModalManagerHostBridgeInterface}
- */
-export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
-  private modalManager: ModalManagerInterface;
-
-  constructor(modalManager: ModalManagerInterface) {
-    this.modalManager = modalManager;
-  }
-
-  /**
-   * Handle the mode change
-   *
-   * @private
-   * @memberof ModalManager
-   */
-  handleModeChange(mode: ModalManagerMode): void {
-    switch (mode) {
-      case ModalManagerMode.Open:
-        this.startResizeListener();
-        this.stopDocumentScroll();
-        break;
-      case ModalManagerMode.Closed:
-        this.stopResizeListener();
-        this.resumeDocumentScroll();
-        break;
-    }
-  }
-
-  private windowResizeThrottler: throttle<() => void> = throttle(
-    100,
-    this.updateModalContainerHeight,
-    { noLeading: false, noTrailing: false }
-  ).bind(this);
-
-  // This is a workaround for Safari. Safari does not update shadowRoot elements calculated
-  // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
-  // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
-  // this correctly.
-  // It doesn't matter what css variable you set, it is just forcing Safari to do an update.
-  // Also note that the value has to change on each update for Safari to do the update,
-  // ie. you can't just set a static value.
-  private updateModalContainerHeight(): void {
-    this.modalManager.style.setProperty(
-      '--containerHeight',
-      `${window.innerHeight}px`
-    );
-  }
-
-  private stopDocumentScroll(): void {
-    document.body.classList.add('modal-manager-open');
-  }
-
-  private resumeDocumentScroll(): void {
-    document.body.classList.remove('modal-manager-open');
-  }
-
-  private startResizeListener(): void {
-    window.addEventListener('resize', this.windowResizeThrottler);
-  }
-
-  private stopResizeListener(): void {
-    window.removeEventListener('resize', this.windowResizeThrottler);
-  }
-}
+import { throttle } from 'throttle-debounce';
+
+import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
+import { ModalManagerInterface } from './modal-manager-interface';
+import { ModalManagerMode } from './modal-manager-mode';
+
+/**
+ * The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
+ * host that sets up environment-specific changes when the modal opens and closes.
+ *
+ * For instance, when the modal opens, this adds a class to the `<body>` tag for styling
+ * and adds a `resize` listener to fix a Safari shadow root issue.
+ *
+ * Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
+ * them into the `ModalManager` if this one does not work for their environment.
+ *
+ * @export
+ * @class ModalManagerHostBridge
+ * @implements {ModalManagerHostBridgeInterface}
+ */
+export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
+  private modalManager: ModalManagerInterface;
+
+  constructor(modalManager: ModalManagerInterface) {
+    this.modalManager = modalManager;
+  }
+
+  /**
+   * Handle the mode change
+   *
+   * @private
+   * @memberof ModalManager
+   */
+  handleModeChange(mode: ModalManagerMode): void {
+    switch (mode) {
+      case ModalManagerMode.Open:
+        this.startResizeListener();
+        this.stopDocumentScroll();
+        break;
+      case ModalManagerMode.Closed:
+        this.stopResizeListener();
+        this.resumeDocumentScroll();
+        break;
+    }
+  }
+
+  private windowResizeThrottler: throttle<() => void> = throttle(
+    100,
+    this.updateModalContainerHeight,
+    { noLeading: false, noTrailing: false }
+  ).bind(this);
+
+  // This is a workaround for Safari. Safari does not update shadowRoot elements calculated
+  // based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
+  // but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
+  // this correctly.
+  // It doesn't matter what css variable you set, it is just forcing Safari to do an update.
+  // Also note that the value has to change on each update for Safari to do the update,
+  // ie. you can't just set a static value.
+  private updateModalContainerHeight(): void {
+    this.modalManager.style.setProperty(
+      '--containerHeight',
+      `${window.innerHeight}px`
+    );
+  }
+
+  private stopDocumentScroll(): void {
+    document.body.classList.add('modal-manager-open');
+  }
+
+  private resumeDocumentScroll(): void {
+    document.body.classList.remove('modal-manager-open');
+  }
+
+  private startResizeListener(): void {
+    window.addEventListener('resize', this.windowResizeThrottler);
+  }
+
+  private stopResizeListener(): void {
+    window.removeEventListener('resize', this.windowResizeThrottler);
+  }
+}

package/src/modal-manager-interface.ts

@@ -1,30 +1,30 @@
-import { LitElement, TemplateResult } from 'lit';
-import { ModalConfig } from './modal-config';
-import { ModalManagerMode } from './modal-manager-mode';
-
-export interface ModalManagerInterface extends LitElement {
-  /**
-   * Get the current modal mode.
-   */
-  getMode(): ModalManagerMode;
-
-  /**
-   * Show a modal from a given ModalConfig
-   *
-   * @param config ModalConfig
-   * @param customModalContent TemplateResult | undefined
-   * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
-   * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed
-   */
-  showModal(options: {
-    config: ModalConfig;
-    customModalContent?: TemplateResult;
-    userClosedModalCallback?: () => void;
-    userPressedLeftNavButtonCallback?: () => void;
-  }): Promise<void>;
-
-  /**
-   * Close the currently open modal
-   */
-  closeModal(): void;
-}
+import { LitElement, TemplateResult } from 'lit';
+import { ModalConfig } from './modal-config';
+import { ModalManagerMode } from './modal-manager-mode';
+
+export interface ModalManagerInterface extends LitElement {
+  /**
+   * Get the current modal mode.
+   */
+  getMode(): ModalManagerMode;
+
+  /**
+   * Show a modal from a given ModalConfig
+   *
+   * @param config ModalConfig
+   * @param customModalContent TemplateResult | undefined
+   * @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
+   * @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed
+   */
+  showModal(options: {
+    config: ModalConfig;
+    customModalContent?: TemplateResult;
+    userClosedModalCallback?: () => void;
+    userPressedLeftNavButtonCallback?: () => void;
+  }): Promise<void>;
+
+  /**
+   * Close the currently open modal
+   */
+  closeModal(): void;
+}

package/src/modal-manager-mode.ts

@@ -1,10 +1,10 @@
-/**
- * Various modes the modal can be in
- *
- * @export
- * @enum {number}
- */
-export enum ModalManagerMode {
-  Open = 'open',
-  Closed = 'closed',
-}
+/**
+ * Various modes the modal can be in
+ *
+ * @export
+ * @enum {number}
+ */
+export enum ModalManagerMode {
+  Open = 'open',
+  Closed = 'closed',
+}

package/src/modal-manager.ts

@@ -113,7 +113,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
     this.customModalContent = undefined;
     if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();
     this.modal.deactivate();
-    
+
     // Return focus to the triggering element, if possible
     (this.triggeringElement as HTMLElement)?.focus?.();
     this.triggeringElement = undefined;
@@ -184,7 +184,9 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
     userClosedModalCallback?: () => void;
     userPressedLeftNavButtonCallback?: () => void;
   }): Promise<void> {
-    this.captureTriggeringElement();
+    // If the dialog is being opened, make note of what element was focused beforehand
+    if (this.mode === ModalManagerMode.Closed) this.captureFocusedElement();
+
     this.closeOnBackdropClick = options.config.closeOnBackdropClick;
     this.userClosedModalCallback = options.userClosedModalCallback;
     this.userPressedLeftNavButtonCallback =
@@ -203,7 +205,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
    * Sets the triggering element to the one that is currently focused, as deep
    * within Shadow DOM as possible.
    */
-  private captureTriggeringElement(): void {
+  private captureFocusedElement(): void {
     this.triggeringElement = getDeepestActiveElement();
   }