@vonage/vivid 5.16.0 → 5.17.0

package/date-picker/index.cjs

@@ -1 +1 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition6.cjs`),i=require(`../bundled/definition8.cjs`),a=require(`../bundled/definition15.cjs`),o=require(`../bundled/definition16.cjs`),s=require(`../bundled/picker-field.template.cjs`),c=require(`../bundled/calendar-picker.template.cjs`),l=require(`../bundled/single-value-picker.cjs`),u=require(`../bundled/single-date-picker.cjs`);var d=class extends u.t(l.t(c.n(c.i(s.n)))){_toPresentationValue(e){return c.a(e,this.locale.calendarPicker)}_parsePresentationValue(e){return c.o(e,this.locale.calendarPicker)}_dateValue(){return this.value}_withUpdatedDate(e){return e}constructor(){super(),this._isValidValue=c.l,this._textFieldSize=`20`,this.proxy.type=`date`}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`}};n.t([e.E],d.prototype,`_pickerButtonLabel`,null);var f=e.o(`date-picker`,d,e=>s.t(e,c.t(e),{withSeparator:!1,padded:!0}),[r.t,i.t,a.n,o.t,t.n],{styles:[s.r,c.u],shadowOptions:{delegatesFocus:!0}});e.s(f)();
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition6.cjs`),i=require(`../bundled/definition8.cjs`),a=require(`../bundled/definition12.cjs`),o=require(`../bundled/picker-field.template.cjs`),s=require(`../bundled/single-value-picker.cjs`),c=require(`../bundled/definition19.cjs`),l=require(`../bundled/calendar-picker.template.cjs`),u=require(`../bundled/single-date-picker.cjs`);var d=class extends u.t(s.t(l.n(l.i(o.n)))){_toPresentationValue(e){return l.a(e,this.locale.calendarPicker)}_parsePresentationValue(e){return l.o(e,this.locale.calendarPicker)}_dateValue(){return this.value}_withUpdatedDate(e){return e}constructor(){super(),this._isValidValue=l.l,this._textFieldSize=`20`,this.proxy.type=`date`}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`}};n.t([e.E],d.prototype,`_pickerButtonLabel`,null);var f=e.o(`date-picker`,d,e=>o.t(e,l.t(e),{withSeparator:!1,padded:!0}),[r.t,i.t,a.n,c.t,t.n],{styles:[o.r,l.u],shadowOptions:{delegatesFocus:!0}});e.s(f)();

package/date-picker/index.js

@@ -4,19 +4,19 @@ import "../bundled/definition2.js";
 import { t as i } from "../bundled/decorate.js";
 import { t as a } from "../bundled/definition6.js";
 import { t as o } from "../bundled/definition8.js";
-import { n as s } from "../bundled/definition15.js";
-import { t as c } from "../bundled/definition16.js";
-import { n as l, r as u, t as d } from "../bundled/picker-field.template.js";
-import { a as f, i as p, l as m, n as h, o as g, t as _, u as v } from "../bundled/calendar-picker.template.js";
-import { t as y } from "../bundled/single-value-picker.js";
+import { n as s } from "../bundled/definition12.js";
+import { n as c, r as l, t as u } from "../bundled/picker-field.template.js";
+import { t as d } from "../bundled/single-value-picker.js";
+import { t as f } from "../bundled/definition19.js";
+import { a as p, i as m, l as h, n as g, o as _, t as v, u as y } from "../bundled/calendar-picker.template.js";
 import { t as b } from "../bundled/single-date-picker.js";
 //#region src/lib/date-picker/date-picker.ts
