@vonage/vivid 5.1.0 → 5.2.0

package/combobox/index.js

@@ -1,41 +1,44 @@
 import { i as k } from "../bundled/definition2.js";
-import { P as I, p as $ } from "../bundled/definition9.js";
-import { l as O } from "../bundled/definition10.js";
-import { s as C } from "../bundled/text-field.js";
-import { D as S, O as f, a as l, o as v, h, c as A, d as V } from "../bundled/vivid-element.js";
-import { W as D, f as T } from "../bundled/mixins.js";
-import { L as b } from "../bundled/listbox.js";
-import { F } from "../bundled/form-associated.js";
-import { W as H } from "../bundled/with-error-text.js";
-import { W as B } from "../bundled/with-success-text.js";
-import { F as L } from "../bundled/form-element.js";
-import { b as E, a as R, I as W } from "../bundled/affix.js";
-import { u as P } from "../bundled/strings.js";
-import { l as z } from "../bundled/numbers.js";
-import { h as M } from "../bundled/index.js";
-import { c as q } from "../bundled/definition3.js";
+import { P as $, p as I } from "../bundled/definition9.js";
+import { l as C } from "../bundled/definition10.js";
+import { s as O } from "../bundled/text-field.js";
+import { D as S, O as v, a as l, o as b, h as u, c as A, d as V } from "../bundled/vivid-element.js";
+import { W as D, f as H } from "../bundled/mixins.js";
+import { L as m } from "../bundled/listbox.js";
+import { F as T } from "../bundled/form-associated.js";
+import { W as F } from "../bundled/with-contextual-help.js";
+import { W as B } from "../bundled/with-error-text.js";
+import { W as L } from "../bundled/with-success-text.js";
+import { F as E } from "../bundled/form-element.js";
+import { b as W, a as R, I as P } from "../bundled/affix.js";
+import { u as z } from "../bundled/strings.js";
+import { l as M } from "../bundled/numbers.js";
+import { h as q } from "../bundled/index.js";
+import { c as K } from "../bundled/definition3.js";
 import { r as d } from "../bundled/ref.js";
