@vonage/vivid 4.25.0 → 4.27.0

package/shared/definition64.js

@@ -13778,7 +13778,7 @@ var clock = {
 
 /**
  * @license
- * Video.js 8.22.0 <http://videojs.com/>
+ * Video.js 8.23.3 <http://videojs.com/>
  * Copyright Brightcove, Inc. <https://www.brightcove.com/>
  * Available under Apache License Version 2.0
  * <https://github.com/videojs/video.js/blob/main/LICENSE>
@@ -13789,7 +13789,7 @@ var clock = {
  */
 
 
-var version$6 = "8.22.0";
+var version$6 = "8.23.3";
 
 /**
  * An Object that contains lifecycle hooks as keys which point to an array
@@ -19726,7 +19726,7 @@ function silencePromise(value) {
  *         A serializable javascript representation of the TextTrack.
  * @private
  */
-const trackToJson_ = function (track) {
+const trackToJson = function (track) {
   const ret = ['kind', 'label', 'language', 'id', 'inBandMetadataTrackDispatchType', 'mode', 'src'].reduce((acc, prop, i) => {
     if (track[prop]) {
       acc[prop] = track[prop];
@@ -19761,7 +19761,7 @@ const textTracksToJson = function (tech) {
   const trackEls = tech.$$('track');
   const trackObjs = Array.prototype.map.call(trackEls, t => t.track);
   const tracks = Array.prototype.map.call(trackEls, function (trackEl) {
-    const json = trackToJson_(trackEl.track);
+    const json = trackToJson(trackEl.track);
     if (trackEl.src) {
       json.src = trackEl.src;
     }
@@ -19769,7 +19769,7 @@ const textTracksToJson = function (tech) {
   });
   return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function (track) {
     return trackObjs.indexOf(track) === -1;
-  }).map(trackToJson_));
+  }).map(trackToJson));
 };
 
 /**
@@ -19795,7 +19795,7 @@ const jsonToTextTracks = function (json, tech) {
 var textTrackConverter = {
   textTracksToJson,
   jsonToTextTracks,
-  trackToJson_
+  trackToJson
 };
 
 /**
@@ -20759,6 +20759,16 @@ class TextTrackList extends TrackList {
       }
     }
   }
+
+  /**
+   * Creates a serializable array of objects that contains serialized copies
+   * of each text track.
+   *
+   * @return {Object[]} A serializable list of objects for the text track list
+   */
+  toJSON() {
+    return this.tracks_.map(track => track.toJSON());
+  }
 }
 
 /**
@@ -21192,11 +21202,9 @@ const getAbsoluteURL = function (url) {
  */
 const getFileExtension = function (path) {
   if (typeof path === 'string') {
-    const splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]+?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/;
-    const pathParts = splitPathRe.exec(path);
-    if (pathParts) {
-      return pathParts.pop().toLowerCase();
-    }
+    const cleanPath = path.split('?')[0].replace(/\/+$/, '');
+    const match = cleanPath.match(/\.([^.\/]+)$/);
+    return match ? match[1].toLowerCase() : '';
   }
   return '';
 };
@@ -21587,6 +21595,16 @@ class TextTrack extends Track {
     this.cues.setCues_(this.cues_);
   }
 