-var x = class extends b(y(h(p(l)))) {
+var x = class extends b(d(g(m(c)))) {
 	_toPresentationValue(e) {
-		return f(e, this.locale.calendarPicker);
+		return p(e, this.locale.calendarPicker);
 	}
 	_parsePresentationValue(e) {
-		return g(e, this.locale.calendarPicker);
+		return _(e, this.locale.calendarPicker);
 	}
 	_dateValue() {
 		return this.value;
@@ -25,7 +25,7 @@ var x = class extends b(y(h(p(l)))) {
 		return e;
 	}
 	constructor() {
-		super(), this._isValidValue = m, this._textFieldSize = "20", this.proxy.type = "date";
+		super(), this._isValidValue = h, this._textFieldSize = "20", this.proxy.type = "date";
 	}
 	get _pickerButtonLabel() {
 		return this.value ? this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value)) : this.locale.calendarPicker.chooseDateLabel;
@@ -51,17 +51,17 @@ var x = class extends b(y(h(p(l)))) {
 };
 //#endregion
 //#region src/lib/date-picker/index.ts
-i([e], x.prototype, "_pickerButtonLabel", null), n(t("date-picker", x, (e) => d(e, _(e), {
+i([e], x.prototype, "_pickerButtonLabel", null), n(t("date-picker", x, (e) => u(e, v(e), {
 	withSeparator: !1,
 	padded: !0
 }), [
 	a,
 	o,
 	s,
-	c,
+	f,
 	r
 ], {
-	styles: [u, v],
+	styles: [l, y],
 	shadowOptions: { delegatesFocus: !0 }
 }))();
 //#endregion

package/date-range-picker/index.cjs

@@ -1 +1 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition6.cjs`),i=require(`../bundled/definition8.cjs`),a=require(`../bundled/definition15.cjs`),o=require(`../bundled/definition16.cjs`),s=require(`../bundled/picker-field.template.cjs`),c=require(`../bundled/calendar-picker.template.cjs`);var l=(e,t)=>`${e} – ${t}`,u=(e,t)=>l(c.a(e.start,t),c.a(e.end,t)),d=(e,t)=>{let n=e.trim().split(/[\s—–-]+/);if(n.length!==2)throw Error(`Invalid date range: ${e}`);let[r,i]=n.map(e=>c.o(e,t));return{start:r,end:i}},f=e=>typeof e==`string`;function p(e){return!!e}var m=class extends c.n(c.i(s.n)){constructor(...e){super(...e),this.initialStart=``,this.initialEnd=``,this.start=``,this.end=``,this.setFormValue=(e,t)=>{f(e)||super.setFormValue(e,t)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize=`30`}initialStartChanged(){this.dirtyValue||=(this.start=this.initialStart,!1)}initialEndChanged(){this.dirtyValue||=(this.end=this.initialEnd,!1)}#e=!1;startChanged(){if(this.start&&!c.l(this.start)){this.start=``;return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#n()}endChanged(){if(this.end&&!c.l(this.end)){this.end=``;return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#n()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(e){this.#e=!0,e.start!==void 0&&(this.start=e.start,this.$emit(`input:start`)),e.end!==void 0&&(this.end=e.end,this.$emit(`input:end`)),this.#e=!1,this.$emit(`input`),this.$emit(`change`),this.#n()}#n(){if(this.start&&this.end){if(c.s(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=l(this.start,this.end)}else this.value=``;this._updatePresentationValue();let e=this.start||this.end;e&&this._adjustSelectedMonthToEnsureVisibilityOf(e),this.#r()}_updatePresentationValue(){this.start&&this.end?this._presentationValue=u({start:this.start,end:this.end},this.locale.calendarPicker):this._presentationValue=``}nameChanged(e,t){super.nameChanged(e,t),this.#r()}#r(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{let e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}connectedCallback(){super.connectedCallback(),this.start||=this.initialStart,this.end||=this.initialEnd}#i(){let e=[this.start,this.end].filter(p),t=e.length===1;this._hoverDate&&t&&e.push(this._hoverDate);let[n,r]=e.sort(c.s);return{start:n,end:r}}_isDateAriaSelected(e){return this._isDateInSelectedRange(e)}_isDateInSelectedRange(e){let{start:t,end:n}=this.#i();return t&&n?c.s(e,t)>=0&&c.s(e,n)<=0:!1}_isDateRangeStart(e){return e===this.#i().start}_isDateRangeEnd(e){return e===this.#i().end}_getSelectedDates(){let e=[];return this.start&&e.push(this.start),this.end&&e.push(this.end),e}_onDateClick(e){this.start&&this.end?this.#t({start:e,end:``}):this.start?(this.#t({end:e}),this._closePopup()):this.end?(this.#t({start:e}),this._closePopup()):this.#t({start:e})}get _textFieldPlaceholder(){return l(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===``){this.#t({start:``,end:``});return}try{let{start:e,end:t}=d(this._presentationValue,this.locale.calendarPicker);this.#t({start:e,end:t})}catch{let e=this._presentationValue;this.#t({start:``,end:``}),this._presentationValue=e;return}}_onDateMouseEnter(e){this._hoverDate=e}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&c.s(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(c.a(this.min,this.locale.calendarPicker)):this.max&&this.end&&c.s(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(c.a(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue===``)return!1;try{return d(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(u({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`}};n.t([e.l({mode:`fromView`,attribute:`start`})],m.prototype,`initialStart`,void 0),n.t([e.l({mode:`fromView`,attribute:`end`})],m.prototype,`initialEnd`,void 0),n.t([e.T],m.prototype,`start`,void 0),n.t([e.T],m.prototype,`end`,void 0),n.t([e.l({attribute:`current-start`})],m.prototype,`currentStart`,void 0),n.t([e.l({attribute:`current-end`})],m.prototype,`currentEnd`,void 0),n.t([e.T],m.prototype,`_numCalendars`,void 0),n.t([e.T],m.prototype,`_hoverDate`,void 0),n.t([e.E],m.prototype,`_pickerButtonLabel`,null);var h=e.o(`date-range-picker`,m,e=>s.t(e,c.t(e),{withSeparator:!1,padded:!0}),[r.t,i.t,a.n,o.t,t.n],{styles:[s.r,c.u],shadowOptions:{delegatesFocus:!0}});e.s(h)();
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition6.cjs`),i=require(`../bundled/definition8.cjs`),a=require(`../bundled/definition12.cjs`),o=require(`../bundled/picker-field.template.cjs`),s=require(`../bundled/definition19.cjs`),c=require(`../bundled/calendar-picker.template.cjs`);var l=(e,t)=>`${e} – ${t}`,u=(e,t)=>l(c.a(e.start,t),c.a(e.end,t)),d=(e,t)=>{let n=e.trim().split(/[\s—–-]+/);if(n.length!==2)throw Error(`Invalid date range: ${e}`);let[r,i]=n.map(e=>c.o(e,t));return{start:r,end:i}},f=e=>typeof e==`string`;function p(e){return!!e}var m=class extends c.n(c.i(o.n)){constructor(...e){super(...e),this.initialStart=``,this.initialEnd=``,this.start=``,this.end=``,this.setFormValue=(e,t)=>{f(e)||super.setFormValue(e,t)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize=`30`}initialStartChanged(){this.dirtyValue||=(this.start=this.initialStart,!1)}initialEndChanged(){this.dirtyValue||=(this.end=this.initialEnd,!1)}#e=!1;startChanged(){if(this.start&&!c.l(this.start)){this.start=``;return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#n()}endChanged(){if(this.end&&!c.l(this.end)){this.end=``;return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#n()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(e){this.#e=!0,e.start!==void 0&&(this.start=e.start,this.$emit(`input:start`)),e.end!==void 0&&(this.end=e.end,this.$emit(`input:end`)),this.#e=!1,this.$emit(`input`),this.$emit(`change`),this.#n()}#n(){if(this.start&&this.end){if(c.s(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=l(this.start,this.end)}else this.value=``;this._updatePresentationValue();let e=this.start||this.end;e&&this._adjustSelectedMonthToEnsureVisibilityOf(e),this.#r()}_updatePresentationValue(){this.start&&this.end?this._presentationValue=u({start:this.start,end:this.end},this.locale.calendarPicker):this._presentationValue=``}nameChanged(e,t){super.nameChanged(e,t),this.#r()}#r(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{let e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}connectedCallback(){super.connectedCallback(),this.start||=this.initialStart,this.end||=this.initialEnd}#i(){let e=[this.start,this.end].filter(p),t=e.length===1;this._hoverDate&&t&&e.push(this._hoverDate);let[n,r]=e.sort(c.s);return{start:n,end:r}}_isDateAriaSelected(e){return this._isDateInSelectedRange(e)}_isDateInSelectedRange(e){let{start:t,end:n}=this.#i();return t&&n?c.s(e,t)>=0&&c.s(e,n)<=0:!1}_isDateRangeStart(e){return e===this.#i().start}_isDateRangeEnd(e){return e===this.#i().end}_getSelectedDates(){let e=[];return this.start&&e.push(this.start),this.end&&e.push(this.end),e}_onDateClick(e){this.start&&this.end?this.#t({start:e,end:``}):this.start?(this.#t({end:e}),this._closePopup()):this.end?(this.#t({start:e}),this._closePopup()):this.#t({start:e})}get _textFieldPlaceholder(){return l(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===``){this.#t({start:``,end:``});return}try{let{start:e,end:t}=d(this._presentationValue,this.locale.calendarPicker);this.#t({start:e,end:t})}catch{let e=this._presentationValue;this.#t({start:``,end:``}),this._presentationValue=e;return}}_onDateMouseEnter(e){this._hoverDate=e}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&c.s(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(c.a(this.min,this.locale.calendarPicker)):this.max&&this.end&&c.s(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(c.a(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue===``)return!1;try{return d(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(u({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`}};n.t([e.l({mode:`fromView`,attribute:`start`})],m.prototype,`initialStart`,void 0),n.t([e.l({mode:`fromView`,attribute:`end`})],m.prototype,`initialEnd`,void 0),n.t([e.T],m.prototype,`start`,void 0),n.t([e.T],m.prototype,`end`,void 0),n.t([e.l({attribute:`current-start`})],m.prototype,`currentStart`,void 0),n.t([e.l({attribute:`current-end`})],m.prototype,`currentEnd`,void 0),n.t([e.T],m.prototype,`_numCalendars`,void 0),n.t([e.T],m.prototype,`_hoverDate`,void 0),n.t([e.E],m.prototype,`_pickerButtonLabel`,null);var h=e.o(`date-range-picker`,m,e=>o.t(e,c.t(e),{withSeparator:!1,padded:!0}),[r.t,i.t,a.n,s.t,t.n],{styles:[o.r,c.u],shadowOptions:{delegatesFocus:!0}});e.s(h)();

package/date-range-picker/index.js

@@ -4,9 +4,9 @@ import "../bundled/definition2.js";
 import { t as o } from "../bundled/decorate.js";
 import { t as s } from "../bundled/definition6.js";
 import { t as c } from "../bundled/definition8.js";
-import { n as l } from "../bundled/definition15.js";
-import { t as u } from "../bundled/definition16.js";
-import { n as d, r as f, t as p } from "../bundled/picker-field.template.js";
+import { n as l } from "../bundled/definition12.js";
+import { n as u, r as d, t as f } from "../bundled/picker-field.template.js";
+import { t as p } from "../bundled/definition19.js";
 import { a as m, i as h, l as g, n as _, o as v, s as y, t as b, u as x } from "../bundled/calendar-picker.template.js";
 //#region src/shared/datetime/presentationDateRange.ts
 var S = (e, t) => `${e} – ${t}`, C = (e, t) => S(m(e.start, t), m(e.end, t)), w = (e, t) => {
@@ -21,7 +21,7 @@ var S = (e, t) => `${e} – ${t}`, C = (e, t) => S(m(e.start, t), m(e.end, t)),
 function E(e) {
 	return !!e;
 }
-var D = class extends _(h(d)) {
+var D = class extends _(h(u)) {
 	constructor(...e) {
 		super(...e), this.initialStart = "", this.initialEnd = "", this.start = "", this.end = "", this.setFormValue = (e, t) => {
 			T(e) || super.setFormValue(e, t);
@@ -203,17 +203,17 @@ o([n({
 })], D.prototype, "initialStart", void 0), o([n({
 	mode: "fromView",
 	attribute: "end"
-})], D.prototype, "initialEnd", void 0), o([t], D.prototype, "start", void 0), o([t], D.prototype, "end", void 0), o([n({ attribute: "current-start" })], D.prototype, "currentStart", void 0), o([n({ attribute: "current-end" })], D.prototype, "currentEnd", void 0), o([t], D.prototype, "_numCalendars", void 0), o([t], D.prototype, "_hoverDate", void 0), o([e], D.prototype, "_pickerButtonLabel", null), i(r("date-range-picker", D, (e) => p(e, b(e), {
+})], D.prototype, "initialEnd", void 0), o([t], D.prototype, "start", void 0), o([t], D.prototype, "end", void 0), o([n({ attribute: "current-start" })], D.prototype, "currentStart", void 0), o([n({ attribute: "current-end" })], D.prototype, "currentEnd", void 0), o([t], D.prototype, "_numCalendars", void 0), o([t], D.prototype, "_hoverDate", void 0), o([e], D.prototype, "_pickerButtonLabel", null), i(r("date-range-picker", D, (e) => f(e, b(e), {
 	withSeparator: !1,
 	padded: !0
 }), [
 	s,
 	c,
 	l,
-	u,
+	p,
 	a
 ], {
-	styles: [f, x],
+	styles: [d, x],
 	shadowOptions: { delegatesFocus: !0 }
 }))();
 //#endregion

package/date-time-picker/index.cjs

@@ -1,8 +1,8 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition6.cjs`),i=require(`../bundled/definition8.cjs`),a=require(`../bundled/definition15.cjs`),o=require(`../bundled/definition16.cjs`),s=require(`../bundled/picker-field.template.cjs`),c=require(`../bundled/calendar-picker.template.cjs`),l=require(`../bundled/single-value-picker.cjs`),u=require(`../bundled/single-date-picker.cjs`),d=require(`../bundled/time-selection-picker.template.cjs`);var f=`.date-time-picker{gap:28px;padding-inline-start:12px;display:flex}.time-picker{padding-block:4px 12px}`,p=e=>e.split(`T`)[0]||``,m=e=>e.split(`T`)[1]||``,h=e=>{let[t=``,n=``]=e.split(`T`);return c.l(t)&&d.l(n)},g=(e,t,n,r)=>{let[i,a]=e.split(`T`);return`${c.a(i,t)} ${d.a(a,n,r)}`},_=(e,t,n)=>{let[r,...i]=e.split(` `);return`${c.o(r,t)}T${d.o(i.join(` `),n)}`},v={fromView:e=>e&&h(e)?e:``,toView(e){return e}},y=class extends d.i(u.t(l.t(c.i(s.n)))){get _resolvedMinDate(){return this.minDate||p(this.min)}get _resolvedMaxDate(){return this.maxDate||p(this.max)}get _resolvedMinTime(){return this.minTime||this.min&&p(this.min)===this._dateValue()&&m(this.min)||``}get _resolvedMaxTime(){return this.maxTime||this.max&&p(this.max)===this._dateValue()&&m(this.max)||``}_toPresentationValue(e){return g(e,this.locale.calendarPicker,this._displaySeconds,this._use12hClock)}_parsePresentationValue(e){return _(e,this.locale.calendarPicker,this._use12hClock)}_dateValue(){return p(this.value)}_withUpdatedDate(e){return`${e}T${m(this.value)||`00:00:00`}`}get _timeValue(){return m(this.value)}_withUpdatedTime(e){return`${p(this.value)||c.c()}T${e}`}constructor(){super(),this._isValidValue=h,this._textFieldSize=`30`,this.proxy.type=`datetime-local`,this.proxy.step=`1`,this.min=``,this.minDate=``,this.minTime=``,this.max=``,this.maxDate=``,this.maxTime=``}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.dateTimePicker.invalidDateTimeError:this._dateValue()&&this._resolvedMinDate&&c.s(this._dateValue(),this._resolvedMinDate)<0?this.locale.dateTimePicker.dateBeforeMinDateError(c.a(this._resolvedMinDate,this.locale.calendarPicker)):this._dateValue()&&this._resolvedMaxDate&&c.s(this._dateValue(),this._resolvedMaxDate)>0?this.locale.dateTimePicker.dateAfterMaxDateError(c.a(this._resolvedMaxDate,this.locale.calendarPicker)):this._timeValue&&this._resolvedMinTime&&d.c(this._timeValue,this._resolvedMinTime)<0?this.locale.dateTimePicker.timeBeforeMinTimeError(d.a(this._resolvedMinTime,this._displaySeconds,this._use12hClock)):this._timeValue&&this._resolvedMaxTime&&d.c(this._timeValue,this._resolvedMaxTime)>0?this.locale.dateTimePicker.timeAfterMaxTimeError(d.a(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}};n.t([e.l({converter:v})],y.prototype,`min`,void 0),n.t([e.l({converter:d.r,attribute:`min-time`})],y.prototype,`minTime`,void 0),n.t([e.l({converter:c.r,attribute:`min-date`})],y.prototype,`minDate`,void 0),n.t([e.l({converter:v})],y.prototype,`max`,void 0),n.t([e.l({converter:d.r,attribute:`max-time`})],y.prototype,`maxTime`,void 0),n.t([e.l({converter:c.r,attribute:`max-date`})],y.prototype,`maxDate`,void 0);var b=e.o(`date-time-picker`,y,t=>s.t(t,e.d`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/definition.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/decorate.cjs`),r=require(`../bundled/definition6.cjs`),i=require(`../bundled/definition8.cjs`),a=require(`../bundled/definition12.cjs`),o=require(`../bundled/picker-field.template.cjs`),s=require(`../bundled/time-selection-picker.template.cjs`),c=require(`../bundled/single-value-picker.cjs`),l=require(`../bundled/definition19.cjs`),u=require(`../bundled/calendar-picker.template.cjs`),d=require(`../bundled/single-date-picker.cjs`);var f=`.date-time-picker{gap:28px;padding-inline-start:12px;display:flex}.time-picker{padding-block:4px 12px}`,p=e=>e.split(`T`)[0]||``,m=e=>e.split(`T`)[1]||``,h=e=>{let[t=``,n=``]=e.split(`T`);return u.l(t)&&s.l(n)},g=(e,t,n,r)=>{let[i,a]=e.split(`T`);return`${u.a(i,t)} ${s.i(a,n,r)}`},_=(e,t,n)=>{let[r,...i]=e.split(` `);return`${u.o(r,t)}T${s.a(i.join(` `),n)}`},v={fromView:e=>e&&h(e)?e:``,toView(e){return e}},y=class extends s.o(d.t(c.t(u.i(o.n)))){get _resolvedMinDate(){return this.minDate||p(this.min)}get _resolvedMaxDate(){return this.maxDate||p(this.max)}get _resolvedMinTime(){return this.minTime||this.min&&p(this.min)===this._dateValue()&&m(this.min)||``}get _resolvedMaxTime(){return this.maxTime||this.max&&p(this.max)===this._dateValue()&&m(this.max)||``}_toPresentationValue(e){return g(e,this.locale.calendarPicker,this._displaySeconds,this._use12hClock)}_parsePresentationValue(e){return _(e,this.locale.calendarPicker,this._use12hClock)}_dateValue(){return p(this.value)}_withUpdatedDate(e){return`${e}T${m(this.value)||`00:00:00`}`}get _timeValue(){return m(this.value)}_withUpdatedTime(e){return`${p(this.value)||u.c()}T${e}`}constructor(){super(),this._isValidValue=h,this._textFieldSize=`30`,this.proxy.type=`datetime-local`,this.proxy.step=`1`,this.min=``,this.minDate=``,this.minTime=``,this.max=``,this.maxDate=``,this.maxTime=``}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.dateTimePicker.invalidDateTimeError:this._dateValue()&&this._resolvedMinDate&&u.s(this._dateValue(),this._resolvedMinDate)<0?this.locale.dateTimePicker.dateBeforeMinDateError(u.a(this._resolvedMinDate,this.locale.calendarPicker)):this._dateValue()&&this._resolvedMaxDate&&u.s(this._dateValue(),this._resolvedMaxDate)>0?this.locale.dateTimePicker.dateAfterMaxDateError(u.a(this._resolvedMaxDate,this.locale.calendarPicker)):this._timeValue&&this._resolvedMinTime&&s.c(this._timeValue,this._resolvedMinTime)<0?this.locale.dateTimePicker.timeBeforeMinTimeError(s.i(this._resolvedMinTime,this._displaySeconds,this._use12hClock)):this._timeValue&&this._resolvedMaxTime&&s.c(this._timeValue,this._resolvedMaxTime)>0?this.locale.dateTimePicker.timeAfterMaxTimeError(s.i(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}};n.t([e.l({converter:v})],y.prototype,`min`,void 0),n.t([e.l({converter:s.r,attribute:`min-time`})],y.prototype,`minTime`,void 0),n.t([e.l({converter:u.r,attribute:`min-date`})],y.prototype,`minDate`,void 0),n.t([e.l({converter:v})],y.prototype,`max`,void 0),n.t([e.l({converter:s.r,attribute:`max-time`})],y.prototype,`maxTime`,void 0),n.t([e.l({converter:u.r,attribute:`max-date`})],y.prototype,`maxDate`,void 0);var b=e.o(`date-time-picker`,y,t=>o.t(t,e.d`
 			<div class="date-time-picker">
-				${()=>c.t(t)}
+				${()=>u.t(t)}
 				<div class="time-picker">
-					${()=>d.t(t,9)}
+					${()=>s.t(t,9)}
 				</div>
 			</div>
-		`,{withSeparator:!1,padded:!1}),[r.t,i.t,a.n,o.t,d.s,t.n],{styles:[s.r,c.u,f],shadowOptions:{delegatesFocus:!0}});e.s(b)();
+		`,{withSeparator:!1,padded:!1}),[r.t,i.t,a.n,l.t,s.s,t.n],{styles:[o.r,u.u,f],shadowOptions:{delegatesFocus:!0}});e.s(b)();

package/date-time-picker/index.js

@@ -4,29 +4,29 @@ import "../bundled/definition2.js";
 import { t as a } from "../bundled/decorate.js";
 import { t as o } from "../bundled/definition6.js";
 import { t as s } from "../bundled/definition8.js";
-import { n as c } from "../bundled/definition15.js";
-import { t as l } from "../bundled/definition16.js";
-import { n as u, r as d, t as f } from "../bundled/picker-field.template.js";
-import { a as p, c as m, i as h, l as g, o as _, r as v, s as y, t as b, u as x } from "../bundled/calendar-picker.template.js";
-import { t as S } from "../bundled/single-value-picker.js";
-import { t as C } from "../bundled/single-date-picker.js";
-import { a as w, c as T, i as E, l as D, o as O, r as k, s as A, t as j } from "../bundled/time-selection-picker.template.js";
+import { n as c } from "../bundled/definition12.js";
+import { n as l, r as u, t as d } from "../bundled/picker-field.template.js";
+import { a as f, c as p, i as m, l as h, o as g, r as _, s as v, t as y } from "../bundled/time-selection-picker.template.js";
+import { t as b } from "../bundled/single-value-picker.js";
+import { t as x } from "../bundled/definition19.js";
+import { a as S, c as C, i as w, l as T, o as E, r as D, s as O, t as k, u as A } from "../bundled/calendar-picker.template.js";
+import { t as j } from "../bundled/single-date-picker.js";
 //#region src/lib/date-time-picker/date-time-picker.scss?inline
 var M = ".date-time-picker{gap:28px;padding-inline-start:12px;display:flex}.time-picker{padding-block:4px 12px}", N = (e) => e.split("T")[0] || "", P = (e) => e.split("T")[1] || "", F = (e) => {
 	let [t = "", n = ""] = e.split("T");
-	return g(t) && D(n);
+	return T(t) && h(n);
 }, I = (e, t, n, r) => {
 	let [i, a] = e.split("T");
-	return `${p(i, t)} ${w(a, n, r)}`;
+	return `${S(i, t)} ${m(a, n, r)}`;
 }, L = (e, t, n) => {
 	let [r, ...i] = e.split(" ");
-	return `${_(r, t)}T${O(i.join(" "), n)}`;
+	return `${E(r, t)}T${f(i.join(" "), n)}`;
 }, R = {
 	fromView: (e) => e && F(e) ? e : "",
 	toView(e) {
 		return e;
 	}
-}, z = class extends E(C(S(h(u)))) {
+}, z = class extends g(j(b(w(l)))) {
 	get _resolvedMinDate() {
 		return this.minDate || N(this.min);
 	}
@@ -55,13 +55,13 @@ var M = ".date-time-picker{gap:28px;padding-inline-start:12px;display:flex}.time
 		return P(this.value);
 	}
 	_withUpdatedTime(e) {
-		return `${N(this.value) || m()}T${e}`;
+		return `${N(this.value) || C()}T${e}`;
 	}
 	constructor() {
 		super(), this._isValidValue = F, this._textFieldSize = "30", this.proxy.type = "datetime-local", this.proxy.step = "1", this.min = "", this.minDate = "", this.minTime = "", this.max = "", this.maxDate = "", this.maxTime = "";
 	}
 	_getCustomValidationError() {
-		return this._isPresentationValueInvalid() ? this.locale.dateTimePicker.invalidDateTimeError : this._dateValue() && this._resolvedMinDate && y(this._dateValue(), this._resolvedMinDate) < 0 ? this.locale.dateTimePicker.dateBeforeMinDateError(p(this._resolvedMinDate, this.locale.calendarPicker)) : this._dateValue() && this._resolvedMaxDate && y(this._dateValue(), this._resolvedMaxDate) > 0 ? this.locale.dateTimePicker.dateAfterMaxDateError(p(this._resolvedMaxDate, this.locale.calendarPicker)) : this._timeValue && this._resolvedMinTime && T(this._timeValue, this._resolvedMinTime) < 0 ? this.locale.dateTimePicker.timeBeforeMinTimeError(w(this._resolvedMinTime, this._displaySeconds, this._use12hClock)) : this._timeValue && this._resolvedMaxTime && T(this._timeValue, this._resolvedMaxTime) > 0 ? this.locale.dateTimePicker.timeAfterMaxTimeError(w(this._resolvedMaxTime, this._displaySeconds, this._use12hClock)) : null;
+		return this._isPresentationValueInvalid() ? this.locale.dateTimePicker.invalidDateTimeError : this._dateValue() && this._resolvedMinDate && O(this._dateValue(), this._resolvedMinDate) < 0 ? this.locale.dateTimePicker.dateBeforeMinDateError(S(this._resolvedMinDate, this.locale.calendarPicker)) : this._dateValue() && this._resolvedMaxDate && O(this._dateValue(), this._resolvedMaxDate) > 0 ? this.locale.dateTimePicker.dateAfterMaxDateError(S(this._resolvedMaxDate, this.locale.calendarPicker)) : this._timeValue && this._resolvedMinTime && p(this._timeValue, this._resolvedMinTime) < 0 ? this.locale.dateTimePicker.timeBeforeMinTimeError(m(this._resolvedMinTime, this._displaySeconds, this._use12hClock)) : this._timeValue && this._resolvedMaxTime && p(this._timeValue, this._resolvedMaxTime) > 0 ? this.locale.dateTimePicker.timeAfterMaxTimeError(m(this._resolvedMaxTime, this._displaySeconds, this._use12hClock)) : null;
 	}
 	get _textFieldPlaceholder() {
 		return `${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`;
@@ -82,22 +82,22 @@ var M = ".date-time-picker{gap:28px;padding-inline-start:12px;display:flex}.time
 //#endregion
 //#region src/lib/date-time-picker/index.ts
 a([t({ converter: R })], z.prototype, "min", void 0), a([t({
-	converter: k,
+	converter: _,
 	attribute: "min-time"
 })], z.prototype, "minTime", void 0), a([t({
-	converter: v,
+	converter: D,
 	attribute: "min-date"
 })], z.prototype, "minDate", void 0), a([t({ converter: R })], z.prototype, "max", void 0), a([t({
-	converter: k,
+	converter: _,
 	attribute: "max-time"
 })], z.prototype, "maxTime", void 0), a([t({
-	converter: v,
+	converter: D,
 	attribute: "max-date"
-})], z.prototype, "maxDate", void 0), r(n("date-time-picker", z, (t) => f(t, e`
+})], z.prototype, "maxDate", void 0), r(n("date-time-picker", z, (t) => d(t, e`
 			<div class="date-time-picker">
-				${() => b(t)}
+				${() => k(t)}
 				<div class="time-picker">
-					${() => j(t, 9)}
+					${() => y(t, 9)}
 				</div>
 			</div>
 		`, {
@@ -107,13 +107,13 @@ a([t({ converter: R })], z.prototype, "min", void 0), a([t({
 	o,
 	s,
 	c,
-	l,
-	A,
+	x,
+	v,
 	i
 ], {
 	styles: [
-		d,
-		x,
+		u,
+		A,
 		M
 	],
 	shadowOptions: { delegatesFocus: !0 }

package/dial-pad/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/definition.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/decorate.cjs`),c=require(`../bundled/class-names.cjs`);require(`../bundled/key-codes.cjs`);const l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition15.cjs`);var d=`:host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.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,.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));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.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(--focus-stroke-color,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{grid-column:1/-1;margin-top:32px}`,f=class extends e.t(t.t){constructor(...e){super(...e),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._longPressTimeoutId=null,this._suppressNextClick=!1,this._keyboardLongPressCompleted=!1,this._onDial=()=>{this._textFieldEl.checkValidity()?this._clearErrorAnnouncement():this._announceValidationError(this._textFieldEl.errorValidationMessage??``),this.callActive?this.$emit(`end-call`):this.$emit(`dial`)},this.autofocus=!1,this._errorAnnouncement=``,this._forceAnnouncementToggle=!1}valueChanged(e,t){t!=null&&this._textFieldEl&&t!==this._textFieldEl.value&&(this._textFieldEl.value=t,this._textFieldEl.reportValidity())}_startLongPress(e,t){if(this.disabled||this.callActive||e!==`0`)return;this._clearLongPressTimer();let n=t.currentTarget;this._longPressTimeoutId=window.setTimeout(()=>{this._suppressNextClick=!0,this.value+=`+`,this.$emit(`keypad-click`,n),this.$emit(`input`),this.$emit(`change`)},600)}_startKeyboardLongPress(){this.disabled||this.callActive||this._longPressTimeoutId===null&&(this._keyboardLongPressCompleted=!1,this._longPressTimeoutId=window.setTimeout(()=>{this._keyboardLongPressCompleted=!0,this.value+=`+`,this.$emit(`input`),this.$emit(`change`)},650))}_endLongPress(){this._clearLongPressTimer(),window.setTimeout(()=>{this._suppressNextClick&&=!1},0)}_endKeyboardLongPress(){let e=this._keyboardLongPressCompleted;return this._clearLongPressTimer(),window.setTimeout(()=>{this._keyboardLongPressCompleted=!1},0),e}_cancelLongPress(){this._clearLongPressTimer()}_clearLongPressTimer(){this._longPressTimeoutId!==null&&(clearTimeout(this._longPressTimeoutId),this._longPressTimeoutId=null)}focus(){let e=this.shadowRoot?.querySelectorAll(`.digits .digit-btn`);(this._textFieldEl||e?.[0])?.focus()}_announceValidationError(e){this._errorAnnouncement=``,window.queueMicrotask(()=>{e?(this._forceAnnouncementToggle=!this._forceAnnouncementToggle,this._errorAnnouncement=`${e}${this._forceAnnouncementToggle?`​`:``}`):this._clearErrorAnnouncement()})}_clearErrorAnnouncement(){this._errorAnnouncement=``,this._forceAnnouncementToggle=!1}};s.t([t.l({attribute:`helper-text`})],f.prototype,`helperText`,void 0),s.t([t.l],f.prototype,`placeholder`,void 0),s.t([t.l({mode:`fromView`})],f.prototype,`value`,void 0),s.t([t.l({mode:`fromView`})],f.prototype,`pattern`,void 0),s.t([t.l({mode:`boolean`})],f.prototype,`disabled`,void 0),s.t([t.l({mode:`boolean`})],f.prototype,`pending`,void 0),s.t([t.l({attribute:`call-active`,mode:`boolean`})],f.prototype,`callActive`,void 0),s.t([t.l({mode:`boolean`,attribute:`no-call`})],f.prototype,`noCall`,void 0),s.t([t.l({mode:`boolean`,attribute:`no-input`})],f.prototype,`noInput`,void 0),s.t([t.l({attribute:`end-call-button-label`})],f.prototype,`endCallButtonLabel`,void 0),s.t([t.l({attribute:`call-button-label`})],f.prototype,`callButtonLabel`,void 0),s.t([t.l({attribute:`delete-aria-label`})],f.prototype,`deleteAriaLabel`,void 0),s.t([t.l({mode:`boolean`})],f.prototype,`autofocus`,void 0),s.t([t.T],f.prototype,`_errorAnnouncement`,void 0);var p=class{constructor(e,t,n,r,i){this.value=e,this.label=t,this.ariaLabel=n,this.icon=r,this.id=i}},m=[new p(`1`,`&nbsp;`,`digitOneLabel`,`one-solid`,`btn1`),new p(`2`,`ABC`,`digitTwoLabel`,`two-solid`,`btn2`),new p(`3`,`DEF`,`digitThreeLabel`,`three-solid`,`btn3`),new p(`4`,`GHI`,`digitFourLabel`,`four-solid`,`btn4`),new p(`5`,`JKL`,`digitFiveLabel`,`five-solid`,`btn5`),new p(`6`,`MNO`,`digitSixLabel`,`six-solid`,`btn6`),new p(`7`,`PQRS`,`digitSevenLabel`,`seven-solid`,`btn7`),new p(`8`,`TUV`,`digitEightLabel`,`eight-solid`,`btn8`),new p(`9`,`WXYZ`,`digitNineLabel`,`nine-solid`,`btn9`),new p(`*`,null,`digitAsteriskLabel`,`asterisk-2-solid`,`btnAsterisk`),new p(`0`,`+`,`digitZeroLabel`,`zero-solid`,`btn0`),new p(`#`,null,`digitHashtagLabel`,`hashtag-solid`,`btnHashtag`)],h=({noInput:e})=>c.t(`base`,[`no-input`,!!e]);function g(e,t){if(t.key===`Enter`&&!e.pending&&!e.disabled&&!e.callActive&&!e.noCall&&e.value.length>0&&t.target instanceof HTMLInputElement)e._onDial();else if(t.key===` `||t.key===`Space`)t.target instanceof HTMLInputElement&&(t.preventDefault(),t.repeat||e._startKeyboardLongPress());else{let n=m.findIndex(e=>e.value===t.key);if(n>-1){let t=e.shadowRoot.querySelector(`.digits`).children[n];t&&(t.active=!0,setTimeout(()=>{t.active=!1},200))}}return!0}function _(e,t){return(t.key===` `||t.key===`Space`)&&t.target instanceof HTMLInputElement&&(t.preventDefault(),!e._endKeyboardLongPress()&&!e.disabled&&!e.callActive&&(e.value+=` `,e.$emit(`input`),e.$emit(`change`))),!0}function v(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),n.repeat||t._startKeyboardLongPress()),!0}function y(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),!t._endKeyboardLongPress()&&!t.disabled&&!t.callActive&&w(e,{parent:t,event:new MouseEvent(`click`,{bubbles:!0})})),!0}function b(e){e.value=e._textFieldEl.value}function x(e,{event:t}){t.stopImmediatePropagation()}function S(e){e.value=e.value.slice(0,-1),e.$emit(`input`),e.$emit(`change`),e.value===``&&e._textFieldEl?.focus()}function C(e,n){return t.d`<${e} ${r.t(`_textFieldEl`)} class="phone-field" internal-part type="tel"
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/definition.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/decorate.cjs`),c=require(`../bundled/class-names.cjs`);require(`../bundled/key-codes.cjs`);const l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition12.cjs`);var d=`:host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.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,.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));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.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(--focus-stroke-color,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{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}`,f=class extends e.t(t.t){constructor(...e){super(...e),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._longPressTimeoutId=null,this._suppressNextClick=!1,this._keyboardLongPressCompleted=!1,this._onDial=()=>{this._textFieldEl.checkValidity()?this._clearErrorAnnouncement():this._announceValidationError(this._textFieldEl.errorValidationMessage??``),this.callActive?this.$emit(`end-call`):this.$emit(`dial`)},this.autofocus=!1,this._errorAnnouncement=``,this._forceAnnouncementToggle=!1}valueChanged(e,t){t!=null&&this._textFieldEl&&t!==this._textFieldEl.value&&(this._textFieldEl.value=t,this._textFieldEl.reportValidity())}_startLongPress(e,t){if(this.disabled||this.callActive||e!==`0`)return;this._clearLongPressTimer();let n=t.currentTarget;this._longPressTimeoutId=window.setTimeout(()=>{this._suppressNextClick=!0,this.value+=`+`,this.$emit(`keypad-click`,n),this.$emit(`input`),this.$emit(`change`)},600)}_startKeyboardLongPress(){this.disabled||this.callActive||this._longPressTimeoutId===null&&(this._keyboardLongPressCompleted=!1,this._longPressTimeoutId=window.setTimeout(()=>{this._keyboardLongPressCompleted=!0,this.value+=`+`,this.$emit(`input`),this.$emit(`change`)},650))}_endLongPress(){this._clearLongPressTimer(),window.setTimeout(()=>{this._suppressNextClick&&=!1},0)}_endKeyboardLongPress(){let e=this._keyboardLongPressCompleted;return this._clearLongPressTimer(),window.setTimeout(()=>{this._keyboardLongPressCompleted=!1},0),e}_cancelLongPress(){this._clearLongPressTimer()}_clearLongPressTimer(){this._longPressTimeoutId!==null&&(clearTimeout(this._longPressTimeoutId),this._longPressTimeoutId=null)}focus(){let e=this.shadowRoot?.querySelectorAll(`.digits .digit-btn`);(this._textFieldEl||e?.[0])?.focus()}_announceValidationError(e){this._errorAnnouncement=``,window.queueMicrotask(()=>{e?(this._forceAnnouncementToggle=!this._forceAnnouncementToggle,this._errorAnnouncement=`${e}${this._forceAnnouncementToggle?`​`:``}`):this._clearErrorAnnouncement()})}_clearErrorAnnouncement(){this._errorAnnouncement=``,this._forceAnnouncementToggle=!1}};s.t([t.l({attribute:`helper-text`})],f.prototype,`helperText`,void 0),s.t([t.l],f.prototype,`placeholder`,void 0),s.t([t.l({mode:`fromView`})],f.prototype,`value`,void 0),s.t([t.l({mode:`fromView`})],f.prototype,`pattern`,void 0),s.t([t.l({mode:`boolean`})],f.prototype,`disabled`,void 0),s.t([t.l({mode:`boolean`})],f.prototype,`pending`,void 0),s.t([t.l({attribute:`call-active`,mode:`boolean`})],f.prototype,`callActive`,void 0),s.t([t.l({mode:`boolean`,attribute:`no-call`})],f.prototype,`noCall`,void 0),s.t([t.l({mode:`boolean`,attribute:`no-input`})],f.prototype,`noInput`,void 0),s.t([t.l],f.prototype,`size`,void 0),s.t([t.l({attribute:`end-call-button-label`})],f.prototype,`endCallButtonLabel`,void 0),s.t([t.l({attribute:`call-button-label`})],f.prototype,`callButtonLabel`,void 0),s.t([t.l({attribute:`delete-aria-label`})],f.prototype,`deleteAriaLabel`,void 0),s.t([t.l({mode:`boolean`})],f.prototype,`autofocus`,void 0),s.t([t.T],f.prototype,`_errorAnnouncement`,void 0);var p=class{constructor(e,t,n,r,i){this.value=e,this.label=t,this.ariaLabel=n,this.icon=r,this.id=i}},m=[new p(`1`,`&nbsp;`,`digitOneLabel`,`one-solid`,`btn1`),new p(`2`,`ABC`,`digitTwoLabel`,`two-solid`,`btn2`),new p(`3`,`DEF`,`digitThreeLabel`,`three-solid`,`btn3`),new p(`4`,`GHI`,`digitFourLabel`,`four-solid`,`btn4`),new p(`5`,`JKL`,`digitFiveLabel`,`five-solid`,`btn5`),new p(`6`,`MNO`,`digitSixLabel`,`six-solid`,`btn6`),new p(`7`,`PQRS`,`digitSevenLabel`,`seven-solid`,`btn7`),new p(`8`,`TUV`,`digitEightLabel`,`eight-solid`,`btn8`),new p(`9`,`WXYZ`,`digitNineLabel`,`nine-solid`,`btn9`),new p(`*`,null,`digitAsteriskLabel`,`asterisk-2-solid`,`btnAsterisk`),new p(`0`,`+`,`digitZeroLabel`,`zero-solid`,`btn0`),new p(`#`,null,`digitHashtagLabel`,`hashtag-solid`,`btnHashtag`)],h=({noInput:e,size:t})=>c.t(`base`,[`size-${t}`,!!t],[`no-input`,!!e]);function g(e,t){if(t.key===`Enter`&&!e.pending&&!e.disabled&&!e.callActive&&!e.noCall&&e.value.length>0&&t.target instanceof HTMLInputElement)e._onDial();else if(t.key===` `||t.key===`Space`)t.target instanceof HTMLInputElement&&(t.preventDefault(),t.repeat||e._startKeyboardLongPress());else{let n=m.findIndex(e=>e.value===t.key);if(n>-1){let t=e.shadowRoot.querySelector(`.digits`).children[n];t&&(t.active=!0,setTimeout(()=>{t.active=!1},200))}}return!0}function _(e,t){return(t.key===` `||t.key===`Space`)&&t.target instanceof HTMLInputElement&&(t.preventDefault(),!e._endKeyboardLongPress()&&!e.disabled&&!e.callActive&&(e.value+=` `,e.$emit(`input`),e.$emit(`change`))),!0}function v(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),n.repeat||t._startKeyboardLongPress()),!0}function y(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),!t._endKeyboardLongPress()&&!t.disabled&&!t.callActive&&w(e,{parent:t,event:new MouseEvent(`click`,{bubbles:!0})})),!0}function b(e){e.value=e._textFieldEl.value}function x(e,{event:t}){t.stopImmediatePropagation()}function S(e){e.value=e.value.slice(0,-1),e.$emit(`input`),e.$emit(`change`),e.value===``&&e._textFieldEl?.focus()}function C(e,n){return t.d`<${e} ${r.t(`_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}"
@@ -9,6 +9,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			@focus="${x}"
 			@blur="${x}"
 			?autofocus="${e=>e.autofocus}"
+			scale="${e=>e.size===`condensed`?`condensed`:`normal`}">
 			>
          ${i.t(e=>e.value&&e.value.length&&e.value.length>0,t.d`<${n}
                 slot="action-items"
@@ -46,7 +47,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 					</${e}>
 		`,{positioning:!0})}
 	`}function E(e){return t.d`<${e} class="call-btn"
-        size="expanded"
+        size="${e=>e.size===`condensed`?`normal`:`expanded`}"
         appearance="filled"
         icon="${e=>e.callActive?`disable-call-line`:`call-line`}"
         connotation="${e=>e.callActive?`alert`:`cta`}"

package/dial-pad/index.js

@@ -9,9 +9,9 @@ import { t as m } from "../bundled/decorate.js";
 import { t as h } from "../bundled/class-names.js";
 import "../bundled/key-codes.js";
 import { i as g, t as _ } from "../bundled/definition6.js";
-import { n as v, r as y } from "../bundled/definition15.js";
+import { n as v, r as y } from "../bundled/definition12.js";
 //#region src/lib/dial-pad/dial-pad.scss?inline
-var b = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.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,.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));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.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(--focus-stroke-color,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{grid-column:1/-1;margin-top:32px}", x = class extends e(o) {
+var b = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.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,.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));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.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(--focus-stroke-color,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{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}", x = class extends e(o) {
 	constructor(...e) {
 		super(...e), 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._longPressTimeoutId = null, this._suppressNextClick = !1, this._keyboardLongPressCompleted = !1, this._onDial = () => {
 			this._textFieldEl.checkValidity() ? this._clearErrorAnnouncement() : this._announceValidationError(this._textFieldEl.errorValidationMessage ?? ""), this.callActive ? this.$emit("end-call") : this.$emit("dial");
@@ -72,7 +72,7 @@ m([r({ attribute: "helper-text" })], x.prototype, "helperText", void 0), m([r],
 })], x.prototype, "noCall", void 0), m([r({
 	mode: "boolean",
 	attribute: "no-input"
-})], x.prototype, "noInput", void 0), m([r({ attribute: "end-call-button-label" })], x.prototype, "endCallButtonLabel", void 0), m([r({ attribute: "call-button-label" })], x.prototype, "callButtonLabel", void 0), m([r({ attribute: "delete-aria-label" })], x.prototype, "deleteAriaLabel", void 0), m([r({ mode: "boolean" })], x.prototype, "autofocus", void 0), m([t], x.prototype, "_errorAnnouncement", void 0);
+})], x.prototype, "noInput", void 0), m([r], x.prototype, "size", void 0), m([r({ attribute: "end-call-button-label" })], x.prototype, "endCallButtonLabel", void 0), m([r({ attribute: "call-button-label" })], x.prototype, "callButtonLabel", void 0), m([r({ attribute: "delete-aria-label" })], x.prototype, "deleteAriaLabel", void 0), m([r({ mode: "boolean" })], x.prototype, "autofocus", void 0), m([t], x.prototype, "_errorAnnouncement", void 0);
 //#endregion
 //#region src/lib/dial-pad/dial-pad.template.ts
 var S = class {
@@ -92,7 +92,7 @@ var S = class {
 	new S("*", null, "digitAsteriskLabel", "asterisk-2-solid", "btnAsterisk"),
 	new S("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
 	new S("#", null, "digitHashtagLabel", "hashtag-solid", "btnHashtag")
-], w = ({ noInput: e }) => h("base", ["no-input", !!e]);
+], w = ({ noInput: e, size: t }) => h("base", [`size-${t}`, !!t], ["no-input", !!e]);
 function T(e, t) {
 	if (t.key === "Enter" && !e.pending && !e.disabled && !e.callActive && !e.noCall && e.value.length > 0 && t.target instanceof HTMLInputElement) e._onDial();
 	else if (t.key === " " || t.key === "Space")
@@ -143,6 +143,7 @@ function M(e, t) {
 			@focus="${A}"
 			@blur="${A}"
 			?autofocus="${(e) => e.autofocus}"
+			scale="${(e) => e.size === "condensed" ? "condensed" : "normal"}">
 			>
          ${l((e) => e.value && e.value.length && e.value.length > 0, n`<${t}
                 slot="action-items"
@@ -199,7 +200,7 @@ function P(e, t) {
 }
 function F(e) {
 	return n`<${e} class="call-btn"
-        size="expanded"
+        size="${(e) => e.size === "condensed" ? "normal" : "expanded"}"
         appearance="filled"
         icon="${(e) => e.callActive ? "disable-call-line" : "call-line"}"
         connotation="${(e) => e.callActive ? "alert" : "cta"}"

package/dialog/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/definition2.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/delegates-aria.cjs`),c=require(`../bundled/definition6.cjs`),l=require(`../bundled/definition7.cjs`),u=require(`../bundled/dialog.cjs`);var d=`.base{white-space:initial;box-sizing:border-box;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);background-color:#0000;border:none;border-radius:8px;padding:0}@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(--focus-stroke-color,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{box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px;display:flex}.main-wrapper>*{box-sizing:border-box}.header{justify-content:space-between;align-items:flex-start;inline-size:100%;padding-inline:24px;display:grid}.base:not(.icon-placement-side) .header{grid-template-rows:auto auto auto;grid-template-columns:1fr auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));grid-area:1/1/2/2;margin-block-end:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));line-height:1}.base.icon-placement-side .header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto}.base.icon-placement-side .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-area:1/1/-1/2;margin-inline-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.header.border{position:relative}.header.border:after{background-color:var(--vvd-color-neutral-200);content:"";block-size:1px;inline-size:100%;position:absolute;bottom:-24px;left:0}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{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%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow:hidden auto}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.footer{justify-content:space-between;align-items:center;gap:24px;padding-inline:24px;display:flex}.hide-footer .footer{display:none}.footer .actions{align-self:flex-end;gap:8px;display:flex}.dismiss-button{flex-shrink:0;grid-area:1/-2/-1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4);margin:0}.subtitle{font:var(--vvd-typography-base);margin:0}slot[name=main]{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}slot[name=main]{max-width:inherit;max-height:inherit;border-radius:inherit;display:block;overflow:hidden auto}`,f=class extends e.t(s.t(t.t)){constructor(...e){super(...e),this.open=!1,this.fullWidthBody=!1,this.dismissButtonAriaLabel=null,this.noLightDismiss=!1,this.noDismissOnEsc=!1,this.noDismissButton=!1,this.nonDismissible=!1,this.modal=!1,this.scrollableBody=!1,this._openedAsModal=!1}modalChanged(e,t){this.open&&(this._openedAsModal=t,this.$fastController.isConnected&&(this.#a(),this.#o()))}set returnValue(e){this.#t&&(this.#t.returnValue=e)}get returnValue(){return this.#t?.returnValue}#e;get#t(){return this.#e||=this.shadowRoot.querySelector(`dialog`),this.#e}openChanged(e,t){e!==void 0&&(t?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#o(),this.$emit(`open`,void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#a(),this.$emit(`close`,this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#n(`dismiss-button`)}#n(e){if(this.nonDismissible)return!1;switch(e){case`escape`:return!this.noDismissOnEsc;case`dismiss-button`:return!this.noDismissButton;case`light-dismiss`:return!this.noLightDismiss}}#r=e=>{if(e.target!==this.#t||!this.#n(`light-dismiss`))return;let t=this.#t.getBoundingClientRect();t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||this._handleCloseRequest()};#i=e=>{e.target.method===`dialog`&&(this.open=!1)};_onKeyDown(e){return u.t(e)&&this._openedAsModal?(this.#n(`escape`)&&this._handleCloseRequest(),!1):!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}close(){this.open=!1}show(){if(this._openedAsModal&&!this.modal)throw new DOMException(`Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.`,`InvalidStateError`);this.open=!0}showModal(){if(this.open&&!this._openedAsModal)throw new DOMException(`Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.`,`InvalidStateError`);this._openedAsModal=!0,this.open=!0}#a(){this.#t.close()}#o(){this._openedAsModal?this.#t.showModal():this.#t.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#o(),this.#t.addEventListener(`mousedown`,this.#r),this.#t.addEventListener(`submit`,this.#i)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#a(),this.#t.removeEventListener(`mousedown`,this.#r),this.#t.removeEventListener(`submit`,this.#i)}};a.t([t.l({mode:`boolean`})],f.prototype,`open`,void 0),a.t([t.l],f.prototype,`icon`,void 0),a.t([t.l({attribute:`icon-placement`})],f.prototype,`iconPlacement`,void 0),a.t([t.l],f.prototype,`subtitle`,void 0),a.t([t.l],f.prototype,`headline`,void 0),a.t([t.l({attribute:`full-width-body`,mode:`boolean`})],f.prototype,`fullWidthBody`,void 0),a.t([t.l({attribute:`dismiss-button-aria-label`})],f.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.l({attribute:`no-light-dismiss`,mode:`boolean`})],f.prototype,`noLightDismiss`,void 0),a.t([t.l({attribute:`no-dismiss-on-esc`,mode:`boolean`})],f.prototype,`noDismissOnEsc`,void 0),a.t([t.l({attribute:`no-dismiss-button`,mode:`boolean`})],f.prototype,`noDismissButton`,void 0),a.t([t.l({attribute:`non-dismissible`,mode:`boolean`})],f.prototype,`nonDismissible`,void 0),a.t([t.l({mode:`boolean`})],f.prototype,`modal`,void 0),a.t([t.l({mode:`boolean`,attribute:`scrollable-body`})],f.prototype,`scrollableBody`,void 0),a.t([t.T],f.prototype,`_openedAsModal`,void 0),a.t([t.T],f.prototype,`bodySlottedContent`,void 0),a.t([t.T],f.prototype,`footerSlottedContent`,void 0),a.t([t.T],f.prototype,`actionItemsSlottedContent`,void 0);var p=({iconPlacement:e,bodySlottedContent:t,footerSlottedContent:n,actionItemsSlottedContent:r,_openedAsModal:i,scrollableBody:a})=>o.t(`base`,[`icon-placement-${e}`,!!e],[`hide-body`,!t?.length],[`hide-footer`,!(n?.length||r?.length)],[`modal`,i],[`scrollable-body`,!!a]);function m(e){return t.d`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/definition2.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/definition6.cjs`),l=require(`../bundled/definition7.cjs`),u=require(`../bundled/dialog.cjs`);var d=`.base{white-space:initial;box-sizing:border-box;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);background-color:#0000;border:none;border-radius:8px;padding:0}@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(--focus-stroke-color,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{box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px;display:flex}.main-wrapper>*{box-sizing:border-box}.header{justify-content:space-between;align-items:flex-start;inline-size:100%;padding-inline:24px;display:grid}.base:not(.icon-placement-side) .header{grid-template-rows:auto auto auto;grid-template-columns:1fr auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));grid-area:1/1/2/2;margin-block-end:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));line-height:1}.base.icon-placement-side .header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto}.base.icon-placement-side .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-area:1/1/-1/2;margin-inline-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.header.border{position:relative}.header.border:after{background-color:var(--vvd-color-neutral-200);content:"";block-size:1px;inline-size:100%;position:absolute;bottom:-24px;left:0}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{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%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow:hidden auto}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.footer{justify-content:space-between;align-items:center;gap:24px;padding-inline:24px;display:flex}.hide-footer .footer{display:none}.footer .actions{align-self:flex-end;gap:8px;display:flex}.dismiss-button{flex-shrink:0;grid-area:1/-2/-1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4);margin:0}.subtitle{font:var(--vvd-typography-base);margin:0}slot[name=main]{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}slot[name=main]{max-width:inherit;max-height:inherit;border-radius:inherit;display:block;overflow:hidden auto}`,f=class extends e.t(o.t(t.t)){constructor(...e){super(...e),this.open=!1,this.fullWidthBody=!1,this.dismissButtonAriaLabel=null,this.noLightDismiss=!1,this.noDismissOnEsc=!1,this.noDismissButton=!1,this.nonDismissible=!1,this.modal=!1,this.scrollableBody=!1,this._openedAsModal=!1}modalChanged(e,t){this.open&&(this._openedAsModal=t,this.$fastController.isConnected&&(this.#a(),this.#o()))}set returnValue(e){this.#t&&(this.#t.returnValue=e)}get returnValue(){return this.#t?.returnValue}#e;get#t(){return this.#e||=this.shadowRoot.querySelector(`dialog`),this.#e}openChanged(e,t){e!==void 0&&(t?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#o(),this.$emit(`open`,void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#a(),this.$emit(`close`,this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#n(`dismiss-button`)}#n(e){if(this.nonDismissible)return!1;switch(e){case`escape`:return!this.noDismissOnEsc;case`dismiss-button`:return!this.noDismissButton;case`light-dismiss`:return!this.noLightDismiss}}#r=e=>{if(e.target!==this.#t||!this.#n(`light-dismiss`))return;let t=this.#t.getBoundingClientRect();t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||this._handleCloseRequest()};#i=e=>{e.target.method===`dialog`&&(this.open=!1)};_onKeyDown(e){return u.t(e)&&this._openedAsModal?(this.#n(`escape`)&&this._handleCloseRequest(),!1):!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}close(){this.open=!1}show(){if(this._openedAsModal&&!this.modal)throw new DOMException(`Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.`,`InvalidStateError`);this.open=!0}showModal(){if(this.open&&!this._openedAsModal)throw new DOMException(`Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.`,`InvalidStateError`);this._openedAsModal=!0,this.open=!0}#a(){this.#t.close()}#o(){this._openedAsModal?this.#t.showModal():this.#t.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#o(),this.#t.addEventListener(`mousedown`,this.#r),this.#t.addEventListener(`submit`,this.#i)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#a(),this.#t.removeEventListener(`mousedown`,this.#r),this.#t.removeEventListener(`submit`,this.#i)}};a.t([t.l({mode:`boolean`})],f.prototype,`open`,void 0),a.t([t.l],f.prototype,`icon`,void 0),a.t([t.l({attribute:`icon-placement`})],f.prototype,`iconPlacement`,void 0),a.t([t.l],f.prototype,`subtitle`,void 0),a.t([t.l],f.prototype,`headline`,void 0),a.t([t.l({attribute:`full-width-body`,mode:`boolean`})],f.prototype,`fullWidthBody`,void 0),a.t([t.l({attribute:`dismiss-button-aria-label`})],f.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.l({attribute:`no-light-dismiss`,mode:`boolean`})],f.prototype,`noLightDismiss`,void 0),a.t([t.l({attribute:`no-dismiss-on-esc`,mode:`boolean`})],f.prototype,`noDismissOnEsc`,void 0),a.t([t.l({attribute:`no-dismiss-button`,mode:`boolean`})],f.prototype,`noDismissButton`,void 0),a.t([t.l({attribute:`non-dismissible`,mode:`boolean`})],f.prototype,`nonDismissible`,void 0),a.t([t.l({mode:`boolean`})],f.prototype,`modal`,void 0),a.t([t.l({mode:`boolean`,attribute:`scrollable-body`})],f.prototype,`scrollableBody`,void 0),a.t([t.T],f.prototype,`_openedAsModal`,void 0),a.t([t.T],f.prototype,`bodySlottedContent`,void 0),a.t([t.T],f.prototype,`footerSlottedContent`,void 0),a.t([t.T],f.prototype,`actionItemsSlottedContent`,void 0);var p=({iconPlacement:e,bodySlottedContent:t,footerSlottedContent:n,actionItemsSlottedContent:r,_openedAsModal:i,scrollableBody:a})=>s.t(`base`,[`icon-placement-${e}`,!!e],[`hide-body`,!t?.length],[`hide-footer`,!(n?.length||r?.length)],[`modal`,i],[`scrollable-body`,!!a]);function m(e){return t.d`
 		<${e} class="icon" name="${e=>e.icon}"></${e}>
 	`}function h(){return t.d`
 		<h2 class="headline" id="dialog-headline">${e=>e.headline}</h2>
@@ -11,19 +11,19 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 		class="dismiss-button"
 		icon="close-line"
 		@click="${e=>e._handleCloseRequest()}"
-	></${e}>`}var y=t.o(`dialog`,f,e=>{let a=e.tagFor(l.r),o=e.tagFor(i.r),u=e.tagFor(c.i);return t.d`
+	></${e}>`}var y=t.o(`dialog`,f,e=>{let a=e.tagFor(l.r),s=e.tagFor(i.r),u=e.tagFor(c.i);return t.d`
 	<${a} dp="8" not-relative>
 		<dialog class="${p}"
 				@keydown="${(e,t)=>e._onKeyDown(t.event)}"
 				@cancel="${(e,t)=>t.event.preventDefault()}"
-				${s.n({ariaModal:e=>String(e._openedAsModal)})}
+				${o.n({ariaModal:e=>String(e._openedAsModal)})}
 				aria-labelledby="${e=>e.headline?`dialog-headline`:null}"
 		>
 			<slot name="main">
 				<div class="main-wrapper">
 					<div class="header ${e=>e.subtitle?`border`:``}">
 							<slot name="graphic">
-								${n.t(e=>e.icon,m(o))}
+								${n.t(e=>e.icon,m(s))}
 							</slot>
 							${n.t(e=>e.headline&&e.subtitle,_())}
 							${n.t(e=>e.headline&&!e.subtitle,h())}

package/dialog/index.js

@@ -4,13 +4,13 @@ import { t as s } from "../bundled/when.js";
 import { t as c } from "../bundled/slotted.js";
 import { r as l, t as u } from "../bundled/definition2.js";
 import { t as d } from "../bundled/decorate.js";
-import { t as f } from "../bundled/class-names.js";
-import { n as p, t as m } from "../bundled/delegates-aria.js";
+import { n as f, t as p } from "../bundled/delegates-aria.js";
+import { t as m } from "../bundled/class-names.js";
 import { i as h, t as g } from "../bundled/definition6.js";
 import { r as _, t as v } from "../bundled/definition7.js";
 import { t as y } from "../bundled/dialog.js";
 //#region src/lib/dialog/dialog.scss?inline
-var b = ".base{white-space:initial;box-sizing:border-box;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);background-color:#0000;border:none;border-radius:8px;padding:0}@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(--focus-stroke-color,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{box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px;display:flex}.main-wrapper>*{box-sizing:border-box}.header{justify-content:space-between;align-items:flex-start;inline-size:100%;padding-inline:24px;display:grid}.base:not(.icon-placement-side) .header{grid-template-rows:auto auto auto;grid-template-columns:1fr auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));grid-area:1/1/2/2;margin-block-end:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));line-height:1}.base.icon-placement-side .header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto}.base.icon-placement-side .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-area:1/1/-1/2;margin-inline-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.header.border{position:relative}.header.border:after{background-color:var(--vvd-color-neutral-200);content:\"\";block-size:1px;inline-size:100%;position:absolute;bottom:-24px;left:0}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{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%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow:hidden auto}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.footer{justify-content:space-between;align-items:center;gap:24px;padding-inline:24px;display:flex}.hide-footer .footer{display:none}.footer .actions{align-self:flex-end;gap:8px;display:flex}.dismiss-button{flex-shrink:0;grid-area:1/-2/-1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4);margin:0}.subtitle{font:var(--vvd-typography-base);margin:0}slot[name=main]{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}slot[name=main]{max-width:inherit;max-height:inherit;border-radius:inherit;display:block;overflow:hidden auto}", x = class extends e(m(o)) {
+var b = ".base{white-space:initial;box-sizing:border-box;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);background-color:#0000;border:none;border-radius:8px;padding:0}@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(--focus-stroke-color,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{box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px;display:flex}.main-wrapper>*{box-sizing:border-box}.header{justify-content:space-between;align-items:flex-start;inline-size:100%;padding-inline:24px;display:grid}.base:not(.icon-placement-side) .header{grid-template-rows:auto auto auto;grid-template-columns:1fr auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));grid-area:1/1/2/2;margin-block-end:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));line-height:1}.base.icon-placement-side .header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto}.base.icon-placement-side .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-area:1/1/-1/2;margin-inline-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.header.border{position:relative}.header.border:after{background-color:var(--vvd-color-neutral-200);content:\"\";block-size:1px;inline-size:100%;position:absolute;bottom:-24px;left:0}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{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%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow:hidden auto}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.footer{justify-content:space-between;align-items:center;gap:24px;padding-inline:24px;display:flex}.hide-footer .footer{display:none}.footer .actions{align-self:flex-end;gap:8px;display:flex}.dismiss-button{flex-shrink:0;grid-area:1/-2/-1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4);margin:0}.subtitle{font:var(--vvd-typography-base);margin:0}slot[name=main]{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}slot[name=main]{max-width:inherit;max-height:inherit;border-radius:inherit;display:block;overflow:hidden auto}", x = class extends e(p(o)) {
 	constructor(...e) {
 		super(...e), this.open = !1, this.fullWidthBody = !1, this.dismissButtonAriaLabel = null, this.noLightDismiss = !1, this.noDismissOnEsc = !1, this.noDismissButton = !1, this.nonDismissible = !1, this.modal = !1, this.scrollableBody = !1, this._openedAsModal = !1;
 	}
@@ -104,7 +104,7 @@ d([r({ mode: "boolean" })], x.prototype, "open", void 0), d([r], x.prototype, "i
 })], x.prototype, "scrollableBody", void 0), d([t], x.prototype, "_openedAsModal", void 0), d([t], x.prototype, "bodySlottedContent", void 0), d([t], x.prototype, "footerSlottedContent", void 0), d([t], x.prototype, "actionItemsSlottedContent", void 0);
 //#endregion
 //#region src/lib/dialog/dialog.template.ts
-var S = ({ iconPlacement: e, bodySlottedContent: t, footerSlottedContent: n, actionItemsSlottedContent: r, _openedAsModal: i, scrollableBody: a }) => f("base", [`icon-placement-${e}`, !!e], ["hide-body", !t?.length], ["hide-footer", !(n?.length || r?.length)], ["modal", i], ["scrollable-body", !!a]);
+var S = ({ iconPlacement: e, bodySlottedContent: t, footerSlottedContent: n, actionItemsSlottedContent: r, _openedAsModal: i, scrollableBody: a }) => m("base", [`icon-placement-${e}`, !!e], ["hide-body", !t?.length], ["hide-footer", !(n?.length || r?.length)], ["modal", i], ["scrollable-body", !!a]);
 function C(e) {
 	return n`
 		<${e} class="icon" name="${(e) => e.icon}"></${e}>
@@ -142,7 +142,7 @@ a(i("dialog", x, (e) => {
 		<dialog class="${S}"
 				@keydown="${(e, t) => e._onKeyDown(t.event)}"
 				@cancel="${(e, t) => t.event.preventDefault()}"
-				${p({ ariaModal: (e) => String(e._openedAsModal) })}
+				${f({ ariaModal: (e) => String(e._openedAsModal) })}
 				aria-labelledby="${(e) => e.headline ? "dialog-headline" : null}"
 		>
 			<slot name="main">

package/divider/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/definition16.cjs`).n();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition19.cjs`).n();

package/divider/index.js

@@ -1,5 +1,5 @@
 import "../bundled/vivid-element.js";
-import { n as e } from "../bundled/definition16.js";
+import { n as e } from "../bundled/definition19.js";
 //#region src/lib/divider/index.ts
 e();
 //#endregion

package/fab/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/definition2.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/affix.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/button.cjs`);var c=`.control.connotation-accent{--_connotation-color-primary:var(--vvd-fab-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-fab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-fab-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-fab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-fab-accent-firm,var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-fab-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-fab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-fab-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-fab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-fab-cta-firm,var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-fab-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-fab-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-fab-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-fab-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-fab-announcement-firm,var(--vvd-color-announcement-600))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control{--_fab-inline-padding:12px;box-sizing:border-box;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill,var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text,var(--vvd-color-canvas-text));align-items:center;column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);vertical-align:middle;border:0;transition:background-color .15s linear,filter .15s linear;display:inline-flex}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color:transparent}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select:none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius:40px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16));--_fab-inline-padding:20px}.control.size-condensed{--_fab-border-radius:20px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius:24px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding:0;border-radius:50%;place-content:center}@supports (aspect-ratio:1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap:10px}.control.disabled{--_elevation-fill:var(--_vvd-tinted-color-surface-nonedp,var(--vvd-color-surface-nonedp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-nonedp,var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover:hover){.control:not(.disabled):hover{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:inline-block}.control.size-extended slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16)) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2)}`,l=class extends a.n(s.t){clickHandler(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}}};r.t([e.l],l.prototype,`connotation`,void 0),r.t([e.l],l.prototype,`size`,void 0),r.t([e.l],l.prototype,`label`,void 0);var u=({connotation:e,size:t,icon:n,label:r,iconTrailing:a,disabled:o,iconSlottedContent:s})=>i.t(`control`,[`connotation-${e}`,!!e],[`size-${t}`,!!t],[`icon-only`,!r&&!!(n||s?.length)],[`icon-trailing`,a],[`disabled`,o]),d=e.o(`fab`,l,n=>{let r=a.a(n);return e.d`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/definition2.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/affix.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/button.cjs`);var c=`.control.connotation-accent{--_connotation-color-primary:var(--vvd-fab-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-fab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-fab-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-fab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-fab-accent-firm,var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-fab-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-fab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-fab-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-fab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-fab-cta-firm,var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-fab-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-fab-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-fab-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-fab-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-fab-announcement-firm,var(--vvd-color-announcement-600))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control{--_fab-inline-padding:12px;box-sizing:border-box;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill,var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text,var(--vvd-color-canvas-text));align-items:center;column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);vertical-align:middle;border:0;transition:background-color .15s linear,filter .15s linear;display:inline-flex}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color:transparent}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select:none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius:40px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16));--_fab-inline-padding:20px}.control.size-condensed{--_fab-border-radius:20px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius:24px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding:0;border-radius:50%;place-content:center}@supports (aspect-ratio:1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap:10px}.control.disabled{--_elevation-fill:var(--_vvd-tinted-color-surface-nonedp,var(--vvd-color-surface-nonedp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-nonedp,var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover:hover){.control:not(.disabled):hover{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:inline-block}.control.size-extended slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16)) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2)}`,l=class extends i.n(s.t){clickHandler(e){if(this.disabled){e.preventDefault(),e.stopImmediatePropagation();return}}};r.t([e.l],l.prototype,`connotation`,void 0),r.t([e.l],l.prototype,`size`,void 0),r.t([e.l],l.prototype,`label`,void 0);var u=({connotation:e,size:t,icon:n,label:r,iconTrailing:i,disabled:a,iconSlottedContent:s})=>o.t(`control`,[`connotation-${e}`,!!e],[`size-${t}`,!!t],[`icon-only`,!r&&!!(n||s?.length)],[`icon-trailing`,i],[`disabled`,a]),d=e.o(`fab`,l,n=>{let r=i.a(n);return e.d`
 		<button
 			class="${u} "
 			?autofocus="${e=>e.autofocus}"
@@ -11,10 +11,10 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),
 			name="${e=>e.name}"
 			type="${e=>e.type}"
 			value="${e=>e.value}"
-			${o.n({ariaDisabled:e=>e.disabled})}
+			${a.n({ariaDisabled:e=>e.disabled})}
 			${t.t(`control`)}
 			@click="${(e,t)=>e.clickHandler(t.event)}"
 		>
-			${e=>r(e.icon,a.i.Slot)} ${e=>e.label}
+			${e=>r(e.icon,i.i.Slot)} ${e=>e.label}
 		</button>
 	`},[n.t],{styles:c,shadowOptions:{delegatesFocus:!0}});e.s(d)();