@vonage/vivid 5.2.0 → 5.4.0

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';
@@ -13,7 +13,7 @@ import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
-import { b as AffixIcon } from '../unbundled/affix.js';
+import { A as AffixIcon } from '../unbundled/affix.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { S as Shape } from '../unbundled/enums.js';
 import { D as Divider } from '../unbundled/divider.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();

package/number-field/index.js

@@ -1,25 +1,25 @@
 import { B as $, b as k } from "../bundled/definition3.js";
 import { d as z } from "../bundled/definition14.js";
-import { V as C, v as D } from "../bundled/definition12.js";
+import { V as C, v as D } from "../bundled/definition13.js";
 import { i as V } from "../bundled/definition2.js";
 import { W as A, f as S } from "../bundled/mixins.js";
-import { V as F, D as B, a as i, n as c, o as d, h as u, c as P, d as N } from "../bundled/vivid-element.js";
-import { c as T } from "../bundled/definition11.js";
-import { D as I, d as L } from "../bundled/delegates-aria.js";
-import { F as O } from "../bundled/form-associated.js";
-import { W as U } from "../bundled/with-contextual-help.js";
+import { V as F, U as B, a as i, n as c, o as d, h as u, c as P, d as N } from "../bundled/vivid-element.js";
+import { c as T } from "../bundled/definition12.js";
+import { D as U, d as I } from "../bundled/delegates-aria.js";
+import { F as L } from "../bundled/form-associated.js";
+import { W as O } from "../bundled/with-contextual-help.js";
 import { W } from "../bundled/with-error-text.js";
 import { W as E } from "../bundled/with-success-text.js";
 import { F as H } from "../bundled/form-element.js";
 import { b as R } from "../bundled/affix.js";
-import { L as M } from "../bundled/localized.js";
-import { b as q, c as K } from "../bundled/key-codes.js";
+import { L as q } from "../bundled/localized.js";
+import { b as M, c as K } from "../bundled/key-codes.js";
 import { b } from "../bundled/enums.js";
 import { D as j } from "../bundled/divider.js";
-import { c as Y } from "../bundled/class-names.js";
-import { w as G } from "../bundled/when.js";
-import { s as J } from "../bundled/slotted.js";
-import { r as Q } from "../bundled/ref.js";
+import { w as Y } from "../bundled/when.js";
+import { s as G } from "../bundled/slotted.js";
+import { r as J } from "../bundled/ref.js";
+import { c as Q } from "../bundled/class-names.js";
 const X = ':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 Z = Object.defineProperty, n = (a, t, e, o) => {
   for (var l = void 0, s = a.length - 1, p; s >= 0; s--)
@@ -45,12 +45,12 @@ const g = (a) => {
     decimalSeparator: a
   };
 }, ee = g(/\./), te = g(/,/), f = /^-?((\d*\.\d+)|(\d+))$/;