+  /**
+   * Creates a copy of the text track and makes it serializable
+   * by removing circular dependencies.
+   *
+   * @return {Object} The track information as a serializable object
+   */
+  toJSON() {
+    return textTrackConverter.trackToJson(this);
+  }
+
   /**
    * Remove a cue from our internal list
    *
@@ -25001,6 +25019,8 @@ class TextTrackDisplay extends Component$1 {
       this.updateDisplay(e);
     };
     player.on('loadstart', e => this.toggleDisplay(e));
+    player.on('useractive', updateDisplayTextHandler);
+    player.on('userinactive', updateDisplayTextHandler);
     player.on('texttrackchange', updateDisplayTextHandler);
     player.on('loadedmetadata', e => {
       this.updateDisplayOverlay();
@@ -25129,11 +25149,14 @@ class TextTrackDisplay extends Component$1 {
   }
 
   /**
-   * Update the displayed TextTrack when a either a {@link Player#texttrackchange} or
-   * a {@link Player#fullscreenchange} is fired.
+   * Update the displayed {@link TextTrack} when either a {@link Player#texttrackchange},
+   * a {@link Player#fullscreenchange}, a {@link Player#useractive}, or a
+   * {@link Player#userinactive} is fired.
    *
    * @listens Player#texttrackchange
    * @listens Player#fullscreenchange
+   * @listens Player#useractive
+   * @listens Player#userinactive
    */
   updateDisplay() {
     const tracks = this.player_.textTracks();
@@ -25555,8 +25578,8 @@ class BigPlayButton extends Button {
   handleClick(event) {
     const playPromise = this.player_.play();
 
-    // exit early if clicked via the mouse
-    if (this.mouseused_ && 'clientX' in event && 'clientY' in event) {
+    // exit early if tapped or clicked via the mouse
+    if (event.type === 'tap' || this.mouseused_ && 'clientX' in event && 'clientY' in event) {
       silencePromise(playPromise);
       if (this.player_.tech(true)) {
         this.player_.tech(true).focus();
@@ -26021,6 +26044,8 @@ class CurrentTimeDisplay extends TimeDisplay {
     let time;
     if (this.player_.ended()) {
       time = this.player_.duration();
+    } else if (event && event.target && typeof event.target.pendingSeekTime === 'function') {
+      time = event.target.pendingSeekTime();
     } else {
       time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
     }
@@ -26767,6 +26792,10 @@ class Slider extends Component$1 {
         event.stopPropagation();
         this.stepForward();
       } else {
+        if (this.pendingSeekTime()) {
+          this.pendingSeekTime(null);
+          this.userSeek_(this.player_.currentTime());
+        }
         super.handleKeyDown(event);
       }
 
@@ -27152,13 +27181,18 @@ class PlayProgressBar extends Component$1 {
    * @param {number} seekBarPoint
    *        A number from 0 to 1, representing a horizontal reference point
    *        from the left edge of the {@link SeekBar}
+   *
+   * @param {Event} [event]
+   *        The `timeupdate` event that caused this function to run.
    */
-  update(seekBarRect, seekBarPoint) {
+  update(seekBarRect, seekBarPoint, event) {
     const timeTooltip = this.getChild('timeTooltip');
     if (!timeTooltip) {
       return;
     }
-    const time = this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
+
+    // Combined logic: if an event with a valid pendingSeekTime getter exists, use it.
+    const time = event && event.target && typeof event.target.pendingSeekTime === 'function' ? event.target.pendingSeekTime() : this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
     timeTooltip.updateTime(seekBarRect, seekBarPoint, time);
   }
 }
@@ -27277,14 +27311,14 @@ class SeekBar extends Slider {
 
     // Avoid mutating the prototype's `children` array by creating a copy
     options.children = [...options.children];
-    const shouldDisableSeekWhileScrubbingOnMobile = player.options_.disableSeekWhileScrubbingOnMobile && (IS_IOS || IS_ANDROID);
+    const shouldDisableSeekWhileScrubbing = player.options_.disableSeekWhileScrubbingOnMobile && (IS_IOS || IS_ANDROID) || player.options_.disableSeekWhileScrubbingOnSTV;
 
     // Add the TimeTooltip as a child if we are on desktop, or on mobile with `disableSeekWhileScrubbingOnMobile: true`
-    if (!IS_IOS && !IS_ANDROID || shouldDisableSeekWhileScrubbingOnMobile) {
+    if (!IS_IOS && !IS_ANDROID || shouldDisableSeekWhileScrubbing) {
       options.children.splice(1, 0, 'mouseTimeDisplay');
     }
     super(player, options);
-    this.shouldDisableSeekWhileScrubbingOnMobile_ = shouldDisableSeekWhileScrubbingOnMobile;
+    this.shouldDisableSeekWhileScrubbing_ = shouldDisableSeekWhileScrubbing;
     this.pendingSeekTime_ = null;
     this.setEventHandlers_();
   }
@@ -27401,7 +27435,7 @@ class SeekBar extends Slider {
 
       // update the progress bar time tooltip with the current time
       if (this.bar) {
-        this.bar.update(getBoundingClientRect(this.el()), this.getProgress());
+        this.bar.update(getBoundingClientRect(this.el()), this.getProgress(), event);
       }
     });
     return percent;
@@ -27434,6 +27468,25 @@ class SeekBar extends Slider {
     return this.player_.scrubbing() ? this.player_.getCache().currentTime : this.player_.currentTime();
   }
 
+  /**
+   * Getter and setter for pendingSeekTime.
+   * Ensures the value is clamped between 0 and duration.
+   *
+   * @param {number|null} [time] - Optional. The new pending seek time, can be a number or null.
+   * @return {number|null} - The current pending seek time.
+   */
+  pendingSeekTime(time) {
+    if (time !== undefined) {
+      if (time !== null) {
+        const duration = this.player_.duration();
+        this.pendingSeekTime_ = Math.max(0, Math.min(time, duration));
+      } else {
+        this.pendingSeekTime_ = null;
+      }
+    }
+    return this.pendingSeekTime_;
+  }
+
   /**
    * Get the percentage of media played so far.
    *
@@ -27443,8 +27496,8 @@ class SeekBar extends Slider {
   getPercent() {
     // If we have a pending seek time, we are scrubbing on mobile and should set the slider percent
     // to reflect the current scrub location.
-    if (this.pendingSeekTime_) {
-      return this.pendingSeekTime_ / this.player_.duration();
+    if (this.pendingSeekTime() !== null) {
+      return this.pendingSeekTime() / this.player_.duration();
     }
     const currentTime = this.getCurrentTime_();
     let percent;
@@ -27481,7 +27534,7 @@ class SeekBar extends Slider {
 
     // Don't pause if we are on mobile and `disableSeekWhileScrubbingOnMobile: true`.
     // In that case, playback should continue while the player scrubs to a new location.
-    if (!this.shouldDisableSeekWhileScrubbingOnMobile_) {
+    if (!this.shouldDisableSeekWhileScrubbing_) {
       this.player_.pause();
     }
     super.handleMouseDown(event);
@@ -27542,8 +27595,8 @@ class SeekBar extends Slider {
     }
 
     // if on mobile and `disableSeekWhileScrubbingOnMobile: true`, keep track of the desired seek point but we won't initiate the seek until 'touchend'
-    if (this.shouldDisableSeekWhileScrubbingOnMobile_) {
-      this.pendingSeekTime_ = newTime;
+    if (this.shouldDisableSeekWhileScrubbing_) {
+      this.pendingSeekTime(newTime);
     } else {
       this.userSeek_(newTime);
     }
@@ -27586,9 +27639,9 @@ class SeekBar extends Slider {
     this.player_.scrubbing(false);
 
     // If we have a pending seek time, then we have finished scrubbing on mobile and should initiate a seek.
-    if (this.pendingSeekTime_) {
-      this.userSeek_(this.pendingSeekTime_);
-      this.pendingSeekTime_ = null;
+    if (this.pendingSeekTime() !== null) {
+      this.userSeek_(this.pendingSeekTime());
+      this.pendingSeekTime(null);
     }
 
     /**
@@ -27612,18 +27665,46 @@ class SeekBar extends Slider {
     }
   }
 
+  /**
+   * Handles pending seek time when `disableSeekWhileScrubbingOnSTV` is enabled.
+   *
+   * @param {number} stepAmount - The number of seconds to step (positive for forward, negative for backward).
+   */
+  handlePendingSeek_(stepAmount) {
+    if (!this.player_.paused()) {
+      this.player_.pause();
+    }
+    const currentPos = this.pendingSeekTime() !== null ? this.pendingSeekTime() : this.player_.currentTime();
+    this.pendingSeekTime(currentPos + stepAmount);
+    this.player_.trigger({
+      type: 'timeupdate',
+      target: this,
+      manuallyTriggered: true
+    });
+  }
+
   /**
    * Move more quickly fast forward for keyboard-only users
    */
   stepForward() {
-    this.userSeek_(this.player_.currentTime() + this.options().stepSeconds);
+    // if `disableSeekWhileScrubbingOnSTV: true`, keep track of the desired seek point but we won't initiate the seek
+    if (this.shouldDisableSeekWhileScrubbing_) {
+      this.handlePendingSeek_(this.options().stepSeconds);
+    } else {
+      this.userSeek_(this.player_.currentTime() + this.options().stepSeconds);
+    }
   }
 
   /**
    * Move more quickly rewind for keyboard-only users
    */
   stepBack() {
-    this.userSeek_(this.player_.currentTime() - this.options().stepSeconds);
+    // if `disableSeekWhileScrubbingOnSTV: true`, keep track of the desired seek point but we won't initiate the seek
+    if (this.shouldDisableSeekWhileScrubbing_) {
+      this.handlePendingSeek_(-this.options().stepSeconds);
+    } else {
+      this.userSeek_(this.player_.currentTime() - this.options().stepSeconds);
+    }
   }
 
   /**
@@ -27635,6 +27716,10 @@ class SeekBar extends Slider {
    *
    */
   handleAction(event) {
+    if (this.pendingSeekTime() !== null) {
+      this.userSeek_(this.pendingSeekTime());
+      this.pendingSeekTime(null);
+    }
     if (this.player_.paused()) {
       this.player_.play();
     } else {
@@ -32014,22 +32099,22 @@ class TrackSettingsControls extends Component$1 {
     super(player, options);
 
     // Create DOM elements
-    const defaultsDescription = this.localize('restore all settings to the default values');
     const resetButton = new Button(player, {
-      controlText: defaultsDescription,
+      controlText: this.localize('restore all settings to the default values'),
       className: 'vjs-default-button'
     });
     resetButton.el().classList.remove('vjs-control', 'vjs-button');
     resetButton.el().textContent = this.localize('Reset');
     this.addChild(resetButton);
+    const doneText = this.localize('Done');
     const doneButton = new Button(player, {
-      controlText: defaultsDescription,
+      controlText: doneText,
       className: 'vjs-done-button'
     });
 
     // Remove unrequired style classes
     doneButton.el().classList.remove('vjs-control', 'vjs-button');
-    doneButton.el().textContent = this.localize('Done');
+    doneButton.el().textContent = doneText;
     this.addChild(doneButton);
   }
 
@@ -35367,8 +35452,12 @@ Tech.registerTech('Html5', Html5);
  * @file player.js
  */
 
-/** @import { TimeRange } from './utils/time' */
+/** @import AudioTrackList from './tracks/audio-track-list' */
 /** @import HtmlTrackElement from './tracks/html-track-element' */
+/** @import HtmlTrackElementList from './tracks/html-track-element-list' */
+/** @import TextTrackList from './tracks/text-track-list' */
+/** @import { TimeRange } from './utils/time' */
+/** @import VideoTrackList from './tracks/video-track-list' */
 
 /**
  * @callback PlayerReadyCallback
@@ -40358,6 +40447,7 @@ class Player extends Component$1 {
  *
  * @method Player.prototype.videoTracks
  */
+Player.prototype.videoTracks = () => {};
 
 /**
  * Get the {@link AudioTrackList}
@@ -40369,6 +40459,7 @@ class Player extends Component$1 {
  *
  * @method Player.prototype.audioTracks
  */
+Player.prototype.audioTracks = () => {};
 
 /**
  * Get the {@link TextTrackList}
@@ -40380,6 +40471,7 @@ class Player extends Component$1 {
  *
  * @method Player.prototype.textTracks
  */
+Player.prototype.textTracks = () => {};
 
 /**
  * Get the remote {@link TextTrackList}
@@ -40389,6 +40481,7 @@ class Player extends Component$1 {
  *
  * @method Player.prototype.remoteTextTracks
  */
+Player.prototype.remoteTextTracks = () => {};
 
 /**
  * Get the remote {@link HtmlTrackElementList} tracks.
@@ -40398,7 +40491,7 @@ class Player extends Component$1 {
  *
  * @method Player.prototype.remoteTextTrackEls
  */
-
+Player.prototype.remoteTextTrackEls = () => {};
 ALL.names.forEach(function (name) {
   const props = ALL[name];
   Player.prototype[props.getterName] = function () {
@@ -40485,7 +40578,8 @@ Player.prototype.options_ = {
   },
   // Default smooth seeking to false
   enableSmoothSeeking: false,
-  disableSeekWhileScrubbingOnMobile: false
+  disableSeekWhileScrubbingOnMobile: false,
+  disableSeekWhileScrubbingOnSTV: false
 };
 TECH_EVENTS_RETRIGGER.forEach(function (event) {
   Player.prototype[`handleTech${toTitleCase$1(event)}_`] = function () {
@@ -41577,9 +41671,13 @@ videojs.trigger = trigger;
  * @see      https://github.com/Raynos/xhr
  */
 videojs.xhr = XHR;
+videojs.TrackList = TrackList;
 videojs.TextTrack = TextTrack;
+videojs.TextTrackList = TextTrackList;
 videojs.AudioTrack = AudioTrack;
+videojs.AudioTrackList = AudioTrackList;
 videojs.VideoTrack = VideoTrack;
+videojs.VideoTrackList = VideoTrackList;
 ['isEl', 'isTextNode', 'createEl', 'hasClass', 'addClass', 'removeClass', 'toggleClass', 'setAttributes', 'getAttributes', 'emptyEl', 'appendContent', 'insertContent'].forEach(k => {
   videojs[k] = function () {
     log$1.warn(`videojs.${k}() is deprecated; use videojs.dom.${k}() instead`);

package/shared/definition67.cjs

@@ -612,16 +612,22 @@ const flip$1 = function (options) {
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
-          // Try next placement and re-run the lifecycle.
-          return {
-            data: {
-              index: nextIndex,
-              overflows: overflowsData
-            },
-            reset: {
-              placement: nextPlacement
-            }
-          };
+          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          if (!ignoreCrossAxisOverflow ||
+          // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
+            // Try next placement and re-run the lifecycle.
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
         }
 
         // First, find the candidates that fit on the mainAxis side of overflow,
@@ -1557,6 +1563,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     scrollTop: 0
   };
   const offsets = createCoords(0);
+
+  // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+  // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -1566,11 +1578,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     } else if (documentElement) {
-      // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
-      // Firefox with layout.scrollbar.side = 3 in about:config to test this.
-      offsets.x = getWindowScrollBarX(documentElement);
+      setLeftRTLScrollbarOffset();
     }
   }
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
   const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -1747,7 +1760,7 @@ function observeMove(element, onMove) {
         // Handle <iframe>s
         root: root.ownerDocument
       });
-    } catch (e) {
+    } catch (_e) {
       io = new IntersectionObserver(handleObserve, options);
     }
     io.observe(element);
@@ -1964,6 +1977,7 @@ class Popup extends vividElement.VividElement {
     this.placementStrategy = PlacementStrategy.Flip;
     this.animationFrame = false;
     this.strategy = "fixed";
+    this.offset = null;
     this.#autoUpdateCallback = () => {
       this.#lastPositionUpdate = this.updatePosition();
       return this.#lastPositionUpdate;
@@ -1983,13 +1997,17 @@ class Popup extends vividElement.VividElement {
         }
       })
     ];
+    let offsetValue = this.offset ?? 0;
     if (this.arrow) {
+      offsetValue += 12;
       middleware = [
-        offset(12),
         ...middleware,
         arrow({ element: this.arrowEl, padding: 10 })
       ];
     }
+    if (offsetValue > 0) {
+      middleware.unshift(offset(offsetValue));
+    }
     return middleware;
   }
   #cleanup;
@@ -2138,6 +2156,9 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ mode: "fromView" })
 ], Popup.prototype, "strategy");
+__decorateClass([
+  vividElement.attr({ attribute: "offset", converter: vividElement.nullableNumberConverter })
+], Popup.prototype, "offset");
 __decorateClass([
   vividElement.observable
 ], Popup.prototype, "anchor");

package/shared/definition67.js

@@ -1,6 +1,6 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { E as Elevation, e as elevationDefinition } from './definition65.js';
-import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -610,16 +610,22 @@ const flip$1 = function (options) {
         const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
         if (nextPlacement) {
-          // Try next placement and re-run the lifecycle.
-          return {
-            data: {
-              index: nextIndex,
-              overflows: overflowsData
-            },
-            reset: {
-              placement: nextPlacement
-            }
-          };
+          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          if (!ignoreCrossAxisOverflow ||
+          // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every(d => d.overflows[0] > 0 && getSideAxis(d.placement) === initialSideAxis)) {
+            // Try next placement and re-run the lifecycle.
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
         }
 
         // First, find the candidates that fit on the mainAxis side of overflow,
@@ -1555,6 +1561,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     scrollTop: 0
   };
   const offsets = createCoords(0);
+
+  // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+  // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
@@ -1564,11 +1576,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     } else if (documentElement) {
-      // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
-      // Firefox with layout.scrollbar.side = 3 in about:config to test this.
-      offsets.x = getWindowScrollBarX(documentElement);
+      setLeftRTLScrollbarOffset();
     }
   }
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
   const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
@@ -1745,7 +1758,7 @@ function observeMove(element, onMove) {
         // Handle <iframe>s
         root: root.ownerDocument
       });
-    } catch (e) {
+    } catch (_e) {
       io = new IntersectionObserver(handleObserve, options);
     }
     io.observe(element);
@@ -1962,6 +1975,7 @@ class Popup extends VividElement {
     this.placementStrategy = PlacementStrategy.Flip;
     this.animationFrame = false;
     this.strategy = "fixed";
+    this.offset = null;
     this.#autoUpdateCallback = () => {
       this.#lastPositionUpdate = this.updatePosition();
       return this.#lastPositionUpdate;
@@ -1981,13 +1995,17 @@ class Popup extends VividElement {
         }
       })
     ];
+    let offsetValue = this.offset ?? 0;
     if (this.arrow) {
+      offsetValue += 12;
       middleware = [
-        offset(12),
         ...middleware,
         arrow({ element: this.arrowEl, padding: 10 })
       ];
     }
+    if (offsetValue > 0) {
+      middleware.unshift(offset(offsetValue));
+    }
     return middleware;
   }
   #cleanup;
@@ -2136,6 +2154,9 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "fromView" })
 ], Popup.prototype, "strategy");
+__decorateClass([
+  attr({ attribute: "offset", converter: nullableNumberConverter })
+], Popup.prototype, "offset");
 __decorateClass([
   observable
 ], Popup.prototype, "anchor");

package/shared/feedback/feedback-message.d.ts

@@ -3,11 +3,11 @@ export type FeedbackType = 'none' | 'helper' | 'error' | 'success';
 declare const FeedbackMessage_base: {
     new (...args: any[]): {
         readonly locale: import("../localization/Locale").Locale;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;