@vonage/vivid 5.3.0 → 5.4.0

package/unbundled/definition6.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+const vividElement = require('./vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Elevation extends vividElement.VividElement {
+}
+__decorateClass([
+  fastElement.attr
+], Elevation.prototype, "dp");
+__decorateClass([
+  fastElement.attr({ attribute: "no-shadow", mode: "boolean" })
+], Elevation.prototype, "noShadow");
+__decorateClass([
+  fastElement.attr({ attribute: "not-relative", mode: "boolean" })
+], Elevation.prototype, "notRelative");
+
+const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
+
+const getClasses = ({ dp, noShadow, notRelative }) => fastWebUtilities.classNames(
+  "control",
+  [`dp-${dp}`, Boolean(dp)],
+  ["no-shadow", Boolean(noShadow)],
+  ["not-relative", Boolean(notRelative)]
+);
+const elevationTemplate = fastElement.html` <div
+	class="${getClasses}"
+	part="base"
+>
+	<slot></slot>
+</div>`;
+
+const elevationDefinition = vividElement.defineVividComponent(
+  "elevation",
+  Elevation,
+  elevationTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerElevation = vividElement.createRegisterFunction(elevationDefinition);
+
+exports.Elevation = Elevation;
+exports.elevationDefinition = elevationDefinition;
+exports.registerElevation = registerElevation;

package/unbundled/definition6.js

@@ -0,0 +1,52 @@
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from './vivid-element.js';
+import { attr, html } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Elevation extends VividElement {
+}
+__decorateClass([
+  attr
+], Elevation.prototype, "dp");
+__decorateClass([
+  attr({ attribute: "no-shadow", mode: "boolean" })
+], Elevation.prototype, "noShadow");
+__decorateClass([
+  attr({ attribute: "not-relative", mode: "boolean" })
+], Elevation.prototype, "notRelative");
+
+const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
+
+const getClasses = ({ dp, noShadow, notRelative }) => classNames(
+  "control",
+  [`dp-${dp}`, Boolean(dp)],
+  ["no-shadow", Boolean(noShadow)],
+  ["not-relative", Boolean(notRelative)]
+);
+const elevationTemplate = html` <div
+	class="${getClasses}"
+	part="base"
+>
+	<slot></slot>
+</div>`;
+
+const elevationDefinition = defineVividComponent(
+  "elevation",
+  Elevation,
+  elevationTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerElevation = createRegisterFunction(elevationDefinition);
+
+export { Elevation as E, elevationDefinition as e, registerElevation as r };

package/unbundled/listbox.cjs

@@ -2,7 +2,7 @@
 
 const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const option = require('./option.cjs');
+const option_definition = require('./definition3.cjs');
 const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
@@ -55,14 +55,6 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
   get firstSelectedOption() {
     return this.selectedOptions[0] ?? null;
   }
-  /**
-   * Returns true if there is one or more selectable option.
-   *
-   * @internal
-   */
-  get hasSelectableOptions() {
-    return this.options.length > 0 && !this.options.every((o) => o.disabled);
-  }
   /**
    * The number of options.
    *
@@ -81,8 +73,19 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
     return this._options;
   }
   set options(value) {
+    const prev = this._options;
     this._options = value;
     fastElement.Observable.notify(this, "options");
+    if (this.$fastController.isConnected) {
+      const newSelectedIndex = this._newDefaultSelectedIndex(
+        prev,
+        value,
+        this.selectedIndex
+      );
+      if (newSelectedIndex !== null) {
+        this.selectedIndex = newSelectedIndex;
+      }
+    }
   }
   static {
     /**
@@ -91,7 +94,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
      * @param n - element to filter
      * @public
      */
-    this.slottedOptionFilter = (n) => option.isListboxOption(n) && !n.hidden;
+    this.slottedOptionFilter = (n) => option_definition.isListboxOption(n) && !n.hidden;
   }
   static {
     /**
@@ -156,34 +159,11 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
     const re = new RegExp(`^${pattern}`, "gi");
     return this.options.filter((o) => o.text.trim().match(re));
   }
-  /**
-   * Determines the index of the next option which is selectable, if any.
-   *
-   * @param prev - the previous selected index
-   * @param next - the next index to select
-   *
-   * @internal
-   */
-  getSelectableIndex(prev, next) {
-    const direction = prev > next ? -1 : 1;
-    const potentialDirection = prev + direction;
-    let nextSelectableOption = null;
-    switch (direction) {
-      case -1: {
-        nextSelectableOption = this.options.reduceRight(
-          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index < potentialDirection ? thisOption : nextSelectableOption2,
-          nextSelectableOption
-        );
-        break;
-      }
-      case 1: {
-        nextSelectableOption = this.options.reduce(
-          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index > potentialDirection ? thisOption : nextSelectableOption2,
-          nextSelectableOption
-        );
-        break;
-      }
-    }
+  getNextSelectableIndex(fromIndex) {
+    const nextSelectableOption = this.options.reduce(
+      (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index >= fromIndex ? thisOption : nextSelectableOption2,
+      null
+    );
     return this.options.indexOf(nextSelectableOption);
   }
   /**
@@ -301,18 +281,17 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @internal
    */
   selectedIndexChanged(prev, next) {
-    if (!this.hasSelectableOptions) {
-      this.selectedIndex = -1;
-      return;
-    }
-    if (this.options[this.selectedIndex]?.disabled && typeof prev === "number") {
-      const selectableIndex = this.getSelectableIndex(prev, next);
-      const newNext = selectableIndex > -1 ? selectableIndex : prev;
-      this.selectedIndex = newNext;
+    const validNext = this._validSelectedIndex(next);
+    if (next !== validNext) {
+      this.selectedIndex = validNext;
       return;
     }
     this.setSelectedOptions();
   }
+  _validSelectedIndex(index) {
+    const outOfRange = index > this.options.length - 1 || index < -1;
+    return outOfRange ? -1 : index;
+  }
   /**
    * Updates the selectedness of each option when the list of selected options changes.
    *
@@ -367,13 +346,18 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
       this.selectedIndex = this.selectedIndex - 1;
     }
   }
-  /**
-   * Updates the selected index to match the first selected option.
-   *
-   * @internal
-   */
-  setDefaultSelectedOption() {
-    this.selectedIndex = this.options.findIndex((el) => el.defaultSelected);
+  /// For this options change, determine if selectedIndex should change based on defaultSelected. Otherwise, returns null.
+  _newDefaultSelectedIndex(prev, next, currentSelectedIndex) {
+    for (const [index, newOption] of next.entries()) {
+      if (this._isDefaultSelected(newOption) && !prev.includes(newOption)) {
+        return index;
+      }
+    }
+    return null;
+  }
+  /// Whether an option should be considered defaultSelected
+  _isDefaultSelected(option) {
+    return option.defaultSelected;
   }
   /**
    * Sets an option as selected and gives it focus.
@@ -381,11 +365,9 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @public
    */
   setSelectedOptions() {
-    if (this.options.length) {
-      this.selectedOptions = [this.options[this.selectedIndex]];
-      this._activeDescendant = this.firstSelectedOption?.id ?? "";
-      this.focusAndScrollOptionIntoView();
-    }
+    this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
+    this._activeDescendant = this.firstSelectedOption?.id ?? "";
+    this.focusAndScrollOptionIntoView();
   }
   /**
    * Updates the list of options and resets the selected option when the slotted option content changes.
@@ -394,7 +376,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    */
   slottedOptionsChanged(_, next) {
     this.options = next.reduce((options, item) => {
-      if (option.isListboxOption(item)) {
+      if (option_definition.isListboxOption(item)) {
         options.push(item);
       }
       return options;
@@ -407,10 +389,6 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
       option.ariaPosInSet = `${index + 1}`;
       option.ariaSetSize = setSize;
     });
-    if (this.$fastController.isConnected) {
-      this.setSelectedOptions();
-      this.setDefaultSelectedOption();
-    }
   }
   /**
    * Updates the filtered list of options when the typeahead buffer changes.

package/unbundled/listbox.js

@@ -1,6 +1,6 @@
 import { Observable, attr, observable } from '@microsoft/fast-element';
 import { keySpace, keyEscape, keyEnter, keyTab, keyEnd, keyArrowUp, keyArrowDown, keyHome, findLastIndex, uniqueId } from '@microsoft/fast-web-utilities';
-import { i as isListboxOption } from './option.js';
+import { i as isListboxOption } from './definition3.js';
 import { V as VividElement } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
@@ -53,14 +53,6 @@ const _Listbox = class _Listbox extends VividElement {
   get firstSelectedOption() {
     return this.selectedOptions[0] ?? null;
   }
-  /**
-   * Returns true if there is one or more selectable option.
-   *
-   * @internal
-   */
-  get hasSelectableOptions() {
-    return this.options.length > 0 && !this.options.every((o) => o.disabled);
-  }
   /**
    * The number of options.
    *
@@ -79,8 +71,19 @@ const _Listbox = class _Listbox extends VividElement {
     return this._options;
   }
   set options(value) {
+    const prev = this._options;
     this._options = value;
     Observable.notify(this, "options");
+    if (this.$fastController.isConnected) {
+      const newSelectedIndex = this._newDefaultSelectedIndex(
+        prev,
+        value,
+        this.selectedIndex
+      );
+      if (newSelectedIndex !== null) {
+        this.selectedIndex = newSelectedIndex;
+      }
+    }
   }
   static {
     /**
@@ -154,34 +157,11 @@ const _Listbox = class _Listbox extends VividElement {
     const re = new RegExp(`^${pattern}`, "gi");
     return this.options.filter((o) => o.text.trim().match(re));
   }
-  /**
-   * Determines the index of the next option which is selectable, if any.
-   *
-   * @param prev - the previous selected index
-   * @param next - the next index to select
-   *
-   * @internal
-   */
-  getSelectableIndex(prev, next) {
-    const direction = prev > next ? -1 : 1;
-    const potentialDirection = prev + direction;
-    let nextSelectableOption = null;
-    switch (direction) {
-      case -1: {
-        nextSelectableOption = this.options.reduceRight(
-          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index < potentialDirection ? thisOption : nextSelectableOption2,
-          nextSelectableOption
-        );
-        break;
-      }
-      case 1: {
-        nextSelectableOption = this.options.reduce(
-          (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index > potentialDirection ? thisOption : nextSelectableOption2,
-          nextSelectableOption
-        );
-        break;
-      }
-    }
+  getNextSelectableIndex(fromIndex) {
+    const nextSelectableOption = this.options.reduce(
+      (nextSelectableOption2, thisOption, index) => !nextSelectableOption2 && !thisOption.disabled && index >= fromIndex ? thisOption : nextSelectableOption2,
+      null
+    );
     return this.options.indexOf(nextSelectableOption);
   }
   /**
@@ -299,18 +279,17 @@ const _Listbox = class _Listbox extends VividElement {
    * @internal
    */
   selectedIndexChanged(prev, next) {
-    if (!this.hasSelectableOptions) {
-      this.selectedIndex = -1;
-      return;
-    }
-    if (this.options[this.selectedIndex]?.disabled && typeof prev === "number") {
-      const selectableIndex = this.getSelectableIndex(prev, next);
-      const newNext = selectableIndex > -1 ? selectableIndex : prev;
-      this.selectedIndex = newNext;
+    const validNext = this._validSelectedIndex(next);
+    if (next !== validNext) {
+      this.selectedIndex = validNext;
       return;
     }
     this.setSelectedOptions();
   }
+  _validSelectedIndex(index) {
+    const outOfRange = index > this.options.length - 1 || index < -1;
+    return outOfRange ? -1 : index;
+  }
   /**
    * Updates the selectedness of each option when the list of selected options changes.
    *
@@ -365,13 +344,18 @@ const _Listbox = class _Listbox extends VividElement {
       this.selectedIndex = this.selectedIndex - 1;
     }
   }
-  /**
-   * Updates the selected index to match the first selected option.
-   *
-   * @internal
-   */
-  setDefaultSelectedOption() {
-    this.selectedIndex = this.options.findIndex((el) => el.defaultSelected);
+  /// For this options change, determine if selectedIndex should change based on defaultSelected. Otherwise, returns null.
+  _newDefaultSelectedIndex(prev, next, currentSelectedIndex) {
+    for (const [index, newOption] of next.entries()) {
+      if (this._isDefaultSelected(newOption) && !prev.includes(newOption)) {
+        return index;
+      }
+    }
+    return null;
+  }
+  /// Whether an option should be considered defaultSelected
+  _isDefaultSelected(option) {
+    return option.defaultSelected;
   }
   /**
    * Sets an option as selected and gives it focus.
@@ -379,11 +363,9 @@ const _Listbox = class _Listbox extends VividElement {
    * @public
    */
   setSelectedOptions() {
-    if (this.options.length) {
-      this.selectedOptions = [this.options[this.selectedIndex]];
-      this._activeDescendant = this.firstSelectedOption?.id ?? "";
-      this.focusAndScrollOptionIntoView();
-    }
+    this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
+    this._activeDescendant = this.firstSelectedOption?.id ?? "";
+    this.focusAndScrollOptionIntoView();
   }
   /**
    * Updates the list of options and resets the selected option when the slotted option content changes.
@@ -405,10 +387,6 @@ const _Listbox = class _Listbox extends VividElement {
       option.ariaPosInSet = `${index + 1}`;
       option.ariaSetSize = setSize;
     });
-    if (this.$fastController.isConnected) {
-      this.setSelectedOptions();
-      this.setDefaultSelectedOption();
-    }
   }
   /**
    * Updates the filtered list of options when the typeahead buffer changes.

package/unbundled/picker-field.template.cjs

@@ -10,7 +10,7 @@ const withErrorText = require('./with-error-text.cjs');
 const formElement = require('./form-element.cjs');
 const localized = require('./localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const popup_definition = require('./definition4.cjs');
+const popup_definition = require('./definition5.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const button_definition = require('./definition.cjs');
 

package/unbundled/picker-field.template.js

@@ -8,7 +8,7 @@ import { W as WithErrorText } from './with-error-text.js';
 import { F as FormElement } from './form-element.js';
 import { L as Localized } from './localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
-import { P as Popup } from './definition4.js';
+import { P as Popup } from './definition5.js';
 import { VwcTextFieldElement as TextField } from '../text-field/definition.js';
 import { B as Button } from './definition.js';
 

package/unbundled/slider.template.cjs

@@ -2,7 +2,7 @@
 
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const fastElement = require('@microsoft/fast-element');
-const popup_definition = require('./definition4.cjs');
+const popup_definition = require('./definition5.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
 
 const getDecimalPlaces = (num) => {

package/unbundled/slider.template.js

@@ -1,6 +1,6 @@
 import { limit, classNames, Orientation } from '@microsoft/fast-web-utilities';
 import { ref, when, html } from '@microsoft/fast-element';
-import { P as Popup, a as PlacementStrategy } from './definition4.js';
+import { P as Popup, a as PlacementStrategy } from './definition5.js';
 import { d as delegateAria } from './delegates-aria.js';
 
 const getDecimalPlaces = (num) => {

package/unbundled/vivid-element.cjs

@@ -268,7 +268,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(fastElement.FASTElement)) {
   static {
-    this.VIVID_VERSION = "5.3.0";
+    this.VIVID_VERSION = "5.4.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/unbundled/vivid-element.js

@@ -266,7 +266,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "5.3.0";
+    this.VIVID_VERSION = "5.4.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/video-player/definition.cjs

@@ -6313,6 +6313,9 @@ function _insertBefore(parent, node, child, _inDocumentAssertion) {
 	}
 	do{
 		newFirst.parentNode = parent;
+		// Update ownerDocument for each node being inserted
+		var targetDoc = parent.ownerDocument || parent;
+		_updateOwnerDocument(newFirst, targetDoc);
 	}while(newFirst !== newLast && (newFirst= newFirst.nextSibling))
 	_onUpdateChild(parent.ownerDocument||parent, parent);
 	//console.log(parent.lastChild.nextSibling == null)
@@ -6322,6 +6325,37 @@ function _insertBefore(parent, node, child, _inDocumentAssertion) {
 	return node;
 }
 
+/**
+ * Recursively updates the ownerDocument property for a node and all its descendants
+ * @param {Node} node
+ * @param {Document} newOwnerDocument
+ * @private
+ */
+function _updateOwnerDocument(node, newOwnerDocument) {
+	if (node.ownerDocument === newOwnerDocument) {
+		return;
+	}
+	
+	node.ownerDocument = newOwnerDocument;
+	
+	// Update attributes if this is an element
+	if (node.nodeType === ELEMENT_NODE && node.attributes) {
+		for (var i = 0; i < node.attributes.length; i++) {
+			var attr = node.attributes.item(i);
+			if (attr) {
+				attr.ownerDocument = newOwnerDocument;
+			}
+		}
+	}
+	
+	// Recursively update child nodes
+	var child = node.firstChild;
+	while (child) {
+		_updateOwnerDocument(child, newOwnerDocument);
+		child = child.nextSibling;
+	}
+}
+
 /**
  * Appends `newChild` to `parentNode`.
  * If `newChild` is already connected to a `parentNode` it is first removed from it.
@@ -6347,6 +6381,11 @@ function _appendSingleChild (parentNode, newChild) {
 	}
 	parentNode.lastChild = newChild;
 	_onUpdateChild(parentNode.ownerDocument, parentNode, newChild);
+	
+	// Update ownerDocument for the new child and all its descendants
+	var targetDoc = parentNode.ownerDocument || parentNode;
+	_updateOwnerDocument(newChild, targetDoc);
+	
 	return newChild;
 }
 
@@ -6375,7 +6414,7 @@ Document.prototype = {
 			return newChild;
 		}
 		_insertBefore(this, newChild, refChild);
-		newChild.ownerDocument = this;
+		_updateOwnerDocument(newChild, this);
 		if (this.documentElement === null && newChild.nodeType === ELEMENT_NODE) {
 			this.documentElement = newChild;
 		}
@@ -6391,7 +6430,7 @@ Document.prototype = {
 	replaceChild: function (newChild, oldChild) {
 		//raises
 		_insertBefore(this, newChild, oldChild, assertPreReplacementValidityInDocument);
-		newChild.ownerDocument = this;
+		_updateOwnerDocument(newChild, this);
 		if (oldChild) {
 			this.removeChild(oldChild);
 		}
@@ -13743,7 +13782,7 @@ var clock = {
 
 /**
  * @license
- * Video.js 8.23.3 <http://videojs.com/>
+ * Video.js 8.23.4 <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>
@@ -13754,7 +13793,7 @@ var clock = {
  */
 
 
-var version$6 = "8.23.3";
+var version$6 = "8.23.4";
 
 /**
  * An Object that contains lifecycle hooks as keys which point to an array
@@ -17852,8 +17891,8 @@ class Component$1 {
    * Remove a child `Component` from this `Component`s list of children. Also removes
    * the child `Component`s element from this `Component`s element.
    *
-   * @param {Component} component
-   *        The child `Component` to remove.
+   * @param {string|Component} component
+   *       The name or instance of a child to remove.
    */
   removeChild(component) {
     if (typeof component === 'string') {
@@ -41966,7 +42005,7 @@ videojs.registerPlugin('qualityLevels', qualityLevels);
 // Include the version number.
 qualityLevels.VERSION = version$5;
 
-/*! @name @videojs/http-streaming @version 3.17.0 @license Apache-2.0 */
+/*! @name @videojs/http-streaming @version 3.17.2 @license Apache-2.0 */
 
 /**
  * @file resolve-url.js - Handling how URLs are resolved and manipulated
@@ -43470,7 +43509,7 @@ const getStreamingNetworkErrorMetadata = ({
   } else if (request.aborted) {
     errorMetadata.errorType = videojs.Error.NetworkRequestAborted;
   } else if (request.timedout) {
-    errorMetadata.erroType = videojs.Error.NetworkRequestTimeout;
+    errorMetadata.errorType = videojs.Error.NetworkRequestTimeout;
   } else if (isBadStatusOrParseFailure) {
     const errorType = parseFailure ? videojs.Error.NetworkBodyParserFailed : videojs.Error.NetworkBadStatus;
     errorMetadata.errorType = errorType;
@@ -44746,16 +44785,17 @@ class PlaylistLoader extends EventTarget$1 {
    */
 
   getKeyIdSet(playlist) {
-    if (playlist.contentProtection) {
-      const keyIds = new Set();
-      for (const keysystem in playlist.contentProtection) {
+    const keyIds = new Set();
+    if (!playlist || !playlist.contentProtection) {
+      return keyIds;
+    }
+    for (const keysystem in playlist.contentProtection) {
+      if (playlist.contentProtection[keysystem] && playlist.contentProtection[keysystem].attributes && playlist.contentProtection[keysystem].attributes.keyId) {
         const keyId = playlist.contentProtection[keysystem].attributes.keyId;
-        if (keyId) {
-          keyIds.add(keyId.toLowerCase());
-        }
+        keyIds.add(keyId.toLowerCase());
       }
-      return keyIds;
     }
+    return keyIds;
   }
 }
 
@@ -67811,7 +67851,7 @@ const initPlugin = function (player, options) {
 const reloadSourceOnError = function (options) {
   initPlugin(this, options);
 };
-var version$4 = "3.17.0";
+var version$4 = "3.17.2";
 var version$3 = "7.1.0";
 var version$2 = "1.3.1";
 var version$1 = "7.2.0";