@vonage/vivid 5.2.0 → 5.4.0

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/mixins.cjs

@@ -64,35 +64,39 @@ const feedbackMessageDefinition = vividElement.defineVividComponent(
 );
 
 class RenderInLightDomBehaviour {
-  constructor(templateBinding, isTemplateBindingVolatile) {
+  constructor(directive) {
     this.source = null;
-    this.templateBindingObserver = fastElement.Observable.binding(
-      templateBinding,
+    this.templateBindingObserver = directive.templateBinding.createObserver(
       this,
-      isTemplateBindingVolatile
+      directive
     );
   }
-  bind(source, context) {
-    this.source = source;
-    this.context = context;
+  bind(controller) {
+    this.source = controller.source;
+    this.context = controller.context;
+    this.controller = controller;
     if (!this.insertionPoint) {
       this.insertionPoint = document.createComment("");
-      source.appendChild(this.insertionPoint);
+      this.source.appendChild(this.insertionPoint);
     }
-    this.handleChange();
-  }
-  unbind() {
-    this.source = null;
-    this.view.unbind();
-    this.templateBindingObserver.disconnect();
+    this.templateBindingObserver.bind(controller);
+    this.handleChange(this.source, this.templateBindingObserver);
   }
+  // unbind(): void {
+  // 	this.source = null;
+  // 	if (this.view) {
+  // 		this.view.unbind();
+  // 	}
+  // 	// The observer will be automatically cleaned up when the behavior is destroyed
+  // }
   /**
    * Handles change of the template itself.
    */
-  handleChange() {
-    this.instantiateTemplate(
-      this.templateBindingObserver.observe(this.source, this.context)
-    );
+  handleChange(source, args) {
+    if (args === this.templateBindingObserver) {
+      const template = this.templateBindingObserver.bind(this.controller);
+      this.instantiateTemplate(template);
+    }
   }
   instantiateTemplate(template) {
     if (this.view) {
@@ -103,22 +107,25 @@ class RenderInLightDomBehaviour {
     this.view.insertBefore(this.insertionPoint);
   }
 }
-class RenderInLightDomDirective extends fastElement.HTMLDirective {
+class RenderInLightDomDirective {
   constructor(templateBinding) {
-    super();
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    this.targetNodeId = "";
     this.templateBinding = templateBinding;
-    this.createPlaceholder = fastElement.DOM.createBlockPlaceholder;
-    this.isTemplateBindingVolatile = fastElement.Observable.isVolatileBinding(templateBinding);
+    this.dataBinding = templateBinding;
+  }
+  createHTML(add) {
+    return fastElement.Markup.comment(add(this));
   }
   createBehavior() {
-    return new RenderInLightDomBehaviour(
-      this.templateBinding,
-      this.isTemplateBindingVolatile
-    );
+    return new RenderInLightDomBehaviour(this);
   }
 }
+fastElement.HTMLDirective.define(RenderInLightDomDirective);
 function renderInLightDOM(templateOrTemplateBinding) {
-  const templateBinding = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
+  const templateBinding = fastElement.normalizeBinding(templateOrTemplateBinding);
   return new RenderInLightDomDirective(templateBinding);
 }
 

package/unbundled/mixins.js

@@ -1,4 +1,4 @@
-import { html, when, attr, HTMLDirective, DOM, Observable, observable, slotted } from '@microsoft/fast-element';
+import { html, when, attr, normalizeBinding, Markup, HTMLDirective, observable, slotted } from '@microsoft/fast-element';
 import { v4 } from 'uuid';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { iconDefinition, VwcIconElement as Icon } from '../icon/definition.js';
@@ -62,35 +62,39 @@ const feedbackMessageDefinition = defineVividComponent(
 );
 
 class RenderInLightDomBehaviour {
-  constructor(templateBinding, isTemplateBindingVolatile) {
+  constructor(directive) {
     this.source = null;
-    this.templateBindingObserver = Observable.binding(
-      templateBinding,
+    this.templateBindingObserver = directive.templateBinding.createObserver(
       this,
-      isTemplateBindingVolatile
+      directive
     );
   }
-  bind(source, context) {
-    this.source = source;
-    this.context = context;
+  bind(controller) {
+    this.source = controller.source;
+    this.context = controller.context;
+    this.controller = controller;
     if (!this.insertionPoint) {
       this.insertionPoint = document.createComment("");
-      source.appendChild(this.insertionPoint);
+      this.source.appendChild(this.insertionPoint);
     }
-    this.handleChange();
-  }
-  unbind() {
-    this.source = null;
-    this.view.unbind();
-    this.templateBindingObserver.disconnect();
+    this.templateBindingObserver.bind(controller);
+    this.handleChange(this.source, this.templateBindingObserver);
   }
+  // unbind(): void {
+  // 	this.source = null;
+  // 	if (this.view) {
+  // 		this.view.unbind();
+  // 	}
+  // 	// The observer will be automatically cleaned up when the behavior is destroyed
+  // }
   /**
    * Handles change of the template itself.
    */
-  handleChange() {
-    this.instantiateTemplate(
-      this.templateBindingObserver.observe(this.source, this.context)
-    );
+  handleChange(source, args) {
+    if (args === this.templateBindingObserver) {
+      const template = this.templateBindingObserver.bind(this.controller);
+      this.instantiateTemplate(template);
+    }
   }
   instantiateTemplate(template) {
     if (this.view) {
@@ -101,22 +105,25 @@ class RenderInLightDomBehaviour {
     this.view.insertBefore(this.insertionPoint);
   }
 }
-class RenderInLightDomDirective extends HTMLDirective {
+class RenderInLightDomDirective {
   constructor(templateBinding) {
-    super();
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    this.targetNodeId = "";
     this.templateBinding = templateBinding;
-    this.createPlaceholder = DOM.createBlockPlaceholder;
-    this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
+    this.dataBinding = templateBinding;
+  }
+  createHTML(add) {
+    return Markup.comment(add(this));
   }
   createBehavior() {
-    return new RenderInLightDomBehaviour(
-      this.templateBinding,
-      this.isTemplateBindingVolatile
-    );
+    return new RenderInLightDomBehaviour(this);
   }
 }
+HTMLDirective.define(RenderInLightDomDirective);
 function renderInLightDOM(templateOrTemplateBinding) {
-  const templateBinding = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
+  const templateBinding = normalizeBinding(templateOrTemplateBinding);
   return new RenderInLightDomDirective(templateBinding);
 }
 

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');
 
@@ -146,10 +146,10 @@ class PickerField extends withContextualHelp.WithContextualHelp(
       () => this.locale,
       this.#localeChangeHandler
     );
-    this.#localeChangeObserver.observe(this, fastElement.defaultExecutionContext);
+    this.#localeChangeObserver.observe(this, fastElement.ExecutionContext.default);
   }
   #stopObservingLocaleChanges() {
-    this.#localeChangeObserver.disconnect();
+    this.#localeChangeObserver.dispose();
   }
   #dismissOnClickOutside;
   #openPopupIfPossible() {

package/unbundled/picker-field.template.js

@@ -1,4 +1,4 @@
-import { Observable, defaultExecutionContext, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
+import { Observable, ExecutionContext, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { a as WithFeedback } from './mixins.js';
 import { F as FormAssociated } from './form-associated.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';
 
@@ -144,10 +144,10 @@ class PickerField extends WithContextualHelp(
       () => this.locale,
       this.#localeChangeHandler
     );
-    this.#localeChangeObserver.observe(this, defaultExecutionContext);
+    this.#localeChangeObserver.observe(this, ExecutionContext.default);
   }
   #stopObservingLocaleChanges() {
-    this.#localeChangeObserver.disconnect();
+    this.#localeChangeObserver.dispose();
   }
   #dismissOnClickOutside;
   #openPopupIfPossible() {

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/time-selection-picker.template.cjs

@@ -562,10 +562,10 @@ const TimeSelectionPicker = (Base) => {
         () => this._use12hClock,
         this.#clockChangeHandler
       );
-      this.#clockChangeObserver.observe(this, fastElement.defaultExecutionContext);
+      this.#clockChangeObserver.observe(this, fastElement.ExecutionContext.default);
     }
     #stopObservingClockChanges() {
-      this.#clockChangeObserver.disconnect();
+      this.#clockChangeObserver.dispose();
     }
     /**
      * @internal
@@ -588,7 +588,7 @@ const TimeSelectionPicker = (Base) => {
     _onPickerButtonClick() {
       super._onPickerButtonClick();
       if (this._popupOpen) {
-        fastElement.DOM.processUpdates();
+        fastElement.Updates.process();
         this._inlineTimePickerEl.scrollSelectedOptionsToTop();
       }
     }
@@ -748,7 +748,7 @@ class TimePicker extends TimeSelectionPicker(
   _onPickerButtonClick() {
     super._onPickerButtonClick();
     if (this._popupOpen) {
-      fastElement.DOM.processUpdates();
+      fastElement.Updates.process();
       this._focusableElsWithinDialog()[0]?.focus();
     }
   }

package/unbundled/time-selection-picker.template.js

@@ -1,5 +1,5 @@
 import { V as VividElement, d as defineVividComponent } from './vivid-element.js';
-import { when, html, repeat, observable, attr, nullableNumberConverter, Observable, defaultExecutionContext, DOM, volatile, ref } from '@microsoft/fast-element';
+import { when, html, repeat, observable, attr, nullableNumberConverter, Observable, ExecutionContext, Updates, volatile, ref } from '@microsoft/fast-element';
 import { i as ignoreEventInFocusTraps, a as PickerField } from './picker-field.template.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
 import { classNames } from '@microsoft/fast-web-utilities';
@@ -560,10 +560,10 @@ const TimeSelectionPicker = (Base) => {
         () => this._use12hClock,
         this.#clockChangeHandler
       );
-      this.#clockChangeObserver.observe(this, defaultExecutionContext);
+      this.#clockChangeObserver.observe(this, ExecutionContext.default);
     }
     #stopObservingClockChanges() {
-      this.#clockChangeObserver.disconnect();
+      this.#clockChangeObserver.dispose();
     }
     /**
      * @internal
@@ -586,7 +586,7 @@ const TimeSelectionPicker = (Base) => {
     _onPickerButtonClick() {
       super._onPickerButtonClick();
       if (this._popupOpen) {
-        DOM.processUpdates();
+        Updates.process();
         this._inlineTimePickerEl.scrollSelectedOptionsToTop();
       }
     }
@@ -746,7 +746,7 @@ class TimePicker extends TimeSelectionPicker(
   _onPickerButtonClick() {
     super._onPickerButtonClick();
     if (this._popupOpen) {
-      DOM.processUpdates();
+      Updates.process();
       this._focusableElsWithinDialog()[0]?.focus();
     }
   }