@vonage/vivid 5.2.0 → 5.3.0

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

@@ -463,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) => {
@@ -473,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

@@ -461,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) => {
@@ -471,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

@@ -295,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) => {
@@ -305,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

@@ -293,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) => {
@@ -303,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

@@ -463,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) => {
@@ -473,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

@@ -461,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) => {
@@ -471,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

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

package/locales/ja-JP.js

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

package/locales/zh-CN.cjs

@@ -464,8 +464,7 @@ const zhCN = {
       (ariaLabel) => ariaLabel ? `关于 ${ariaLabel} 的更多信息` : `显示更多信息`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "调色板",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -474,6 +473,18 @@ const zhCN = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "调色板"
+  },
+  colorPicker: {
+    popupLabel: "颜色选择器",
+    swatchesLabel: "已保存的颜色",
+    pickerButtonLabel: "打开颜色选择器",
+    saveButtonLabel: "保存当前颜色",
+    closeButtonLabel: "关闭颜色选择器",
+    copyButtonLabel: "将颜色复制到剪贴板",
+    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。"
   }
 };
 

package/locales/zh-CN.js

@@ -462,8 +462,7 @@ const zhCN = {
       (ariaLabel) => ariaLabel ? `关于 ${ariaLabel} 的更多信息` : `显示更多信息`
     )
   },
-  simpleColorPicker: {
-    colorPaletteLabel: "调色板",
+  baseColorPicker: {
     colorSwatchLabel: (
       /* istanbul ignore next */
       (value, label, selected) => {
@@ -472,6 +471,18 @@ const zhCN = {
         return swatchLabel;
       }
     )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "调色板"
+  },
+  colorPicker: {
+    popupLabel: "颜色选择器",
+    swatchesLabel: "已保存的颜色",
+    pickerButtonLabel: "打开颜色选择器",
+    saveButtonLabel: "保存当前颜色",
+    closeButtonLabel: "关闭颜色选择器",
+    copyButtonLabel: "将颜色复制到剪贴板",
+    copyErrorText: "复制失败。剪贴板访问已被阻止。请重试。"
   }
 };
 

package/menu/definition.cjs

@@ -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();
     });
   }

package/menu/definition.js

@@ -1,7 +1,7 @@
 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, 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();
     });
   }

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>

package/note/index.js

@@ -1,8 +1,8 @@
 import { i as s } from "../bundled/definition2.js";
 import { V as d, a as c, h as v, c as f, d as m } from "../bundled/vivid-element.js";
 import { b as p, a as u, I as _ } from "../bundled/affix.js";
-import { c as g } from "../bundled/class-names.js";
-import { w as x } from "../bundled/when.js";
+import { w as g } from "../bundled/when.js";
+import { c as x } from "../bundled/class-names.js";
 const b = ".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 h = Object.defineProperty, l = (o, a, n, T) => {
   for (var t = void 0, e = o.length - 1, i; e >= 0; e--)
