@vonage/vivid 5.1.0 → 5.3.0

package/date-picker/index.cjs

@@ -1 +1 @@
-"use strict";const u=require("../bundled/definition9.cjs"),d=require("../bundled/definition3.cjs"),p=require("../bundled/definition13.cjs"),P=require("../bundled/definition14.cjs"),l=require("../bundled/picker-field.template.cjs"),t=require("../bundled/calendar-picker.template.cjs"),o=require("../bundled/vivid-element.cjs"),k=require("../bundled/definition12.cjs"),h=require("../bundled/single-value-picker.cjs"),_=require("../bundled/single-date-picker.cjs");var D=Object.defineProperty,f=Object.getOwnPropertyDescriptor,g=(i,e,a,q)=>{for(var r=f(e,a),n=i.length-1,c;n>=0;n--)(c=i[n])&&(r=c(e,a,r)||r);return r&&D(e,a,r),r};class s extends _.SingleDatePickerMixin(h.SingleValuePicker(t.MinMaxCalendarPicker(t.CalendarPicker(l.PickerField)))){constructor(){super(),this._isValidValue=t.isValidDateStr,this._textFieldSize="20",this.proxy.type="date"}_toPresentationValue(e){return t.formatPresentationDate(e,this.locale.calendarPicker)}_parsePresentationValue(e){return t.parsePresentationDate(e,this.locale.calendarPicker)}_dateValue(){return this.value}_withUpdatedDate(e){return e}get _pickerButtonLabel(){return this.value?this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value)):this.locale.calendarPicker.chooseDateLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDateLabel}get _textFieldPlaceholder(){return this.locale.calendarPicker.dateFormatPlaceholder}_onDateClick(e){super._onDateClick(e),this._closePopup()}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateError:null}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}g([o.volatile],s.prototype,"_pickerButtonLabel");const v=i=>l.PickerFieldTemplate(i,t.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),b=o.defineVividComponent("date-picker",s,v,[d.buttonDefinition,u.popupDefinition,p.textFieldDefinition,P.dividerDefinition,k.visuallyHiddenDefinition],{styles:[l.pickerFieldStyles,t.calendarStyles],shadowOptions:{delegatesFocus:!0}}),V=o.createRegisterFunction(b);V();
+"use strict";const u=require("../bundled/definition9.cjs"),d=require("../bundled/definition3.cjs"),p=require("../bundled/definition10.cjs"),P=require("../bundled/definition14.cjs"),l=require("../bundled/picker-field.template.cjs"),t=require("../bundled/calendar-picker.template.cjs"),o=require("../bundled/vivid-element.cjs"),k=require("../bundled/definition13.cjs"),h=require("../bundled/single-value-picker.cjs"),_=require("../bundled/single-date-picker.cjs");var D=Object.defineProperty,f=Object.getOwnPropertyDescriptor,g=(i,e,a,q)=>{for(var r=f(e,a),n=i.length-1,c;n>=0;n--)(c=i[n])&&(r=c(e,a,r)||r);return r&&D(e,a,r),r};class s extends _.SingleDatePickerMixin(h.SingleValuePicker(t.MinMaxCalendarPicker(t.CalendarPicker(l.PickerField)))){constructor(){super(),this._isValidValue=t.isValidDateStr,this._textFieldSize="20",this.proxy.type="date"}_toPresentationValue(e){return t.formatPresentationDate(e,this.locale.calendarPicker)}_parsePresentationValue(e){return t.parsePresentationDate(e,this.locale.calendarPicker)}_dateValue(){return this.value}_withUpdatedDate(e){return e}get _pickerButtonLabel(){return this.value?this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value)):this.locale.calendarPicker.chooseDateLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDateLabel}get _textFieldPlaceholder(){return this.locale.calendarPicker.dateFormatPlaceholder}_onDateClick(e){super._onDateClick(e),this._closePopup()}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateError:null}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}g([o.volatile],s.prototype,"_pickerButtonLabel");const v=i=>l.PickerFieldTemplate(i,t.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),b=o.defineVividComponent("date-picker",s,v,[d.buttonDefinition,u.popupDefinition,p.textFieldDefinition,P.dividerDefinition,k.visuallyHiddenDefinition],{styles:[l.pickerFieldStyles,t.calendarStyles],shadowOptions:{delegatesFocus:!0}}),V=o.createRegisterFunction(b);V();

