@salesforcedevs/dx-components 1.3.248 → 1.3.249

package/lwc.config.json

@@ -121,7 +121,6 @@
         "dxUtils/normalizers",
         "dxUtils/queryCoordinator",
         "dxUtils/recentSearches",
-        "dxUtils/withTypedRefs",
         "dxUtils/wordpress"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.248",
+    "version": "1.3.249",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -23,7 +23,6 @@
         "lodash.defaults": "^4.2.0",
         "lodash.get": "^4.4.2",
         "lodash.kebabcase": "^4.1.1",
-        "memoize-one": "^6.0.0",
         "microtip": "0.2.2",
         "salesforce-oauth2": "^0.2.0",
         "throttle-debounce": "^5.0.0",
@@ -45,5 +44,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "411db405210df8682a3a38ab89e521df252e6838"
+    "gitHead": "c7d155ee843224d12db375fde4f54840d0317385"
 }

package/src/modules/dx/audio/audio.css

@@ -1,257 +1,16 @@
-:host {
-    --dx-c-track-before-color: var(--dx-g-indigo-vibrant-30);
-    --dx-c-track-custom-dark-gray: rgba(62 62 62 / 100%);
-    --dx-c-track-custom-medium-gray: rgba(195 195 195 / 100%);
-    --dx-c-track-custom-light-gray: rgba(235 235 236 / 100%);
-    --dx-c-track-thumb-size: 10px;
-    --dx-c-threedot-menu-item-padding: 14px;
-}
-
-/* Outermost container/border */
-.custom-audio-player {
-    background-color: var(--dx-g-indigo-vibrant-90, #e0e5f8);
-    border-radius: 12px;
-    padding: 6px 13px 13px;
-}
-
-.listen-icon {
-    display: inline-block;
-    padding: 0 6px 0 4px;
-}
-
-.listen-text {
-    display: inline-block;
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-2xs, 11px);
-    font-weight: var(--dx-g-font-bold, bold);
-    letter-spacing: 0.6px;
-    position: relative;
-    text-transform: uppercase;
-    top: 1px;
-}
-
-/*
-   The "inner" container/main part of the player, inside the outer, colored border.
-   Current design goal of this element and all other "inner" elements is to closely match native controls as they appear in Chrome
-*/
-.player {
-    --dx-c-popover-border-radius: 0;
-    --dx-c-popover-padding: 0;
-
-    align-items: center;
-    background-color: var(--sds-g-gray-1, #fff);
-    border-radius: 5px;
-    display: flex;
-    margin-top: 8px;
-    padding: 3px 4px;
-}
-
-/* Player button controls */
-.player dx-button::part(container) {
-    height: 24px;
-    width: 24px;
-}
-
-.player-time,
-.player-volume-slider,
-.player-seek-slider {
-    position: relative;
-    top: 1px;
-}
-
-.player-time {
-    display: inline-block;
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-2xs, 11px);
-    margin-left: 4px;
-    margin-right: 8px;
-}
-
-/* Sliders and "thumb" controls */
-.player-volume-slider,
-.player-seek-slider {
-    appearance: none;
-    border-radius: 16px;
-    cursor: pointer;
-    height: 4px;
-    width: 100%;
-}
-
-.player-seek-slider {
-    background: var(--dx-c-track-custom-light-gray);
-}
-
-.player-volume-slider {
-    background: var(--sds-g-gray-7);
-}
-
-/* Create a large, solid "shadow" to the left of the "thumb" on the progress bar, simulating filled in space */
-.player-volume-slider::-webkit-slider-thumb,
-.player-seek-slider::-webkit-slider-thumb {
-    appearance: none;
-    background-color: var(--dx-g-indigo-vibrant-30);
-    border: none;
-    border-radius: 50%;
-    height: var(--dx-c-track-thumb-size);
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-    width: var(--dx-c-track-thumb-size);
-}
-
-.player-volume-slider::-moz-range-thumb,
-.player-seek-slider::-moz-range-thumb {
-    background-color: var(--dx-g-indigo-vibrant-30);
-    border: none;
-    border-radius: 50%;
-    height: var(--dx-c-track-thumb-size);
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-    width: var(--dx-c-track-thumb-size);
-}
-
-/* NOTE: Even though the 'active' CSS rules for sliders on webkit and mozilla are the same here, they CANNOT be combined or the slider breaks */
-.player-volume-slider:active::-webkit-slider-thumb,
-.player-seek-slider:active::-webkit-slider-thumb {
-    opacity: 1;
-}
-
-.player-volume-slider:active::-moz-range-thumb,
-.player-seek-slider:active::-moz-range-thumb {
-    opacity: 1;
-}
-
-/* Container for the volume slider, which transitions in and out on hover */
-.player-volume-container {
-    align-items: center;
-    border-radius: var(--dx-g-spacing-xs);
-    height: 24px;
-    display: flex;
-    padding-left: 6px;
-    position: relative;
-    transition: 0.2s ease-out;
-    width: 24px;
-}
-
-.player-volume-container .player-volume-slider {
-    /* HTML5 boilerplate .visuallyhidden equivalent, for hiding an element but leaving it focusable */
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.player-volume-container .player-volume-button {
-    position: absolute;
-    right: 0;
-}
-
-/* Three dot menu, for download and playback speed settings */
-.player-threedot-menu ul {
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-2xs, 11px);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.player-threedot-menu li {
-    cursor: pointer;
-    position: relative;
-}
-
-/* Speed selection items have a large left padding in Chrome, which we are mimicking */
-.player-threedot-menu .player-speed-item {
-    padding-left: calc(var(--dx-c-threedot-menu-item-padding) * 3);
+.audio-container {
+    width: 350px;
 }
 
-.player-threedot-menu a {
-    color: initial;
-    cursor: pointer;
+/* TODO: we need mobile breakpoints for this, it looks bad on mobile */
+.audio {
+    width: 350px;
     display: block;
-    padding: var(--dx-c-threedot-menu-item-padding);
-    text-decoration: none;
+    margin-bottom: var(--dx-g-spacing-3xl);
+    border: 5px solid
+        var(
+            --dx-c-featured-content-header-background-color,
+            var(--dx-g-indigo-vibrant-90)
+        );
+    border-radius: 2em;
 }
-
-.player-threedot-menu dx-icon {
-    display: inline-block;
-}
-
-.player-threedot-menu dx-icon:not(.player-selected-speed) {
-    margin-right: var(--dx-c-threedot-menu-item-padding);
-    position: relative;
-    top: -1px; /* fix icon vertical position */
-}
-
-/* The selected speed has a check mark icon to the right side */
-.player-threedot-menu dx-icon.player-selected-speed {
-    color: var(--dx-g-indigo-vibrant-40);
-    position: absolute;
-    right: 40px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-/*
-   All clickable elements inside of the three dot menu are buttons, except for the download link
-   dx-button is not used here because these things barely look like buttons
-*/
-.player-threedot-menu button {
-    background: transparent;
-    border: 0;
-    color: initial; /* only necessary on iOS Safari to remove blue text color */
-    cursor: pointer;
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-2xs, 11px);
-    padding: var(--dx-c-threedot-menu-item-padding);
-    text-align: left;
-    width: 100%;
-}
-
-.audio-container {
-    display: none;
-}
-
-@media (hover: hover) {
-    .player dx-button::part(container):hover {
-        background: var(--sds-g-gray-4);
-    }
-
-    /* NOTE: Even though the 'hover' CSS rules for sliders on webkit and mozilla are the same here, they CANNOT be combined or the slider breaks */
-    .player-volume-slider:hover::-webkit-slider-thumb,
-    .player-seek-slider:hover::-webkit-slider-thumb {
-        opacity: 1;
-    }
-
-    .player-volume-slider:hover::-moz-range-thumb,
-    .player-seek-slider:hover::-moz-range-thumb {
-        opacity: 1;
-    }
-
-    .player-volume-container.focused-by-keyboard,
-    .player-volume-container:hover {
-        background: var(--sds-g-gray-4);
-        width: max(12%, 150px);
-    }
-
-    .player-volume-container.focused-by-keyboard .player-volume-slider,
-    .player-volume-container:hover .player-volume-slider {
-        /* Undo .visuallyhidden */
-        clip: unset;
-        height: 4px;
-        margin-right: 24px; /* leave room for the button */
-        overflow: visible;
-        position: relative;
-        width: 100%;
-    }
-
-    .player-threedot-menu a:focus,
-    .player-threedot-menu a:hover,
-    .player-threedot-menu button:focus,
-    .player-threedot-menu button:hover {
-        background: var(--sds-g-gray-4);
-    }
-}

package/src/modules/dx/audio/audio.html

@@ -1,145 +1,6 @@
 <template>
-    <div
-        aria-label={playerAriaLabel}
-        class="custom-audio-player"
-        lwc:ref="container"
-        onkeyup={handleContainerKeyUp}
-        tabindex="0"
-    >
-        <dx-icon
-            class="listen-icon"
-            size="xsmall"
-            sprite="general"
-            symbol="headphones"
-        ></dx-icon>
-        <span class="listen-text">Listen to this article</span>
-        <div class="player">
-            <dx-button
-                aria-label={mainControlAriaLabel}
-                class="player-play-pause-button"
-                icon-symbol={mainControlIconSymbol}
-                variant="custom"
-                onclick={handleMainControlClick}
-            ></dx-button>
-            <div class="player-time">
-                <span class="player-current-time">{formattedCurrentTime}</span>
-                &nbsp;/&nbsp;
-                <span class="player-duration">{formattedDuration}</span>
-            </div>
-            <input
-                aria-label="Current Time"
-                class="player-seek-slider"
-                type="range"
-                max={durationSeconds}
-                lwc:ref="playerSeekSlider"
-                value={currentTimeSeconds}
-                onchange={handleSeekChange}
-                oninput={handleSeekInput}
-            />
-            <div class="player-volume-container" lwc:ref="playerVolumeContainer" onfocusin={handleVolumeFocusIn} onfocusout={handleVolumeFocusOut}>
-                <input
-                    aria-label="Volume Level"
-                    class="player-volume-slider"
-                    type="range"
-                    max="100"
-                    lwc:ref="playerVolumeSlider"
-                    tabindex="0"
-                    value={volume}
-                    oninput={handleVolumeInput}
-                />
-                <dx-button
-                    aria-label="Volume"
-                    class="player-volume-button"
-                    icon-symbol={volumeIcon}
-                    onclick={handleVolumeClick}
-                    variant="custom"
-                ></dx-button>
-            </div>
-            <dx-popover
-                lwc:ref="playbackSpeedPopover"
-                width="200px"
-                onclose={resetIsSettingPlaybackSpeed}
-            >
-                <dx-button
-                    aria-label="More"
-                    icon-symbol="threedots_vertical"
-                    slot="control"
-                    variant="custom"
-                ></dx-button>
-                <div class="player-threedot-menu" lwc:ref="playbackSpeedMenu" slot="content" tabindex="0">
-                    <template lwc:if={isSettingPlaybackSpeed}>
-                        <div>
-                            <ul>
-                                <li>
-                                    <button
-                                        onclick={resetIsSettingPlaybackSpeed}
-                                    >
-                                        <dx-icon
-                                            size="small"
-                                            symbol="back"
-                                        ></dx-icon>
-                                        Options
-                                    </button>
-                                </li>
-                                <template
-                                    for:each={playbackSpeedData}
-                                    for:item="playbackSpeedDatum"
-                                >
-                                    <li
-                                        key={playbackSpeedDatum.value}
-                                    >
-                                        <button
-                                            class="player-speed-item"
-                                            onclick={handleSetPlaybackSpeed}
-                                        >
-                                            {playbackSpeedDatum.value}
-                                        </button>
-                                        <dx-icon
-                                            class="player-selected-speed"
-                                            lwc:if={playbackSpeedDatum.selected}
-                                            size="small"
-                                            symbol="check"
-                                        ></dx-icon>
-                                    </li>
-                                </template>
-                            </ul>
-                        </div>
-                    </template>
-                    <template lwc:else>
-                        <ul>
-                            <li>
-                                <a
-                                    href={audioSrc}
-                                    download
-                                    tabindex="0"
-                                    target="_blank"
-                                    rel="noopener"
-                                >
-                                    <dx-icon
-                                        size="small"
-                                        symbol="download"
-                                    ></dx-icon>
-                                    Download
-                                </a>
-                            </li>
-                            <li>
-                                <button onclick={handlePlaybackSpeedClick}>
-                                    <dx-icon
-                                        size="small"
-                                        sprite="general"
-                                        symbol="tachometer-alt"
-                                    ></dx-icon>
-                                    Playback Speed
-                                </button>
-                            </li>
-                        </ul>
-                    </template>
-                </div>
-            </dx-popover>
-        </div>
-    </div>
     <div class="audio-container">
-        <audio lwc:ref="audioElement" class="audio" controls>
+        <audio class="audio" controls>
             <source src={audioSrc} type="audio/mpeg" />
             Your browser does not support the audio element.
         </audio>

package/src/modules/dx/audio/audio.ts

@@ -1,467 +1,63 @@
-import { api } from "lwc";
-import memoize from "memoize-one";
-import Popover from "dx/popover";
 import { track } from "dxUtils/analytics";
-import { LightningElementWithTypedRefs } from "dxUtils/withTypedRefs";
+import { LightningElement, api } from "lwc";
 
-type TrackColors = {
-    before: string;
-    buffer?: string;
-    after: string;
-};
-// eslint-disable-next-line no-use-before-define
-type PlaybackSpeed = (typeof formattedPlaybackSpeeds)[number];
-
-/*
- * Color settings for the "track" of the slider, which dynamically updates based on amount buffered,
- * amount played, and amount remaining. The "before" color is what goes _before_ the "thumb" on the
- * slider, and so on.
- */
-const uiConfig = {
-    seekSlider: {
-        trackColors: {
-            before: "var(--dx-g-indigo-vibrant-30)",
-            buffer: "var(--dx-c-track-custom-medium-gray)",
-            after: "var(--dx-c-track-custom-light-gray)"
-        } as TrackColors
-    },
-    volumeSlider: {
-        trackColors: {
-            before: "var(--dx-g-indigo-vibrant-30)",
-            after: "var(--dx-c-track-custom-medium-gray)"
-        } as TrackColors
-    }
-};
-
-// Standard playback speeds, though the "formatted" version for 1 is "Normal" (mimicking Chrome)
-const formattedPlaybackSpeeds = [
-    "0.25",
-    "0.5",
-    "0.75",
-    "Normal",
-    "1.25",
-    "1.5",
-    "1.75",
-    "2"
-] as const;
-
-export default class Audio extends LightningElementWithTypedRefs<{
-    audioElement: HTMLAudioElement;
-    container: HTMLDivElement;
-    playbackSpeedMenu: HTMLDivElement;
-    playbackSpeedPopover: Popover;
-    playerSeekSlider: HTMLInputElement;
-    playerVolumeSlider: HTMLInputElement;
-    playerVolumeContainer: HTMLDivElement;
-}> {
+export default class Audio extends LightningElement {
     @api audioSrc!: string;
-    @api audioTitle!: string;
-
-    private _bufferedTimeRanges?: TimeRanges;
-    private _currentTimeSeconds = 0;
-    private _durationSeconds = 0;
-    private _volume = 100; // 100 is browser default (and max), at least in Chrome, for audio elements
-    private animationFrameId: number | null = null; // controls movement of the timeline when audio is playing
-    private currentPlaybackSpeed: PlaybackSpeed = "Normal";
-    private didRender = false;
-    private isAnimating = false;
-    private isPlaying = false;
-    private isSettingPlaybackSpeed = false; // popover menu has two panes; this manages that state
-    // `playbackSpeedData` tracks which value is selected, in a way useable by LWC for:each without requiring a separate sub-component
-    private playbackSpeedData = formattedPlaybackSpeeds.map((value) => ({
-        selected: value === "Normal",
-        value
-    }));
-    private prevVolume = this._volume; // previous volume is tracked so that it can be restored on unmute
-    private volumeIcon: "volume_high" | "volume_off" = "volume_high"; // built-in browser UI doesn't distinguish between high/low, just "on"/"off" (we use the "high" icon for "on")
-
-    private get formattedCurrentTime() {
-        return this.getFormatted(this.currentTimeSeconds);
-    }
-
-    private get formattedDuration() {
-        return this.getFormatted(this.durationSeconds);
-    }
-
-    private get mainControlAriaLabel() {
-        return this.isPlaying ? "Pause" : "Play";
-    }
-
-    private get mainControlIconSymbol() {
-        return this.isPlaying ? "pause" : "play";
-    }
-
-    private get playerAriaLabel() {
-        return `Audio: ${this.audioTitle}`;
-    }
-
-    // NOTE that values with getters and setters here have side effects that update the UI elements.
-    // This essentially makes these items the source of truth for the UI.
-    private get bufferedTimeRanges() {
-        return this._bufferedTimeRanges;
-    }
-    private set bufferedTimeRanges(value: TimeRanges | undefined) {
-        this._bufferedTimeRanges = value;
-        this.updateRangeInputStyles(
-            this.typedRefs.playerSeekSlider,
-            this.currentTimeSeconds
-        );
-    }
-
-    private get currentTimeSeconds() {
-        return this._currentTimeSeconds;
-    }
-    private set currentTimeSeconds(value: number) {
-        this._currentTimeSeconds = value;
-        this.updateRangeInputStyles(this.typedRefs.playerSeekSlider, value);
-    }
-
-    private get durationSeconds() {
-        return this._durationSeconds;
-    }
-    private set durationSeconds(value: number) {
-        this._durationSeconds = value;
-        this.updateRangeInputStyles(
-            this.typedRefs.playerSeekSlider,
-            this.currentTimeSeconds
-        );
-    }
-
-    private get volume() {
-        return this._volume;
-    }
-    private set volume(value: number) {
-        this.prevVolume = this.volume;
-        this._volume = value;
-        this.updateRangeInputStyles(this.typedRefs.playerVolumeSlider, value);
-    }
-
-    renderedCallback(): void {
-        if (this.didRender) {
-            return;
-        }
-
-        this.didRender = true;
-        this.volume = this.typedRefs.audioElement.volume * 100;
-
-        // We only need to listen for the metadata event if the metadata isn't already loaded;
-        // sometimes, browsers can load it _before_ the event handler can even be added.
-        if (this.typedRefs.audioElement.readyState > 0) {
-            this.handleAudioLoadedMetadata();
-        } else {
-            this.typedRefs.audioElement.addEventListener(
-                "loadedmetadata",
-                this.handleAudioLoadedMetadata
-            );
-        }
+    @api postName!: string;
 
-        // "progress" handles buffering of audio data, lets us update the UI for the buffered amount
-        this.typedRefs.audioElement.addEventListener(
-            "progress",
-            this.handleAudioProgress
+    renderedCallback() {
+        const audioElement = this.template.querySelector("audio");
+        audioElement?.addEventListener(
+            "play",
+            this.trackPlay.bind(this),
+            false
         );
-        this.typedRefs.audioElement.addEventListener(
+        audioElement?.addEventListener(
             "ended",
-            this.handleAudioEnded
-        );
-    }
-
-    disconnectedCallback(): void {
-        this.typedRefs.audioElement.removeEventListener(
-            "loadedmetadata",
-            this.handleAudioLoadedMetadata
-        );
-        this.typedRefs.audioElement.removeEventListener(
-            "progress",
-            this.handleAudioProgress
+            this.trackEnded.bind(this),
+            false
         );
-        this.typedRefs.audioElement.removeEventListener(
-            "ended",
-            this.handleAudioEnded
+        audioElement?.addEventListener(
+            "pause",
+            this.trackPause.bind(this),
+            false
         );
     }
 
-    /* BEGIN event handlers */
-
-    handleAudioLoadedMetadata = () => {
-        // `loadedmetadata` is the first spot at which duration is available.
-        this.durationSeconds = this.typedRefs.audioElement.duration;
-    };
-
-    handleAudioProgress = () => {
-        // New buffered amount received, store the buffered time ranges.
-        this.bufferedTimeRanges = this.typedRefs.audioElement.buffered;
-    };
-
-    handleMainControlClick = (event: Event) => {
-        if (this.isPlaying) {
-            this.handleAudioPause(event);
-        } else {
-            this.handleAudioPlay(event);
-        }
-    };
-
-    handleAudioPlay = (event: Event) => {
-        this.typedRefs.audioElement.play();
-        this.syncTimeWithAudio();
-        this.isPlaying = true;
-        this.trackPlay(event);
-    };
-
-    handleAudioPause = (event: Event) => {
-        this.typedRefs.audioElement.pause();
-        cancelAnimationFrame(this.animationFrameId as number);
-        this.isPlaying = false;
-        this.trackPause(event);
-    };
-
-    handleAudioEnded = (event: Event) => {
-        cancelAnimationFrame(this.animationFrameId as number);
-        this.isPlaying = false;
-        this.trackEnded(event);
-    };
-
-    // Handles any user-driven movement on the "seek" slider (timeline)
-    handleSeekInput = () => {
-        if (!this.durationSeconds) {
-            // No moving the "thumb" when metadata hasn't even loaded.
-            return;
-        }
+    private trackClick(e: Event, eventType: string, action: string) {
+        const audioElement = this.template.querySelector(
+            "audio"
+        ) as HTMLMediaElement;
 
-        if (this.isPlaying) {
-            // To allow the user to interact with the slider, we temporarily have to stop moving the
-            // "thumb," but leave the player in the "isPlaying" state so that the play button
-            // remains and audio picks back up once the user is done interacting (the last bit is
-            // handled in the `handleSeekChange` handler, when the user actually commits the change)
-            cancelAnimationFrame(this.animationFrameId as number);
-        }
-
-        this.currentTimeSeconds = parseInt(
-            this.typedRefs.playerSeekSlider.value,
-            10
-        );
-    };
-
-    // `change` is only fired once the user *commits* to a value (e.g., by releasing the mouse click), unlike `input` above
-    handleSeekChange = () => {
-        if (this.isPlaying) {
-            // Resume playing after user finishes interacting with seek slider, if the audio was
-            // already playing (see note in `handleSeekInput`)
-            this.syncTimeWithAudio();
-        }
-
-        this.currentTimeSeconds = parseInt(
-            this.typedRefs.playerSeekSlider.value,
-            10
-        );
-        this.typedRefs.audioElement!.currentTime = this.currentTimeSeconds;
-    };
-
-    // Handles any user-driven movement on the volume slider
-    handleVolumeInput = ({
-        currentTarget
-    }: InputEvent & { currentTarget: HTMLInputElement }) => {
-        this.volume = parseInt(currentTarget.value, 10);
-        this.typedRefs.audioElement.volume = this.volume / 100;
-    };
-
-    // Direct click on the volume button is mute/unmute
-    handleVolumeClick = () => {
-        if (this.typedRefs.audioElement.muted) {
-            this.typedRefs.audioElement.muted = false;
-            this.volumeIcon = "volume_high";
-            this.volume = this.prevVolume; // restore to previous volume level
-        } else {
-            this.typedRefs.audioElement.muted = true;
-            this.volumeIcon = "volume_off";
-            this.volume = 0;
-        }
-    };
-
-    handleVolumeFocusIn = () => {
-        this.typedRefs.playerVolumeContainer.classList.add(
-            "focused-by-keyboard"
-        );
-    };
-
-    handleVolumeFocusOut = (event: FocusEvent) => {
-        const { playerVolumeContainer } = this.typedRefs;
-        const isFocusingChildOfVolumeContainer = Array.from(
-            playerVolumeContainer.children
-        ).some((childElement) => event.relatedTarget === childElement);
-
-        if (!isFocusingChildOfVolumeContainer) {
-            this.typedRefs.playerVolumeContainer.classList.remove(
-                "focused-by-keyboard"
-            );
-        }
-    };
-
-    // Set "pane" state for playback popover menu
-    handlePlaybackSpeedClick = () => {
-        this.isSettingPlaybackSpeed = true;
-        this.refocusPlaybackSpeedMenu();
-    };
-
-    // Sets "pane" state for popover back to the default
-    resetIsSettingPlaybackSpeed = () => {
-        this.isSettingPlaybackSpeed = false;
-    };
-
-    // Handle selection of a playback speed in the "three dot" menu
-    handleSetPlaybackSpeed = (event: Event) => {
-        const currentTarget = event.currentTarget as Node;
-        const selectedPlaybackSpeed =
-            currentTarget.textContent as PlaybackSpeed;
-
-        if (selectedPlaybackSpeed === this.currentPlaybackSpeed) {
-            return;
-        }
-
-        this.playbackSpeedData = formattedPlaybackSpeeds.map((value) => ({
-            selected: value === selectedPlaybackSpeed,
-            value
-        }));
-        this.currentPlaybackSpeed = selectedPlaybackSpeed;
-        this.typedRefs.playbackSpeedPopover.closePopover();
-        this.resetIsSettingPlaybackSpeed();
-        this.typedRefs.audioElement.playbackRate =
-            selectedPlaybackSpeed === "Normal"
-                ? 1
-                : parseFloat(selectedPlaybackSpeed);
-    };
-
-    handleContainerKeyUp = (event: KeyboardEvent) => {
-        if (event.key === " " && event.target === this.typedRefs.container) {
-            if (this.isPlaying) {
-                this.handleAudioPause(event);
-            } else {
-                this.handleAudioPlay(event);
-            }
-        }
-    };
-
-    /* END event handlers, BEGIN private utility methods */
-
-    // Called when menu's inner pane changes, ensuring focus is on the newly-displayed menu
-    private refocusPlaybackSpeedMenu = () => {
-        Promise.resolve().then(() => this.typedRefs.playbackSpeedMenu.focus());
-    };
-
-    // Animates the seek slider (timeline) each frame so that it is N*Sync with current play
-    // time. We do this using requestAnimationFrame so that we can temporarily cancel the
-    // animating whenever the user is interacting with the slider.
-    private syncTimeWithAudio = () => {
-        this.currentTimeSeconds = Math.floor(
-            this.typedRefs.audioElement.currentTime
-        );
-        this.animationFrameId = requestAnimationFrame(this.syncTimeWithAudio);
-    };
-
-    // Convert raw numerical seconds to strings formatted as "X:XX"
-    private getFormatted(totalSeconds: number) {
-        const minutes = Math.floor(totalSeconds / 60);
-        const seconds = Math.floor(totalSeconds % 60);
-        const doubleDigitSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
-        return `${minutes}:${doubleDigitSeconds}`;
-    }
-
-    // Find the end of the buffered amount of audio, if any, that overlaps with the current
-    // position. We care about the overlap because buffered time ranges can have gaps.
-    // Memoized because it is called whenever input styles are updated, and bufferedTimeRanges
-    // rarely changes.
-    private getOverlappingBufferEnd = memoize(
-        (currentTimeSeconds: number, bufferedTimeRanges?: TimeRanges) => {
-            let nearestBufferEnd = 0;
-
-            if (bufferedTimeRanges?.length) {
-                for (let i = 0; i < bufferedTimeRanges.length; i++) {
-                    if (
-                        bufferedTimeRanges.start(i) <= currentTimeSeconds &&
-                        bufferedTimeRanges.end(i) > currentTimeSeconds
-                    ) {
-                        nearestBufferEnd = bufferedTimeRanges.end(i);
-                        break;
-                    }
-                }
-            }
-
-            return nearestBufferEnd;
-        }
-    );
-
-    // Visually updates sliders (timeline or volume) so that the amount "covered" (before the
-    // "thumb") is visually different than the amount remaining; also handles visually showing the
-    // buffered amount if there is buffer data and the element is the "seek"/timeline slider
-    private updateRangeInputStyles(
-        target: HTMLInputElement | null,
-        currentValue: number
-    ) {
-        if (
-            !target ||
-            (target === this.typedRefs.playerSeekSlider &&
-                !this.durationSeconds)
-        ) {
-            return;
-        }
-
-        const maximumValue =
-            target === this.typedRefs.playerVolumeSlider
-                ? 100
-                : this.durationSeconds;
-        const trackColors =
-            target === this.typedRefs.playerVolumeSlider
-                ? uiConfig.volumeSlider.trackColors
-                : uiConfig.seekSlider.trackColors;
-        const percentageCovered =
-            maximumValue === 100
-                ? currentValue
-                : (currentValue / maximumValue) * 100;
-        const overlappingBufferEnd = this.getOverlappingBufferEnd(
-            this.currentTimeSeconds,
-            this.bufferedTimeRanges
-        );
-
-        if (trackColors.buffer && overlappingBufferEnd) {
-            // Slider with three colors: the before amount, the buffered amount, and the full
-            // "remaining" slider color.
-            const bufferPercentage =
-                (overlappingBufferEnd / maximumValue) * 100;
-            target.style.background = `linear-gradient(to right, ${trackColors.before} ${percentageCovered}%, ${trackColors.buffer} ${percentageCovered}% ${bufferPercentage}%, ${trackColors.after} ${bufferPercentage}%)`;
-        } else {
-            // "Basic" slider, with only two colors, no buffering.
-            target.style.background = `linear-gradient(to right, ${trackColors.before} ${percentageCovered}%, ${trackColors.after} ${percentageCovered}%)`;
-        }
-    }
-
-    private trackClick = (e: Event, eventType: string, action: string) => {
         const payload = {
             event: eventType,
             media_action: action,
-            media_name: this.audioTitle,
-            media_percentage_played:
-                this.durationSeconds === 0
-                    ? this.durationSeconds
-                    : (
-                          (this.currentTimeSeconds * 100) /
-                          this.durationSeconds
-                      ).toFixed(0),
-            media_seconds_played: this.currentTimeSeconds,
+            media_name: this.postName,
+            media_percentage_played: (
+                (audioElement!.currentTime * 100) /
+                audioElement!.duration
+            ).toFixed(0),
+            media_seconds_played: audioElement!.currentTime,
             media_type: "blog audio"
         };
 
         track(e.currentTarget!, "custEv_blogAudioPlay", payload);
-    };
+    }
 
-    private trackPlay = (e: Event) => {
+    private trackPlay(e: Event) {
         this.trackClick(e, "custEv_blogAudioPlay", "play");
-    };
-
-    private trackEnded = (e: Event) => {
+    }
+    private trackEnded(e: Event) {
         this.trackClick(e, "custEv_blogAudioComplete", "complete");
-    };
+    }
+    private trackPause(e: Event) {
+        const audioElement = this.template.querySelector(
+            "audio"
+        ) as HTMLMediaElement;
 
-    private trackPause = (e: Event) => {
-        this.trackClick(e, "custEv_blogAudioPause", "pause");
-    };
+        //suppress 'pause' events that happen in the last 99% of the duration
+        if ((audioElement!.currentTime * 99) / audioElement!.duration < 99) {
+            this.trackClick(e, "custEv_blogAudioPause", "pause");
+        }
+    }
 }

package/src/modules/dx/popover/popover.css

@@ -6,7 +6,7 @@
         var(--dx-g-spacing-sm)
     );
     --popover-border: var(--dx-c-popover-border, 1px solid var(--dx-g-gray-90));
-    --popover-padding: var(--dx-c-popover-padding, --dx-g-spacing-sm);
+    --popover-padding: var(--dx-g-spacing-sm);
 }
 
 .popover-container {

package/src/modules/dx/popover/popover.ts

@@ -6,7 +6,6 @@ import {
 } from "typings/custom";
 
 import {
-    autoUpdate,
     computePosition,
     flip,
     size,
@@ -32,8 +31,6 @@ const isEventOutsideElements = (
         );
 
 export default class Popover extends LightningElement {
-    private autoUpdateCleanup?: () => void;
-
     @api offset?: "small" | "medium";
     @api pagePadding?: number = 16; // padding between dropdown and the edge of the page
     @api placement?: PopperPlacement = "bottom-start";
@@ -79,10 +76,6 @@ export default class Popover extends LightningElement {
             this._open = true;
             this.control.setAttribute("aria-expanded", "true");
 
-            if (this.popover) {
-                this.autoUpdateCleanup = autoUpdate(this.control, this.popover, this.setPosition);
-            }
-
             this.dispatchEvent(new CustomEvent("open"));
 
             setTimeout(() => {
@@ -95,7 +88,6 @@ export default class Popover extends LightningElement {
     @api
     closePopover(focusControl: boolean = false) {
         this._open = false;
-        this.autoUpdateCleanup?.();
         if (focusControl && this.control && this.control.focus) {
             this.control.focus();
         }

package/src/modules/dxUtils/withTypedRefs/withTypedRefs.ts

@@ -1,26 +0,0 @@
-import { LightningElement } from "lwc";
-
-// mixin version for more flexibility
-export const withTypedRefs = <
-    RefsType extends LightningElement["refs"] = LightningElement["refs"],
-    BaseClass extends new (...args: any[]) => any = new (
-        ...args: any[]
-    ) => LightningElement
->(
-    BaseClass: BaseClass
-) => {
-    return class extends BaseClass {
-        get typedRefs() {
-            return this.refs as RefsType;
-        }
-    };
-};
-
-// class version if you just want a lightning element with typed refs and nothing else
-export class LightningElementWithTypedRefs<
-    RefsType extends LightningElement["refs"]
-> extends LightningElement {
-    get typedRefs() {
-        return this.refs as RefsType;
-    }
-}