-import { s as m } from "../bundled/slotted.js";
-import { c as K } from "../bundled/class-names.js";
-import { w as N } from "../bundled/when.js";
-const U = '.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}', p = {
+import { s as h } from "../bundled/slotted.js";
+import { c as N } from "../bundled/class-names.js";
+import { w as U } from "../bundled/when.js";
+const j = '.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}', p = {
   inline: "inline",
   list: "list",
   both: "both",
   none: "none"
 };
-var j = Object.defineProperty, s = (a, t, e, o) => {
-  for (var r = void 0, n = a.length - 1, c; n >= 0; n--)
-    (c = a[n]) && (r = c(t, e, r) || r);
-  return r && j(t, e, r), r;
+var Y = Object.defineProperty, n = (a, t, e, o) => {
+  for (var r = void 0, s = a.length - 1, c; s >= 0; s--)
+    (c = a[s]) && (r = c(t, e, r) || r);
+  return r && Y(t, e, r), r;
 };
-class i extends D(
-  H(
-    B(L(E(F(b))))
+class i extends F(
+  D(
+    B(
+      L(E(W(T(m))))
+    )
   )
 ) {
   constructor() {
-    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = P("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
+    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = z("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
   }
   /**
    * Reset the element to its first selectable option when its parent form is reset.
@@ -80,10 +83,10 @@ class i extends D(
    * Overrides `Listbox.options`.
    */
   get options() {
-    return f.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
+    return v.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
   }
   set options(t) {
-    this._options = t, f.notify(this, "options");
+    this._options = t, v.notify(this, "options");
   }
   /**
    * Updates the placeholder on the proxy element.
@@ -99,8 +102,8 @@ class i extends D(
     if (this.$fastController.isConnected && this.options) {
       const o = this.options.findIndex(
         (c) => c.text.toLowerCase() === e.toLowerCase()
-      ), r = this.options[this.selectedIndex]?.text, n = this.options[o]?.text;
-      this.selectedIndex = r !== n ? o : this.selectedIndex;
+      ), r = this.options[this.selectedIndex]?.text, s = this.options[o]?.text;
+      this.selectedIndex = r !== s ? o : this.selectedIndex;
     }
     super.valueChanged(t, e);
   }
@@ -111,7 +114,7 @@ class i extends D(
    * @internal
    */
   clickHandler(t) {
-    if (!this.disabled) {
+    if (!(this.disabled || this._isFromContextualHelp(t))) {
       if (this.open) {
         const e = t.target.closest(
           "option,[role=option],[data-vvd-component=option]"
@@ -242,7 +245,7 @@ class i extends D(
    */
   selectedIndexChanged(t, e) {
     if (this.$fastController.isConnected) {
-      if (e = z(-1, this.options.length - 1, e), e !== this.selectedIndex) {
+      if (e = M(-1, this.options.length - 1, e), e !== this.selectedIndex) {
         this.selectedIndex = e;
         return;
       }
@@ -351,57 +354,57 @@ class i extends D(
     this.control.setSelectionRange(t, t);
   }
 }
-s([
+n([
   l({ attribute: "autocomplete", mode: "fromView" })
 ], i.prototype, "autocomplete");
-s([
+n([
   l
 ], i.prototype, "appearance");
-s([
+n([
   l
 ], i.prototype, "shape");
-s([
+n([
   l()
 ], i.prototype, "scale");
-s([
+n([
   l
 ], i.prototype, "placement");
-s([
+n([
   l({ mode: "boolean", attribute: "fixed-dropdown" })
 ], i.prototype, "fixedDropdown");
-s([
-  v
+n([
+  b
 ], i.prototype, "metaSlottedContent");
-s([
-  v
+n([
+  b
 ], i.prototype, "maxHeight");
-s([
+n([
   l({ attribute: "open", mode: "boolean" })
 ], i.prototype, "open");
-s([
+n([
   l
 ], i.prototype, "placeholder");
-const Y = ({
+const G = ({
   icon: a,
   iconSlottedContent: t,
   metaSlottedContent: e,
   errorValidationMessage: o,
   successText: r,
-  shape: n,
+  shape: s,
   scale: c,
   disabled: x,
   placeholder: g,
   label: _,
-  appearance: u,
+  appearance: f,
   open: w,
   _activeDescendant: y
-}) => K(
+}) => N(
   "base",
   ["disabled", x],
-  [`shape-${n}`, !!n],
+  [`shape-${s}`, !!s],
   [`size-${c}`, !!c],
   ["placeholder", !!g],
-  [`appearance-${u}`, !!u],
+  [`appearance-${f}`, !!f],
   ["no-label", !_],
   ["has-icon", !!a || !!t?.length],
   ["has-meta", !!e?.length],
@@ -409,22 +412,26 @@ const Y = ({
   ["error", !!o],
   ["success", !!r]
 );
-function G() {
-  return h` <label for="control" class="label">
+function J() {
+  return u` <label for="control" class="label">
 		${(a) => a.label}
 	</label>`;
 }
-function J(a) {
+function Q(a) {
   return a.open && a.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
     a.getBoundingClientRect().width
   )}px` : null;
 }
-function Q(a) {
-  const t = R(a), e = q(a);
-  return h` <div class="${Y}" ${d("_anchor")}>
-		${N((o) => o.label, G())}
+function X(a) {
+  const t = R(a), e = K(a);
+  return u` <div class="${G}" ${d("_anchor")}>
+		${U((o) => o.label, J())}
+		<slot
+			name="contextual-help"
+			${h("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
-			${(o) => t(o.icon, W.Slot)}
+			${(o) => t(o.icon, P.Slot)}
 			<div class="wrapper">
 				<input
 					id="control"
@@ -446,7 +453,7 @@ function Q(a) {
 				/>
 			</div>
 			<div class="leading-items-wrapper">
-				<slot name="meta" ${m("metaSlottedContent")}></slot>
+				<slot name="meta" ${h("metaSlottedContent")}></slot>
 				<div
 					@click="${(o, r) => o._chevronIconClickHandler(r.event)}"
 				>
@@ -456,19 +463,19 @@ function Q(a) {
 		</div>
 	</div>`;
 }
-const X = (a) => {
-  const t = a.tagFor(I);
-  return h`
+const Z = (a) => {
+  const t = a.tagFor($);
+  return u`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
 			@click="${(e, o) => e.clickHandler(o.event)}"
 			@focusout="${(e, o) => e.focusoutHandler(o.event)}"
-			@keydown="${(e, { event: o }) => (e.open && M(o), e.keydownHandler(o))}"
+			@keydown="${(e, { event: o }) => (e.open && q(o), e.keydownHandler(o))}"
 		>
 			<div class="control-wrapper">
-				${() => Q(a)}
+				${() => X(a)}
 				<${t} class="popup"
-					style="${J}"
+					style="${Q}"
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
@@ -478,8 +485,8 @@ const X = (a) => {
 						role="listbox"
 						?disabled="${(e) => e.disabled}"
 						${d("listbox")}>
-						<slot ${m({
-    filter: b.slottedOptionFilter,
+						<slot ${h({
+    filter: m.slottedOptionFilter,
     flatten: !0,
     property: "slottedOptions"
   })}>
@@ -492,21 +499,21 @@ const X = (a) => {
 			</div>
     </template>
 	`;
-}, Z = V(
+}, ee = V(
   "combobox",
   i,
-  X,
+  Z,
   [
     k,
-    $,
-    O,
-    T
+    I,
+    C,
+    H
   ],
   {
-    styles: [C, U],
+    styles: [O, j],
     shadowOptions: {
       delegatesFocus: !0
     }
   }
-), ee = A(Z);
-ee();
+), te = A(ee);
+te();

package/custom-elements.json

@@ -1487,6 +1487,59 @@
               "kind": "method",
               "name": "srcChanged"
             },
+            {
+              "kind": "method",
+              "name": "revokeSrc",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentSrc",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "canPlayType",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setSrc",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "blob",
+                  "optional": true,
+                  "type": {
+                    "text": "Blob"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "playbackRate"
@@ -8045,6 +8098,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns"
+            },
             {
               "name": "WithFeedback",
               "module": "/src/shared/feedback/mixins"
@@ -15562,6 +15619,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns/form-elements/with-contextual-help"
+            },
             {
               "name": "WithFeedback",
               "module": "/src/shared/feedback/mixins"
@@ -16340,6 +16401,16 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "offset",
+              "type": {
+                "text": "number | null"
+              },
+              "default": "null",
+              "description": "Adds offset to the popup",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "menuItems",
@@ -16680,6 +16751,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "offset",
+              "type": {
+                "text": "number | null"
+              },
+              "default": "null",
+              "description": "Adds offset to the popup",
+              "fieldName": "offset"
+            },
             {
               "name": "placement",
               "type": {
@@ -19618,7 +19698,7 @@
           "mixins": [
             {
               "name": "WithContextualHelp",
-              "module": "/src/shared/patterns/form-elements/with-contextual-help"
+              "module": "/src/shared/patterns"
             },
             {
               "name": "WithFeedback",
@@ -25312,6 +25392,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns"
+            },
             {
               "name": "WithFeedback",
               "module": "/src/shared/feedback/mixins"
@@ -26293,6 +26377,10 @@
               "name": "WithLightDOMFeedback",
               "module": "/src/shared/feedback/mixins"
             },
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns"
+            },
             {
               "name": "WithErrorText",
               "module": "/src/shared/patterns"
@@ -32127,7 +32215,7 @@
           "mixins": [
             {
               "name": "WithContextualHelp",
-              "module": "/src/shared/patterns/form-elements/with-contextual-help"
+              "module": "/src/shared/patterns"
             },
             {
               "name": "WithFeedback",
@@ -33113,7 +33201,7 @@
           "mixins": [
             {
               "name": "WithContextualHelp",
-              "module": "/src/shared/patterns/form-elements/with-contextual-help"
+              "module": "/src/shared/patterns"
             },
             {
               "name": "WithLightDOMFeedback",
@@ -40606,6 +40694,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "WithContextualHelp",
+              "module": "/src/shared/patterns"
+            },
             {
               "name": "WithFeedback",
               "module": "/src/shared/feedback/mixins"

package/dial-pad/definition.cjs

@@ -6,6 +6,7 @@ const button_definition = require('../unbundled/definition.cjs');
 const textField_definition = require('../text-field/definition.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const icon_definition = require('../icon/definition.cjs');
+const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
 const localized = require('../unbundled/localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
@@ -40,9 +41,22 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
      * @internal
      */
     this._onDial = () => {
+      const invalid = !this._textFieldEl.checkValidity();
+      if (invalid) {
+        this._announceValidationError(
+          this._textFieldEl.errorValidationMessage ?? ""
+        );
+      } else {
+        this._clearErrorAnnouncement();
+      }
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
     this.autofocus = false;
+    this._errorAnnouncement = "";
+    /**
+     * @internal
+     */
+    this._forceAnnouncementToggle = false;
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -60,6 +74,27 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
     const firstFocusableEl = this._textFieldEl || digitBtns?.[0];
     firstFocusableEl?.focus();
   }
+  /**
+   * @internal
+   */
+  _announceValidationError(message) {
+    this._errorAnnouncement = "";
+    window.queueMicrotask(() => {
+      if (message) {
+        this._forceAnnouncementToggle = !this._forceAnnouncementToggle;
+        this._errorAnnouncement = `${message}${this._forceAnnouncementToggle ? "​" : ""}`;
+      } else {
+        this._clearErrorAnnouncement();
+      }
+    });
+  }
+  /**
+   * @internal
+   */
+  _clearErrorAnnouncement() {
+    this._errorAnnouncement = "";
+    this._forceAnnouncementToggle = false;
+  }
 }
 __decorateClass([
   fastElement.attr({ attribute: "helper-text" })
@@ -97,6 +132,9 @@ __decorateClass([
 __decorateClass([
   fastElement.attr({ mode: "boolean" })
 ], DialPad.prototype, "autofocus");
+__decorateClass([
+  fastElement.observable
+], DialPad.prototype, "_errorAnnouncement");
 
 class DialPadButton {
   constructor(value, label, ariaLabel, icon, id) {
@@ -240,14 +278,21 @@ function renderDialButton(buttonTag) {
         label="${(x) => x.callActive ? x.endCallButtonLabel || x.locale.dialPad.endCallButtonLabel : x.callButtonLabel || x.locale.dialPad.callButtonLabel}">
     </${buttonTag}>`;
 }
+function renderErrorAnnouncement(visuallyHiddenTag) {
+  return fastElement.html`<${visuallyHiddenTag} role="alert" aria-atomic="true">
+		${(x) => `${x.locale.dialPad.errorLabel} ${x._errorAnnouncement}`}
+	</${visuallyHiddenTag}>`;
+}
 const DialPadTemplate = (context) => {
   const buttonTag = context.tagFor(button_definition.Button);
   const iconTag = context.tagFor(icon_definition.VwcIconElement);
   const textFieldTag = context.tagFor(textField_definition.VwcTextFieldElement);
+  const visuallyHiddenTag = context.tagFor(visuallyHidden_definition.VwcVisuallyHiddenElement);
   return fastElement.html` <div class="${getClasses}">
 		${fastElement.when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
 		${fastElement.when((x) => !x.noCall, renderDialButton(buttonTag))}
+		${renderErrorAnnouncement(visuallyHiddenTag)}
 	</div>`;
 };
 
@@ -255,7 +300,12 @@ const dialPadDefinition = vividElement.defineVividComponent(
   "dial-pad",
   DialPad,
   DialPadTemplate,
-  [button_definition.buttonDefinition, textField_definition.textFieldDefinition, icon_definition.iconDefinition],
+  [
+    button_definition.buttonDefinition,
+    textField_definition.textFieldDefinition,
+    icon_definition.iconDefinition,
+    visuallyHidden_definition.visuallyHiddenDefinition
+  ],
   {
     styles
   }