@vonage/vivid 5.2.0 → 5.4.0

package/date-picker/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const divider_definition = require('../divider/definition.cjs');

package/date-picker/definition.js

@@ -1,4 +1,4 @@
-import { p as popupDefinition } from '../unbundled/definition4.js';
+import { p as popupDefinition } from '../unbundled/definition5.js';
 import { b as buttonDefinition } from '../unbundled/definition.js';
 import { textFieldDefinition } from '../text-field/definition.js';
 import { dividerDefinition } from '../divider/definition.js';

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/definition.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const button_definition = require('../unbundled/definition.cjs');
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const divider_definition = require('../divider/definition.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');

package/date-range-picker/definition.js

@@ -1,5 +1,5 @@
 import { b as buttonDefinition } from '../unbundled/definition.js';
-import { p as popupDefinition } from '../unbundled/definition4.js';
+import { p as popupDefinition } from '../unbundled/definition5.js';
 import { textFieldDefinition } from '../text-field/definition.js';
 import { dividerDefinition } from '../divider/definition.js';
 import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';

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/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const divider_definition = require('../divider/definition.cjs');

package/date-time-picker/definition.js

@@ -1,4 +1,4 @@
-import { p as popupDefinition } from '../unbundled/definition4.js';
+import { p as popupDefinition } from '../unbundled/definition5.js';
 import { b as buttonDefinition } from '../unbundled/definition.js';
 import { textFieldDefinition } from '../text-field/definition.js';
 import { dividerDefinition } from '../divider/definition.js';

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

@@ -36,6 +36,7 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
     this.noInput = false;
     this.endCallButtonLabel = null;
     this.callButtonLabel = null;
