@vonage/vivid 5.4.0 → 5.6.0

package/dial-pad/index.cjs

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

package/dial-pad/index.js

@@ -1,23 +1,23 @@
 import { B as h, b as m } from "../bundled/definition3.js";
-import { T as g, t as _ } from "../bundled/definition10.js";
-import { V as $, a as i, o as y, h as d, c as L, d as A } from "../bundled/vivid-element.js";
-import { I as x, i as w } from "../bundled/definition2.js";
-import { V as F, v as E } from "../bundled/definition13.js";
-import { L as k } from "../bundled/localized.js";
+import { T as _, t as $ } from "../bundled/definition10.js";
+import { V as L, a as i, o as y, h as d, c as k, d as w } from "../bundled/vivid-element.js";
+import { I as P, i as T } from "../bundled/definition2.js";
+import { V as A, v as x } from "../bundled/definition14.js";
+import { L as C } from "../bundled/localized.js";
 import { w as p } from "../bundled/when.js";
-import { r as D } from "../bundled/repeat.js";
-import { r as T } from "../bundled/ref.js";
-import { c as B } from "../bundled/class-names.js";
-import { f as C } from "../bundled/key-codes.js";
-const I = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
-var V = Object.defineProperty, n = (a, t, e, o) => {
-  for (var c = void 0, s = a.length - 1, u; s >= 0; s--)
-    (u = a[s]) && (c = u(t, e, c) || c);
-  return c && V(t, e, c), c;
+import { r as E } from "../bundled/repeat.js";
+import { r as D } from "../bundled/ref.js";
+import { c as F } from "../bundled/class-names.js";
+import { f as I } from "../bundled/key-codes.js";
+const B = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
+var V = Object.defineProperty, l = (n, t, e, a) => {
+  for (var s = void 0, c = n.length - 1, u; c >= 0; c--)
+    (u = n[c]) && (s = u(t, e, s) || s);
+  return s && V(t, e, s), s;
 };
-class l extends k($) {
+class o extends C(L) {
   constructor() {
-    super(...arguments), this.helperText = null, this.placeholder = null, this.value = "", this.pattern = "^[0-9#*]*$", this.disabled = !1, this.pending = !1, this.callActive = !1, this.noCall = !1, this.noInput = !1, this.endCallButtonLabel = null, this.callButtonLabel = null, this.deleteAriaLabel = null, this._onDial = () => {
+    super(...arguments), this.helperText = null, this.placeholder = null, this.value = "", this.pattern = "^[0-9#*]*$", this.disabled = !1, this.pending = !1, this.callActive = !1, this.noCall = !1, this.noInput = !1, this.endCallButtonLabel = null, this.callButtonLabel = null, this.deleteAriaLabel = null, this._longPressTimeoutId = null, this._suppressNextClick = !1, this._keyboardLongPressCompleted = !1, this._onDial = () => {
       !this._textFieldEl.checkValidity() ? this._announceValidationError(
         this._textFieldEl.errorValidationMessage ?? ""
       ) : this._clearErrorAnnouncement(), this.callActive ? this.$emit("end-call") : this.$emit("dial");
@@ -26,6 +26,52 @@ class l extends k($) {
   valueChanged(t, e) {
     e != null && this._textFieldEl && e !== this._textFieldEl.value && (this._textFieldEl.value = e, this._textFieldEl.reportValidity());
   }
+  /**
+   * @internal
+   */
+  _startLongPress(t, e) {
+    if (this.disabled || this.callActive || t !== "0") return;
+    this._clearLongPressTimer();
+    const a = e.currentTarget;
+    this._longPressTimeoutId = window.setTimeout(() => {
+      this._suppressNextClick = !0, this.value += "+", this.$emit("keypad-click", a), this.$emit("input"), this.$emit("change");
+    }, 600);
+  }
+  /**
+   * @internal
+   */
+  _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));
+  }
+  /**
+   * @internal
+   */
+  _endLongPress() {
+    this._clearLongPressTimer(), window.setTimeout(() => {
+      this._suppressNextClick && (this._suppressNextClick = !1);
+    }, 0);
+  }
+  /**
+   * @internal
+   * @returns true if long press completed (timer fired), false otherwise
+   */
+  _endKeyboardLongPress() {
+    const t = this._keyboardLongPressCompleted;
+    return this._clearLongPressTimer(), window.setTimeout(() => {
+      this._keyboardLongPressCompleted = !1;
+    }, 0), t;
+  }
+  /**
+   * @internal
+   */
+  _cancelLongPress() {
+    this._clearLongPressTimer();
+  }
+  _clearLongPressTimer() {
+    this._longPressTimeoutId !== null && (clearTimeout(this._longPressTimeoutId), this._longPressTimeoutId = null);
+  }
   /**
    * Moves focus into the diapl-pad.
    *
@@ -50,54 +96,54 @@ class l extends k($) {
     this._errorAnnouncement = "", this._forceAnnouncementToggle = !1;
   }
 }
-n([
+l([
   i({ attribute: "helper-text" })
-], l.prototype, "helperText");
-n([
+], o.prototype, "helperText");
+l([
   i
-], l.prototype, "placeholder");
-n([
+], o.prototype, "placeholder");
+l([
   i({ mode: "fromView" })
-], l.prototype, "value");
-n([
+], o.prototype, "value");
+l([
   i({ mode: "fromView" })
-], l.prototype, "pattern");
-n([
+], o.prototype, "pattern");
+l([
   i({ mode: "boolean" })
-], l.prototype, "disabled");
-n([
+], o.prototype, "disabled");
+l([
   i({ mode: "boolean" })
-], l.prototype, "pending");
-n([
+], o.prototype, "pending");
+l([
   i({ attribute: "call-active", mode: "boolean" })
-], l.prototype, "callActive");
-n([
+], o.prototype, "callActive");
+l([
   i({ mode: "boolean", attribute: "no-call" })
-], l.prototype, "noCall");
-n([
+], o.prototype, "noCall");
+l([
   i({ mode: "boolean", attribute: "no-input" })
-], l.prototype, "noInput");
-n([
+], o.prototype, "noInput");
+l([
   i({ attribute: "end-call-button-label" })
-], l.prototype, "endCallButtonLabel");
-n([
+], o.prototype, "endCallButtonLabel");
+l([
   i({ attribute: "call-button-label" })
-], l.prototype, "callButtonLabel");
-n([
+], o.prototype, "callButtonLabel");
+l([
   i({ attribute: "delete-aria-label" })
-], l.prototype, "deleteAriaLabel");
-n([
+], o.prototype, "deleteAriaLabel");
+l([
   i({ mode: "boolean" })
-], l.prototype, "autofocus");
-n([
+], o.prototype, "autofocus");
+l([
   y
-], l.prototype, "_errorAnnouncement");
+], o.prototype, "_errorAnnouncement");
 class r {
-  constructor(t, e, o, c, s) {
-    this.value = t, this.label = e, this.ariaLabel = o, this.icon = c, this.id = s;
+  constructor(t, e, a, s, c) {
+    this.value = t, this.label = e, this.ariaLabel = a, this.icon = s, this.id = c;
   }
 }
-const f = [
+const b = [
   new r("1", " ", "digitOneLabel", "one-solid", "btn1"),
   new r("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
   new r("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
@@ -122,42 +168,81 @@ const f = [
     "hashtag-solid",
     "btnHashtag"
   )
-], P = ({ noInput: a }) => B("base", ["no-input", !!a]);
-function z(a, t) {
-  if (t.key === C && !a.pending && !a.disabled && !a.callActive && !a.noCall && a.value.length > 0 && t.target instanceof HTMLInputElement)
-    a._onDial();
-  else {
-    const e = f.findIndex((o) => o.value === t.key);
+], K = ({ noInput: n }) => F("base", ["no-input", !!n]);
+function N(n, t) {
+  if (t.key === I && !n.pending && !n.disabled && !n.callActive && !n.noCall && n.value.length > 0 && t.target instanceof HTMLInputElement)
+    n._onDial();
+  else if (t.key === " " || t.key === "Space") {
+    /* v8 ignore else -- @preserve */
+    if (t.target instanceof HTMLInputElement) {
+      t.preventDefault();
+      /* v8 ignore else -- @preserve */
+      t.repeat || n._startKeyboardLongPress();
+    }
+  } else {
+    const e = b.findIndex((a) => a.value === t.key);
     if (e > -1) {
-      const o = a.shadowRoot.querySelector(".digits").children[e];
-      o && (o.active = !0, setTimeout(() => {
-        o.active = !1;
+      const a = n.shadowRoot.querySelector(".digits").children[e];
+      /* v8 ignore else -- @preserve */
+      a && (a.active = !0, setTimeout(() => {
+        a.active = !1;
       }, 200));
     }
   }
   return !0;
 }
-function v(a) {
-  a.value = a._textFieldEl.value;
+function S(n, t) {
+  /* v8 ignore else -- @preserve */
+  if (t.key === " " || t.key === "Space") {
+    /* v8 ignore else -- @preserve */
+    t.target instanceof HTMLInputElement && (t.preventDefault(), !n._endKeyboardLongPress() && !n.disabled && !n.callActive && (n.value += " ", n.$emit("input"), n.$emit("change")));
+  }
+  return !0;
+}
+function z(n, { parent: t, event: e }) {
+  /* v8 ignore else -- @preserve */
+  if ((e.key === " " || e.key === "Space") && n.value === "0") {
+    e.preventDefault();
+    /* v8 ignore else -- @preserve */
+    e.repeat || t._startKeyboardLongPress();
+  }
+  return !0;
+}
+function H(n, { parent: t, event: e }) {
+  /* v8 ignore else -- @preserve */
+  if ((e.key === " " || e.key === "Space") && n.value === "0") {
+    e.preventDefault();
+    const a = t._endKeyboardLongPress();
+    /* v8 ignore else -- @preserve */
+    !a && !t.disabled && !t.callActive && g(n, {
+      parent: t,
+      event: new MouseEvent("click", { bubbles: !0 })
+    });
+  }
+  return !0;
 }
-function b(a, { event: t }) {
+function v(n) {
+  n.value = n._textFieldEl.value;
+}
+function f(n, { event: t }) {
   t.stopImmediatePropagation();
 }
-function H(a) {
-  a.value = a.value.slice(0, -1), a.$emit("input"), a.$emit("change"), a.value === "" && a._textFieldEl?.focus();
+function M(n) {
+  n.value = n.value.slice(0, -1), n.$emit("input"), n.$emit("change"), n.value === "" && n._textFieldEl?.focus();
 }
-function S(a, t) {
-  return d`<${a} ${T(
+function O(n, t) {
+  return d`<${n} ${D(
     "_textFieldEl"
   )} class="phone-field" internal-part type="tel"
         value="${(e) => e.value}" placeholder="${(e) => e.placeholder}"
             ?disabled="${(e) => e.disabled}" helper-text="${(e) => e.helperText}" pattern="${(e) => e.pattern}"
             aria-label="${(e) => e.locale.dialPad.inputLabel}"
-            @keydown="${(e, o) => z(e, o.event)}"
+            @keydown="${(e, a) => N(e, a.event)}"
+            @keyup="${(e, a) => S(e, a.event)}"
             @input="${v}"
 			@change="${v}"
-			@focus="${b}"
-			@blur="${b}"
+			@focus="${f}"
+			@blur="${f}"
 			?autofocus="${(e) => e.autofocus}"
 			>
          ${p(
@@ -169,20 +254,24 @@ function S(a, t) {
 								aria-label="${(e) => e.deleteAriaLabel || e.locale.dialPad.deleteButtonLabel}"
 								appearance='ghost'
 								?disabled="${(e) => e.disabled || e.callActive}"
-								@click="${(e) => H(e)}">
+								@click="${(e) => M(e)}">
             </${t}>`
   )}
-        </${a}>`;
+        </${n}>`;
 }
-function M(a, { parent: t, event: e }) {
-  t.value += a.value, t.$emit("keypad-click", e.currentTarget), t.$emit("input"), t.$emit("change");
+function g(n, { parent: t, event: e }) {
+  if (t._suppressNextClick) {
+    t._suppressNextClick = !1;
+    return;
+  }
+  t.value += n.value, t.$emit("keypad-click", e.currentTarget), t.$emit("input"), t.$emit("change");
 }
-function N(a, t) {
+function R(n, t) {
   return d`
-		${D(
-    (e) => f,
+		${E(
+    (e) => b,
     d`
-			<${a}
+			<${n}
 					  id="${(e) => e.id}"
 					  value="${(e) => e.value}"
 					  stacked
@@ -191,14 +280,26 @@ function N(a, t) {
 					  label="${(e) => e.label === "&nbsp;" ? " " : e.label}"
 					  size='condensed'
 					  class="digit-btn"
-						?autofocus="${(e, o) => o.parent.autofocus && o.parent.noInput && o.index === 0}"
-					  aria-label="${(e, o) => o.parent.locale.dialPad[e.ariaLabel]}"
-					  ?disabled="${(e, o) => o.parent.disabled}"
-					  @click="${M}">
+						?autofocus="${(e, a) => a.parent.autofocus && a.parent.noInput && a.index === 0}"
+					  aria-label="${(e, a) => a.parent.locale.dialPad[e.ariaLabel]}"
+					  ?disabled="${(e, a) => a.parent.disabled}"
+					  @pointerdown="${(e, a) => a.parent._startLongPress(e.value, a.event)}"
+					  @pointerup="${(e, a) => a.parent._endLongPress()}"
+					  @pointercancel="${(e, a) => a.parent._cancelLongPress()}"
+					  @pointerleave="${(e, a) => a.parent._cancelLongPress()}"
+					  @keydown="${(e, a) => z(e, {
+      parent: a.parent,
+      event: a.event
+    })}"
+					  @keyup="${(e, a) => H(e, {
+      parent: a.parent,
+      event: a.event
+    })}"
+					  @click="${g}">
 					  	<${t} slot="icon"
 									name="${(e) => e.icon}"
 									class="digit-btn-num"></${t}>
-					</${a}>
+					</${n}>
 		`,
     {
       positioning: !0
@@ -206,8 +307,8 @@ function N(a, t) {
   )}
 	`;
 }
-function O(a) {
-  return d`<${a} class="call-btn"
+function U(n) {
+  return d`<${n} class="call-btn"
         size="expanded"
         appearance="filled"
         icon="${(t) => t.callActive ? "disable-call-line" : "call-line"}"
@@ -216,33 +317,33 @@ function O(a) {
 		?pending="${(t) => t.pending}"
         @click="${(t) => t._onDial()}"
         label="${(t) => t.callActive ? t.endCallButtonLabel || t.locale.dialPad.endCallButtonLabel : t.callButtonLabel || t.locale.dialPad.callButtonLabel}">
-    </${a}>`;
+    </${n}>`;
 }
-function R(a) {
-  return d`<${a} role="alert" aria-atomic="true">
+function q(n) {
+  return d`<${n} role="alert" aria-atomic="true">
 		${(t) => `${t.locale.dialPad.errorLabel} ${t._errorAnnouncement}`}
-	</${a}>`;
+	</${n}>`;
 }
-const q = (a) => {
-  const t = a.tagFor(h), e = a.tagFor(x), o = a.tagFor(g), c = a.tagFor(F);
-  return d` <div class="${P}">
-		${p((s) => !s.noInput, S(o, t))}
-		<div class="digits">${N(t, e)}</div>
-		${p((s) => !s.noCall, O(t))}
-		${R(c)}
+const Z = (n) => {
+  const t = n.tagFor(h), e = n.tagFor(P), a = n.tagFor(_), s = n.tagFor(A);
+  return d` <div class="${K}">
+		${p((c) => !c.noInput, O(a, t))}
+		<div class="digits">${R(t, e)}</div>
+		${p((c) => !c.noCall, U(t))}
+		${q(s)}
 	</div>`;
-}, K = A(
+}, j = w(
   "dial-pad",
-  l,
-  q,
+  o,
+  Z,
   [
     m,
-    _,
-    w,
-    E
+    $,
+    T,
+    x
   ],
   {
-    styles: I
+    styles: B
   }
-), U = L(K);
-U();
+), G = k(j);
+G();

package/dialog/definition.cjs

@@ -66,6 +66,7 @@ class Dialog extends localized.Localized(delegatesAria.DelegatesAria(vividElemen
     }
   }
   set returnValue(value) {
+    /* v8 ignore else -- @preserve */
     if (this.#dialog) {
       this.#dialog.returnValue = value;
     }

package/dialog/definition.js

@@ -62,6 +62,7 @@ class Dialog extends Localized(DelegatesAria(VividElement)) {
     }
   }
   set returnValue(value) {
+    /* v8 ignore else -- @preserve */
     if (this.#dialog) {
       this.#dialog.returnValue = value;
     }

package/dialog/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const h=require("../bundled/definition2.cjs"),p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),v=require("../bundled/index.cjs"),m=require("../bundled/delegates-aria.cjs"),y=require("../bundled/localized.cjs"),d=require("../bundled/when.cjs"),c=require("../bundled/slotted.cjs"),x=require("../bundled/class-names.cjs"),w='.base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:"";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}';var k=Object.defineProperty,l=(i,o,s,r)=>{for(var e=void 0,n=i.length-1,b;n>=0;n--)(b=i[n])&&(e=b(o,s,e)||e);return e&&k(o,s,e),e};class a extends y.Localized(m.DelegatesAria(t.VividElement)){constructor(){super(...arguments),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,this.#i=o=>{if(o.target!==this.#e||!this.#t("light-dismiss"))return;const s=this.#e.getBoundingClientRect();s.top<=o.clientY&&o.clientY<=s.top+s.height&&s.left<=o.clientX&&o.clientX<=s.left+s.width||this._handleCloseRequest()},this.#a=o=>{o.target.method==="dialog"&&(this.open=!1)}}modalChanged(o,s){this.open&&(this._openedAsModal=s,this.$fastController.isConnected&&(this.#s(),this.#l()))}set returnValue(o){this.#e&&(this.#e.returnValue=o)}get returnValue(){return this.#e?.returnValue}#o;get#e(){return this.#o||(this.#o=this.shadowRoot.querySelector("dialog")),this.#o}openChanged(o,s){o!==void 0&&(s?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#l(),this.$emit("open",void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#s(),this.$emit("close",this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#t("dismiss-button")}#t(o){if(this.nonDismissible)return!1;switch(o){case"escape":return!this.noDismissOnEsc;case"dismiss-button":return!this.noDismissButton;case"light-dismiss":return!this.noLightDismiss}}#i;#a;_onKeyDown(o){return v.handleEscapeKeyAndStopPropogation(o)&&this._openedAsModal?(this.#t("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}#s(){this.#e.close()}#l(){this._openedAsModal?this.#e.showModal():this.#e.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#l(),this.#e.addEventListener("mousedown",this.#i),this.#e.addEventListener("submit",this.#a)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#s(),this.#e.removeEventListener("mousedown",this.#i),this.#e.removeEventListener("submit",this.#a)}}l([t.attr({mode:"boolean"})],a.prototype,"open");l([t.attr],a.prototype,"icon");l([t.attr({attribute:"icon-placement"})],a.prototype,"iconPlacement");l([t.attr],a.prototype,"subtitle");l([t.attr],a.prototype,"headline");l([t.attr({attribute:"full-width-body",mode:"boolean"})],a.prototype,"fullWidthBody");l([t.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");l([t.attr({attribute:"no-light-dismiss",mode:"boolean"})],a.prototype,"noLightDismiss");l([t.attr({attribute:"no-dismiss-on-esc",mode:"boolean"})],a.prototype,"noDismissOnEsc");l([t.attr({attribute:"no-dismiss-button",mode:"boolean"})],a.prototype,"noDismissButton");l([t.attr({attribute:"non-dismissible",mode:"boolean"})],a.prototype,"nonDismissible");l([t.attr({mode:"boolean"})],a.prototype,"modal");l([t.attr({mode:"boolean",attribute:"scrollable-body"})],a.prototype,"scrollableBody");l([t.observable],a.prototype,"_openedAsModal");l([t.observable],a.prototype,"bodySlottedContent");l([t.observable],a.prototype,"footerSlottedContent");l([t.observable],a.prototype,"actionItemsSlottedContent");const $=({iconPlacement:i,bodySlottedContent:o,footerSlottedContent:s,actionItemsSlottedContent:r,_openedAsModal:e,scrollableBody:n})=>x.classNames("base",[`icon-placement-${i}`,!!i],["hide-body",!o?.length],["hide-footer",!(s?.length||r?.length)],["modal",e],["scrollable-body",!!n]);function D(i){return t.html`
+"use strict";const h=require("../bundled/definition2.cjs"),p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),v=require("../bundled/index.cjs"),m=require("../bundled/delegates-aria.cjs"),y=require("../bundled/localized.cjs"),d=require("../bundled/when.cjs"),c=require("../bundled/slotted.cjs"),x=require("../bundled/class-names.cjs"),w='.base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:"";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}';var k=Object.defineProperty,l=(i,o,s,r)=>{for(var e=void 0,n=i.length-1,b;n>=0;n--)(b=i[n])&&(e=b(o,s,e)||e);return e&&k(o,s,e),e};class a extends y.Localized(m.DelegatesAria(t.VividElement)){constructor(){super(...arguments),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,this.#i=o=>{if(o.target!==this.#e||!this.#t("light-dismiss"))return;const s=this.#e.getBoundingClientRect();s.top<=o.clientY&&o.clientY<=s.top+s.height&&s.left<=o.clientX&&o.clientX<=s.left+s.width||this._handleCloseRequest()},this.#a=o=>{o.target.method==="dialog"&&(this.open=!1)}}modalChanged(o,s){this.open&&(this._openedAsModal=s,this.$fastController.isConnected&&(this.#s(),this.#l()))}set returnValue(o){/* v8 ignore else -- @preserve */this.#e&&(this.#e.returnValue=o)}get returnValue(){return this.#e?.returnValue}#o;get#e(){return this.#o||(this.#o=this.shadowRoot.querySelector("dialog")),this.#o}openChanged(o,s){o!==void 0&&(s?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#l(),this.$emit("open",void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#s(),this.$emit("close",this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#t("dismiss-button")}#t(o){if(this.nonDismissible)return!1;switch(o){case"escape":return!this.noDismissOnEsc;case"dismiss-button":return!this.noDismissButton;case"light-dismiss":return!this.noLightDismiss}}#i;#a;_onKeyDown(o){return v.handleEscapeKeyAndStopPropogation(o)&&this._openedAsModal?(this.#t("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}#s(){this.#e.close()}#l(){this._openedAsModal?this.#e.showModal():this.#e.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#l(),this.#e.addEventListener("mousedown",this.#i),this.#e.addEventListener("submit",this.#a)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#s(),this.#e.removeEventListener("mousedown",this.#i),this.#e.removeEventListener("submit",this.#a)}}l([t.attr({mode:"boolean"})],a.prototype,"open");l([t.attr],a.prototype,"icon");l([t.attr({attribute:"icon-placement"})],a.prototype,"iconPlacement");l([t.attr],a.prototype,"subtitle");l([t.attr],a.prototype,"headline");l([t.attr({attribute:"full-width-body",mode:"boolean"})],a.prototype,"fullWidthBody");l([t.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");l([t.attr({attribute:"no-light-dismiss",mode:"boolean"})],a.prototype,"noLightDismiss");l([t.attr({attribute:"no-dismiss-on-esc",mode:"boolean"})],a.prototype,"noDismissOnEsc");l([t.attr({attribute:"no-dismiss-button",mode:"boolean"})],a.prototype,"noDismissButton");l([t.attr({attribute:"non-dismissible",mode:"boolean"})],a.prototype,"nonDismissible");l([t.attr({mode:"boolean"})],a.prototype,"modal");l([t.attr({mode:"boolean",attribute:"scrollable-body"})],a.prototype,"scrollableBody");l([t.observable],a.prototype,"_openedAsModal");l([t.observable],a.prototype,"bodySlottedContent");l([t.observable],a.prototype,"footerSlottedContent");l([t.observable],a.prototype,"actionItemsSlottedContent");const $=({iconPlacement:i,bodySlottedContent:o,footerSlottedContent:s,actionItemsSlottedContent:r,_openedAsModal:e,scrollableBody:n})=>x.classNames("base",[`icon-placement-${i}`,!!i],["hide-body",!o?.length],["hide-footer",!(s?.length||r?.length)],["modal",e],["scrollable-body",!!n]);function D(i){return t.html`
 		<${i} class="icon" name="${o=>o.icon}"></${i}>
 	`}function g(){return t.html`
 		<h2 class="headline" id="dialog-headline">${i=>i.headline}</h2>

package/dialog/index.js

@@ -32,6 +32,7 @@ class i extends B(C(k)) {
     this.open && (this._openedAsModal = a, this.$fastController.isConnected && (this.#s(), this.#l()));
   }
   set returnValue(o) {
+    /* v8 ignore else -- @preserve */
     this.#e && (this.#e.returnValue = o);
   }
   get returnValue() {

package/divider/index.cjs

@@ -1 +1 @@
-"use strict";const i=require("../bundled/definition14.cjs");i.registerDivider();
+"use strict";const i=require("../bundled/definition15.cjs");i.registerDivider();

package/divider/index.js

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