@vonage/vivid 5.1.0 → 5.3.0

package/dial-pad/index.js

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

package/dialog/definition.cjs

@@ -269,7 +269,9 @@ function icon(iconTag) {
 	`;
 }
 function headline() {
-  return fastElement.html` <h2 class="headline">${(x) => x.headline}</h2> `;
+  return fastElement.html`
+		<h2 class="headline" id="dialog-headline">${(x) => x.headline}</h2>
+	`;
 }
 function subtitle() {
   return fastElement.html` <h3 class="subtitle">${(x) => x.subtitle}</h3> `;
@@ -301,6 +303,7 @@ const DialogTemplate = (context) => {
 				${delegatesAria.delegateAria({
     ariaModal: (x) => String(x._openedAsModal)
   })}
+				aria-labelledby="${(x) => x.headline ? "dialog-headline" : null}"
 		>
 			<slot name="main">
 				<div class="main-wrapper">

package/dialog/definition.js

@@ -265,7 +265,9 @@ function icon(iconTag) {
 	`;
 }
 function headline() {
-  return html` <h2 class="headline">${(x) => x.headline}</h2> `;
+  return html`
+		<h2 class="headline" id="dialog-headline">${(x) => x.headline}</h2>
+	`;
 }
 function subtitle() {
   return html` <h3 class="subtitle">${(x) => x.subtitle}</h3> `;
@@ -297,6 +299,7 @@ const DialogTemplate = (context) => {
 				${delegateAria({
     ariaModal: (x) => String(x._openedAsModal)
   })}
+				aria-labelledby="${(x) => x.headline ? "dialog-headline" : null}"
 		>
 			<slot name="main">
 				<div class="main-wrapper">

package/dialog/index.cjs

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