@vonage/vivid 5.1.0 → 5.2.0

package/dial-pad/definition.js

@@ -2,7 +2,8 @@ import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
 import { VwcTextFieldElement as TextField, textFieldDefinition } from '../text-field/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { attr, when, html, repeat, ref } from '@microsoft/fast-element';
+import { VwcVisuallyHiddenElement as VisuallyHidden, visuallyHiddenDefinition } from '../visually-hidden/definition.js';
+import { attr, observable, when, html, repeat, ref } from '@microsoft/fast-element';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames, keyEnter } from '@microsoft/fast-web-utilities';
 
@@ -36,9 +37,22 @@ class DialPad extends Localized(VividElement) {
      * @internal
      */
     this._onDial = () => {
+      const invalid = !this._textFieldEl.checkValidity();
+      if (invalid) {
+        this._announceValidationError(
+          this._textFieldEl.errorValidationMessage ?? ""
+        );
+      } else {
+        this._clearErrorAnnouncement();
+      }
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
     this.autofocus = false;
+    this._errorAnnouncement = "";
+    /**
+     * @internal
+     */
+    this._forceAnnouncementToggle = false;
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -56,6 +70,27 @@ class DialPad extends Localized(VividElement) {
     const firstFocusableEl = this._textFieldEl || digitBtns?.[0];
     firstFocusableEl?.focus();
   }
+  /**
+   * @internal
+   */
+  _announceValidationError(message) {
+    this._errorAnnouncement = "";
+    window.queueMicrotask(() => {
+      if (message) {
+        this._forceAnnouncementToggle = !this._forceAnnouncementToggle;
+        this._errorAnnouncement = `${message}${this._forceAnnouncementToggle ? "​" : ""}`;
+      } else {
+        this._clearErrorAnnouncement();
+      }
+    });
+  }
+  /**
+   * @internal
+   */
+  _clearErrorAnnouncement() {
+    this._errorAnnouncement = "";
+    this._forceAnnouncementToggle = false;
+  }
 }
 __decorateClass([
   attr({ attribute: "helper-text" })
@@ -93,6 +128,9 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], DialPad.prototype, "autofocus");
+__decorateClass([
+  observable
+], DialPad.prototype, "_errorAnnouncement");
 
 class DialPadButton {
   constructor(value, label, ariaLabel, icon, id) {
@@ -236,14 +274,21 @@ function renderDialButton(buttonTag) {
         label="${(x) => x.callActive ? x.endCallButtonLabel || x.locale.dialPad.endCallButtonLabel : x.callButtonLabel || x.locale.dialPad.callButtonLabel}">
     </${buttonTag}>`;
 }
+function renderErrorAnnouncement(visuallyHiddenTag) {
+  return html`<${visuallyHiddenTag} role="alert" aria-atomic="true">
+		${(x) => `${x.locale.dialPad.errorLabel} ${x._errorAnnouncement}`}
+	</${visuallyHiddenTag}>`;
+}
 const DialPadTemplate = (context) => {
   const buttonTag = context.tagFor(Button);
   const iconTag = context.tagFor(Icon);
   const textFieldTag = context.tagFor(TextField);
+  const visuallyHiddenTag = context.tagFor(VisuallyHidden);
   return html` <div class="${getClasses}">
 		${when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
 		${when((x) => !x.noCall, renderDialButton(buttonTag))}
+		${renderErrorAnnouncement(visuallyHiddenTag)}
 	</div>`;
 };
 
@@ -251,7 +296,12 @@ const dialPadDefinition = defineVividComponent(
   "dial-pad",
   DialPad,
   DialPadTemplate,
-  [buttonDefinition, textFieldDefinition, iconDefinition],
+  [
+    buttonDefinition,
+    textFieldDefinition,
+    iconDefinition,
+    visuallyHiddenDefinition
+  ],
   {
     styles
   }

package/dial-pad/index.cjs

@@ -1,25 +1,25 @@
-"use strict";const b=require("../bundled/definition3.cjs"),f=require("../bundled/definition13.cjs"),l=require("../bundled/vivid-element.cjs"),h=require("../bundled/definition2.cjs"),m=require("../bundled/localized.cjs"),$=require("../bundled/class-names.cjs"),s=require("../bundled/when.cjs"),_=require("../bundled/repeat.cjs"),x=require("../bundled/ref.cjs"),y=require("../bundled/key-codes.cjs"),w=":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{margin-top:32px;grid-column:1/-1}";var L=Object.defineProperty,c=(a,t,e,o)=>{for(var n=void 0,d=a.length-1,p;d>=0;d--)(p=a[d])&&(n=p(t,e,n)||n);return n&&L(t,e,n),n};class i extends m.Localized(l.VividElement){constructor(){super(...arguments),this.helperText=null,this.placeholder=null,this.value="",this.pattern="^[0-9#*]*$",this.disabled=!1,this.pending=!1,this.callActive=!1,this.noCall=!1,this.noInput=!1,this.endCallButtonLabel=null,this.callButtonLabel=null,this._onDial=()=>{this.callActive?this.$emit("end-call"):this.$emit("dial")},this.autofocus=!1}valueChanged(t,e){e!=null&&this._textFieldEl&&e!==this._textFieldEl.value&&(this._textFieldEl.value=e,this._textFieldEl.reportValidity())}focus(){const t=this.shadowRoot?.querySelectorAll(".digits .digit-btn");(this._textFieldEl||t?.[0])?.focus()}}c([l.attr({attribute:"helper-text"})],i.prototype,"helperText");c([l.attr],i.prototype,"placeholder");c([l.attr({mode:"fromView"})],i.prototype,"value");c([l.attr({mode:"fromView"})],i.prototype,"pattern");c([l.attr({mode:"boolean"})],i.prototype,"disabled");c([l.attr({mode:"boolean"})],i.prototype,"pending");c([l.attr({attribute:"call-active",mode:"boolean"})],i.prototype,"callActive");c([l.attr({mode:"boolean",attribute:"no-call"})],i.prototype,"noCall");c([l.attr({mode:"boolean",attribute:"no-input"})],i.prototype,"noInput");c([l.attr({attribute:"end-call-button-label"})],i.prototype,"endCallButtonLabel");c([l.attr({attribute:"call-button-label"})],i.prototype,"callButtonLabel");c([l.attr({mode:"boolean"})],i.prototype,"autofocus");class r{constructor(t,e,o,n,d){this.value=t,this.label=e,this.ariaLabel=o,this.icon=n,this.id=d}}const g=[new r("1","&nbsp;","digitOneLabel","one-solid","btn1"),new r("2","ABC","digitTwoLabel","two-solid","btn2"),new r("3","DEF","digitThreeLabel","three-solid","btn3"),new r("4","GHI","digitFourLabel","four-solid","btn4"),new r("5","JKL","digitFiveLabel","five-solid","btn5"),new r("6","MNO","digitSixLabel","six-solid","btn6"),new r("7","PQRS","digitSevenLabel","seven-solid","btn7"),new r("8","TUV","digitEightLabel","eight-solid","btn8"),new r("9","WXYZ","digitNineLabel","nine-solid","btn9"),new r("*",null,"digitAsteriskLabel","asterisk-2-solid","btnAsterisk"),new r("0","+","digitZeroLabel","zero-solid","btn0"),new r("#",null,"digitHashtagLabel","hashtag-solid","btnHashtag")],F=({noInput:a})=>$.classNames("base",["no-input",!!a]);function k(a,t){if(t.key===y.keyEnter&&!a.pending&&!a.disabled&&!a.callActive&&!a.noCall&&a.value.length>0&&t.target instanceof HTMLInputElement)a._onDial();else{const e=g.findIndex(o=>o.value===t.key);if(e>-1){const o=a.shadowRoot.querySelector(".digits").children[e];o&&(o.active=!0,setTimeout(()=>{o.active=!1},200))}}return!0}function u(a){a.value=a._textFieldEl.value}function v(a,{event:t}){t.stopImmediatePropagation()}function D(a){a.value=a.value.slice(0,-1),a.$emit("input"),a.$emit("change"),a.value===""&&a._textFieldEl?.focus()}function C(a,t){return l.html`<${a} ${x.ref("_textFieldEl")} class="phone-field" internal-part type="tel"
+"use strict";const b=require("../bundled/definition3.cjs"),f=require("../bundled/definition13.cjs"),n=require("../bundled/vivid-element.cjs"),h=require("../bundled/definition2.cjs"),g=require("../bundled/definition12.cjs"),_=require("../bundled/localized.cjs"),$=require("../bundled/class-names.cjs"),d=require("../bundled/when.cjs"),y=require("../bundled/repeat.cjs"),w=require("../bundled/ref.cjs"),x=require("../bundled/key-codes.cjs"),A=":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{margin-top:32px;grid-column:1/-1}";var L=Object.defineProperty,i=(a,t,e,l)=>{for(var c=void 0,s=a.length-1,u;s>=0;s--)(u=a[s])&&(c=u(t,e,c)||c);return c&&L(t,e,c),c};class o extends _.Localized(n.VividElement){constructor(){super(...arguments),this.helperText=null,this.placeholder=null,this.value="",this.pattern="^[0-9#*]*$",this.disabled=!1,this.pending=!1,this.callActive=!1,this.noCall=!1,this.noInput=!1,this.endCallButtonLabel=null,this.callButtonLabel=null,this._onDial=()=>{!this._textFieldEl.checkValidity()?this._announceValidationError(this._textFieldEl.errorValidationMessage??""):this._clearErrorAnnouncement(),this.callActive?this.$emit("end-call"):this.$emit("dial")},this.autofocus=!1,this._errorAnnouncement="",this._forceAnnouncementToggle=!1}valueChanged(t,e){e!=null&&this._textFieldEl&&e!==this._textFieldEl.value&&(this._textFieldEl.value=e,this._textFieldEl.reportValidity())}focus(){const t=this.shadowRoot?.querySelectorAll(".digits .digit-btn");(this._textFieldEl||t?.[0])?.focus()}_announceValidationError(t){this._errorAnnouncement="",window.queueMicrotask(()=>{t?(this._forceAnnouncementToggle=!this._forceAnnouncementToggle,this._errorAnnouncement=`${t}${this._forceAnnouncementToggle?"​":""}`):this._clearErrorAnnouncement()})}_clearErrorAnnouncement(){this._errorAnnouncement="",this._forceAnnouncementToggle=!1}}i([n.attr({attribute:"helper-text"})],o.prototype,"helperText");i([n.attr],o.prototype,"placeholder");i([n.attr({mode:"fromView"})],o.prototype,"value");i([n.attr({mode:"fromView"})],o.prototype,"pattern");i([n.attr({mode:"boolean"})],o.prototype,"disabled");i([n.attr({mode:"boolean"})],o.prototype,"pending");i([n.attr({attribute:"call-active",mode:"boolean"})],o.prototype,"callActive");i([n.attr({mode:"boolean",attribute:"no-call"})],o.prototype,"noCall");i([n.attr({mode:"boolean",attribute:"no-input"})],o.prototype,"noInput");i([n.attr({attribute:"end-call-button-label"})],o.prototype,"endCallButtonLabel");i([n.attr({attribute:"call-button-label"})],o.prototype,"callButtonLabel");i([n.attr({mode:"boolean"})],o.prototype,"autofocus");i([n.observable],o.prototype,"_errorAnnouncement");class r{constructor(t,e,l,c,s){this.value=t,this.label=e,this.ariaLabel=l,this.icon=c,this.id=s}}const m=[new r("1","&nbsp;","digitOneLabel","one-solid","btn1"),new r("2","ABC","digitTwoLabel","two-solid","btn2"),new r("3","DEF","digitThreeLabel","three-solid","btn3"),new r("4","GHI","digitFourLabel","four-solid","btn4"),new r("5","JKL","digitFiveLabel","five-solid","btn5"),new r("6","MNO","digitSixLabel","six-solid","btn6"),new r("7","PQRS","digitSevenLabel","seven-solid","btn7"),new r("8","TUV","digitEightLabel","eight-solid","btn8"),new r("9","WXYZ","digitNineLabel","nine-solid","btn9"),new r("*",null,"digitAsteriskLabel","asterisk-2-solid","btnAsterisk"),new r("0","+","digitZeroLabel","zero-solid","btn0"),new r("#",null,"digitHashtagLabel","hashtag-solid","btnHashtag")],E=({noInput:a})=>$.classNames("base",["no-input",!!a]);function F(a,t){if(t.key===x.keyEnter&&!a.pending&&!a.disabled&&!a.callActive&&!a.noCall&&a.value.length>0&&t.target instanceof HTMLInputElement)a._onDial();else{const e=m.findIndex(l=>l.value===t.key);if(e>-1){const l=a.shadowRoot.querySelector(".digits").children[e];l&&(l.active=!0,setTimeout(()=>{l.active=!1},200))}}return!0}function p(a){a.value=a._textFieldEl.value}function v(a,{event:t}){t.stopImmediatePropagation()}function k(a){a.value=a.value.slice(0,-1),a.$emit("input"),a.$emit("change"),a.value===""&&a._textFieldEl?.focus()}function D(a,t){return n.html`<${a} ${w.ref("_textFieldEl")} class="phone-field" internal-part type="tel"
         value="${e=>e.value}" placeholder="${e=>e.placeholder}"
             ?disabled="${e=>e.disabled}" helper-text="${e=>e.helperText}" pattern="${e=>e.pattern}"
             aria-label="${e=>e.locale.dialPad.inputLabel}"
-            @keydown="${(e,o)=>k(e,o.event)}"
-            @input="${u}"
-			@change="${u}"
+            @keydown="${(e,l)=>F(e,l.event)}"
+            @input="${p}"
+			@change="${p}"
 			@focus="${v}"
 			@blur="${v}"
 			?autofocus="${e=>e.autofocus}"
 			>
-         ${s.when(e=>e.value&&e.value.length&&e.value.length>0,l.html`<${t}
+         ${d.when(e=>e.value&&e.value.length&&e.value.length>0,n.html`<${t}
                 slot="action-items"
 								size='super-condensed'
 								icon="backspace-line"
 								aria-label="${e=>e.deleteAriaLabel||e.locale.dialPad.deleteButtonLabel}"
 								appearance='ghost'
 								?disabled="${e=>e.disabled||e.callActive}"
-								@click="${e=>D(e)}">
+								@click="${e=>k(e)}">
             </${t}>`)}
-        </${a}>`}function A(a,{parent:t,event:e}){t.value+=a.value,t.$emit("keypad-click",e.currentTarget),t.$emit("input"),t.$emit("change")}function B(a,t){return l.html`
-		${_.repeat(e=>g,l.html`
+        </${a}>`}function C(a,{parent:t,event:e}){t.value+=a.value,t.$emit("keypad-click",e.currentTarget),t.$emit("input"),t.$emit("change")}function T(a,t){return n.html`
+		${y.repeat(e=>m,n.html`
 			<${a}
 					  id="${e=>e.id}"
 					  value="${e=>e.value}"
@@ -29,16 +29,16 @@
 					  label="${e=>e.label==="&nbsp;"?" ":e.label}"
 					  size='condensed'
 					  class="digit-btn"
-						?autofocus="${(e,o)=>o.parent.autofocus&&o.parent.noInput&&o.index===0}"
-					  aria-label="${(e,o)=>o.parent.locale.dialPad[e.ariaLabel]}"
-					  ?disabled="${(e,o)=>o.parent.disabled}"
-					  @click="${A}">
+						?autofocus="${(e,l)=>l.parent.autofocus&&l.parent.noInput&&l.index===0}"
+					  aria-label="${(e,l)=>l.parent.locale.dialPad[e.ariaLabel]}"
+					  ?disabled="${(e,l)=>l.parent.disabled}"
+					  @click="${C}">
 					  	<${t} slot="icon"
 									name="${e=>e.icon}"
 									class="digit-btn-num"></${t}>
 					</${a}>
 		`,{positioning:!0})}
-	`}function E(a){return l.html`<${a} class="call-btn"
+	`}function B(a){return n.html`<${a} class="call-btn"
         size="expanded"
         appearance="filled"
         icon="${t=>t.callActive?"disable-call-line":"call-line"}"
@@ -47,8 +47,11 @@
 		?pending="${t=>t.pending}"
         @click="${t=>t._onDial()}"
         label="${t=>t.callActive?t.endCallButtonLabel||t.locale.dialPad.endCallButtonLabel:t.callButtonLabel||t.locale.dialPad.callButtonLabel}">
-    </${a}>`}const q=a=>{const t=a.tagFor(b.Button),e=a.tagFor(h.Icon),o=a.tagFor(f.TextField);return l.html` <div class="${F}">
-		${s.when(n=>!n.noInput,C(o,t))}
-		<div class="digits">${B(t,e)}</div>
-		${s.when(n=>!n.noCall,E(t))}
-	</div>`},T=l.defineVividComponent("dial-pad",i,q,[b.buttonDefinition,f.textFieldDefinition,h.iconDefinition],{styles:w}),I=l.createRegisterFunction(T);I();
+    </${a}>`}function q(a){return n.html`<${a} role="alert" aria-atomic="true">
+		${t=>`${t.locale.dialPad.errorLabel} ${t._errorAnnouncement}`}
+	</${a}>`}const I=a=>{const t=a.tagFor(b.Button),e=a.tagFor(h.Icon),l=a.tagFor(f.TextField),c=a.tagFor(g.VisuallyHidden);return n.html` <div class="${E}">
+		${d.when(s=>!s.noInput,D(l,t))}
+		<div class="digits">${T(t,e)}</div>
+		${d.when(s=>!s.noCall,B(t))}
+		${q(c)}
+	</div>`},z=n.defineVividComponent("dial-pad",o,I,[b.buttonDefinition,f.textFieldDefinition,h.iconDefinition,g.visuallyHiddenDefinition],{styles:A}),P=n.createRegisterFunction(z);P();

package/dial-pad/index.js

@@ -1,24 +1,27 @@
-import { B as g, b as h } from "../bundled/definition3.js";
-import { T as m, t as $ } from "../bundled/definition13.js";
-import { V as _, a as r, h as s, c as x, d as L } from "../bundled/vivid-element.js";
-import { I as y, i as w } from "../bundled/definition2.js";
-import { L as F } from "../bundled/localized.js";
-import { c as k } from "../bundled/class-names.js";
+import { B as h, b as m } from "../bundled/definition3.js";
+import { T as g, t as _ } from "../bundled/definition13.js";
+import { V as $, a as r, o as y, h as d, c as x, d as L } from "../bundled/vivid-element.js";
+import { I as A, i as w } from "../bundled/definition2.js";
+import { V as F, v as E } from "../bundled/definition12.js";
+import { L as k } from "../bundled/localized.js";
+import { c as D } from "../bundled/class-names.js";
 import { w as p } from "../bundled/when.js";
-import { r as D } from "../bundled/repeat.js";
+import { r as T } from "../bundled/repeat.js";
 import { r as B } from "../bundled/ref.js";
-import { f as A } from "../bundled/key-codes.js";
-const C = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{margin-top:32px;grid-column:1/-1}";
-var E = Object.defineProperty, c = (a, t, e, l) => {
-  for (var i = void 0, d = a.length - 1, u; d >= 0; d--)
-    (u = a[d]) && (i = u(t, e, i) || i);
-  return i && E(t, e, i), i;
+import { f as C } from "../bundled/key-codes.js";
+const I = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{margin-top:32px;grid-column:1/-1}";
+var V = Object.defineProperty, n = (a, t, e, o) => {
+  for (var c = void 0, s = a.length - 1, u; s >= 0; s--)
+    (u = a[s]) && (c = u(t, e, c) || c);
+  return c && V(t, e, c), c;
 };
-class o extends F(_) {
+class l extends k($) {
   constructor() {
     super(...arguments), this.helperText = null, this.placeholder = null, this.value = "", this.pattern = "^[0-9#*]*$", this.disabled = !1, this.pending = !1, this.callActive = !1, this.noCall = !1, this.noInput = !1, this.endCallButtonLabel = null, this.callButtonLabel = null, this._onDial = () => {
-      this.callActive ? this.$emit("end-call") : this.$emit("dial");
-    }, this.autofocus = !1;
+      !this._textFieldEl.checkValidity() ? this._announceValidationError(
+        this._textFieldEl.errorValidationMessage ?? ""
+      ) : this._clearErrorAnnouncement(), this.callActive ? this.$emit("end-call") : this.$emit("dial");
+    }, this.autofocus = !1, this._errorAnnouncement = "", this._forceAnnouncementToggle = !1;
   }
   valueChanged(t, e) {
     e != null && this._textFieldEl && e !== this._textFieldEl.value && (this._textFieldEl.value = e, this._textFieldEl.reportValidity());
@@ -32,83 +35,100 @@ class o extends F(_) {
     const t = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
     (this._textFieldEl || t?.[0])?.focus();
   }
+  /**
+   * @internal
+   */
+  _announceValidationError(t) {
+    this._errorAnnouncement = "", window.queueMicrotask(() => {
+      t ? (this._forceAnnouncementToggle = !this._forceAnnouncementToggle, this._errorAnnouncement = `${t}${this._forceAnnouncementToggle ? "​" : ""}`) : this._clearErrorAnnouncement();
+    });
+  }
+  /**
+   * @internal
+   */
+  _clearErrorAnnouncement() {
+    this._errorAnnouncement = "", this._forceAnnouncementToggle = !1;
+  }
 }
-c([
+n([
   r({ attribute: "helper-text" })
-], o.prototype, "helperText");
-c([
+], l.prototype, "helperText");
+n([
   r
-], o.prototype, "placeholder");
-c([
+], l.prototype, "placeholder");
+n([
   r({ mode: "fromView" })
-], o.prototype, "value");
-c([
+], l.prototype, "value");
+n([
   r({ mode: "fromView" })
-], o.prototype, "pattern");
-c([
+], l.prototype, "pattern");
+n([
   r({ mode: "boolean" })
-], o.prototype, "disabled");
-c([
+], l.prototype, "disabled");
+n([
   r({ mode: "boolean" })
-], o.prototype, "pending");
-c([
+], l.prototype, "pending");
+n([
   r({ attribute: "call-active", mode: "boolean" })
-], o.prototype, "callActive");
-c([
+], l.prototype, "callActive");
+n([
   r({ mode: "boolean", attribute: "no-call" })
-], o.prototype, "noCall");
-c([
+], l.prototype, "noCall");
+n([
   r({ mode: "boolean", attribute: "no-input" })
-], o.prototype, "noInput");
-c([
+], l.prototype, "noInput");
+n([
   r({ attribute: "end-call-button-label" })
-], o.prototype, "endCallButtonLabel");
-c([
+], l.prototype, "endCallButtonLabel");
+n([
   r({ attribute: "call-button-label" })
-], o.prototype, "callButtonLabel");
-c([
+], l.prototype, "callButtonLabel");
+n([
   r({ mode: "boolean" })
-], o.prototype, "autofocus");
-class n {
-  constructor(t, e, l, i, d) {
-    this.value = t, this.label = e, this.ariaLabel = l, this.icon = i, this.id = d;
+], l.prototype, "autofocus");
+n([
+  y
+], l.prototype, "_errorAnnouncement");
+class i {
+  constructor(t, e, o, c, s) {
+    this.value = t, this.label = e, this.ariaLabel = o, this.icon = c, this.id = s;
   }
 }
 const f = [
-  new n("1", " ", "digitOneLabel", "one-solid", "btn1"),
-  new n("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
-  new n("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
-  new n("4", "GHI", "digitFourLabel", "four-solid", "btn4"),
-  new n("5", "JKL", "digitFiveLabel", "five-solid", "btn5"),
-  new n("6", "MNO", "digitSixLabel", "six-solid", "btn6"),
-  new n("7", "PQRS", "digitSevenLabel", "seven-solid", "btn7"),
-  new n("8", "TUV", "digitEightLabel", "eight-solid", "btn8"),
-  new n("9", "WXYZ", "digitNineLabel", "nine-solid", "btn9"),
-  new n(
+  new i("1", " ", "digitOneLabel", "one-solid", "btn1"),
+  new i("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
+  new i("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
+  new i("4", "GHI", "digitFourLabel", "four-solid", "btn4"),
+  new i("5", "JKL", "digitFiveLabel", "five-solid", "btn5"),
+  new i("6", "MNO", "digitSixLabel", "six-solid", "btn6"),
+  new i("7", "PQRS", "digitSevenLabel", "seven-solid", "btn7"),
+  new i("8", "TUV", "digitEightLabel", "eight-solid", "btn8"),
+  new i("9", "WXYZ", "digitNineLabel", "nine-solid", "btn9"),
+  new i(
     "*",
     null,
     "digitAsteriskLabel",
     "asterisk-2-solid",
     "btnAsterisk"
   ),
-  new n("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
-  new n(
+  new i("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
+  new i(
     "#",
     null,
     "digitHashtagLabel",
     "hashtag-solid",
     "btnHashtag"
   )
-], T = ({ noInput: a }) => k("base", ["no-input", !!a]);
-function I(a, t) {
-  if (t.key === A && !a.pending && !a.disabled && !a.callActive && !a.noCall && a.value.length > 0 && t.target instanceof HTMLInputElement)
+], P = ({ noInput: a }) => D("base", ["no-input", !!a]);
+function z(a, t) {
+  if (t.key === C && !a.pending && !a.disabled && !a.callActive && !a.noCall && a.value.length > 0 && t.target instanceof HTMLInputElement)
     a._onDial();
   else {
-    const e = f.findIndex((l) => l.value === t.key);
+    const e = f.findIndex((o) => o.value === t.key);
     if (e > -1) {
-      const l = a.shadowRoot.querySelector(".digits").children[e];
-      l && (l.active = !0, setTimeout(() => {
-        l.active = !1;
+      const o = a.shadowRoot.querySelector(".digits").children[e];
+      o && (o.active = !0, setTimeout(() => {
+        o.active = !1;
       }, 200));
     }
   }
@@ -120,17 +140,17 @@ function v(a) {
 function b(a, { event: t }) {
   t.stopImmediatePropagation();
 }
-function z(a) {
+function H(a) {
   a.value = a.value.slice(0, -1), a.$emit("input"), a.$emit("change"), a.value === "" && a._textFieldEl?.focus();
 }
-function P(a, t) {
-  return s`<${a} ${B(
+function S(a, t) {
+  return d`<${a} ${B(
     "_textFieldEl"
   )} class="phone-field" internal-part type="tel"
         value="${(e) => e.value}" placeholder="${(e) => e.placeholder}"
             ?disabled="${(e) => e.disabled}" helper-text="${(e) => e.helperText}" pattern="${(e) => e.pattern}"
             aria-label="${(e) => e.locale.dialPad.inputLabel}"
-            @keydown="${(e, l) => I(e, l.event)}"
+            @keydown="${(e, o) => z(e, o.event)}"
             @input="${v}"
 			@change="${v}"
 			@focus="${b}"
@@ -139,26 +159,26 @@ function P(a, t) {
 			>
          ${p(
     (e) => e.value && e.value.length && e.value.length > 0,
-    s`<${t}
+    d`<${t}
                 slot="action-items"
 								size='super-condensed'
 								icon="backspace-line"
 								aria-label="${(e) => e.deleteAriaLabel || e.locale.dialPad.deleteButtonLabel}"
 								appearance='ghost'
 								?disabled="${(e) => e.disabled || e.callActive}"
-								@click="${(e) => z(e)}">
+								@click="${(e) => H(e)}">
             </${t}>`
   )}
         </${a}>`;
 }
-function S(a, { parent: t, event: e }) {
+function M(a, { parent: t, event: e }) {
   t.value += a.value, t.$emit("keypad-click", e.currentTarget), t.$emit("input"), t.$emit("change");
 }
-function V(a, t) {
-  return s`
-		${D(
+function N(a, t) {
+  return d`
+		${T(
     (e) => f,
-    s`
+    d`
 			<${a}
 					  id="${(e) => e.id}"
 					  value="${(e) => e.value}"
@@ -168,10 +188,10 @@ function V(a, t) {
 					  label="${(e) => e.label === "&nbsp;" ? " " : e.label}"
 					  size='condensed'
 					  class="digit-btn"
-						?autofocus="${(e, l) => l.parent.autofocus && l.parent.noInput && l.index === 0}"
-					  aria-label="${(e, l) => l.parent.locale.dialPad[e.ariaLabel]}"
-					  ?disabled="${(e, l) => l.parent.disabled}"
-					  @click="${S}">
+						?autofocus="${(e, o) => o.parent.autofocus && o.parent.noInput && o.index === 0}"
+					  aria-label="${(e, o) => o.parent.locale.dialPad[e.ariaLabel]}"
+					  ?disabled="${(e, o) => o.parent.disabled}"
+					  @click="${M}">
 					  	<${t} slot="icon"
 									name="${(e) => e.icon}"
 									class="digit-btn-num"></${t}>
@@ -183,8 +203,8 @@ function V(a, t) {
   )}
 	`;
 }
-function H(a) {
-  return s`<${a} class="call-btn"
+function O(a) {
+  return d`<${a} class="call-btn"
         size="expanded"
         appearance="filled"
         icon="${(t) => t.callActive ? "disable-call-line" : "call-line"}"
@@ -195,20 +215,31 @@ function H(a) {
         label="${(t) => t.callActive ? t.endCallButtonLabel || t.locale.dialPad.endCallButtonLabel : t.callButtonLabel || t.locale.dialPad.callButtonLabel}">
     </${a}>`;
 }
-const N = (a) => {
-  const t = a.tagFor(g), e = a.tagFor(y), l = a.tagFor(m);
-  return s` <div class="${T}">
-		${p((i) => !i.noInput, P(l, t))}
-		<div class="digits">${V(t, e)}</div>
-		${p((i) => !i.noCall, H(t))}
+function R(a) {
+  return d`<${a} role="alert" aria-atomic="true">
+		${(t) => `${t.locale.dialPad.errorLabel} ${t._errorAnnouncement}`}
+	</${a}>`;
+}
+const q = (a) => {
+  const t = a.tagFor(h), e = a.tagFor(A), o = a.tagFor(g), c = a.tagFor(F);
+  return d` <div class="${P}">
+		${p((s) => !s.noInput, S(o, t))}
+		<div class="digits">${N(t, e)}</div>
+		${p((s) => !s.noCall, O(t))}
+		${R(c)}
 	</div>`;
-}, O = L(
+}, K = L(
   "dial-pad",
-  o,
-  N,
-  [h, $, w],
+  l,
+  q,
+  [
+    m,
+    _,
+    w,
+    E
+  ],
   {
-    styles: C
+    styles: I
   }
-), R = x(O);
-R();
+), U = x(K);
+U();

package/file-picker/definition.cjs

@@ -9,12 +9,13 @@ const mixins = require('../unbundled/mixins.cjs');
 const fastElement = require('@microsoft/fast-element');
 const delegatesAria = require('../unbundled/delegates-aria.cjs');
 const formAssociated = require('../unbundled/form-associated.cjs');
+const withContextualHelp = require('../unbundled/with-contextual-help.cjs');
 const withErrorText = require('../unbundled/with-error-text.cjs');
 const formElement = require('../unbundled/form-element.cjs');
 const localized = require('../unbundled/localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
 
 async function filesFromDataTransfer(dataTransfer) {
   const browserSupportFolderDrop = dataTransfer.items?.[0]?.webkitGetAsEntry != null;
@@ -103,9 +104,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-class FilePicker extends mixins.WithFeedback(
-  withErrorText.WithErrorText(
-    formElement.FormElement(delegatesAria.DelegatesAria(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+class FilePicker extends withContextualHelp.WithContextualHelp(
+  mixins.WithFeedback(
+    withErrorText.WithErrorText(
+      formElement.FormElement(delegatesAria.DelegatesAria(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+    )
   )
 ) {
   constructor() {
@@ -431,7 +434,13 @@ const FilePickerTemplate = (context) => {
   const buttonTag = context.tagFor(button_definition.Button);
   return fastElement.html`
 		<div class="base">
-			${fastElement.when((x) => x.label, fastElement.html`<label>${(x) => x.label}</label>`)}
+			<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp}>
+				${fastElement.when(
+    (x) => x.label,
+    fastElement.html`<label class="label">${(x) => x.label}</label>`
+  )}
+				<slot name="contextual-help" ${fastElement.slotted("_contextualHelpSlottedContent")}></slot>
+			</div>
 			<div class="control-wrapper">
 				<button
 					type="button"