@vonage/vivid 5.1.0 → 5.3.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

@@ -369,7 +369,8 @@ const deDE = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "Fehler:"
   },
   tab: {
     dismissButtonLabel: "Drücken Sie die ENTF-Taste, um diese Registerkarte zu schließen"
@@ -462,8 +463,7 @@ const deDE = {
       (ariaLabel) => ariaLabel ? `Weitere Informationen zu ${ariaLabel} anzeigen` : `Weitere Informationen anzeigen`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "Farbpalette",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -472,6 +472,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

@@ -367,7 +367,8 @@ const deDE = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "Fehler:"
   },
   tab: {
     dismissButtonLabel: "Drücken Sie die ENTF-Taste, um diese Registerkarte zu schließen"
@@ -460,8 +461,7 @@ const deDE = {
       (ariaLabel) => ariaLabel ? `Weitere Informationen zu ${ariaLabel} anzeigen` : `Weitere Informationen anzeigen`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "Farbpalette",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -470,6 +470,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

@@ -201,7 +201,8 @@ const enGB = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "Error:"
   },
   tab: {
     dismissButtonLabel: "Press the DELETE key to close this tab"
@@ -294,8 +295,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) => {
@@ -304,6 +304,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

@@ -199,7 +199,8 @@ const enGB = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "Error:"
   },
   tab: {
     dismissButtonLabel: "Press the DELETE key to close this tab"
@@ -292,8 +293,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) => {
@@ -302,6 +302,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

@@ -369,7 +369,8 @@ const enUS = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "Error:"
   },
   tab: {
     dismissButtonLabel: "Press the DELETE key to close this tab"
@@ -462,8 +463,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) => {
@@ -472,6 +472,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

@@ -367,7 +367,8 @@ const enUS = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "Error:"
   },
   tab: {
     dismissButtonLabel: "Press the DELETE key to close this tab"
@@ -460,8 +461,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) => {
@@ -470,6 +470,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

@@ -368,7 +368,8 @@ const jaJP = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "エラー："
   },
   tab: {
     dismissButtonLabel: "このタブを閉じるにはDELETEキーを押してください"
@@ -461,8 +462,7 @@ const jaJP = {
       (ariaLabel) => ariaLabel ? `さらに情報を表示 ${ariaLabel}` : `さらに情報を表示`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "カラーパレット",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -471,6 +471,18 @@ const jaJP = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "カラーパレット"
+  },
+  colorPicker: {
+    popupLabel: "カラーピッカー",
+    swatchesLabel: "保存された色:",
+    pickerButtonLabel: "カラーピッカーを開く",
+    saveButtonLabel: "現在の色を保存",
+    closeButtonLabel: "カラーピッカーを閉じる",
+    copyButtonLabel: "色をクリップボードにコピー",
+    copyErrorText: "コピーに失敗しました。クリップボードへのアクセスがブロックされました。もう一度お試しください。"
   }
 };
 

package/locales/ja-JP.js

@@ -366,7 +366,8 @@ const jaJP = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "エラー："
   },
   tab: {
     dismissButtonLabel: "このタブを閉じるにはDELETEキーを押してください"
@@ -459,8 +460,7 @@ const jaJP = {
       (ariaLabel) => ariaLabel ? `さらに情報を表示 ${ariaLabel}` : `さらに情報を表示`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "カラーパレット",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -469,6 +469,18 @@ const jaJP = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "カラーパレット"
+  },
+  colorPicker: {
+    popupLabel: "カラーピッカー",
+    swatchesLabel: "保存された色:",
+    pickerButtonLabel: "カラーピッカーを開く",
+    saveButtonLabel: "現在の色を保存",
+    closeButtonLabel: "カラーピッカーを閉じる",
+    copyButtonLabel: "色をクリップボードにコピー",
+    copyErrorText: "コピーに失敗しました。クリップボードへのアクセスがブロックされました。もう一度お試しください。"
   }
 };
 

package/locales/zh-CN.cjs

@@ -370,7 +370,8 @@ const zhCN = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "错误："
   },
   tab: {
     dismissButtonLabel: "按 DELETE 键关闭此选项卡"
@@ -463,8 +464,7 @@ const zhCN = {
       (ariaLabel) => ariaLabel ? `关于 ${ariaLabel} 的更多信息` : `显示更多信息`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "调色板",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -473,6 +473,18 @@ const zhCN = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "调色板"
+  },
+  colorPicker: {
+    popupLabel: "颜色选择器",
+    swatchesLabel: "已保存的颜色",
+    pickerButtonLabel: "打开颜色选择器",
+    saveButtonLabel: "保存当前颜色",
+    closeButtonLabel: "关闭颜色选择器",
+    copyButtonLabel: "将颜色复制到剪贴板",
+    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。"
   }
 };
 

package/locales/zh-CN.js

@@ -368,7 +368,8 @@ const zhCN = {
     digitNineLabel: "9 WXYZ",
     digitAsteriskLabel: "*",
     digitZeroLabel: "0",
-    digitHashtagLabel: "#"
+    digitHashtagLabel: "#",
+    errorLabel: "错误："
   },
   tab: {
     dismissButtonLabel: "按 DELETE 键关闭此选项卡"
@@ -461,8 +462,7 @@ const zhCN = {
       (ariaLabel) => ariaLabel ? `关于 ${ariaLabel} 的更多信息` : `显示更多信息`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "调色板",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -471,6 +471,18 @@ const zhCN = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "调色板"
+  },
+  colorPicker: {
+    popupLabel: "颜色选择器",
+    swatchesLabel: "已保存的颜色",
+    pickerButtonLabel: "打开颜色选择器",
+    saveButtonLabel: "保存当前颜色",
+    closeButtonLabel: "关闭颜色选择器",
+    copyButtonLabel: "将颜色复制到剪贴板",
+    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。"
   }
 };
 