+    this.deleteAriaLabel = null;
     /**
      *
      * @internal
@@ -129,6 +130,9 @@ __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");

package/dial-pad/definition.js

@@ -32,6 +32,7 @@ class DialPad extends Localized(VividElement) {
     this.noInput = false;
     this.endCallButtonLabel = null;
     this.callButtonLabel = null;
+    this.deleteAriaLabel = null;
     /**
      *
      * @internal
@@ -125,6 +126,9 @@ __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");

package/dial-pad/index.cjs

@@ -1,4 +1,4 @@
-"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"
+"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}"
@@ -19,7 +19,7 @@
 								@click="${e=>k(e)}">
             </${t}>`)}
         </${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`
+		${$.repeat(e=>m,n.html`
 			<${a}
 					  id="${e=>e.id}"
 					  value="${e=>e.value}"
@@ -54,4 +54,4 @@
 		<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();
+	</div>`},z=n.defineVividComponent("dial-pad",o,I,[b.buttonDefinition,f.textFieldDefinition,h.iconDefinition,g.visuallyHiddenDefinition],{styles:w}),P=n.createRegisterFunction(z);P();

package/dial-pad/index.js

@@ -1,13 +1,13 @@
 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 { T as g, t as _ } from "../bundled/definition10.js";
+import { V as $, a as i, o as y, h as d, c as L, d as A } from "../bundled/vivid-element.js";
+import { I as x, i as w } from "../bundled/definition2.js";
+import { V as F, v as E } from "../bundled/definition13.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 T } from "../bundled/repeat.js";
-import { r as B } from "../bundled/ref.js";
+import { r as D } from "../bundled/repeat.js";
+import { r as T } from "../bundled/ref.js";
+import { c as B } from "../bundled/class-names.js";
 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) => {
@@ -17,7 +17,7 @@ var V = Object.defineProperty, n = (a, t, e, o) => {
 };
 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 = () => {
+    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");
@@ -51,75 +51,78 @@ class l extends k($) {
   }
 }
 n([
-  r({ attribute: "helper-text" })
+  i({ attribute: "helper-text" })
 ], l.prototype, "helperText");
 n([
-  r
+  i
 ], l.prototype, "placeholder");
 n([
-  r({ mode: "fromView" })
+  i({ mode: "fromView" })
 ], l.prototype, "value");
 n([
-  r({ mode: "fromView" })
+  i({ mode: "fromView" })
 ], l.prototype, "pattern");
 n([
-  r({ mode: "boolean" })
+  i({ mode: "boolean" })
 ], l.prototype, "disabled");
 n([
-  r({ mode: "boolean" })
+  i({ mode: "boolean" })
 ], l.prototype, "pending");
 n([
-  r({ attribute: "call-active", mode: "boolean" })
+  i({ attribute: "call-active", mode: "boolean" })
 ], l.prototype, "callActive");
 n([
-  r({ mode: "boolean", attribute: "no-call" })
+  i({ mode: "boolean", attribute: "no-call" })
 ], l.prototype, "noCall");
 n([
-  r({ mode: "boolean", attribute: "no-input" })
+  i({ mode: "boolean", attribute: "no-input" })
 ], l.prototype, "noInput");
 n([
-  r({ attribute: "end-call-button-label" })
+  i({ attribute: "end-call-button-label" })
 ], l.prototype, "endCallButtonLabel");
 n([
-  r({ attribute: "call-button-label" })
+  i({ attribute: "call-button-label" })
 ], l.prototype, "callButtonLabel");
 n([
-  r({ mode: "boolean" })
+  i({ attribute: "delete-aria-label" })
+], l.prototype, "deleteAriaLabel");
+n([
+  i({ mode: "boolean" })
 ], l.prototype, "autofocus");
 n([
   y
 ], l.prototype, "_errorAnnouncement");
-class i {
+class r {
   constructor(t, e, o, c, s) {
     this.value = t, this.label = e, this.ariaLabel = o, this.icon = c, this.id = s;
   }
 }
 const f = [
-  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(
+  new r("1", " ", "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 i("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
-  new i(
+  new r("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
+  new r(
     "#",
     null,
     "digitHashtagLabel",
     "hashtag-solid",
     "btnHashtag"
   )
-], P = ({ noInput: a }) => D("base", ["no-input", !!a]);
+], P = ({ noInput: a }) => B("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();
@@ -144,7 +147,7 @@ function H(a) {
   a.value = a.value.slice(0, -1), a.$emit("input"), a.$emit("change"), a.value === "" && a._textFieldEl?.focus();
 }
 function S(a, t) {
-  return d`<${a} ${B(
+  return d`<${a} ${T(
     "_textFieldEl"
   )} class="phone-field" internal-part type="tel"
         value="${(e) => e.value}" placeholder="${(e) => e.placeholder}"
@@ -176,7 +179,7 @@ function M(a, { parent: t, event: e }) {
 }
 function N(a, t) {
   return d`
-		${T(
+		${D(
     (e) => f,
     d`
 			<${a}
@@ -221,14 +224,14 @@ function R(a) {
 	</${a}>`;
 }
 const q = (a) => {
-  const t = a.tagFor(h), e = a.tagFor(A), o = a.tagFor(g), c = a.tagFor(F);
+  const t = a.tagFor(h), e = a.tagFor(x), 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>`;
-}, K = L(
+}, K = A(
   "dial-pad",
   l,
   q,
@@ -241,5 +244,5 @@ const q = (a) => {
   {
     styles: I
   }
-), U = x(K);
+), U = L(K);
 U();

package/dialog/definition.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const icon_definition = require('../icon/definition.cjs');
 const button_definition = require('../unbundled/definition.cjs');
-const elevation_definition = require('../unbundled/definition5.cjs');
+const elevation_definition = require('../unbundled/definition6.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const index = require('../unbundled/index.cjs');
@@ -12,7 +12,7 @@ const delegatesAria = require('../unbundled/delegates-aria.cjs');
 const localized = require('../unbundled/localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
-const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
+const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -269,7 +269,9 @@ function icon(iconTag) {
 	`;
 }
 function headline() {
-  return fastElement.html` <h2 class="headline">${(x) => x.headline}</h2> `;
+  return fastElement.html`
+		<h2 class="headline" id="dialog-headline">${(x) => x.headline}</h2>
+	`;
 }
 function subtitle() {
   return fastElement.html` <h3 class="subtitle">${(x) => x.subtitle}</h3> `;
@@ -301,6 +303,7 @@ const DialogTemplate = (context) => {
 				${delegatesAria.delegateAria({
     ariaModal: (x) => String(x._openedAsModal)
   })}
+				aria-labelledby="${(x) => x.headline ? "dialog-headline" : null}"
 		>
 			<slot name="main">
 				<div class="main-wrapper">

package/dialog/definition.js

@@ -1,6 +1,6 @@
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, observable, when, slotted, html } from '@microsoft/fast-element';
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
@@ -8,7 +8,7 @@ import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-ar
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
-const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
+const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -265,7 +265,9 @@ function icon(iconTag) {
 	`;
 }
 function headline() {
-  return html` <h2 class="headline">${(x) => x.headline}</h2> `;
+  return html`
+		<h2 class="headline" id="dialog-headline">${(x) => x.headline}</h2>
+	`;
 }
 function subtitle() {
   return html` <h3 class="subtitle">${(x) => x.subtitle}</h3> `;
@@ -297,6 +299,7 @@ const DialogTemplate = (context) => {
 				${delegateAria({
     ariaModal: (x) => String(x._openedAsModal)
   })}
+				aria-labelledby="${(x) => x.headline ? "dialog-headline" : null}"
 		>
 			<slot name="main">
 				<div class="main-wrapper">