@vonage/vivid 4.8.0 → 4.9.0

package/shared/definition10.js

@@ -1,73 +1,6 @@
-import { F as FoundationElement, _ as __decorate, o as observable, h as html, r as registerFactory } from './index.js';
+import { h as html, F as FoundationElement, o as observable, r as registerFactory } from './index.js';
 import { s as slotted, e as elements } from './slotted.js';
-import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
-
-/**
- * A Breadcrumb Custom HTML Element.
- * @slot - The default slot for the breadcrumb items
- * @csspart list - The element wrapping the slotted items
- *
- * @public
- */
-let Breadcrumb$1 = class Breadcrumb extends FoundationElement {
-    slottedBreadcrumbItemsChanged() {
-        if (this.$fastController.isConnected) {
-            if (this.slottedBreadcrumbItems === undefined ||
-                this.slottedBreadcrumbItems.length === 0) {
-                return;
-            }
-            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
-            this.slottedBreadcrumbItems.forEach((item) => {
-                const itemIsLastNode = item === lastNode;
-                this.setItemSeparator(item, itemIsLastNode);
-                this.setAriaCurrent(item, itemIsLastNode);
-            });
-        }
-    }
-    setItemSeparator(item, isLastNode) {
-        if (item instanceof BreadcrumbItem$1) {
-            item.separator = !isLastNode;
-        }
-    }
-    /**
-     * Finds href on childnodes in the light DOM or shadow DOM.
-     * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
-     */
-    findChildWithHref(node) {
-        var _a, _b;
-        if (node.childElementCount > 0) {
-            return node.querySelector("a[href]");
-        }
-        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
-            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
-        }
-        else
-            return null;
-    }
-    /**
-     *  Sets ARIA Current for the current node
-     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
-     * otherwise apply aria-current to the host element, with an href
-     */
-    setAriaCurrent(item, isLastNode) {
-        const childNodeWithHref = this.findChildWithHref(item);
-        if (childNodeWithHref === null &&
-            item.hasAttribute("href") &&
-            item instanceof BreadcrumbItem$1) {
-            isLastNode
-                ? item.setAttribute("aria-current", "page")
-                : item.removeAttribute("aria-current");
-        }
-        else if (childNodeWithHref !== null) {
-            isLastNode
-                ? childNodeWithHref.setAttribute("aria-current", "page")
-                : childNodeWithHref.removeAttribute("aria-current");
-        }
-    }
-};
-__decorate([
-    observable
-], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
+import { B as BreadcrumbItem } from './breadcrumb-item.js';
 
 const breadcrumbTemplate = () => html`
 	<nav aria-label="breadcrumbs" class="base">
@@ -84,8 +17,59 @@ const breadcrumbTemplate = () => html`
 
 const styles = ".list{display:flex}";
 
-class Breadcrumb extends Breadcrumb$1 {
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Breadcrumb extends FoundationElement {
+  /**
+   * @internal
+   */
+  slottedBreadcrumbItemsChanged(_, newItems) {
+    if (newItems) {
+      newItems.forEach((item, index) => {
+        const itemIsLastNode = index === newItems.length - 1;
+        this.setItemSeparator(item, itemIsLastNode);
+        this.setAriaCurrent(item, itemIsLastNode);
+      });
+    }
+  }
+  setItemSeparator(item, isLastNode) {
+    if (item instanceof BreadcrumbItem) {
+      item.separator = !isLastNode;
+    }
+  }
+  /**
+   * Finds href on childnodes in the light DOM or shadow DOM.
+   * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
+   */
+  findChildWithHref(node) {
+    if (node.childElementCount > 0) {
+      return node.querySelector("a[href]");
+    } else if (node.shadowRoot) {
+      return node.shadowRoot.querySelector("a[href]");
+    } else return null;
+  }
+  /**
+   *  Sets ARIA Current for the current node
+   * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
+   * otherwise apply aria-current to the host element, with an href
+   */
+  setAriaCurrent(item, isLastNode) {
+    const childNodeWithHref = this.findChildWithHref(item);
+    if (childNodeWithHref !== null) {
+      isLastNode ? childNodeWithHref.setAttribute("aria-current", "page") : childNodeWithHref.removeAttribute("aria-current");
+    }
+  }
 }
+__decorateClass([
+  observable
+], Breadcrumb.prototype, "slottedBreadcrumbItems");
 
 const breadcrumbDefinition = Breadcrumb.compose({
   baseName: "breadcrumb",

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
@@ -104,18 +95,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;
@@ -148,45 +176,36 @@ function renderTextField(textFieldTag, 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
@@ -102,18 +93,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;
@@ -146,45 +174,36 @@ function renderTextField(textFieldTag, 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');
@@ -39,7 +39,9 @@ class Dialog extends index.FoundationElement {
       }
       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") {
@@ -100,6 +102,27 @@ class Dialog extends index.FoundationElement {
   }
   #handleScrimClick;
   #handleInternalFormSubmit;
+  /**
+   * @internal
+   */
+  _onKeyDown(event) {
+    if (index$1.handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
+      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;
   }
@@ -227,17 +250,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 +260,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}"

package/shared/definition21.js

@@ -2,10 +2,10 @@ import { F as FoundationElement, a as attr, o as observable, h as html, r as reg
 import { a as iconRegistries } from './definition27.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
 import { E as Elevation, e as elevationRegistries } from './definition63.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
 import { I as Icon } from './icon.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
@@ -37,7 +37,9 @@ class Dialog extends FoundationElement {
       }
       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,6 +100,27 @@ class Dialog extends FoundationElement {
   }
   #handleScrimClick;
   #handleInternalFormSubmit;
+  /**
+   * @internal
+   */
+  _onKeyDown(event) {
+    if (handleEscapeKeyAndStopPropogation(event) && this._openedAsModal) {
+      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;
   }
@@ -225,17 +248,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 (handleEscapeKeyAndStopPropogation(event) && dialog._openedAsModal) {
-    dialog.open = false;
-    return false;
-  } else {
-    return true;
-  }
-}
 const DialogTemplate = (context) => {
   const elevationTag = context.tagFor(Elevation);
   const iconTag = context.tagFor(Icon);
@@ -243,7 +258,7 @@ const DialogTemplate = (context) => {
   return 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}"