@@ -17,7 +17,7 @@ l([
 l([
   c
 ], r.prototype, "connotation");
-const w = ({ connotation: o }) => g("base", `connotation-${o}`);
+const w = ({ connotation: o }) => x("base", `connotation-${o}`);
 function y() {
   return v`<div class="headline">${(o) => o.headline}</div>`;
 }
@@ -27,7 +27,7 @@ const I = (o) => {
 		<div class="${w}">
 			${(n) => a(n.icon, _.Slot)}
 			<div class="text">
-				${x((n) => n.headline, y())}
+				${g((n) => n.headline, y())}
 				<slot class="message"></slot>
 			</div>
 		</div>

package/number-field/definition.cjs

@@ -193,7 +193,7 @@ class NumberField extends withContextualHelp.WithContextualHelp(
     this.validate();
     this._presentationValue = this.#valueToPresentationValue(this.value);
     if (this.autofocus) {
-      fastElement.DOM.queueUpdate(() => {
+      fastElement.Updates.enqueue(() => {
         this.focus();
       });
     }

package/number-field/definition.js

@@ -5,7 +5,7 @@ import { iconDefinition } from '../icon/definition.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { contextualHelpDefinition } from '../contextual-help/definition.js';
-import { DOM, attr, nullableNumberConverter, observable, when, slotted, ref, html } from '@microsoft/fast-element';
+import { Updates, attr, nullableNumberConverter, observable, when, slotted, ref, html } from '@microsoft/fast-element';
 import { keyArrowDown, keyArrowUp, classNames } from '@microsoft/fast-web-utilities';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
 import { F as FormAssociated } from '../unbundled/form-associated.js';
@@ -189,7 +189,7 @@ class NumberField extends WithContextualHelp(
     this.validate();
     this._presentationValue = this.#valueToPresentationValue(this.value);
     if (this.autofocus) {
-      DOM.queueUpdate(() => {
+      Updates.enqueue(() => {
         this.focus();
       });
     }

package/number-field/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const x=require("../bundled/definition3.cjs"),z=require("../bundled/definition14.cjs"),_=require("../bundled/definition12.cjs"),C=require("../bundled/definition2.cjs"),g=require("../bundled/mixins.cjs"),r=require("../bundled/vivid-element.cjs"),q=require("../bundled/definition11.cjs"),y=require("../bundled/delegates-aria.cjs"),A=require("../bundled/form-associated.cjs"),S=require("../bundled/with-contextual-help.cjs"),D=require("../bundled/with-error-text.cjs"),V=require("../bundled/with-success-text.cjs"),N=require("../bundled/form-element.cjs"),F=require("../bundled/affix.cjs"),B=require("../bundled/localized.cjs"),p=require("../bundled/key-codes.cjs"),u=require("../bundled/enums.cjs"),T=require("../bundled/divider.cjs"),P=require("../bundled/class-names.cjs"),E=require("../bundled/when.cjs"),I=require("../bundled/slotted.cjs"),O=require("../bundled/ref.cjs"),U=':host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}';var L=Object.defineProperty,i=(a,t,e,o)=>{for(var l=void 0,s=a.length-1,c;s>=0;s--)(c=a[s])&&(l=c(t,e,l)||l);return l&&L(t,e,l),l};const v={up:1,down:-1};function b(a,t){const e=parseFloat(a.value),o=isNaN(e)?a.min>0?a.min:a.max<0?a.max:a.min?0:t*a.step:e+t*a.step;a.value=Number(o.toFixed(12)).toString(),a._updatedValueAnnouncement=a.locale.numberField.updatedValueAnnouncement(a._presentationValue)}const w=a=>{const t=a.source;return{invalidCharacters:new RegExp(`[^0-9\\-+e${t}]`,"g"),additionalDecimalSeparators:new RegExp(`(?<=${t}.*)${t}`,"g"),trailingDecimalSeparator:new RegExp(`${t}$`),decimalSeparator:a}},H=w(/\./),W=w(/,/),h=/^-?((\d*\.\d+)|(\d+))$/;class n extends S.WithContextualHelp(g.WithFeedback(D.WithErrorText(V.WithSuccessText(N.FormElement(F.AffixIcon(B.Localized(y.DelegatesAria(A.FormAssociated(r.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.readOnly=!1,this.autofocus=!1,this.step=1,this.isUserInput=!1,this._presentationValue="",this._updatedValueAnnouncement="",this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(t,e){this.proxy.setAttribute("step",Number.isFinite(e)?e.toString():"")}maxChanged(t,e){this.max=Math.max(e,this.min??e),this.proxy.max=this.max.toString(),this.validate()}minChanged(t,e){this.min=Math.min(e,this.max??e),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(t){this.value=t.toString()}valueChanged(t,e){this.value=h.test(e)?e:"",e===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(t,this.value),t!==void 0&&!this.isUserInput&&(this.$emit("input"),this.$emit("change")))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?W:H}#e(t){return t.replace(".",this.locale.common.useCommaAsDecimalSeparator?",":".")}#t(t){return t.replace(this._numberPatterns.invalidCharacters,"").replace(this._numberPatterns.additionalDecimalSeparators,"")}#a(t){const e=t.replace(this._numberPatterns.trailingDecimalSeparator,"").replace(this._numberPatterns.decimalSeparator,".");return h.test(e)?e:""}validate(){super.validate(this.control)}stepUp(){b(this,v.up)}stepDown(){b(this,v.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","number"),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&r.DOM.queueUpdate(()=>{this.focus()})}select(){this.control.select(),this.$emit("select")}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#a(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit("change")}handleKeyDown(t){switch(t.key){case p.keyArrowUp:return this.stepUp(),!1;case p.keyArrowDown:return this.stepDown(),!1}return!0}}i([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");i([r.attr({mode:"boolean"})],n.prototype,"autofocus");i([r.attr],n.prototype,"placeholder");i([r.attr],n.prototype,"list");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"maxlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"minlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"size");i([r.attr()],n.prototype,"scale");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"step");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"max");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"min");i([r.observable],n.prototype,"defaultSlottedNodes");i([r.observable],n.prototype,"_presentationValue");i([r.observable],n.prototype,"_updatedValueAnnouncement");i([r.attr({attribute:"increment-button-aria-label"})],n.prototype,"incrementButtonAriaLabel");i([r.attr({attribute:"decrement-button-aria-label"})],n.prototype,"decrementButtonAriaLabel");i([r.attr],n.prototype,"appearance");i([r.attr],n.prototype,"shape");i([r.attr],n.prototype,"autoComplete");const R=({errorValidationMessage:a,disabled:t,value:e,readOnly:o,placeholder:l,appearance:s,shape:c,label:$,successText:k,scale:d})=>P.classNames(["error",!!a],["disabled",t],["has-value",!!e],["readonly",o],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${c}`,!!c],["no-label",!$],["success",!!k],[`size-${d}`,!!d]);function M(){return r.html` <label for="control" class="label">
+"use strict";const x=require("../bundled/definition3.cjs"),z=require("../bundled/definition14.cjs"),_=require("../bundled/definition13.cjs"),C=require("../bundled/definition2.cjs"),g=require("../bundled/mixins.cjs"),r=require("../bundled/vivid-element.cjs"),q=require("../bundled/definition12.cjs"),y=require("../bundled/delegates-aria.cjs"),A=require("../bundled/form-associated.cjs"),S=require("../bundled/with-contextual-help.cjs"),D=require("../bundled/with-error-text.cjs"),V=require("../bundled/with-success-text.cjs"),N=require("../bundled/form-element.cjs"),F=require("../bundled/affix.cjs"),B=require("../bundled/localized.cjs"),p=require("../bundled/key-codes.cjs"),u=require("../bundled/enums.cjs"),T=require("../bundled/divider.cjs"),P=require("../bundled/when.cjs"),E=require("../bundled/slotted.cjs"),I=require("../bundled/ref.cjs"),U=require("../bundled/class-names.cjs"),L=':host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}';var O=Object.defineProperty,i=(a,t,e,o)=>{for(var l=void 0,s=a.length-1,c;s>=0;s--)(c=a[s])&&(l=c(t,e,l)||l);return l&&O(t,e,l),l};const v={up:1,down:-1};function b(a,t){const e=parseFloat(a.value),o=isNaN(e)?a.min>0?a.min:a.max<0?a.max:a.min?0:t*a.step:e+t*a.step;a.value=Number(o.toFixed(12)).toString(),a._updatedValueAnnouncement=a.locale.numberField.updatedValueAnnouncement(a._presentationValue)}const w=a=>{const t=a.source;return{invalidCharacters:new RegExp(`[^0-9\\-+e${t}]`,"g"),additionalDecimalSeparators:new RegExp(`(?<=${t}.*)${t}`,"g"),trailingDecimalSeparator:new RegExp(`${t}$`),decimalSeparator:a}},H=w(/\./),W=w(/,/),h=/^-?((\d*\.\d+)|(\d+))$/;class n extends S.WithContextualHelp(g.WithFeedback(D.WithErrorText(V.WithSuccessText(N.FormElement(F.AffixIcon(B.Localized(y.DelegatesAria(A.FormAssociated(r.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.readOnly=!1,this.autofocus=!1,this.step=1,this.isUserInput=!1,this._presentationValue="",this._updatedValueAnnouncement="",this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(t,e){this.proxy.setAttribute("step",Number.isFinite(e)?e.toString():"")}maxChanged(t,e){this.max=Math.max(e,this.min??e),this.proxy.max=this.max.toString(),this.validate()}minChanged(t,e){this.min=Math.min(e,this.max??e),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(t){this.value=t.toString()}valueChanged(t,e){this.value=h.test(e)?e:"",e===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(t,this.value),t!==void 0&&!this.isUserInput&&(this.$emit("input"),this.$emit("change")))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?W:H}#e(t){return t.replace(".",this.locale.common.useCommaAsDecimalSeparator?",":".")}#t(t){return t.replace(this._numberPatterns.invalidCharacters,"").replace(this._numberPatterns.additionalDecimalSeparators,"")}#a(t){const e=t.replace(this._numberPatterns.trailingDecimalSeparator,"").replace(this._numberPatterns.decimalSeparator,".");return h.test(e)?e:""}validate(){super.validate(this.control)}stepUp(){b(this,v.up)}stepDown(){b(this,v.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","number"),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&r.Updates.enqueue(()=>{this.focus()})}select(){this.control.select(),this.$emit("select")}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#a(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit("change")}handleKeyDown(t){switch(t.key){case p.keyArrowUp:return this.stepUp(),!1;case p.keyArrowDown:return this.stepDown(),!1}return!0}}i([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");i([r.attr({mode:"boolean"})],n.prototype,"autofocus");i([r.attr],n.prototype,"placeholder");i([r.attr],n.prototype,"list");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"maxlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"minlength");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"size");i([r.attr()],n.prototype,"scale");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"step");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"max");i([r.attr({converter:r.nullableNumberConverter})],n.prototype,"min");i([r.observable],n.prototype,"defaultSlottedNodes");i([r.observable],n.prototype,"_presentationValue");i([r.observable],n.prototype,"_updatedValueAnnouncement");i([r.attr({attribute:"increment-button-aria-label"})],n.prototype,"incrementButtonAriaLabel");i([r.attr({attribute:"decrement-button-aria-label"})],n.prototype,"decrementButtonAriaLabel");i([r.attr],n.prototype,"appearance");i([r.attr],n.prototype,"shape");i([r.attr],n.prototype,"autoComplete");const R=({errorValidationMessage:a,disabled:t,value:e,readOnly:o,placeholder:l,appearance:s,shape:c,label:$,successText:k,scale:d})=>U.classNames(["error",!!a],["disabled",t],["has-value",!!e],["readonly",o],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${c}`,!!c],["no-label",!$],["success",!!k],[`size-${d}`,!!d]);function M(){return r.html` <label for="control" class="label">
 		${a=>a.label}
 	</label>`}function m(a){return a.shape===u.Shape.Pill?u.Shape.Pill:null}function f(a){return a.disabled||a.readOnly?"-1":null}function K(a){const t=a.tagFor(x.Button),e=a.tagFor(T.Divider);return r.html`
 		<div class="control-buttons" ?inert="${o=>o.disabled||o.readOnly}">
@@ -22,8 +22,8 @@
 			</div>
 	`}const j=a=>{const t=a.tagFor(_.VisuallyHidden);return r.html`
 		<div class="base ${R}">
-			${E.when(e=>e.label,M())}
-			<slot name="contextual-help" ${I.slotted("_contextualHelpSlottedContent")}></slot>
+			${P.when(e=>e.label,M())}
+			<slot name="contextual-help" ${E.slotted("_contextualHelpSlottedContent")}></slot>
 			<div class="fieldset">
 				<div class="wrapper">
 					<input
@@ -48,7 +48,7 @@
 						type="text"
 						aria-describedby="${e=>e._feedbackDescribedBy}"
 						${y.delegateAria()}
-						${O.ref("control")}
+						${I.ref("control")}
 					/>
 				</div>
 				${()=>K(a)}
@@ -57,4 +57,4 @@
 			<${t} id="value-announcement" role="status" aria-atomic="true">
 				${e=>e._updatedValueAnnouncement}</${t}>
 		</div>
-	`},Y=r.defineVividComponent("number-field",n,j,[x.buttonDefinition,z.dividerDefinition,C.iconDefinition,g.feedbackMessageDefinition,_.visuallyHiddenDefinition,q.contextualHelpDefinition],{styles:U,shadowOptions:{delegatesFocus:!0}}),G=r.createRegisterFunction(Y);G();
+	`},Y=r.defineVividComponent("number-field",n,j,[x.buttonDefinition,z.dividerDefinition,C.iconDefinition,g.feedbackMessageDefinition,_.visuallyHiddenDefinition,q.contextualHelpDefinition],{styles:L,shadowOptions:{delegatesFocus:!0}}),G=r.createRegisterFunction(Y);G();