@vonage/vivid 5.2.0 → 5.4.0

package/lib/toggletip/toggletip.d.ts

@@ -5,10 +5,10 @@ declare const Toggletip_base: {
         readonly locale: import("../../shared/localization/Locale").Locale;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -391,9 +391,9 @@ declare const Toggletip_base: {
         connectedCallback(): void;
         disconnectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/tooltip/tooltip.d.ts

@@ -14,9 +14,9 @@ declare const Tooltip_base: {
         connectedCallback(): void;
         disconnectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/tree-item/tree-item.d.ts

@@ -4,10 +4,10 @@ declare const TreeItem_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "host";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -382,10 +382,10 @@ declare const TreeItem_base: {
         iconSlottedContent?: HTMLElement[] | undefined;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/tree-view/tree-view.d.ts

@@ -5,10 +5,10 @@ declare const TreeView_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "host";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/video-player/video-player.d.ts

@@ -8,10 +8,10 @@ declare const VideoPlayer_base: {
         readonly locale: import("../../shared/localization/Locale").Locale;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/locales/de-DE.cjs

@@ -379,6 +379,10 @@ const deDE = {
     clearButtonLabel: "Auswahl löschen",
     noOptionsMessage: "Keine Optionen",
     noMatchesMessage: "Keine Optionen gefunden",
+    selectAllLabel: "Alles auswählen",
+    deselectAllLabel: "Auswahl aufheben",
+    selectedAllMessage: "Alle Optionen ausgewählt",
+    deselectedAllMessage: "Alle Optionen abgewählt",
     loadingOptionsMessage: "Laden...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
@@ -463,8 +467,7 @@ const deDE = {
       (ariaLabel) => ariaLabel ? `Weitere Informationen zu ${ariaLabel} anzeigen` : `Weitere Informationen anzeigen`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "Farbpalette",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -473,6 +476,18 @@ const deDE = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "Farbpalette"
+  },
+  colorPicker: {
+    popupLabel: "Farbwähler",
+    swatchesLabel: "Gespeicherte Farben:",
+    pickerButtonLabel: "Farbwähler öffnen",
+    saveButtonLabel: "Aktuelle Farbe speichern",
+    closeButtonLabel: "Farbwähler schließen",
+    copyButtonLabel: "Farbe in die Zwischenablage kopieren",
+    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut."
   }
 };
 

package/locales/de-DE.js

@@ -377,6 +377,10 @@ const deDE = {
     clearButtonLabel: "Auswahl löschen",
     noOptionsMessage: "Keine Optionen",
     noMatchesMessage: "Keine Optionen gefunden",
+    selectAllLabel: "Alles auswählen",
+    deselectAllLabel: "Auswahl aufheben",
+    selectedAllMessage: "Alle Optionen ausgewählt",
+    deselectedAllMessage: "Alle Optionen abgewählt",
     loadingOptionsMessage: "Laden...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
@@ -461,8 +465,7 @@ const deDE = {
       (ariaLabel) => ariaLabel ? `Weitere Informationen zu ${ariaLabel} anzeigen` : `Weitere Informationen anzeigen`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "Farbpalette",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -471,6 +474,18 @@ const deDE = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "Farbpalette"
+  },
+  colorPicker: {
+    popupLabel: "Farbwähler",
+    swatchesLabel: "Gespeicherte Farben:",
+    pickerButtonLabel: "Farbwähler öffnen",
+    saveButtonLabel: "Aktuelle Farbe speichern",
+    closeButtonLabel: "Farbwähler schließen",
+    copyButtonLabel: "Farbe in die Zwischenablage kopieren",
+    copyErrorText: "Kopieren fehlgeschlagen. Zugriff auf die Zwischenablage wurde blockiert. Versuchen Sie es erneut."
   }
 };
 

package/locales/en-GB.cjs

@@ -211,6 +211,10 @@ const enGB = {
     clearButtonLabel: "Clear selection",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    selectAllLabel: "Select All",
+    deselectAllLabel: "Deselect All",
+    selectedAllMessage: "All options selected",
+    deselectedAllMessage: "All options deselected",
     loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
@@ -295,8 +299,7 @@ const enGB = {
       (ariaLabel) => ariaLabel ? `Show more information about ${ariaLabel}` : `Show more information`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "Color palette",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -305,6 +308,18 @@ const enGB = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "Colour palette"
+  },
+  colorPicker: {
+    popupLabel: "Colour Picker",
+    swatchesLabel: "Saved colours:",
+    pickerButtonLabel: "Open Colour Picker",
+    saveButtonLabel: "Save current colour",
+    closeButtonLabel: "Close Colour Picker",
+    copyButtonLabel: "Copy Colour to Clipboard",
+    copyErrorText: "Copy failed. Clipboard access was blocked. Try again."
   }
 };
 

package/locales/en-GB.js

@@ -209,6 +209,10 @@ const enGB = {
     clearButtonLabel: "Clear selection",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    selectAllLabel: "Select All",
+    deselectAllLabel: "Deselect All",
+    selectedAllMessage: "All options selected",
+    deselectedAllMessage: "All options deselected",
     loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
@@ -293,8 +297,7 @@ const enGB = {
       (ariaLabel) => ariaLabel ? `Show more information about ${ariaLabel}` : `Show more information`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "Color palette",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -303,6 +306,18 @@ const enGB = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "Colour palette"
+  },
+  colorPicker: {
+    popupLabel: "Colour Picker",
+    swatchesLabel: "Saved colours:",
+    pickerButtonLabel: "Open Colour Picker",
+    saveButtonLabel: "Save current colour",
+    closeButtonLabel: "Close Colour Picker",
+    copyButtonLabel: "Copy Colour to Clipboard",
+    copyErrorText: "Copy failed. Clipboard access was blocked. Try again."
   }
 };
 

package/locales/en-US.cjs

@@ -379,6 +379,10 @@ const enUS = {
     clearButtonLabel: "Clear selection",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    selectAllLabel: "Select All",
+    deselectAllLabel: "Deselect All",
+    selectedAllMessage: "All options selected",
+    deselectedAllMessage: "All options deselected",
     loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
@@ -463,8 +467,7 @@ const enUS = {
       (ariaLabel) => ariaLabel ? `Show more information about ${ariaLabel}` : `Show more information`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "Color palette",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -473,6 +476,18 @@ const enUS = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "Color palette"
+  },
+  colorPicker: {
+    popupLabel: "Color Picker",
+    swatchesLabel: "Saved colors:",
+    pickerButtonLabel: "Open Color Picker",
+    saveButtonLabel: "Save current color",
+    closeButtonLabel: "Close Color Picker",
+    copyButtonLabel: "Copy Color to Clipboard",
+    copyErrorText: "Copy failed. Clipboard access was blocked. Try again."
   }
 };
 

package/locales/en-US.js

@@ -377,6 +377,10 @@ const enUS = {
     clearButtonLabel: "Clear selection",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    selectAllLabel: "Select All",
+    deselectAllLabel: "Deselect All",
+    selectedAllMessage: "All options selected",
+    deselectedAllMessage: "All options deselected",
     loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
@@ -461,8 +465,7 @@ const enUS = {
       (ariaLabel) => ariaLabel ? `Show more information about ${ariaLabel}` : `Show more information`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "Color palette",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -471,6 +474,18 @@ const enUS = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "Color palette"
+  },
+  colorPicker: {
+    popupLabel: "Color Picker",
+    swatchesLabel: "Saved colors:",
+    pickerButtonLabel: "Open Color Picker",
+    saveButtonLabel: "Save current color",
+    closeButtonLabel: "Close Color Picker",
+    copyButtonLabel: "Copy Color to Clipboard",
+    copyErrorText: "Copy failed. Clipboard access was blocked. Try again."
   }
 };
 

package/locales/ja-JP.cjs

@@ -378,7 +378,11 @@ const jaJP = {
     clearButtonLabel: "選択をクリア",
     noOptionsMessage: "オプションがありません",
     noMatchesMessage: "オプションが見つかりません",
+    selectAllLabel: "すべて選択",
+    deselectAllLabel: "すべて選択解除",
     loadingOptionsMessage: "読み込み中...",
+    selectedAllMessage: "すべてのオプションが選択されました",
+    deselectedAllMessage: "すべてのオプションの選択を解除",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label}を削除`
@@ -462,8 +466,7 @@ const jaJP = {
       (ariaLabel) => ariaLabel ? `さらに情報を表示 ${ariaLabel}` : `さらに情報を表示`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "カラーパレット",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -472,6 +475,18 @@ const jaJP = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "カラーパレット"
+  },
+  colorPicker: {
+    popupLabel: "カラーピッカー",
+    swatchesLabel: "保存された色:",
+    pickerButtonLabel: "カラーピッカーを開く",
+    saveButtonLabel: "現在の色を保存",
+    closeButtonLabel: "カラーピッカーを閉じる",
+    copyButtonLabel: "色をクリップボードにコピー",
+    copyErrorText: "コピーに失敗しました。クリップボードへのアクセスがブロックされました。もう一度お試しください。"
   }
 };
 

package/locales/ja-JP.js

@@ -376,7 +376,11 @@ const jaJP = {
     clearButtonLabel: "選択をクリア",
     noOptionsMessage: "オプションがありません",
     noMatchesMessage: "オプションが見つかりません",
+    selectAllLabel: "すべて選択",
+    deselectAllLabel: "すべて選択解除",
     loadingOptionsMessage: "読み込み中...",
+    selectedAllMessage: "すべてのオプションが選択されました",
+    deselectedAllMessage: "すべてのオプションの選択を解除",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label}を削除`
@@ -460,8 +464,7 @@ const jaJP = {
       (ariaLabel) => ariaLabel ? `さらに情報を表示 ${ariaLabel}` : `さらに情報を表示`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "カラーパレット",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -470,6 +473,18 @@ const jaJP = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "カラーパレット"
+  },
+  colorPicker: {
+    popupLabel: "カラーピッカー",
+    swatchesLabel: "保存された色:",
+    pickerButtonLabel: "カラーピッカーを開く",
+    saveButtonLabel: "現在の色を保存",
+    closeButtonLabel: "カラーピッカーを閉じる",
+    copyButtonLabel: "色をクリップボードにコピー",
+    copyErrorText: "コピーに失敗しました。クリップボードへのアクセスがブロックされました。もう一度お試しください。"
   }
 };
 

package/locales/zh-CN.cjs

@@ -380,7 +380,11 @@ const zhCN = {
     clearButtonLabel: "清除选择",
     noOptionsMessage: "没有选项",
     noMatchesMessage: "未找到选项",
+    selectAllLabel: "选择全部",
+    deselectAllLabel: "取消全选",
     loadingOptionsMessage: "加载中...",
+    selectedAllMessage: "已选择所有选项",
+    deselectedAllMessage: "取消选择所有选项",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} 删除`
@@ -464,8 +468,7 @@ const zhCN = {
       (ariaLabel) => ariaLabel ? `关于 ${ariaLabel} 的更多信息` : `显示更多信息`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "调色板",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -474,6 +477,18 @@ const zhCN = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "调色板"
+  },
+  colorPicker: {
+    popupLabel: "颜色选择器",
+    swatchesLabel: "已保存的颜色",
+    pickerButtonLabel: "打开颜色选择器",
+    saveButtonLabel: "保存当前颜色",
+    closeButtonLabel: "关闭颜色选择器",
+    copyButtonLabel: "将颜色复制到剪贴板",
+    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。"
   }
 };
 

package/locales/zh-CN.js

@@ -378,7 +378,11 @@ const zhCN = {
     clearButtonLabel: "清除选择",
     noOptionsMessage: "没有选项",
     noMatchesMessage: "未找到选项",
+    selectAllLabel: "选择全部",
+    deselectAllLabel: "取消全选",
     loadingOptionsMessage: "加载中...",
+    selectedAllMessage: "已选择所有选项",
+    deselectedAllMessage: "取消选择所有选项",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} 删除`
@@ -462,8 +466,7 @@ const zhCN = {
       (ariaLabel) => ariaLabel ? `关于 ${ariaLabel} 的更多信息` : `显示更多信息`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "调色板",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -472,6 +475,18 @@ const zhCN = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "调色板"
+  },
+  colorPicker: {
+    popupLabel: "颜色选择器",
+    swatchesLabel: "已保存的颜色",
+    pickerButtonLabel: "打开颜色选择器",
+    saveButtonLabel: "保存当前颜色",
+    closeButtonLabel: "关闭颜色选择器",
+    copyButtonLabel: "将颜色复制到剪贴板",
+    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。"
   }
 };
 

package/menu/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const menuItem_definition = require('../unbundled/definition2.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
@@ -105,7 +105,7 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
         return;
       }
       const newValue = !this.open;
-      fastElement.DOM.queueUpdate(() => this.open = newValue);
+      fastElement.Updates.enqueue(() => this.open = newValue);
     };
     this._onFocusout = (e) => {
       const focusTarget = e.relatedTarget;
@@ -128,7 +128,7 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
    */
   connectedCallback() {
     super.connectedCallback();
-    fastElement.DOM.queueUpdate(() => {
+    fastElement.Updates.enqueue(() => {
       this.setItems();
     });
   }
@@ -251,7 +251,7 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
   /**
    * @internal
    */
-  _onChange(e) {
+  _onBodyChange(e) {
     if (this.menuItems === void 0 || !(e.target instanceof Element)) {
       return;
     }
@@ -341,8 +341,7 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return fastElement.html`
-		<template @change="${(x, c) => x._onChange(c.event)}"
-							@focusout="${(x, c) => x._onFocusout(c.event)}">
+		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
 				${fastElement.ref("_popupEl")}
@@ -364,6 +363,7 @@ const MenuTemplate = (context) => {
 					${delegatesAria.delegateAria({
     role: "menu"
   })}
+					@change="${(x, c) => x._onBodyChange(c.event)}"
 					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
 					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
 				>

package/menu/definition.js

@@ -1,7 +1,7 @@
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
 import { M as MenuItem, a as MenuItemRole, m as menuItemDefinition, b as menuName } from '../unbundled/definition2.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { DOM, attr, nullableNumberConverter, observable, ref, slotted, html } from '@microsoft/fast-element';
+import { Updates, attr, nullableNumberConverter, observable, ref, slotted, html } from '@microsoft/fast-element';
 import { keyHome, keyEnd, keyArrowUp, keyArrowDown, classNames } from '@microsoft/fast-web-utilities';
 import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
@@ -101,7 +101,7 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
         return;
       }
       const newValue = !this.open;
-      DOM.queueUpdate(() => this.open = newValue);
+      Updates.enqueue(() => this.open = newValue);
     };
     this._onFocusout = (e) => {
       const focusTarget = e.relatedTarget;
@@ -124,7 +124,7 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
    */
   connectedCallback() {
     super.connectedCallback();
-    DOM.queueUpdate(() => {
+    Updates.enqueue(() => {
       this.setItems();
     });
   }
@@ -247,7 +247,7 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
   /**
    * @internal
    */
-  _onChange(e) {
+  _onBodyChange(e) {
     if (this.menuItems === void 0 || !(e.target instanceof Element)) {
       return;
     }
@@ -337,8 +337,7 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return html`
-		<template @change="${(x, c) => x._onChange(c.event)}"
-							@focusout="${(x, c) => x._onFocusout(c.event)}">
+		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
 				${ref("_popupEl")}
@@ -360,6 +359,7 @@ const MenuTemplate = (context) => {
 					${delegateAria({
     role: "menu"
   })}
+					@change="${(x, c) => x._onBodyChange(c.event)}"
 					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
 					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
 				>

package/nav-disclosure/definition.js

@@ -1,7 +1,7 @@
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { V as VividElement, r as replaces, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, ref, html } from '@microsoft/fast-element';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 

package/nav-item/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { V as VividElement, r as replaces, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, html } from '@microsoft/fast-element';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { L as Linkable } from '../unbundled/linkable.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 

package/note/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, when, html } from '@microsoft/fast-element';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
 const styles = ".base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";