package/menu/definition.cjs

@@ -12,7 +12,7 @@ const delegatesAria = require('../unbundled/delegates-aria.cjs');
 const divider = require('../unbundled/divider.cjs');
 const index = require('../unbundled/index.cjs');
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:8px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -30,6 +30,7 @@ const isMenuItemElement = (el) => el instanceof menuItem_definition.MenuItem ? t
 class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.VividElement)) {
   constructor() {
     super(...arguments);
+    this.offset = null;
     this.expandedItem = null;
     /**
      * The index of the focusable element in the items array
@@ -104,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;
@@ -127,7 +128,7 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
    */
   connectedCallback() {
     super.connectedCallback();
-    fastElement.DOM.queueUpdate(() => {
+    fastElement.Updates.enqueue(() => {
       this.setItems();
     });
   }
@@ -285,6 +286,9 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
     return true;
   }
 }
+__decorateClass([
+  fastElement.attr({ attribute: "offset", converter: fastElement.nullableNumberConverter })
+], Menu.prototype, "offset");
 __decorateClass([
   fastElement.observable
 ], Menu.prototype, "items");
@@ -346,7 +350,7 @@ const MenuTemplate = (context) => {
 				:open=${(x) => x.open}
 				:anchor=${(x) => x._anchorEl}
 				:strategy="${(x) => x.positionStrategy}"
-				:offset=${(x) => x._popupOffset}
+				:offset=${(x) => x.offset || x._popupOffset}
 				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
 				@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
 				@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"

package/menu/definition.js

@@ -1,14 +1,14 @@
 import { P as Popup, p as popupDefinition } from '../unbundled/definition4.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, observable, attr, 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';
 import { D as Divider } from '../unbundled/divider.js';
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding-block-start:4px;padding-inline:8px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;padding:4px;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);min-inline-size:var(--menu-min-inline-size)}@media not all and (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size, 300px)}}@media (width >= 600px){.base{max-inline-size:var(--menu-max-inline-size)}}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[data-vvd-component=menuitem]:focus-visible){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;display:block}.header{padding:4px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-block-end:4px;padding-inline:12px}.hide-actions .action-items{display:none}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -26,6 +26,7 @@ const isMenuItemElement = (el) => el instanceof MenuItem ? true : Boolean(el.rol
 class Menu extends Anchored(DelegatesAria(VividElement)) {
   constructor() {
     super(...arguments);
+    this.offset = null;
     this.expandedItem = null;
     /**
      * The index of the focusable element in the items array
@@ -100,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;
@@ -123,7 +124,7 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
    */
   connectedCallback() {
     super.connectedCallback();
-    DOM.queueUpdate(() => {
+    Updates.enqueue(() => {
       this.setItems();
     });
   }
@@ -281,6 +282,9 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
     return true;
   }
 }
+__decorateClass([
+  attr({ attribute: "offset", converter: nullableNumberConverter })
+], Menu.prototype, "offset");
 __decorateClass([
   observable
 ], Menu.prototype, "items");
@@ -342,7 +346,7 @@ const MenuTemplate = (context) => {
 				:open=${(x) => x.open}
 				:anchor=${(x) => x._anchorEl}
 				:strategy="${(x) => x.positionStrategy}"
-				:offset=${(x) => x._popupOffset}
+				:offset=${(x) => x.offset || x._popupOffset}
 				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
 				@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
 				@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"

package/note/index.cjs

@@ -1,8 +1,8 @@
-"use strict";const s=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),i=require("../bundled/affix.cjs"),d=require("../bundled/class-names.cjs"),f=require("../bundled/when.cjs"),m=".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)}";var p=Object.defineProperty,l=(o,a,t,h)=>{for(var e=void 0,r=o.length-1,v;r>=0;r--)(v=o[r])&&(e=v(a,t,e)||e);return e&&p(a,t,e),e};class c extends i.AffixIcon(n.VividElement){}l([n.attr],c.prototype,"headline");l([n.attr],c.prototype,"connotation");const u=({connotation:o})=>d.classNames("base",`connotation-${o}`);function _(){return n.html`<div class="headline">${o=>o.headline}</div>`}const x=o=>{const a=i.affixIconTemplateFactory(o);return n.html`
+"use strict";const s=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),i=require("../bundled/affix.cjs"),d=require("../bundled/when.cjs"),f=require("../bundled/class-names.cjs"),m=".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)}";var p=Object.defineProperty,l=(o,a,t,h)=>{for(var e=void 0,r=o.length-1,v;r>=0;r--)(v=o[r])&&(e=v(a,t,e)||e);return e&&p(a,t,e),e};class c extends i.AffixIcon(n.VividElement){}l([n.attr],c.prototype,"headline");l([n.attr],c.prototype,"connotation");const u=({connotation:o})=>f.classNames("base",`connotation-${o}`);function _(){return n.html`<div class="headline">${o=>o.headline}</div>`}const x=o=>{const a=i.affixIconTemplateFactory(o);return n.html`
 		<div class="${u}">
 			${t=>a(t.icon,i.IconWrapper.Slot)}
 			<div class="text">
-				${f.when(t=>t.headline,_())}
+				${d.when(t=>t.headline,_())}
 				<slot class="message"></slot>
 			</div>
 		</div>