@vonage/vivid 5.15.0 → 5.15.1

package/data-grid/index.js

@@ -11,7 +11,7 @@ import { s as S, e as Q } from "../bundled/slotted.js";
 import { L as ce } from "../bundled/localized.js";
 import { c as B } from "../bundled/class-names.js";
 import { w as I } from "../bundled/when.js";
-const z = "focus", G = "focusin", w = "focusout", y = "keydown", de = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}", ue = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", he = ':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{display:flex;overflow:hidden;align-items:center}.content[role=button]{cursor:pointer}slot:not([name]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{display:flex;flex-shrink:0;align-items:center}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}';
+const z = "focus", G = "focusin", w = "focusout", y = "keydown", de = ":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}", ue = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media(hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}", he = ':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media(hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{display:flex;overflow:hidden;align-items:center}.content[role=button]{cursor:pointer}slot:not([name]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{display:flex;flex-shrink:0;align-items:center}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}';
 var me = Object.defineProperty, C = (i, e, t, l) => {
   for (var o = void 0, n = i.length - 1, r; n >= 0; n--)
     (r = i[n]) && (o = r(e, t, o) || o);
@@ -85,14 +85,12 @@ class p extends ce(U($)) {
         case v.columnHeader:
           if (this.columnDefinition !== null && this.columnDefinition.headerCellInternalFocusQueue !== !0 && typeof this.columnDefinition.headerCellFocusTargetCallback == "function") {
             const t = this.columnDefinition.headerCellFocusTargetCallback(this);
-            /* v8 ignore else -- @preserve */
             t !== null && t.focus();
           }
           break;
         default:
           if (this.columnDefinition !== null && this.columnDefinition.cellInternalFocusQueue !== !0 && typeof this.columnDefinition.cellFocusTargetCallback == "function") {
             const t = this.columnDefinition.cellFocusTargetCallback(this);
-            /* v8 ignore else -- @preserve */
             t !== null && t.focus();
           }
           break;
@@ -101,9 +99,7 @@ class p extends ce(U($)) {
     }
   }
   handleFocusout(e) {
-    this.shadowRoot.querySelector(".base").classList.remove("active");
-    /* v8 ignore else -- @preserve */
-    this !== document.activeElement && !this.contains(document.activeElement) && (this.isActiveCell = !1);
+    this.shadowRoot.querySelector(".base").classList.remove("active"), this !== document.activeElement && !this.contains(document.activeElement) && (this.isActiveCell = !1);
   }
   handleKeydown(e) {
     if (!(e.defaultPrevented || this.columnDefinition === null || this.cellType === v.default && this.columnDefinition.cellInternalFocusQueue !== !0 || this.cellType === v.columnHeader && this.columnDefinition.headerCellInternalFocusQueue !== !0))
@@ -116,7 +112,6 @@ class p extends ce(U($)) {
             case v.columnHeader: {
               if (this.columnDefinition.headerCellFocusTargetCallback !== void 0) {
                 const t = this.columnDefinition.headerCellFocusTargetCallback(this);
-                /* v8 ignore else -- @preserve */
                 t !== null && t.focus(), e.preventDefault();
               }
               break;
@@ -124,7 +119,6 @@ class p extends ce(U($)) {
             default: {
               if (this.columnDefinition.cellFocusTargetCallback !== void 0) {
                 const t = this.columnDefinition.cellFocusTargetCallback(this);
-                /* v8 ignore else -- @preserve */
                 t !== null && t.focus(), e.preventDefault();
               }
               break;
@@ -132,7 +126,6 @@ class p extends ce(U($)) {
           }
           break;
         case ee: {
-          /* v8 ignore else -- @preserve */
           this.contains(document.activeElement) && document.activeElement !== this && (this.focus(), e.preventDefault());
           break;
         }
@@ -262,9 +255,7 @@ class c extends U($) {
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback();
-    /* v8 ignore else -- @preserve */
-    this.behaviorOrchestrator === null && (this.updateItemTemplate(), this.behaviorOrchestrator = A.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
+    super.connectedCallback(), this.behaviorOrchestrator === null && (this.updateItemTemplate(), this.behaviorOrchestrator = A.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
       new L(
         T((e) => e.columnDefinitions),
         T((e) => e.activeCellItemTemplate),
@@ -283,7 +274,6 @@ class c extends U($) {
     ), this.removeEventListener(y, this.handleKeydown);
   }
   handleFocusout(e) {
-    /* v8 ignore else -- @preserve */
     this.contains(document.activeElement) || (this.focusColumnIndex = 0);
   }
   handleCellFocus(e) {
@@ -389,7 +379,6 @@ const m = {
       ), R = r[x];
       l && this.scrollHeight !== this.clientHeight && (o < this.focusRowIndex && this.scrollTop > 0 || o > this.focusRowIndex && this.scrollTop < this.scrollHeight - this.clientHeight) && R.scrollIntoView({ block: "center", inline: "center" }), R.focus();
     }, this.onChildListChange = (e, t) => {
-      /* v8 ignore else -- @preserve */
       e && e.length && (e.forEach((l) => {
         l.addedNodes.forEach((o) => {
           o.nodeType === 1 && (o.getAttribute("role") === "row" || o.getAttribute("row-type") === "default") && (o.columnDefinitions = this.columnDefinitions);
@@ -450,11 +439,7 @@ const m = {
       }
     }, this.#o = {
       handleChange(e, t) {
-        /* v8 ignore else -- @preserve */
-        if (t === "columnDefinitions") {
-          /* v8 ignore else -- @preserve */
-          e.$fastController.isConnected && e.toggleGeneratedHeader();
-        }
+        t === "columnDefinitions" && e.$fastController.isConnected && e.toggleGeneratedHeader();
       }
     }, this._resetSelection = (e = !1) => {
       const t = Array.from(
@@ -510,7 +495,6 @@ const m = {
    * @internal
    */
   gridTemplateColumnsChanged() {
-    /* v8 ignore if -- @preserve */
     this.$fastController.isConnected && (this.updateRowIndexes(), this.fixedColumns && this.fixedColumns > 0 && this.applyFixedColumns());
   }
   /**
@@ -529,15 +513,12 @@ const m = {
     }
     this.generatedGridTemplateColumns = k.generateTemplateColumns(
       this.columnDefinitions
-    );
-    /* v8 ignore if -- @preserve */
-    this.$fastController.isConnected && (this.columnDefinitionsStale = !0, this.queueRowIndexUpdate());
+    ), this.$fastController.isConnected && (this.columnDefinitionsStale = !0, this.queueRowIndexUpdate());
   }
   /**
    * @internal
    */
   headerCellItemTemplateChanged() {
-    /* v8 ignore if -- @preserve */
     this.$fastController.isConnected && this.generatedHeader !== null && (this.generatedHeader.headerCellItemTemplate = this.headerCellItemTemplate);
   }
   /**
@@ -556,7 +537,6 @@ const m = {
    * @internal
    */
   fixedColumnsChanged() {
-    /* v8 ignore if -- @preserve */
     this.$fastController.isConnected && (this.applyFixedColumns(), this.setupResizeObserver());
   }
   /**
@@ -571,11 +551,7 @@ const m = {
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback();
-    /* v8 ignore else -- @preserve */
-    this.rowItemTemplate === void 0 && (this.rowItemTemplate = this.defaultRowItemTemplate);
-    /* v8 ignore else -- @preserve */
-    this.behaviorOrchestrator === null && (this.behaviorOrchestrator = A.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
+    super.connectedCallback(), this.rowItemTemplate === void 0 && (this.rowItemTemplate = this.defaultRowItemTemplate), this.behaviorOrchestrator === null && (this.behaviorOrchestrator = A.create(this), this.$fastController.addBehavior(this.behaviorOrchestrator), this.behaviorOrchestrator.addBehaviorFactory(
       new L(
         T((e) => e.rowsData),
         T((e) => e.rowItemTemplate),
@@ -672,12 +648,10 @@ const m = {
         this.focusOnCell(t, this.focusColumnIndex, !1);
         break;
       case K: {
-        /* v8 ignore else -- @preserve */
         e.ctrlKey && (e.preventDefault(), this.focusOnCell(0, 0, !0));
         break;
       }
       case M: {
-        /* v8 ignore else -- @preserve */
         e.ctrlKey && this.columnDefinitions !== null && (e.preventDefault(), this.focusOnCell(
           this.rowElements.length - 1,
           this.columnDefinitions.length - 1,
@@ -698,9 +672,7 @@ const m = {
       const e = document.createElement(
         this.rowElementTag
       );
-      this.generatedHeader = e, this.generatedHeader.columnDefinitions = this.columnDefinitions, this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns, this.generatedHeader.rowType = this.generateHeader === b.sticky ? g.stickyHeader : g.header;
-      /* v8 ignore else -- @preserve */
-      this.firstChild !== null && this.insertBefore(e, this.firstChild);
+      this.generatedHeader = e, this.generatedHeader.columnDefinitions = this.columnDefinitions, this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns, this.generatedHeader.rowType = this.generateHeader === b.sticky ? g.stickyHeader : g.header, this.firstChild !== null && this.insertBefore(e, this.firstChild);
       return;
     }
   }
@@ -761,10 +733,8 @@ const m = {
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((l, o) => {
-        /* v8 ignore else -- @preserve */
         if (o < t.length) {
           const n = t[o];
-          /* v8 ignore else -- @preserve */
           typeof n.setFixedPosition == "function" && n.setFixedPosition(`${l}px`);
         }
       });
@@ -797,10 +767,8 @@ const m = {
         '[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]'
       );
       this.fixedColumnsPositions.forEach((l, o) => {
-        /* v8 ignore else -- @preserve */
         if (o < t.length) {
           const n = t[o];
-          /* v8 ignore else -- @preserve */
           typeof n.setFixedPosition == "function" && n.setFixedPosition(void 0);
         }
       });

package/date-picker/definition.cjs

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

package/date-picker/definition.js

@@ -1,5 +1,5 @@
 import { p as popupDefinition } from '../unbundled/definition5.js';
-import { b as buttonDefinition } from '../unbundled/definition.js';
+import { b as buttonDefinition } from '../unbundled/definition2.js';
 import { textFieldDefinition } from '../text-field/definition.js';
 import { dividerDefinition } from '../divider/definition.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from '../unbundled/picker-field.template.js';

package/date-range-picker/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const button_definition = require('../unbundled/definition.cjs');
+const button_definition = require('../unbundled/definition2.cjs');
 const popup_definition = require('../unbundled/definition5.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const divider_definition = require('../divider/definition.cjs');
@@ -204,11 +204,9 @@ class DateRangePicker extends calendarPicker_template.MinMaxCalendarPicker(
    */
   connectedCallback() {
     super.connectedCallback();
-    /* v8 ignore else -- @preserve */
     if (!this.start) {
       this.start = this.initialStart;
     }
-    /* v8 ignore else -- @preserve */
     if (!this.end) {
       this.end = this.initialEnd;
     }

package/date-range-picker/definition.js

@@ -1,4 +1,4 @@
-import { b as buttonDefinition } from '../unbundled/definition.js';
+import { b as buttonDefinition } from '../unbundled/definition2.js';
 import { p as popupDefinition } from '../unbundled/definition5.js';
 import { textFieldDefinition } from '../text-field/definition.js';
 import { dividerDefinition } from '../divider/definition.js';
@@ -200,11 +200,9 @@ class DateRangePicker extends MinMaxCalendarPicker(
    */
   connectedCallback() {
     super.connectedCallback();
-    /* v8 ignore else -- @preserve */
     if (!this.start) {
       this.start = this.initialStart;
     }
-    /* v8 ignore else -- @preserve */
     if (!this.end) {
       this.end = this.initialEnd;
     }

package/date-range-picker/index.cjs

@@ -1 +1 @@
-"use strict";const m=require("../bundled/definition3.cjs"),_=require("../bundled/definition9.cjs"),D=require("../bundled/definition10.cjs"),P=require("../bundled/definition15.cjs"),n=require("../bundled/vivid-element.cjs"),u=require("../bundled/picker-field.template.cjs"),r=require("../bundled/calendar-picker.template.cjs"),g=require("../bundled/definition14.cjs"),c=(i,t)=>`${i} – ${t}`,p=(i,t)=>c(r.formatPresentationDate(i.start,t),r.formatPresentationDate(i.end,t)),f=(i,t)=>{const e=i.trim().split(/[\s—–-]+/);if(e.length!==2)throw new Error(`Invalid date range: ${i}`);const[a,s]=e.map(h=>r.parsePresentationDate(h,t));return{start:a,end:s}};var V=Object.defineProperty,k=Object.getOwnPropertyDescriptor,o=(i,t,e,a)=>{for(var s=a>1?void 0:a?k(t,e):t,h=i.length-1,d;h>=0;h--)(d=i[h])&&(s=(a?d(t,e,s):d(s))||s);return a&&s&&V(t,e,s),s};const v=i=>typeof i=="string";function b(i){return!!i}class l extends r.MinMaxCalendarPicker(r.CalendarPicker(u.PickerField)){constructor(){super(...arguments),this.initialStart="",this.initialEnd="",this.#e=!1,this.start="",this.end="",this.setFormValue=(t,e)=>{v(t)||super.setFormValue(t,e)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize="30"}initialStartChanged(){this.dirtyValue||(this.start=this.initialStart,this.dirtyValue=!1)}initialEndChanged(){this.dirtyValue||(this.end=this.initialEnd,this.dirtyValue=!1)}#e;startChanged(){if(this.start&&!r.isValidDateStr(this.start)){this.start="";return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#i()}endChanged(){if(this.end&&!r.isValidDateStr(this.end)){this.end="";return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#i()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(t){this.#e=!0,t.start!==void 0&&(this.start=t.start,this.$emit("input:start")),t.end!==void 0&&(this.end=t.end,this.$emit("input:end")),this.#e=!1,this.$emit("input"),this.$emit("change"),this.#i()}#i(){if(this.start&&this.end){if(r.compareDateStr(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=c(this.start,this.end)}else this.value="";this._updatePresentationValue();const t=this.start||this.end;t&&this._adjustSelectedMonthToEnsureVisibilityOf(t),this.#a()}_updatePresentationValue(){this.start&&this.end?this._presentationValue=p({start:this.start,end:this.end},this.locale.calendarPicker):this._presentationValue=""}nameChanged(t,e){super.nameChanged(t,e),this.#a()}#a(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{const t=new FormData;t.append(this.name,this.start),t.append(this.name,this.end),this.setFormValue(t)}}connectedCallback(){super.connectedCallback();/* v8 ignore else -- @preserve */this.start||(this.start=this.initialStart);/* v8 ignore else -- @preserve */this.end||(this.end=this.initialEnd)}#r(){const t=[this.start,this.end].filter(b),e=t.length===1;this._hoverDate&&e&&t.push(this._hoverDate);const[a,s]=t.sort(r.compareDateStr);return{start:a,end:s}}_isDateAriaSelected(t){return this._isDateInSelectedRange(t)}_isDateInSelectedRange(t){const{start:e,end:a}=this.#r();return e&&a?r.compareDateStr(t,e)>=0&&r.compareDateStr(t,a)<=0:!1}_isDateRangeStart(t){return t===this.#r().start}_isDateRangeEnd(t){return t===this.#r().end}_getSelectedDates(){const t=[];return this.start&&t.push(this.start),this.end&&t.push(this.end),t}_onDateClick(t){this.start&&this.end?this.#t({start:t,end:""}):this.start?(this.#t({end:t}),this._closePopup()):this.end?(this.#t({start:t}),this._closePopup()):this.#t({start:t})}get _textFieldPlaceholder(){return c(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===""){this.#t({start:"",end:""});return}try{const{start:t,end:e}=f(this._presentationValue,this.locale.calendarPicker);this.#t({start:t,end:e})}catch{const e=this._presentationValue;this.#t({start:"",end:""}),this._presentationValue=e;return}}_onDateMouseEnter(t){this._hoverDate=t}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&r.compareDateStr(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(r.formatPresentationDate(this.min,this.locale.calendarPicker)):this.max&&this.end&&r.compareDateStr(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(r.formatPresentationDate(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue==="")return!1;try{return f(this._presentationValue,this.locale.calendarPicker),!1}catch{return!0}}_onClearClick(){this.#t({start:"",end:""}),super._onClearClick()}formResetCallback(){this.#t({start:this.initialStart,end:this.initialEnd}),super.formResetCallback()}get _pickerButtonLabel(){return this.start&&this.end?this.locale.calendarPicker.changeDatesLabel(p({start:this.start,end:this.end},this.locale.calendarPicker)):this.locale.calendarPicker.chooseDatesLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDatesLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}o([n.attr({mode:"fromView",attribute:"start"})],l.prototype,"initialStart",2);o([n.attr({mode:"fromView",attribute:"end"})],l.prototype,"initialEnd",2);o([n.observable],l.prototype,"start",2);o([n.observable],l.prototype,"end",2);o([n.attr({attribute:"current-start"})],l.prototype,"currentStart",2);o([n.attr({attribute:"current-end"})],l.prototype,"currentEnd",2);o([n.observable],l.prototype,"_numCalendars",2);o([n.observable],l.prototype,"_hoverDate",2);o([n.volatile],l.prototype,"_pickerButtonLabel",1);const S=i=>u.PickerFieldTemplate(i,r.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),C=n.defineVividComponent("date-range-picker",l,S,[m.buttonDefinition,_.popupDefinition,D.textFieldDefinition,P.dividerDefinition,g.visuallyHiddenDefinition],{styles:[u.pickerFieldStyles,r.calendarStyles],shadowOptions:{delegatesFocus:!0}}),y=n.createRegisterFunction(C);y();
+"use strict";const m=require("../bundled/definition3.cjs"),_=require("../bundled/definition9.cjs"),D=require("../bundled/definition10.cjs"),P=require("../bundled/definition15.cjs"),n=require("../bundled/vivid-element.cjs"),u=require("../bundled/picker-field.template.cjs"),r=require("../bundled/calendar-picker.template.cjs"),g=require("../bundled/definition14.cjs"),c=(i,t)=>`${i} – ${t}`,p=(i,t)=>c(r.formatPresentationDate(i.start,t),r.formatPresentationDate(i.end,t)),f=(i,t)=>{const e=i.trim().split(/[\s—–-]+/);if(e.length!==2)throw new Error(`Invalid date range: ${i}`);const[a,s]=e.map(h=>r.parsePresentationDate(h,t));return{start:a,end:s}};var V=Object.defineProperty,k=Object.getOwnPropertyDescriptor,o=(i,t,e,a)=>{for(var s=a>1?void 0:a?k(t,e):t,h=i.length-1,d;h>=0;h--)(d=i[h])&&(s=(a?d(t,e,s):d(s))||s);return a&&s&&V(t,e,s),s};const v=i=>typeof i=="string";function b(i){return!!i}class l extends r.MinMaxCalendarPicker(r.CalendarPicker(u.PickerField)){constructor(){super(...arguments),this.initialStart="",this.initialEnd="",this.#e=!1,this.start="",this.end="",this.setFormValue=(t,e)=>{v(t)||super.setFormValue(t,e)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize="30"}initialStartChanged(){this.dirtyValue||(this.start=this.initialStart,this.dirtyValue=!1)}initialEndChanged(){this.dirtyValue||(this.end=this.initialEnd,this.dirtyValue=!1)}#e;startChanged(){if(this.start&&!r.isValidDateStr(this.start)){this.start="";return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#i()}endChanged(){if(this.end&&!r.isValidDateStr(this.end)){this.end="";return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#i()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(t){this.#e=!0,t.start!==void 0&&(this.start=t.start,this.$emit("input:start")),t.end!==void 0&&(this.end=t.end,this.$emit("input:end")),this.#e=!1,this.$emit("input"),this.$emit("change"),this.#i()}#i(){if(this.start&&this.end){if(r.compareDateStr(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=c(this.start,this.end)}else this.value="";this._updatePresentationValue();const t=this.start||this.end;t&&this._adjustSelectedMonthToEnsureVisibilityOf(t),this.#a()}_updatePresentationValue(){this.start&&this.end?this._presentationValue=p({start:this.start,end:this.end},this.locale.calendarPicker):this._presentationValue=""}nameChanged(t,e){super.nameChanged(t,e),this.#a()}#a(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{const t=new FormData;t.append(this.name,this.start),t.append(this.name,this.end),this.setFormValue(t)}}connectedCallback(){super.connectedCallback(),this.start||(this.start=this.initialStart),this.end||(this.end=this.initialEnd)}#r(){const t=[this.start,this.end].filter(b),e=t.length===1;this._hoverDate&&e&&t.push(this._hoverDate);const[a,s]=t.sort(r.compareDateStr);return{start:a,end:s}}_isDateAriaSelected(t){return this._isDateInSelectedRange(t)}_isDateInSelectedRange(t){const{start:e,end:a}=this.#r();return e&&a?r.compareDateStr(t,e)>=0&&r.compareDateStr(t,a)<=0:!1}_isDateRangeStart(t){return t===this.#r().start}_isDateRangeEnd(t){return t===this.#r().end}_getSelectedDates(){const t=[];return this.start&&t.push(this.start),this.end&&t.push(this.end),t}_onDateClick(t){this.start&&this.end?this.#t({start:t,end:""}):this.start?(this.#t({end:t}),this._closePopup()):this.end?(this.#t({start:t}),this._closePopup()):this.#t({start:t})}get _textFieldPlaceholder(){return c(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===""){this.#t({start:"",end:""});return}try{const{start:t,end:e}=f(this._presentationValue,this.locale.calendarPicker);this.#t({start:t,end:e})}catch{const e=this._presentationValue;this.#t({start:"",end:""}),this._presentationValue=e;return}}_onDateMouseEnter(t){this._hoverDate=t}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&r.compareDateStr(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(r.formatPresentationDate(this.min,this.locale.calendarPicker)):this.max&&this.end&&r.compareDateStr(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(r.formatPresentationDate(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue==="")return!1;try{return f(this._presentationValue,this.locale.calendarPicker),!1}catch{return!0}}_onClearClick(){this.#t({start:"",end:""}),super._onClearClick()}formResetCallback(){this.#t({start:this.initialStart,end:this.initialEnd}),super.formResetCallback()}get _pickerButtonLabel(){return this.start&&this.end?this.locale.calendarPicker.changeDatesLabel(p({start:this.start,end:this.end},this.locale.calendarPicker)):this.locale.calendarPicker.chooseDatesLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDatesLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}o([n.attr({mode:"fromView",attribute:"start"})],l.prototype,"initialStart",2);o([n.attr({mode:"fromView",attribute:"end"})],l.prototype,"initialEnd",2);o([n.observable],l.prototype,"start",2);o([n.observable],l.prototype,"end",2);o([n.attr({attribute:"current-start"})],l.prototype,"currentStart",2);o([n.attr({attribute:"current-end"})],l.prototype,"currentEnd",2);o([n.observable],l.prototype,"_numCalendars",2);o([n.observable],l.prototype,"_hoverDate",2);o([n.volatile],l.prototype,"_pickerButtonLabel",1);const S=i=>u.PickerFieldTemplate(i,r.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),C=n.defineVividComponent("date-range-picker",l,S,[m.buttonDefinition,_.popupDefinition,D.textFieldDefinition,P.dividerDefinition,g.visuallyHiddenDefinition],{styles:[u.pickerFieldStyles,r.calendarStyles],shadowOptions:{delegatesFocus:!0}}),y=n.createRegisterFunction(C);y();

package/date-range-picker/index.js

@@ -126,11 +126,7 @@ class r extends F(
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback();
-    /* v8 ignore else -- @preserve */
-    this.start || (this.start = this.initialStart);
-    /* v8 ignore else -- @preserve */
-    this.end || (this.end = this.initialEnd);
+    super.connectedCallback(), this.start || (this.start = this.initialStart), this.end || (this.end = this.initialEnd);
   }
   #a() {
     const t = [this.start, this.end].filter(L), e = t.length === 1;

package/date-time-picker/definition.cjs

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

package/date-time-picker/definition.js

@@ -1,5 +1,5 @@
 import { p as popupDefinition } from '../unbundled/definition5.js';
-import { b as buttonDefinition } from '../unbundled/definition.js';
+import { b as buttonDefinition } from '../unbundled/definition2.js';
 import { textFieldDefinition } from '../text-field/definition.js';
 import { dividerDefinition } from '../divider/definition.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from '../unbundled/picker-field.template.js';

package/dial-pad/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const button_definition = require('../unbundled/definition.cjs');
+const button_definition = require('../unbundled/definition2.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const icon_definition = require('../icon/definition.cjs');
@@ -11,7 +11,7 @@ const fastElement = require('@microsoft/fast-element');
 const localized = require('../unbundled/localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
-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)}@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(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
+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)}@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(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -259,10 +259,8 @@ function handleKeyDown(x, e) {
   if (e.key === fastWebUtilities.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
     x._onDial();
   } else if (e.key === " " || e.key === "Space") {
-    /* v8 ignore else -- @preserve */
     if (e.target instanceof HTMLInputElement) {
       e.preventDefault();
-      /* v8 ignore else -- @preserve */
       if (!e.repeat) {
         x._startKeyboardLongPress();
       }
@@ -271,7 +269,6 @@ function handleKeyDown(x, e) {
     const elementIndex = DIAL_PAD_BUTTONS.findIndex((x2) => x2.value === e.key);
     if (elementIndex > -1) {
       const digit = x.shadowRoot.querySelector(".digits").children[elementIndex];
-      /* v8 ignore else -- @preserve */
       if (digit) {
         digit.active = true;
         setTimeout(() => {
@@ -283,9 +280,7 @@ function handleKeyDown(x, e) {
   return true;
 }
 function handleKeyUp(x, e) {
-  /* v8 ignore else -- @preserve */
   if (e.key === " " || e.key === "Space") {
-    /* v8 ignore else -- @preserve */
     if (e.target instanceof HTMLInputElement) {
       e.preventDefault();
       const wasLongPress = x._endKeyboardLongPress();
@@ -299,10 +294,8 @@ function handleKeyUp(x, e) {
   return true;
 }
 function handleButtonKeyDown(digit, { parent: dialPad, event }) {
-  /* v8 ignore else -- @preserve */
   if ((event.key === " " || event.key === "Space") && digit.value === "0") {
     event.preventDefault();
-    /* v8 ignore else -- @preserve */
     if (!event.repeat) {
       dialPad._startKeyboardLongPress();
     }
@@ -310,11 +303,9 @@ function handleButtonKeyDown(digit, { parent: dialPad, event }) {
   return true;
 }
 function handleButtonKeyUp(digit, { parent: dialPad, event }) {
-  /* v8 ignore else -- @preserve */
   if ((event.key === " " || event.key === "Space") && digit.value === "0") {
     event.preventDefault();
     const wasLongPress = dialPad._endKeyboardLongPress();
-    /* v8 ignore else -- @preserve */
     if (!wasLongPress && !dialPad.disabled && !dialPad.callActive) {
       onDigitClick(digit, {
         parent: dialPad,

package/dial-pad/definition.js

@@ -1,13 +1,13 @@
-import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
+import { B as Button, b as buttonDefinition } from '../unbundled/definition2.js';
 import { VwcTextFieldElement as TextField, textFieldDefinition } from '../text-field/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { VwcVisuallyHiddenElement as VisuallyHidden, visuallyHiddenDefinition } from '../visually-hidden/definition.js';
-import { attr, observable, when, html, repeat, ref } from '@microsoft/fast-element';
+import { attr, observable, when, html, ref, repeat } from '@microsoft/fast-element';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames, keyEnter } from '@microsoft/fast-web-utilities';
 
-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)}@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(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
+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)}@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(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -255,10 +255,8 @@ 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 if (e.key === " " || e.key === "Space") {
-    /* v8 ignore else -- @preserve */
     if (e.target instanceof HTMLInputElement) {
       e.preventDefault();
-      /* v8 ignore else -- @preserve */
       if (!e.repeat) {
         x._startKeyboardLongPress();
       }
@@ -267,7 +265,6 @@ function handleKeyDown(x, e) {
     const elementIndex = DIAL_PAD_BUTTONS.findIndex((x2) => x2.value === e.key);
     if (elementIndex > -1) {
       const digit = x.shadowRoot.querySelector(".digits").children[elementIndex];
-      /* v8 ignore else -- @preserve */
       if (digit) {
         digit.active = true;
         setTimeout(() => {
@@ -279,9 +276,7 @@ function handleKeyDown(x, e) {
   return true;
 }
 function handleKeyUp(x, e) {
-  /* v8 ignore else -- @preserve */
   if (e.key === " " || e.key === "Space") {
-    /* v8 ignore else -- @preserve */
     if (e.target instanceof HTMLInputElement) {
       e.preventDefault();
       const wasLongPress = x._endKeyboardLongPress();
@@ -295,10 +290,8 @@ function handleKeyUp(x, e) {
   return true;
 }
 function handleButtonKeyDown(digit, { parent: dialPad, event }) {
-  /* v8 ignore else -- @preserve */
   if ((event.key === " " || event.key === "Space") && digit.value === "0") {
     event.preventDefault();
-    /* v8 ignore else -- @preserve */
     if (!event.repeat) {
       dialPad._startKeyboardLongPress();
     }
@@ -306,11 +299,9 @@ function handleButtonKeyDown(digit, { parent: dialPad, event }) {
   return true;
 }
 function handleButtonKeyUp(digit, { parent: dialPad, event }) {
-  /* v8 ignore else -- @preserve */
   if ((event.key === " " || event.key === "Space") && digit.value === "0") {
     event.preventDefault();
     const wasLongPress = dialPad._endKeyboardLongPress();
-    /* v8 ignore else -- @preserve */
     if (!wasLongPress && !dialPad.disabled && !dialPad.callActive) {
       onDigitClick(digit, {
         parent: dialPad,

package/dial-pad/index.cjs

@@ -1,4 +1,4 @@
-"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"),k=require("../bundled/class-names.cjs"),w=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(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{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})=>k.classNames("base",["no-input",!!n]);function x(n,t){if(t.key===w.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"
+"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"),L=require("../bundled/ref.cjs"),y=require("../bundled/repeat.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(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{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")t.target instanceof HTMLInputElement&&(t.preventDefault(),t.repeat||n._startKeyboardLongPress());else{const e=_.findIndex(a=>a.value===t.key);if(e>-1){const a=n.shadowRoot.querySelector(".digits").children[e];a&&(a.active=!0,setTimeout(()=>{a.active=!1},200))}}return!0}function C(n,t){return(t.key===" "||t.key==="Space")&&t.target instanceof HTMLInputElement&&(t.preventDefault(),!n._endKeyboardLongPress()&&!n.disabled&&!n.callActive&&(n.value+=" ",n.$emit("input"),n.$emit("change"))),!0}function E(n,{parent:t,event:e}){return(e.key===" "||e.key==="Space")&&n.value==="0"&&(e.preventDefault(),e.repeat||t._startKeyboardLongPress()),!0}function D(n,{parent:t,event:e}){return(e.key===" "||e.key==="Space")&&n.value==="0"&&(e.preventDefault(),!t._endKeyboardLongPress()&&!t.disabled&&!t.callActive&&m(n,{parent:t,event:new MouseEvent("click",{bubbles:!0})})),!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}"