package/date-picker/index.js

@@ -1,11 +1,11 @@
 import { p as n } from "../bundled/definition9.js";
 import { b as s } from "../bundled/definition3.js";
-import { t as c } from "../bundled/definition13.js";
+import { t as c } from "../bundled/definition10.js";
 import { d } from "../bundled/definition14.js";
 import { P as u, a as p, p as P } from "../bundled/picker-field.template.js";
 import { M as f, C as h, i as m, f as _, p as k, a as D, c as v } from "../bundled/calendar-picker.template.js";
 import { v as g, c as b, d as V } from "../bundled/vivid-element.js";
-import { v as S } from "../bundled/definition12.js";
+import { v as S } from "../bundled/definition13.js";
 import { S as C } from "../bundled/single-value-picker.js";
 import { S as F } from "../bundled/single-date-picker.js";
 var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, x = (t, e, r, M) => {

package/date-range-picker/index.cjs

@@ -1 +1 @@
-"use strict";const m=require("../bundled/definition3.cjs"),_=require("../bundled/definition9.cjs"),D=require("../bundled/definition13.cjs"),P=require("../bundled/definition14.cjs"),n=require("../bundled/vivid-element.cjs"),u=require("../bundled/picker-field.template.cjs"),r=require("../bundled/calendar-picker.template.cjs"),g=require("../bundled/definition12.cjs"),c=(i,t)=>`${i} – ${t}`,p=(i,t)=>c(r.formatPresentationDate(i.start,t),r.formatPresentationDate(i.end,t)),f=(i,t)=>{const e=i.trim().split(/[\s—–-]+/);if(e.length!==2)throw new Error(`Invalid date range: ${i}`);const[a,s]=e.map(h=>r.parsePresentationDate(h,t));return{start:a,end:s}};var V=Object.defineProperty,k=Object.getOwnPropertyDescriptor,o=(i,t,e,a)=>{for(var s=a>1?void 0:a?k(t,e):t,h=i.length-1,d;h>=0;h--)(d=i[h])&&(s=(a?d(t,e,s):d(s))||s);return a&&s&&V(t,e,s),s};const v=i=>typeof i=="string";function b(i){return!!i}class l extends r.MinMaxCalendarPicker(r.CalendarPicker(u.PickerField)){constructor(){super(...arguments),this.initialStart="",this.initialEnd="",this.#e=!1,this.start="",this.end="",this.setFormValue=(t,e)=>{v(t)||super.setFormValue(t,e)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize="30"}initialStartChanged(){this.dirtyValue||(this.start=this.initialStart,this.dirtyValue=!1)}initialEndChanged(){this.dirtyValue||(this.end=this.initialEnd,this.dirtyValue=!1)}#e;startChanged(){if(this.start&&!r.isValidDateStr(this.start)){this.start="";return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#i()}endChanged(){if(this.end&&!r.isValidDateStr(this.end)){this.end="";return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#i()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(t){this.#e=!0,t.start!==void 0&&(this.start=t.start,this.$emit("input:start")),t.end!==void 0&&(this.end=t.end,this.$emit("input:end")),this.#e=!1,this.$emit("input"),this.$emit("change"),this.#i()}#i(){if(this.start&&this.end){if(r.compareDateStr(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=c(this.start,this.end)}else this.value="";this._updatePresentationValue();const t=this.start||this.end;t&&this._adjustSelectedMonthToEnsureVisibilityOf(t),this.#a()}_updatePresentationValue(){this.start&&this.end?this._presentationValue=p({start:this.start,end:this.end},this.locale.calendarPicker):this._presentationValue=""}nameChanged(t,e){super.nameChanged(t,e),this.#a()}#a(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{const t=new FormData;t.append(this.name,this.start),t.append(this.name,this.end),this.setFormValue(t)}}connectedCallback(){super.connectedCallback(),this.start||(this.start=this.initialStart),this.end||(this.end=this.initialEnd)}#r(){const t=[this.start,this.end].filter(b),e=t.length===1;this._hoverDate&&e&&t.push(this._hoverDate);const[a,s]=t.sort(r.compareDateStr);return{start:a,end:s}}_isDateAriaSelected(t){return this._isDateInSelectedRange(t)}_isDateInSelectedRange(t){const{start:e,end:a}=this.#r();return e&&a?r.compareDateStr(t,e)>=0&&r.compareDateStr(t,a)<=0:!1}_isDateRangeStart(t){return t===this.#r().start}_isDateRangeEnd(t){return t===this.#r().end}_getSelectedDates(){const t=[];return this.start&&t.push(this.start),this.end&&t.push(this.end),t}_onDateClick(t){this.start&&this.end?this.#t({start:t,end:""}):this.start?(this.#t({end:t}),this._closePopup()):this.end?(this.#t({start:t}),this._closePopup()):this.#t({start:t})}get _textFieldPlaceholder(){return c(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===""){this.#t({start:"",end:""});return}try{const{start:t,end:e}=f(this._presentationValue,this.locale.calendarPicker);this.#t({start:t,end:e})}catch{const e=this._presentationValue;this.#t({start:"",end:""}),this._presentationValue=e;return}}_onDateMouseEnter(t){this._hoverDate=t}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&r.compareDateStr(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(r.formatPresentationDate(this.min,this.locale.calendarPicker)):this.max&&this.end&&r.compareDateStr(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(r.formatPresentationDate(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue==="")return!1;try{return f(this._presentationValue,this.locale.calendarPicker),!1}catch{return!0}}_onClearClick(){this.#t({start:"",end:""}),super._onClearClick()}formResetCallback(){this.#t({start:this.initialStart,end:this.initialEnd}),super.formResetCallback()}get _pickerButtonLabel(){return this.start&&this.end?this.locale.calendarPicker.changeDatesLabel(p({start:this.start,end:this.end},this.locale.calendarPicker)):this.locale.calendarPicker.chooseDatesLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDatesLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}o([n.attr({mode:"fromView",attribute:"start"})],l.prototype,"initialStart",2);o([n.attr({mode:"fromView",attribute:"end"})],l.prototype,"initialEnd",2);o([n.observable],l.prototype,"start",2);o([n.observable],l.prototype,"end",2);o([n.attr({attribute:"current-start"})],l.prototype,"currentStart",2);o([n.attr({attribute:"current-end"})],l.prototype,"currentEnd",2);o([n.observable],l.prototype,"_numCalendars",2);o([n.observable],l.prototype,"_hoverDate",2);o([n.volatile],l.prototype,"_pickerButtonLabel",1);const S=i=>u.PickerFieldTemplate(i,r.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),C=n.defineVividComponent("date-range-picker",l,S,[m.buttonDefinition,_.popupDefinition,D.textFieldDefinition,P.dividerDefinition,g.visuallyHiddenDefinition],{styles:[u.pickerFieldStyles,r.calendarStyles],shadowOptions:{delegatesFocus:!0}}),y=n.createRegisterFunction(C);y();
+"use strict";const m=require("../bundled/definition3.cjs"),_=require("../bundled/definition9.cjs"),D=require("../bundled/definition10.cjs"),P=require("../bundled/definition14.cjs"),n=require("../bundled/vivid-element.cjs"),u=require("../bundled/picker-field.template.cjs"),r=require("../bundled/calendar-picker.template.cjs"),g=require("../bundled/definition13.cjs"),c=(i,t)=>`${i} – ${t}`,p=(i,t)=>c(r.formatPresentationDate(i.start,t),r.formatPresentationDate(i.end,t)),f=(i,t)=>{const e=i.trim().split(/[\s—–-]+/);if(e.length!==2)throw new Error(`Invalid date range: ${i}`);const[a,s]=e.map(h=>r.parsePresentationDate(h,t));return{start:a,end:s}};var V=Object.defineProperty,k=Object.getOwnPropertyDescriptor,o=(i,t,e,a)=>{for(var s=a>1?void 0:a?k(t,e):t,h=i.length-1,d;h>=0;h--)(d=i[h])&&(s=(a?d(t,e,s):d(s))||s);return a&&s&&V(t,e,s),s};const v=i=>typeof i=="string";function b(i){return!!i}class l extends r.MinMaxCalendarPicker(r.CalendarPicker(u.PickerField)){constructor(){super(...arguments),this.initialStart="",this.initialEnd="",this.#e=!1,this.start="",this.end="",this.setFormValue=(t,e)=>{v(t)||super.setFormValue(t,e)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize="30"}initialStartChanged(){this.dirtyValue||(this.start=this.initialStart,this.dirtyValue=!1)}initialEndChanged(){this.dirtyValue||(this.end=this.initialEnd,this.dirtyValue=!1)}#e;startChanged(){if(this.start&&!r.isValidDateStr(this.start)){this.start="";return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#i()}endChanged(){if(this.end&&!r.isValidDateStr(this.end)){this.end="";return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#i()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(t){this.#e=!0,t.start!==void 0&&(this.start=t.start,this.$emit("input:start")),t.end!==void 0&&(this.end=t.end,this.$emit("input:end")),this.#e=!1,this.$emit("input"),this.$emit("change"),this.#i()}#i(){if(this.start&&this.end){if(r.compareDateStr(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=c(this.start,this.end)}else this.value="";this._updatePresentationValue();const t=this.start||this.end;t&&this._adjustSelectedMonthToEnsureVisibilityOf(t),this.#a()}_updatePresentationValue(){this.start&&this.end?this._presentationValue=p({start:this.start,end:this.end},this.locale.calendarPicker):this._presentationValue=""}nameChanged(t,e){super.nameChanged(t,e),this.#a()}#a(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{const t=new FormData;t.append(this.name,this.start),t.append(this.name,this.end),this.setFormValue(t)}}connectedCallback(){super.connectedCallback(),this.start||(this.start=this.initialStart),this.end||(this.end=this.initialEnd)}#r(){const t=[this.start,this.end].filter(b),e=t.length===1;this._hoverDate&&e&&t.push(this._hoverDate);const[a,s]=t.sort(r.compareDateStr);return{start:a,end:s}}_isDateAriaSelected(t){return this._isDateInSelectedRange(t)}_isDateInSelectedRange(t){const{start:e,end:a}=this.#r();return e&&a?r.compareDateStr(t,e)>=0&&r.compareDateStr(t,a)<=0:!1}_isDateRangeStart(t){return t===this.#r().start}_isDateRangeEnd(t){return t===this.#r().end}_getSelectedDates(){const t=[];return this.start&&t.push(this.start),this.end&&t.push(this.end),t}_onDateClick(t){this.start&&this.end?this.#t({start:t,end:""}):this.start?(this.#t({end:t}),this._closePopup()):this.end?(this.#t({start:t}),this._closePopup()):this.#t({start:t})}get _textFieldPlaceholder(){return c(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===""){this.#t({start:"",end:""});return}try{const{start:t,end:e}=f(this._presentationValue,this.locale.calendarPicker);this.#t({start:t,end:e})}catch{const e=this._presentationValue;this.#t({start:"",end:""}),this._presentationValue=e;return}}_onDateMouseEnter(t){this._hoverDate=t}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&r.compareDateStr(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(r.formatPresentationDate(this.min,this.locale.calendarPicker)):this.max&&this.end&&r.compareDateStr(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(r.formatPresentationDate(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue==="")return!1;try{return f(this._presentationValue,this.locale.calendarPicker),!1}catch{return!0}}_onClearClick(){this.#t({start:"",end:""}),super._onClearClick()}formResetCallback(){this.#t({start:this.initialStart,end:this.initialEnd}),super.formResetCallback()}get _pickerButtonLabel(){return this.start&&this.end?this.locale.calendarPicker.changeDatesLabel(p({start:this.start,end:this.end},this.locale.calendarPicker)):this.locale.calendarPicker.chooseDatesLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDatesLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}o([n.attr({mode:"fromView",attribute:"start"})],l.prototype,"initialStart",2);o([n.attr({mode:"fromView",attribute:"end"})],l.prototype,"initialEnd",2);o([n.observable],l.prototype,"start",2);o([n.observable],l.prototype,"end",2);o([n.attr({attribute:"current-start"})],l.prototype,"currentStart",2);o([n.attr({attribute:"current-end"})],l.prototype,"currentEnd",2);o([n.observable],l.prototype,"_numCalendars",2);o([n.observable],l.prototype,"_hoverDate",2);o([n.volatile],l.prototype,"_pickerButtonLabel",1);const S=i=>u.PickerFieldTemplate(i,r.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),C=n.defineVividComponent("date-range-picker",l,S,[m.buttonDefinition,_.popupDefinition,D.textFieldDefinition,P.dividerDefinition,g.visuallyHiddenDefinition],{styles:[u.pickerFieldStyles,r.calendarStyles],shadowOptions:{delegatesFocus:!0}}),y=n.createRegisterFunction(C);y();

package/date-range-picker/index.js

@@ -1,11 +1,11 @@
 import { b as D } from "../bundled/definition3.js";
 import { p as P } from "../bundled/definition9.js";
-import { t as g } from "../bundled/definition13.js";
+import { t as g } from "../bundled/definition10.js";
 import { d as V } from "../bundled/definition14.js";
 import { a as d, o as c, v as k, c as v, d as C } from "../bundled/vivid-element.js";
 import { P as b, a as y, p as S } from "../bundled/picker-field.template.js";
 import { f as o, p as E, M as F, C as R, i as f, b as h, a as w, c as x } from "../bundled/calendar-picker.template.js";
-import { v as M } from "../bundled/definition12.js";
+import { v as M } from "../bundled/definition13.js";
 const p = (i, t) => `${i} – ${t}`, m = (i, t) => p(
   o(i.start, t),
   o(i.end, t)

package/date-time-picker/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const P=require("../bundled/definition9.cjs"),D=require("../bundled/definition3.cjs"),k=require("../bundled/definition13.cjs"),v=require("../bundled/definition14.cjs"),p=require("../bundled/picker-field.template.cjs"),i=require("../bundled/calendar-picker.template.cjs"),s=require("../bundled/vivid-element.cjs"),r=require("../bundled/time-selection-picker.template.cjs"),f=require("../bundled/definition12.cjs"),x=require("../bundled/single-value-picker.cjs"),V=require("../bundled/single-date-picker.cjs"),S=".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}",c=e=>e.split("T")[0]||"",u=e=>e.split("T")[1]||"",T=e=>{const[t="",n=""]=e.split("T");return i.isValidDateStr(t)&&r.isValidTimeStr(n)},g=(e,t,n,d)=>{const[a,l]=e.split("T");return`${i.formatPresentationDate(a,t)} ${r.formatPresentationTime(l,n,d)}`},M=(e,t,n)=>{const[d,...a]=e.split(" "),l=i.parsePresentationDate(d,t),h=r.parsePresentationTime(a.join(" "),n);return`${l}T${h}`};var y=Object.defineProperty,m=(e,t,n,d)=>{for(var a=void 0,l=e.length-1,h;l>=0;l--)(h=e[l])&&(a=h(t,n,a)||a);return a&&y(t,n,a),a};const _={fromView:e=>e&&T(e)?e:"",toView(e){return e}};class o extends r.TimeSelectionPicker(V.SingleDatePickerMixin(x.SingleValuePicker(i.CalendarPicker(p.PickerField)))){constructor(){super(),this._isValidValue=T,this._textFieldSize="30",this.proxy.type="datetime-local",this.proxy.step="1",this.min="",this.minDate="",this.minTime="",this.max="",this.maxDate="",this.maxTime=""}get _resolvedMinDate(){return this.minDate||c(this.min)}get _resolvedMaxDate(){return this.maxDate||c(this.max)}get _resolvedMinTime(){return this.minTime||this.min&&c(this.min)===this._dateValue()&&u(this.min)||""}get _resolvedMaxTime(){return this.maxTime||this.max&&c(this.max)===this._dateValue()&&u(this.max)||""}_toPresentationValue(t){return g(t,this.locale.calendarPicker,this._displaySeconds,this._use12hClock)}_parsePresentationValue(t){return M(t,this.locale.calendarPicker,this._use12hClock)}_dateValue(){return c(this.value)}_withUpdatedDate(t){return`${t}T${u(this.value)||"00:00:00"}`}get _timeValue(){return u(this.value)}_withUpdatedTime(t){return`${c(this.value)||i.currentDateStr()}T${t}`}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.dateTimePicker.invalidDateTimeError:this._dateValue()&&this._resolvedMinDate&&i.compareDateStr(this._dateValue(),this._resolvedMinDate)<0?this.locale.dateTimePicker.dateBeforeMinDateError(i.formatPresentationDate(this._resolvedMinDate,this.locale.calendarPicker)):this._dateValue()&&this._resolvedMaxDate&&i.compareDateStr(this._dateValue(),this._resolvedMaxDate)>0?this.locale.dateTimePicker.dateAfterMaxDateError(i.formatPresentationDate(this._resolvedMaxDate,this.locale.calendarPicker)):this._timeValue&&this._resolvedMinTime&&r.compareTimeStr(this._timeValue,this._resolvedMinTime)<0?this.locale.dateTimePicker.timeBeforeMinTimeError(r.formatPresentationTime(this._resolvedMinTime,this._displaySeconds,this._use12hClock)):this._timeValue&&this._resolvedMaxTime&&r.compareTimeStr(this._timeValue,this._resolvedMaxTime)>0?this.locale.dateTimePicker.timeAfterMaxTimeError(r.formatPresentationTime(this._resolvedMaxTime,this._displaySeconds,this._use12hClock)):null}get _textFieldPlaceholder(){return`${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`}get _pickerButtonLabel(){return this.value?this.locale.dateTimePicker.changeDateTimeLabel(this._toPresentationValue(this.value)):this.locale.dateTimePicker.chooseDateTimeLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("#inline-time-picker, button, .vwc-button")}get _pickerButtonIcon(){return"calendar-clock-line"}get _dialogLabel(){return this.locale.dateTimePicker.chooseDateTimeLabel}}m([s.attr({converter:_})],o.prototype,"min");m([s.attr({converter:r.ValidTimeFilter,attribute:"min-time"})],o.prototype,"minTime");m([s.attr({converter:i.ValidDateFilter,attribute:"min-date"})],o.prototype,"minDate");m([s.attr({converter:_})],o.prototype,"max");m([s.attr({converter:r.ValidTimeFilter,attribute:"max-time"})],o.prototype,"maxTime");m([s.attr({converter:i.ValidDateFilter,attribute:"max-date"})],o.prototype,"maxDate");const $=e=>p.PickerFieldTemplate(e,s.html`
+"use strict";const P=require("../bundled/definition9.cjs"),D=require("../bundled/definition3.cjs"),k=require("../bundled/definition10.cjs"),v=require("../bundled/definition14.cjs"),p=require("../bundled/picker-field.template.cjs"),i=require("../bundled/calendar-picker.template.cjs"),s=require("../bundled/vivid-element.cjs"),r=require("../bundled/time-selection-picker.template.cjs"),f=require("../bundled/definition13.cjs"),x=require("../bundled/single-value-picker.cjs"),V=require("../bundled/single-date-picker.cjs"),S=".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}",c=e=>e.split("T")[0]||"",u=e=>e.split("T")[1]||"",T=e=>{const[t="",n=""]=e.split("T");return i.isValidDateStr(t)&&r.isValidTimeStr(n)},g=(e,t,n,d)=>{const[a,l]=e.split("T");return`${i.formatPresentationDate(a,t)} ${r.formatPresentationTime(l,n,d)}`},M=(e,t,n)=>{const[d,...a]=e.split(" "),l=i.parsePresentationDate(d,t),h=r.parsePresentationTime(a.join(" "),n);return`${l}T${h}`};var y=Object.defineProperty,m=(e,t,n,d)=>{for(var a=void 0,l=e.length-1,h;l>=0;l--)(h=e[l])&&(a=h(t,n,a)||a);return a&&y(t,n,a),a};const _={fromView:e=>e&&T(e)?e:"",toView(e){return e}};class o extends r.TimeSelectionPicker(V.SingleDatePickerMixin(x.SingleValuePicker(i.CalendarPicker(p.PickerField)))){constructor(){super(),this._isValidValue=T,this._textFieldSize="30",this.proxy.type="datetime-local",this.proxy.step="1",this.min="",this.minDate="",this.minTime="",this.max="",this.maxDate="",this.maxTime=""}get _resolvedMinDate(){return this.minDate||c(this.min)}get _resolvedMaxDate(){return this.maxDate||c(this.max)}get _resolvedMinTime(){return this.minTime||this.min&&c(this.min)===this._dateValue()&&u(this.min)||""}get _resolvedMaxTime(){return this.maxTime||this.max&&c(this.max)===this._dateValue()&&u(this.max)||""}_toPresentationValue(t){return g(t,this.locale.calendarPicker,this._displaySeconds,this._use12hClock)}_parsePresentationValue(t){return M(t,this.locale.calendarPicker,this._use12hClock)}_dateValue(){return c(this.value)}_withUpdatedDate(t){return`${t}T${u(this.value)||"00:00:00"}`}get _timeValue(){return u(this.value)}_withUpdatedTime(t){return`${c(this.value)||i.currentDateStr()}T${t}`}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.dateTimePicker.invalidDateTimeError:this._dateValue()&&this._resolvedMinDate&&i.compareDateStr(this._dateValue(),this._resolvedMinDate)<0?this.locale.dateTimePicker.dateBeforeMinDateError(i.formatPresentationDate(this._resolvedMinDate,this.locale.calendarPicker)):this._dateValue()&&this._resolvedMaxDate&&i.compareDateStr(this._dateValue(),this._resolvedMaxDate)>0?this.locale.dateTimePicker.dateAfterMaxDateError(i.formatPresentationDate(this._resolvedMaxDate,this.locale.calendarPicker)):this._timeValue&&this._resolvedMinTime&&r.compareTimeStr(this._timeValue,this._resolvedMinTime)<0?this.locale.dateTimePicker.timeBeforeMinTimeError(r.formatPresentationTime(this._resolvedMinTime,this._displaySeconds,this._use12hClock)):this._timeValue&&this._resolvedMaxTime&&r.compareTimeStr(this._timeValue,this._resolvedMaxTime)>0?this.locale.dateTimePicker.timeAfterMaxTimeError(r.formatPresentationTime(this._resolvedMaxTime,this._displaySeconds,this._use12hClock)):null}get _textFieldPlaceholder(){return`${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`}get _pickerButtonLabel(){return this.value?this.locale.dateTimePicker.changeDateTimeLabel(this._toPresentationValue(this.value)):this.locale.dateTimePicker.chooseDateTimeLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("#inline-time-picker, button, .vwc-button")}get _pickerButtonIcon(){return"calendar-clock-line"}get _dialogLabel(){return this.locale.dateTimePicker.chooseDateTimeLabel}}m([s.attr({converter:_})],o.prototype,"min");m([s.attr({converter:r.ValidTimeFilter,attribute:"min-time"})],o.prototype,"minTime");m([s.attr({converter:i.ValidDateFilter,attribute:"min-date"})],o.prototype,"minDate");m([s.attr({converter:_})],o.prototype,"max");m([s.attr({converter:r.ValidTimeFilter,attribute:"max-time"})],o.prototype,"maxTime");m([s.attr({converter:i.ValidDateFilter,attribute:"max-date"})],o.prototype,"maxDate");const $=e=>p.PickerFieldTemplate(e,s.html`
 			<div class="date-time-picker">
 				${()=>i.CalendarPickerTemplate(e)}
 				<div class="time-picker">

package/date-time-picker/index.js

@@ -1,12 +1,12 @@
 import { p as v } from "../bundled/definition9.js";
 import { b as k } from "../bundled/definition3.js";
-import { t as x } from "../bundled/definition13.js";
+import { t as x } from "../bundled/definition10.js";
 import { d as V } from "../bundled/definition14.js";
 import { P as S, a as g, p as M } from "../bundled/picker-field.template.js";
 import { i as y, f as h, p as b, C as F, d as $, b as u, V as _, a as C, c as E } from "../bundled/calendar-picker.template.js";
 import { a as l, h as w, c as L, d as B } from "../bundled/vivid-element.js";
 import { i as A, f as p, p as j, T as I, c as T, V as P, a as O, b as U } from "../bundled/time-selection-picker.template.js";
-import { v as q } from "../bundled/definition12.js";
+import { v as q } from "../bundled/definition13.js";
 import { S as z } from "../bundled/single-value-picker.js";
 import { S as H } from "../bundled/single-date-picker.js";
 const R = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}", o = (e) => e.split("T")[0] || "", d = (e) => e.split("T")[1] || "", f = (e) => {

package/dial-pad/definition.cjs

@@ -6,6 +6,7 @@ const button_definition = require('../unbundled/definition.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const icon_definition = require('../icon/definition.cjs');
+const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
 const localized = require('../unbundled/localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
@@ -35,14 +36,28 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
     this.noInput = false;
     this.endCallButtonLabel = null;
     this.callButtonLabel = null;
+    this.deleteAriaLabel = null;
     /**
      *
      * @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) {
@@ -60,6 +75,27 @@ class DialPad extends localized.Localized(vividElement.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([
   fastElement.attr({ attribute: "helper-text" })
@@ -94,9 +130,15 @@ __decorateClass([
 __decorateClass([
   fastElement.attr({ attribute: "call-button-label" })
 ], DialPad.prototype, "callButtonLabel");
+__decorateClass([
+  fastElement.attr({ attribute: "delete-aria-label" })
+], DialPad.prototype, "deleteAriaLabel");
 __decorateClass([
   fastElement.attr({ mode: "boolean" })
 ], DialPad.prototype, "autofocus");
+__decorateClass([
+  fastElement.observable
+], DialPad.prototype, "_errorAnnouncement");
 
 class DialPadButton {
   constructor(value, label, ariaLabel, icon, id) {
@@ -240,14 +282,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 fastElement.html`<${visuallyHiddenTag} role="alert" aria-atomic="true">
+		${(x) => `${x.locale.dialPad.errorLabel} ${x._errorAnnouncement}`}
+	</${visuallyHiddenTag}>`;
+}
 const DialPadTemplate = (context) => {
   const buttonTag = context.tagFor(button_definition.Button);
   const iconTag = context.tagFor(icon_definition.VwcIconElement);
   const textFieldTag = context.tagFor(textField_definition.VwcTextFieldElement);
+  const visuallyHiddenTag = context.tagFor(visuallyHidden_definition.VwcVisuallyHiddenElement);
   return fastElement.html` <div class="${getClasses}">
 		${fastElement.when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
 		${fastElement.when((x) => !x.noCall, renderDialButton(buttonTag))}
+		${renderErrorAnnouncement(visuallyHiddenTag)}
 	</div>`;
 };
 
@@ -255,7 +304,12 @@ const dialPadDefinition = vividElement.defineVividComponent(
   "dial-pad",
   DialPad,
   DialPadTemplate,
-  [button_definition.buttonDefinition, textField_definition.textFieldDefinition, icon_definition.iconDefinition],
+  [
+    button_definition.buttonDefinition,
+    textField_definition.textFieldDefinition,
+    icon_definition.iconDefinition,
+    visuallyHidden_definition.visuallyHiddenDefinition
+  ],
   {
     styles
   }

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';
 
@@ -31,14 +32,28 @@ class DialPad extends Localized(VividElement) {
     this.noInput = false;
     this.endCallButtonLabel = null;
     this.callButtonLabel = null;
+    this.deleteAriaLabel = null;
     /**
      *
      * @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 +71,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" })
@@ -90,9 +126,15 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "call-button-label" })
 ], DialPad.prototype, "callButtonLabel");
+__decorateClass([
+  attr({ attribute: "delete-aria-label" })
+], DialPad.prototype, "deleteAriaLabel");
 __decorateClass([
   attr({ mode: "boolean" })
 ], DialPad.prototype, "autofocus");
+__decorateClass([
+  observable
+], DialPad.prototype, "_errorAnnouncement");
 
 class DialPadButton {
   constructor(value, label, ariaLabel, icon, id) {
@@ -236,14 +278,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 +300,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/definition10.cjs"),n=require("../bundled/vivid-element.cjs"),h=require("../bundled/definition2.cjs"),g=require("../bundled/definition13.cjs"),_=require("../bundled/localized.cjs"),d=require("../bundled/when.cjs"),$=require("../bundled/repeat.cjs"),y=require("../bundled/ref.cjs"),A=require("../bundled/class-names.cjs"),L=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 x=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&&x(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.deleteAriaLabel=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({attribute:"delete-aria-label"})],o.prototype,"deleteAriaLabel");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})=>A.classNames("base",["no-input",!!a]);function F(a,t){if(t.key===L.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} ${y.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`
+		${$.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:w}),P=n.createRegisterFunction(z);P();