@vonage/vivid 4.8.0 → 4.10.0

package/shared/definition15.cjs

@@ -115,6 +115,7 @@ exports.Checkbox = class Checkbox extends Checkbox$1 {
     super(...arguments);
     this.ariaLabel = null;
     this.tabindex = null;
+    this.ariaChecked = null;
     /**
      * !remove method as will be implemented by fast-foundation in version after 2.46.9
      *
@@ -154,11 +155,23 @@ exports.Checkbox = class Checkbox extends Checkbox$1 {
       return false;
     };
   }
+  indeterminateChanged(_, next) {
+    this.checked = !next;
+  }
+  ariaCheckedChanged() {
+    if (this.ariaChecked === "mixed") {
+      this.indeterminate = true;
+    } else {
+      this.indeterminate = false;
+      this.checked = this.ariaChecked === "true" ? true : false;
+    }
+  }
   /**
    * @internal
    */
   checkedChanged(prev, next) {
     super.checkedChanged(prev, next);
+    this.ariaChecked = next == true ? "true" : "false";
     if (prev !== void 0) {
       this.$emit("input");
     }
@@ -173,6 +186,9 @@ __decorateClass([
 __decorateClass([
   index.attr
 ], exports.Checkbox.prototype, "connotation", 2);
+__decorateClass([
+  index.attr({ attribute: "aria-checked" })
+], exports.Checkbox.prototype, "ariaChecked", 2);
 __decorateClass([
   index.observable
 ], exports.Checkbox.prototype, "slottedContent", 2);
@@ -213,7 +229,7 @@ const CheckboxTemplate = (context) => {
 			class="${getClasses}"
 			role="checkbox"
 			aria-label="${(x) => x.ariaLabel}"
-			aria-checked="${(x) => x.checked}"
+			aria-checked="${(x) => x.indeterminate ? "mixed" : x.checked}"
 			aria-required="${(x) => x.required}"
 			aria-disabled="${(x) => x.disabled}"
 			aria-readonly="${(x) => x.readOnly}"

package/shared/definition15.js

@@ -113,6 +113,7 @@ let Checkbox = class extends Checkbox$1 {
     super(...arguments);
     this.ariaLabel = null;
     this.tabindex = null;
+    this.ariaChecked = null;
     /**
      * !remove method as will be implemented by fast-foundation in version after 2.46.9
      *
@@ -152,11 +153,23 @@ let Checkbox = class extends Checkbox$1 {
       return false;
     };
   }
+  indeterminateChanged(_, next) {
+    this.checked = !next;
+  }
+  ariaCheckedChanged() {
+    if (this.ariaChecked === "mixed") {
+      this.indeterminate = true;
+    } else {
+      this.indeterminate = false;
+      this.checked = this.ariaChecked === "true" ? true : false;
+    }
+  }
   /**
    * @internal
    */
   checkedChanged(prev, next) {
     super.checkedChanged(prev, next);
+    this.ariaChecked = next == true ? "true" : "false";
     if (prev !== void 0) {
       this.$emit("input");
     }
@@ -171,6 +184,9 @@ __decorateClass([
 __decorateClass([
   attr
 ], Checkbox.prototype, "connotation", 2);
+__decorateClass([
+  attr({ attribute: "aria-checked" })
+], Checkbox.prototype, "ariaChecked", 2);
 __decorateClass([
   observable
 ], Checkbox.prototype, "slottedContent", 2);
@@ -211,7 +227,7 @@ const CheckboxTemplate = (context) => {
 			class="${getClasses}"
 			role="checkbox"
 			aria-label="${(x) => x.ariaLabel}"
-			aria-checked="${(x) => x.checked}"
+			aria-checked="${(x) => x.indeterminate ? "mixed" : x.checked}"
 			aria-required="${(x) => x.required}"
 			aria-disabled="${(x) => x.disabled}"
 			aria-readonly="${(x) => x.readOnly}"

package/shared/definition20.cjs

@@ -9,6 +9,7 @@ const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');
+const repeat = require('./repeat.cjs');
 const keyCodes = require('./key-codes2.cjs');
 
 const styles = ":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)}.digit-btn:where(.hover,: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:where(.disabled,: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)}.call-btn{margin-top:32px;grid-column:1/-1}";
@@ -36,16 +37,6 @@ class DialPad extends index.FoundationElement {
     this.noInput = false;
     this.endCallButtonLabel = null;
     this.callButtonLabel = null;
-    /**
-     *
-     * @internal
-     */
-    this._onDigit = (e) => {
-      this.value += e.currentTarget.value;
-      this.$emit("keypad-click", e.currentTarget);
-      this.$emit("input");
-      this.$emit("change");
-    };
     /**
      *
      * @internal
@@ -53,14 +44,6 @@ class DialPad extends index.FoundationElement {
     this._onDial = () => {
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
-    /**
-     *
-     * @internal
-     */
-    this._deleteLastCharacter = () => {
-      this.value = this.value.slice(0, -1);
-      this.$emit("change");
-    };
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -104,18 +87,55 @@ __decorateClass([
 ], DialPad.prototype, "callButtonLabel");
 applyMixins.applyMixins(DialPad, localized.Localized);
 
+class DialPadButton {
+  constructor(value, label, ariaLabel, icon, id) {
+    this.value = value;
+    this.label = label;
+    this.ariaLabel = ariaLabel;
+    this.icon = icon;
+    this.id = id;
+  }
+}
+const DIAL_PAD_BUTTONS = [
+  new DialPadButton("1", " ", "digitOneLabel", "one-solid", "btn1"),
+  new DialPadButton("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
+  new DialPadButton("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
+  new DialPadButton("4", "GHI", "digitFourLabel", "four-solid", "btn4"),
+  new DialPadButton("5", "JKL", "digitFiveLabel", "five-solid", "btn5"),
+  new DialPadButton("6", "MNO", "digitSixLabel", "six-solid", "btn6"),
+  new DialPadButton("7", "PQRS", "digitSevenLabel", "seven-solid", "btn7"),
+  new DialPadButton("8", "TUV", "digitEightLabel", "eight-solid", "btn8"),
+  new DialPadButton("9", "WXYZ", "digitNineLabel", "nine-solid", "btn9"),
+  new DialPadButton(
+    "*",
+    null,
+    "digitAsteriskLabel",
+    "asterisk-2-solid",
+    "btnAsterisk"
+  ),
+  new DialPadButton("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
+  new DialPadButton(
+    "#",
+    null,
+    "digitHashtagLabel",
+    "hashtag-solid",
+    "btnHashtag"
+  )
+];
 const getClasses = ({ noInput }) => classNames.classNames("base", ["no-input", Boolean(noInput)]);
 function handleKeyDown(x, e) {
   if (e.key === keyCodes.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
     x._onDial();
   } else {
-    const key = e.key === "*" ? "Asterisk" : e.key === "#" ? "Hashtag" : e.key;
-    const digit = x.shadowRoot.querySelector(`#btn${key}`);
-    if (digit) {
-      digit.active = true;
-      setTimeout(() => {
-        digit.active = false;
-      }, 200);
+    const elementIndex = DIAL_PAD_BUTTONS.findIndex((x2) => x2.value === e.key);
+    if (elementIndex > -1) {
+      const digit = x.shadowRoot.querySelector(".digits").children[elementIndex];
+      if (digit) {
+        digit.active = true;
+        setTimeout(() => {
+          digit.active = false;
+        }, 200);
+      }
     }
   }
   return true;
@@ -126,6 +146,14 @@ function syncFieldAndPadValues(x) {
 function stopPropagation(_, { event: e }) {
   e.stopImmediatePropagation();
 }
+function deleteLastCharacter(dialPad) {
+  dialPad.value = dialPad.value.slice(0, -1);
+  dialPad.$emit("input");
+  dialPad.$emit("change");
+  if (dialPad.value === "") {
+    dialPad._textFieldEl.focus();
+  }
+}
 function renderTextField(textFieldTag, buttonTag) {
   return index.html`<${textFieldTag} ${ref.ref(
     "_textFieldEl"
@@ -142,51 +170,47 @@ function renderTextField(textFieldTag, buttonTag) {
          ${when.when(
     (x) => x.value && x.value.length && x.value.length > 0,
     index.html`<${buttonTag}
-                slot="action-items" size='super-condensed' icon="backspace-line" aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-								appearance='ghost' ?disabled="${(x) => x.disabled || x.callActive}" @click="${(x) => x._deleteLastCharacter()}">
+                				slot="action-items" 
+								size='super-condensed' 
+								icon="backspace-line" 
+								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
+								appearance='ghost' 
+								?disabled="${(x) => x.disabled || x.callActive}" 
+								@click="${(x) => deleteLastCharacter(x)}">
             </${buttonTag}>`
   )}
         </${textFieldTag}>`;
 }
+function onDigitClick(digit, { parent: dialPad, event }) {
+  dialPad.value += digit.value;
+  dialPad.$emit("keypad-click", event.currentTarget);
+  dialPad.$emit("input");
+  dialPad.$emit("change");
+}
 function renderDigits(buttonTag, iconTag) {
   return index.html`
-        <${buttonTag} id='btn1' value='1' stacked appearance="ghost-light" shape="pill" label="&nbsp;" size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitOneLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='one-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn2' value='2' stacked appearance="ghost-light" shape="pill" label='ABC' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitTwoLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='two-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn3' value='3' stacked appearance="ghost-light" shape="pill" label='DEF' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitThreeLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='three-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn4' value='4' stacked appearance="ghost-light" shape="pill" label='GHI' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFourLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='four-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn5' value='5' stacked appearance="ghost-light" shape="pill" label='JKL' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFiveLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='five-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-		<${buttonTag} id='btn6' value='6' stacked appearance="ghost-light" shape="pill" label='MNO' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSixLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='six-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn7' value='7' stacked appearance="ghost-light" shape="pill" label='PQRS' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSevenLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='seven-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn8' value='8' stacked appearance="ghost-light" shape="pill" label='TUV' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitEightLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='eight-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn9' value='9' stacked appearance="ghost-light" shape="pill" label='WXYZ' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitNineLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='nine-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btnAsterisk' value='*' appearance="ghost-light" shape="pill" stacked size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitAsteriskLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='asterisk-2-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn0' value='0' stacked appearance="ghost-light" shape="pill" label='+' size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitZeroLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='zero-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btnHashtag' value='#' stacked appearance="ghost-light" shape="pill" size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitHashtagLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='hashtag-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-    `;
+		${repeat.repeat(
+    (_) => DIAL_PAD_BUTTONS,
+    index.html`
+			<${buttonTag} 
+					  id="${(x) => x.id}"
+					  value="${(x) => x.value}" 
+					  stacked 
+					  appearance="ghost-light" 
+					  shape="pill" 
+					  label="${(x) => x.label === "&nbsp;" ? " " : x.label}"
+					  size='condensed' 
+					  class="digit-btn" 
+					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}" 
+					  ?disabled="${(_, c) => c.parent.disabled}" 
+					  @click="${onDigitClick}">
+					  	<${iconTag} slot="icon" 
+									name="${(x) => x.icon}" 
+									class="digit-btn-num"></${iconTag}>
+					</${buttonTag}>
+		`
+  )}
+	`;
 }
 function renderDialButton(buttonTag) {
   return index.html`<${buttonTag} class="call-btn"

package/shared/definition20.js

@@ -7,6 +7,7 @@ import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
+import { r as repeat } from './repeat.js';
 import { b as keyEnter } from './key-codes2.js';
 
 const styles = ":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)}.digit-btn:where(.hover,: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:where(.disabled,: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)}.call-btn{margin-top:32px;grid-column:1/-1}";
@@ -34,16 +35,6 @@ class DialPad extends FoundationElement {
     this.noInput = false;
     this.endCallButtonLabel = null;
     this.callButtonLabel = null;
-    /**
-     *
-     * @internal
-     */
-    this._onDigit = (e) => {
-      this.value += e.currentTarget.value;
-      this.$emit("keypad-click", e.currentTarget);
-      this.$emit("input");
-      this.$emit("change");
-    };
     /**
      *
      * @internal
@@ -51,14 +42,6 @@ class DialPad extends FoundationElement {
     this._onDial = () => {
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
-    /**
-     *
-     * @internal
-     */
-    this._deleteLastCharacter = () => {
-      this.value = this.value.slice(0, -1);
-      this.$emit("change");
-    };
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -102,18 +85,55 @@ __decorateClass([
 ], DialPad.prototype, "callButtonLabel");
 applyMixins(DialPad, Localized);
 
+class DialPadButton {
+  constructor(value, label, ariaLabel, icon, id) {
+    this.value = value;
+    this.label = label;
+    this.ariaLabel = ariaLabel;
+    this.icon = icon;
+    this.id = id;
+  }
+}
+const DIAL_PAD_BUTTONS = [
+  new DialPadButton("1", " ", "digitOneLabel", "one-solid", "btn1"),
+  new DialPadButton("2", "ABC", "digitTwoLabel", "two-solid", "btn2"),
+  new DialPadButton("3", "DEF", "digitThreeLabel", "three-solid", "btn3"),
+  new DialPadButton("4", "GHI", "digitFourLabel", "four-solid", "btn4"),
+  new DialPadButton("5", "JKL", "digitFiveLabel", "five-solid", "btn5"),
+  new DialPadButton("6", "MNO", "digitSixLabel", "six-solid", "btn6"),
+  new DialPadButton("7", "PQRS", "digitSevenLabel", "seven-solid", "btn7"),
+  new DialPadButton("8", "TUV", "digitEightLabel", "eight-solid", "btn8"),
+  new DialPadButton("9", "WXYZ", "digitNineLabel", "nine-solid", "btn9"),
+  new DialPadButton(
+    "*",
+    null,
+    "digitAsteriskLabel",
+    "asterisk-2-solid",
+    "btnAsterisk"
+  ),
+  new DialPadButton("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
+  new DialPadButton(
+    "#",
+    null,
+    "digitHashtagLabel",
+    "hashtag-solid",
+    "btnHashtag"
+  )
+];
 const getClasses = ({ noInput }) => classNames("base", ["no-input", Boolean(noInput)]);
 function handleKeyDown(x, e) {
   if (e.key === keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
     x._onDial();
   } else {
-    const key = e.key === "*" ? "Asterisk" : e.key === "#" ? "Hashtag" : e.key;
-    const digit = x.shadowRoot.querySelector(`#btn${key}`);
-    if (digit) {
-      digit.active = true;
-      setTimeout(() => {
-        digit.active = false;
-      }, 200);
+    const elementIndex = DIAL_PAD_BUTTONS.findIndex((x2) => x2.value === e.key);
+    if (elementIndex > -1) {
+      const digit = x.shadowRoot.querySelector(".digits").children[elementIndex];
+      if (digit) {
+        digit.active = true;
+        setTimeout(() => {
+          digit.active = false;
+        }, 200);
+      }
     }
   }
   return true;
@@ -124,6 +144,14 @@ function syncFieldAndPadValues(x) {
 function stopPropagation(_, { event: e }) {
   e.stopImmediatePropagation();
 }
+function deleteLastCharacter(dialPad) {
+  dialPad.value = dialPad.value.slice(0, -1);
+  dialPad.$emit("input");
+  dialPad.$emit("change");
+  if (dialPad.value === "") {
+    dialPad._textFieldEl.focus();
+  }
+}
 function renderTextField(textFieldTag, buttonTag) {
   return html`<${textFieldTag} ${ref(
     "_textFieldEl"
@@ -140,51 +168,47 @@ function renderTextField(textFieldTag, buttonTag) {
          ${when(
     (x) => x.value && x.value.length && x.value.length > 0,
     html`<${buttonTag}
-                slot="action-items" size='super-condensed' icon="backspace-line" aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-								appearance='ghost' ?disabled="${(x) => x.disabled || x.callActive}" @click="${(x) => x._deleteLastCharacter()}">
+                				slot="action-items" 
+								size='super-condensed' 
+								icon="backspace-line" 
+								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
+								appearance='ghost' 
+								?disabled="${(x) => x.disabled || x.callActive}" 
+								@click="${(x) => deleteLastCharacter(x)}">
             </${buttonTag}>`
   )}
         </${textFieldTag}>`;
 }
+function onDigitClick(digit, { parent: dialPad, event }) {
+  dialPad.value += digit.value;
+  dialPad.$emit("keypad-click", event.currentTarget);
+  dialPad.$emit("input");
+  dialPad.$emit("change");
+}
 function renderDigits(buttonTag, iconTag) {
   return html`
-        <${buttonTag} id='btn1' value='1' stacked appearance="ghost-light" shape="pill" label="&nbsp;" size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitOneLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='one-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn2' value='2' stacked appearance="ghost-light" shape="pill" label='ABC' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitTwoLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='two-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn3' value='3' stacked appearance="ghost-light" shape="pill" label='DEF' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitThreeLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='three-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn4' value='4' stacked appearance="ghost-light" shape="pill" label='GHI' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFourLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='four-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn5' value='5' stacked appearance="ghost-light" shape="pill" label='JKL' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFiveLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='five-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-		<${buttonTag} id='btn6' value='6' stacked appearance="ghost-light" shape="pill" label='MNO' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSixLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='six-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn7' value='7' stacked appearance="ghost-light" shape="pill" label='PQRS' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSevenLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='seven-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn8' value='8' stacked appearance="ghost-light" shape="pill" label='TUV' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitEightLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='eight-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn9' value='9' stacked appearance="ghost-light" shape="pill" label='WXYZ' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitNineLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='nine-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btnAsterisk' value='*' appearance="ghost-light" shape="pill" stacked size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitAsteriskLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='asterisk-2-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btn0' value='0' stacked appearance="ghost-light" shape="pill" label='+' size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitZeroLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='zero-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-        <${buttonTag} id='btnHashtag' value='#' stacked appearance="ghost-light" shape="pill" size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitHashtagLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
-    c.event
-  )}"><${iconTag} slot='icon' name='hashtag-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
-    `;
+		${repeat(
+    (_) => DIAL_PAD_BUTTONS,
+    html`
+			<${buttonTag} 
+					  id="${(x) => x.id}"
+					  value="${(x) => x.value}" 
+					  stacked 
+					  appearance="ghost-light" 
+					  shape="pill" 
+					  label="${(x) => x.label === "&nbsp;" ? " " : x.label}"
+					  size='condensed' 
+					  class="digit-btn" 
+					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}" 
+					  ?disabled="${(_, c) => c.parent.disabled}" 
+					  @click="${onDigitClick}">
+					  	<${iconTag} slot="icon" 
+									name="${(x) => x.icon}" 
+									class="digit-btn-num"></${iconTag}>
+					</${buttonTag}>
+		`
+  )}
+	`;
 }
 function renderDialButton(buttonTag) {
   return html`<${buttonTag} class="call-btn"

package/shared/definition21.cjs

@@ -4,10 +4,10 @@ const index = require('./index.cjs');
 const definition$2 = require('./definition27.cjs');
 const definition$1 = require('./definition11.cjs');
 const definition = require('./definition63.cjs');
+const index$1 = require('./index2.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
 const icon$1 = require('./icon.cjs');
-const index$1 = require('./index2.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
@@ -31,15 +31,20 @@ class Dialog extends index.FoundationElement {
     this.ariaLabel = null;
     this.dismissButtonAriaLabel = null;
     this.noLightDismiss = false;
+    this.noDismissOnEsc = false;
+    this.noDismissButton = false;
+    this.nonDismissible = false;
     this.modal = false;
     this._openedAsModal = false;
     this.#handleScrimClick = (event) => {
-      if (event.target !== this.#dialog || this.noLightDismiss) {
+      if (event.target !== this.#dialog || !this.#isDismissibleVia("light-dismiss")) {
         return;
       }
       const rect = this.#dialog.getBoundingClientRect();
       const clickedInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
-      this.open = clickedInDialog;
+      if (!clickedInDialog) {
+        this._handleCloseRequest();
+      }
     };
     this.#handleInternalFormSubmit = (event) => {
       if (event.target.method !== "dialog") {
@@ -98,8 +103,47 @@ class Dialog extends index.FoundationElement {
       this.$emit("open", void 0, { bubbles: false });
     }
   }
+  get _showDismissButton() {
+    return this.#isDismissibleVia("dismiss-button");
+  }
+  #isDismissibleVia(method) {
+    if (this.nonDismissible) {
+      return false;
+    }
+    switch (method) {
+      case "escape":
+        return !this.noDismissOnEsc;
+      case "dismiss-button":
+        return !this.noDismissButton;
+      case "light-dismiss":
+        return !this.noLightDismiss;
+    }
+  }
   #handleScrimClick;
   #handleInternalFormSubmit;
+  /**
+   * @internal
+   */
+  _onKeyDown(event) {
+    if (index$1.handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
+      if (this.#isDismissibleVia("escape")) {
+        this._handleCloseRequest();
+      }
+      return false;
+    }
+    return true;
+  }
+  /**
+   * @internal
+   */
+  _handleCloseRequest() {
+    if (this.$emit("cancel", void 0, {
+      bubbles: false,
+      cancelable: true
+    })) {
+      this.open = false;
+    }
+  }
   close() {
     this.open = false;
   }
@@ -176,6 +220,15 @@ __decorateClass([
 __decorateClass([
   index.attr({ attribute: "no-light-dismiss", mode: "boolean" })
 ], Dialog.prototype, "noLightDismiss");
+__decorateClass([
+  index.attr({ attribute: "no-dismiss-on-esc", mode: "boolean" })
+], Dialog.prototype, "noDismissOnEsc");
+__decorateClass([
+  index.attr({ attribute: "no-dismiss-button", mode: "boolean" })
+], Dialog.prototype, "noDismissButton");
+__decorateClass([
+  index.attr({ attribute: "non-dismissible", mode: "boolean" })
+], Dialog.prototype, "nonDismissible");
 __decorateClass([
   index.attr({ mode: "boolean" })
 ], Dialog.prototype, "modal");
@@ -227,17 +280,9 @@ function renderDismissButton(buttonTag) {
 		size="condensed"
 		class="dismiss-button"
 		icon="close-line"
-		@click="${(x) => x.open = false}"
+		@click="${(x) => x._handleCloseRequest()}"
 	></${buttonTag}>`;
 }
-function handleEscapeKey(dialog, event) {
-  if (index$1.handleEscapeKeyAndStopPropogation(event) && dialog._openedAsModal) {
-    dialog.open = false;
-    return false;
-  } else {
-    return true;
-  }
-}
 const DialogTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   const iconTag = context.tagFor(icon$1.Icon);
@@ -245,7 +290,7 @@ const DialogTemplate = (context) => {
   return index.html`
 	<${elevationTag} dp="8">
 		<dialog class="${getClasses}"
-				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
+				@keydown="${(x, c) => x._onKeyDown(c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
 				aria-label="${(x) => x.ariaLabel}"
 				?aria-modal="${(x) => x._openedAsModal}"
@@ -258,7 +303,7 @@ const DialogTemplate = (context) => {
 							</slot>
 							${when.when((x) => x.headline, headline())}
 							${when.when((x) => x.subtitle, subtitle())}
-							${renderDismissButton(buttonTag)}
+							${when.when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
 					</div>
 					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
 						<slot name="body" ${slotted.slotted("bodySlottedContent")}></slot>