-class r extends U(
+class r extends O(
   A(
     W(
       E(
         H(
-          R(M(I(O(F))))
+          R(q(U(L(F))))
         )
       )
     )
@@ -144,7 +144,7 @@ class r extends U(
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && B.queueUpdate(() => {
+    super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && B.enqueue(() => {
       this.focus();
     });
   }
@@ -185,7 +185,7 @@ class r extends U(
     switch (t.key) {
       case K:
         return this.stepUp(), !1;
-      case q:
+      case M:
         return this.stepDown(), !1;
     }
     return !0;
@@ -259,7 +259,7 @@ const ae = ({
   label: y,
   successText: w,
   scale: v
-}) => Y(
+}) => Q(
   ["error", !!a],
   ["disabled", t],
   ["has-value", !!e],
@@ -310,8 +310,8 @@ const ne = (a) => {
   const t = a.tagFor(C);
   return u`
 		<div class="base ${ae}">
-			${G((e) => e.label, oe())}
-			<slot name="contextual-help" ${J("_contextualHelpSlottedContent")}></slot>
+			${Y((e) => e.label, oe())}
+			<slot name="contextual-help" ${G("_contextualHelpSlottedContent")}></slot>
 			<div class="fieldset">
 				<div class="wrapper">
 					<input
@@ -335,8 +335,8 @@ const ne = (a) => {
 						:value="${(e) => e._presentationValue}"
 						type="text"
 						aria-describedby="${(e) => e._feedbackDescribedBy}"
-						${L()}
-						${Q("control")}
+						${I()}
+						${J("control")}
 					/>
 				</div>
 				${() => re(a)}

package/option/definition.cjs

@@ -2,83 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const icon_definition = require('../icon/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const option = require('../unbundled/option.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const affix = require('../unbundled/affix.cjs');
-const hostSemantics = require('../unbundled/host-semantics.cjs');
+require('../icon/definition.cjs');
+require('../unbundled/vivid-element.cjs');
+const option_definition = require('../unbundled/definition3.cjs');
 
-const getClasses = (x) => fastWebUtilities.classNames(
-  "base",
-  ["disabled", x.disabled],
-  ["selected", Boolean(x.selected)],
-  ["hover", Boolean(x._highlighted)],
-  ["active", Boolean(x.checked)],
-  ["icon", Boolean(x.icon)],
-  ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]
-);
-function text() {
-  return fastElement.html`${fastElement.when(
-    (x) => x.text || x.textSecondary,
-    fastElement.html`<span class="text">
-			${fastElement.when(
-      (x) => x.text,
-      fastElement.html`<span class="text-primary">
-					${fastElement.when(
-        (x) => x._hasMatchedText,
-        fastElement.html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
-								>${(x) => x.text.slice(x._matchedRange.from, x._matchedRange.to)}</span
-							>`
-      )}${(x) => x.text.slice(x._matchedRange.to)}
-				</span>`
-    )}
-			${fastElement.when(
-      (x) => x.textSecondary,
-      fastElement.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
-    )}
-		</span>`
-  )}`;
-}
-const ListboxOptionTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return fastElement.html`
-		<template
-			${hostSemantics.applyHostSemantics({
-    role: "option",
-    ariaChecked: (x) => x.checked,
-    ariaSelected: (x) => x.selected,
-    ariaDisabled: (x) => x.disabled
-  })}
-			style="${(x) => x._isNotMatching ? "display: none" : ""}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${text()}
-				<slot name="trailing-meta"></slot>
-				${fastElement.when(
-    (x) => x._displayCheckmark && x.selected,
-    fastElement.html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
-  )}
-			</div>
-		</template>
-	`;
-};
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_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(--_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(--_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: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--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))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}";
 
-const listboxOptionDefinition = vividElement.defineVividComponent(
-  "option",
-  option.ListboxOption,
-  ListboxOptionTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerOption = vividElement.createRegisterFunction(listboxOptionDefinition);
-
-exports.VwcOptionElement = option.ListboxOption;
-exports.listboxOptionDefinition = listboxOptionDefinition;
-exports.registerOption = registerOption;
+exports.VwcOptionElement = option_definition.ListboxOption;
+exports.listboxOptionDefinition = option_definition.listboxOptionDefinition;
+exports.registerOption = option_definition.registerOption;

package/option/definition.js

@@ -1,78 +1,3 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { L as ListboxOption } from '../unbundled/option.js';
-import { when, html } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
-import { a as applyHostSemantics } from '../unbundled/host-semantics.js';
-
-const getClasses = (x) => classNames(
-  "base",
-  ["disabled", x.disabled],
-  ["selected", Boolean(x.selected)],
-  ["hover", Boolean(x._highlighted)],
-  ["active", Boolean(x.checked)],
-  ["icon", Boolean(x.icon)],
-  ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]
-);
-function text() {
-  return html`${when(
-    (x) => x.text || x.textSecondary,
-    html`<span class="text">
-			${when(
-      (x) => x.text,
-      html`<span class="text-primary">
-					${when(
-        (x) => x._hasMatchedText,
-        html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
-								>${(x) => x.text.slice(x._matchedRange.from, x._matchedRange.to)}</span
-							>`
-      )}${(x) => x.text.slice(x._matchedRange.to)}
-				</span>`
-    )}
-			${when(
-      (x) => x.textSecondary,
-      html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
-    )}
-		</span>`
-  )}`;
-}
-const ListboxOptionTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  return html`
-		<template
-			${applyHostSemantics({
-    role: "option",
-    ariaChecked: (x) => x.checked,
-    ariaSelected: (x) => x.selected,
-    ariaDisabled: (x) => x.disabled
-  })}
-			style="${(x) => x._isNotMatching ? "display: none" : ""}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${text()}
-				<slot name="trailing-meta"></slot>
-				${when(
-    (x) => x._displayCheckmark && x.selected,
-    html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
-  )}
-			</div>
-		</template>
-	`;
-};
-
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_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(--_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(--_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: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--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))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}";
-
-const listboxOptionDefinition = defineVividComponent(
-  "option",
-  ListboxOption,
-  ListboxOptionTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
-);
-const registerOption = createRegisterFunction(listboxOptionDefinition);
-
-export { ListboxOption as VwcOptionElement, listboxOptionDefinition, registerOption };
+import '../icon/definition.js';
+import '../unbundled/vivid-element.js';
+export { L as VwcOptionElement, l as listboxOptionDefinition, r as registerOption } from '../unbundled/definition3.js';

package/option/index.cjs

@@ -1 +1 @@
-"use strict";const i=require("../bundled/definition10.cjs");i.registerOption();
+"use strict";const i=require("../bundled/definition11.cjs");i.registerOption();

package/option/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition10.js";
+import { r } from "../bundled/definition11.js";
 r();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.cjs",
@@ -59,20 +59,23 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@microsoft/fast-element": "^1.14.0",
+    "@microsoft/fast-element": "^2.7.0",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "date-fns": "^3.0.0",
+    "vanilla-colorful": "^0.7.2",
     "prosemirror-commands": "^1.7.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.2",
+    "prosemirror-model": "^1.25.4",
     "prosemirror-schema-basic": "^1.2.3",
-    "prosemirror-state": "^1.4.3",
+    "prosemirror-state": "^1.4.4",
     "prosemirror-view": "^1.40.1",
-    "ramda": "^0.30.0",
-    "uuid": "^11.1.0",
-    "video.js": "^8.23.3"
+    "ramda": "^0.32.0",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "^7.52.9",
+    "@microsoft/eslint-config-fast-dna": "^2.1.0",
+    "@playwright/test": "1.48.2",
     "@repo/cem-analyzer-plugins": "*",
     "@repo/consts": "*",
     "@repo/eslint-config": "*",
@@ -81,6 +84,29 @@
     "@repo/stylelint-config": "*",
     "@repo/styles": "*",
     "@repo/typescript-config": "*",
-    "@repo/vitest-config": "*"
+    "@repo/vitest-config": "*",
+    "video.js": "^8.23.3",
+    "@testing-library/dom": "^8.18.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "18.19.130",
+    "@types/uuid": "^10.0.0",
+    "@vonage/vivid-figma-tokens": "github:vonage/vivid-figma-tokens#v1.4.0",
+    "cem-plugin-async-function": "^0.0.5",
+    "cem-plugin-jsdoc-example": "^0.0.9",
+    "cem-plugin-jsdoc-function": "^0.0.5",
+    "cem-plugin-readonly": "^0.0.5",
+    "dialog-polyfill": "^0.5.6",
+    "element-internals-polyfill": "^1.3.13",
+    "esbuild": "0.23.0",
+    "jsdom": "^23.0.0",
+    "markdown-it": "^13.0.2",
+    "playwright": "1.48.2",
+    "sass": "^1.89.2",
+    "vite-plugin-static-copy": "^1.0.6",
+    "vitest": "^2.1.8",
+    "vitest-axe": "^0.1.0",
+    "vitest-fetch-mock": "^0.4.5",
+    "wait-on": "^8.0.5",
+    "concurrently": "^9.2.0"
   }
 }

package/pagination/definition.cjs

@@ -207,6 +207,7 @@ const getPaginationButtonWidth = (value) => {
 };
 const PaginationTemplate = (context) => {
   const buttonTag = context.tagFor(button_definition.Button);
+  const buttonTagName = context.tagFor(button_definition.Button, true);
   const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
   return fastElement.html`
 	<div class="${getClasses}">
@@ -221,7 +222,7 @@ const PaginationTemplate = (context) => {
 		></${buttonTag}>
 		<div id="buttons-wrapper" class="buttons-wrapper" ${fastElement.children({
     property: "paginationButtons",
-    filter: fastElement.elements(buttonTag)
+    filter: fastElement.elements(buttonTagName)
   })}>
 			${fastElement.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>

package/pagination/definition.js

@@ -203,6 +203,7 @@ const getPaginationButtonWidth = (value) => {
 };
 const PaginationTemplate = (context) => {
   const buttonTag = context.tagFor(Button);
+  const buttonTagName = context.tagFor(Button, true);
   const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
   return html`
 	<div class="${getClasses}">
@@ -217,7 +218,7 @@ const PaginationTemplate = (context) => {
 		></${buttonTag}>
 		<div id="buttons-wrapper" class="buttons-wrapper" ${children({
     property: "paginationButtons",
-    filter: elements(buttonTag)
+    filter: elements(buttonTagName)
   })}>
 			${repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>