@vonage/vivid 4.23.0 → 4.25.0

package/shared/definition20.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const definition$1 = require('./definition65.cjs');
+const definition$1 = require('./definition67.cjs');
 const definition = require('./definition11.cjs');
-const definition$2 = require('./definition57.cjs');
+const definition$2 = require('./definition58.cjs');
 const definition$3 = require('./definition23.cjs');
 const pickerField_template = require('./picker-field.template.cjs');
 const calendarPicker_template = require('./calendar-picker.template.cjs');
@@ -10,7 +10,6 @@ const vividElement = require('./vivid-element.cjs');
 const timeSelectionPicker_template = require('./time-selection-picker.template.cjs');
 const singleValuePicker = require('./single-value-picker.cjs');
 const singleDatePicker = require('./single-date-picker.cjs');
-const formElements = require('./form-elements.cjs');
 
 const styles = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}";
 
@@ -37,13 +36,12 @@ const parsePresentationDateTime = (presentationDateTime, locale, use12HourClock)
 };
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const ValidDateTimeFilter = {
@@ -57,7 +55,7 @@ const ValidDateTimeFilter = {
     return value;
   }
 };
-exports.DateTimePicker = class DateTimePicker extends timeSelectionPicker_template.TimeSelectionPicker(
+class DateTimePicker extends timeSelectionPicker_template.TimeSelectionPicker(
   singleDatePicker.SingleDatePickerMixin(singleValuePicker.SingleValuePicker(calendarPicker_template.CalendarPicker(pickerField_template.PickerField)))
 ) {
   constructor() {
@@ -217,29 +215,25 @@ exports.DateTimePicker = class DateTimePicker extends timeSelectionPicker_templa
   get _dialogLabel() {
     return this.locale.dateTimePicker.chooseDateTimeLabel;
   }
-};
+}
 __decorateClass([
   vividElement.attr({ converter: ValidDateTimeFilter })
-], exports.DateTimePicker.prototype, "min", 2);
+], DateTimePicker.prototype, "min");
 __decorateClass([
   vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "min-time" })
-], exports.DateTimePicker.prototype, "minTime", 2);
+], DateTimePicker.prototype, "minTime");
 __decorateClass([
   vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "min-date" })
-], exports.DateTimePicker.prototype, "minDate", 2);
+], DateTimePicker.prototype, "minDate");
 __decorateClass([
   vividElement.attr({ converter: ValidDateTimeFilter })
-], exports.DateTimePicker.prototype, "max", 2);
+], DateTimePicker.prototype, "max");
 __decorateClass([
   vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "max-time" })
-], exports.DateTimePicker.prototype, "maxTime", 2);
+], DateTimePicker.prototype, "maxTime");
 __decorateClass([
   vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "max-date" })
-], exports.DateTimePicker.prototype, "maxDate", 2);
-exports.DateTimePicker = __decorateClass([
-  formElements.errorText,
-  formElements.formElements
-], exports.DateTimePicker);
+], DateTimePicker.prototype, "maxDate");
 
 const DateTimePickerTemplate = (context) => {
   return pickerField_template.PickerFieldTemplate(
@@ -261,7 +255,7 @@ const DateTimePickerTemplate = (context) => {
 
 const dateTimePickerDefinition = vividElement.defineVividComponent(
   "date-time-picker",
-  exports.DateTimePicker,
+  DateTimePicker,
   DateTimePickerTemplate,
   [
     definition.buttonDefinition,
@@ -281,5 +275,6 @@ const registerDateTimePicker = vividElement.createRegisterFunction(
   dateTimePickerDefinition
 );
 
+exports.DateTimePicker = DateTimePicker;
 exports.dateTimePickerDefinition = dateTimePickerDefinition;
 exports.registerDateTimePicker = registerDateTimePicker;

package/shared/definition20.js

@@ -1,14 +1,13 @@
-import { p as popupDefinition } from './definition65.js';
+import { p as popupDefinition } from './definition67.js';
 import { b as buttonDefinition } from './definition11.js';
-import { t as textFieldDefinition } from './definition57.js';
+import { t as textFieldDefinition } from './definition58.js';
 import { d as dividerDefinition } from './definition23.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
 import { i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, C as CalendarPicker, d as currentDateStr, b as compareDateStr, V as ValidDateFilter, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
-import { a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { b as isValidTimeStr, f as formatPresentationTime, p as parsePresentationTime, c as TimeSelectionPicker, d as compareTimeStr, V as ValidTimeFilter, a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition } from './time-selection-picker.template.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
 import { S as SingleDatePickerMixin } from './single-date-picker.js';
-import { e as errorText, f as formElements } from './form-elements.js';
 
 const styles = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}";
 
@@ -35,13 +34,12 @@ const parsePresentationDateTime = (presentationDateTime, locale, use12HourClock)
 };
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const ValidDateTimeFilter = {
@@ -55,7 +53,7 @@ const ValidDateTimeFilter = {
     return value;
   }
 };
-let DateTimePicker = class extends TimeSelectionPicker(
+class DateTimePicker extends TimeSelectionPicker(
   SingleDatePickerMixin(SingleValuePicker(CalendarPicker(PickerField)))
 ) {
   constructor() {
@@ -215,29 +213,25 @@ let DateTimePicker = class extends TimeSelectionPicker(
   get _dialogLabel() {
     return this.locale.dateTimePicker.chooseDateTimeLabel;
   }
-};
+}
 __decorateClass([
   attr({ converter: ValidDateTimeFilter })
-], DateTimePicker.prototype, "min", 2);
+], DateTimePicker.prototype, "min");
 __decorateClass([
   attr({ converter: ValidTimeFilter, attribute: "min-time" })
-], DateTimePicker.prototype, "minTime", 2);
+], DateTimePicker.prototype, "minTime");
 __decorateClass([
   attr({ converter: ValidDateFilter, attribute: "min-date" })
-], DateTimePicker.prototype, "minDate", 2);
+], DateTimePicker.prototype, "minDate");
 __decorateClass([
   attr({ converter: ValidDateTimeFilter })
-], DateTimePicker.prototype, "max", 2);
+], DateTimePicker.prototype, "max");
 __decorateClass([
   attr({ converter: ValidTimeFilter, attribute: "max-time" })
-], DateTimePicker.prototype, "maxTime", 2);
+], DateTimePicker.prototype, "maxTime");
 __decorateClass([
   attr({ converter: ValidDateFilter, attribute: "max-date" })
-], DateTimePicker.prototype, "maxDate", 2);
-DateTimePicker = __decorateClass([
-  errorText,
-  formElements
-], DateTimePicker);
+], DateTimePicker.prototype, "maxDate");
 
 const DateTimePickerTemplate = (context) => {
   return PickerFieldTemplate(

package/shared/definition21.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition = require('./definition11.cjs');
-const definition$2 = require('./definition57.cjs');
+const definition$2 = require('./definition58.cjs');
 const vividElement = require('./vivid-element.cjs');
 const definition$1 = require('./definition28.cjs');
 const localized = require('./localized.cjs');
@@ -43,6 +43,7 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
     this._onDial = () => {
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
+    this.autofocus = false;
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -50,6 +51,16 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
       this._textFieldEl.reportValidity();
     }
   }
+  /**
+   * Moves focus into the diapl-pad.
+   *
+   * @public
+   */
+  focus() {
+    const digitBtns = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
+    const firstFocusableEl = this._textFieldEl || digitBtns?.[0];
+    firstFocusableEl?.focus();
+  }
 }
 __decorateClass([
   vividElement.attr({ attribute: "helper-text" })
@@ -84,6 +95,9 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ attribute: "call-button-label" })
 ], DialPad.prototype, "callButtonLabel");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], DialPad.prototype, "autofocus");
 
 class DialPadButton {
   constructor(value, label, ariaLabel, icon, id) {
@@ -149,7 +163,7 @@ function deleteLastCharacter(dialPad) {
   dialPad.$emit("input");
   dialPad.$emit("change");
   if (dialPad.value === "") {
-    dialPad._textFieldEl.focus();
+    dialPad._textFieldEl?.focus();
   }
 }
 function renderTextField(textFieldTag, buttonTag) {
@@ -164,6 +178,7 @@ function renderTextField(textFieldTag, buttonTag) {
 			@change="${syncFieldAndPadValues}"
 			@focus="${stopPropagation}"
 			@blur="${stopPropagation}"
+			?autofocus="${(x) => x.autofocus}"
 			>
          ${when.when(
     (x) => x.value && x.value.length && x.value.length > 0,
@@ -199,6 +214,7 @@ function renderDigits(buttonTag, iconTag) {
 					  label="${(x) => x.label === " " ? " " : x.label}"
 					  size='condensed'
 					  class="digit-btn"
+						?autofocus="${(_, c) => c.parent.autofocus && c.parent.noInput && c.index === 0}"
 					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
 					  ?disabled="${(_, c) => c.parent.disabled}"
 					  @click="${onDigitClick}">
@@ -206,7 +222,10 @@ function renderDigits(buttonTag, iconTag) {
 									name="${(x) => x.icon}"
 									class="digit-btn-num"></${iconTag}>
 					</${buttonTag}>
-		`
+		`,
+    {
+      positioning: true
+    }
   )}
 	`;
 }

package/shared/definition21.js

@@ -1,6 +1,6 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { T as TextField, t as textFieldDefinition } from './definition57.js';
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { T as TextField, t as textFieldDefinition } from './definition58.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';
@@ -41,6 +41,7 @@ class DialPad extends Localized(VividElement) {
     this._onDial = () => {
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
+    this.autofocus = false;
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -48,6 +49,16 @@ class DialPad extends Localized(VividElement) {
       this._textFieldEl.reportValidity();
     }
   }
+  /**
+   * Moves focus into the diapl-pad.
+   *
+   * @public
+   */
+  focus() {
+    const digitBtns = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
+    const firstFocusableEl = this._textFieldEl || digitBtns?.[0];
+    firstFocusableEl?.focus();
+  }
 }
 __decorateClass([
   attr({ attribute: "helper-text" })
@@ -82,6 +93,9 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "call-button-label" })
 ], DialPad.prototype, "callButtonLabel");
+__decorateClass([
+  attr({ mode: "boolean" })
+], DialPad.prototype, "autofocus");
 
 class DialPadButton {
   constructor(value, label, ariaLabel, icon, id) {
@@ -147,7 +161,7 @@ function deleteLastCharacter(dialPad) {
   dialPad.$emit("input");
   dialPad.$emit("change");
   if (dialPad.value === "") {
-    dialPad._textFieldEl.focus();
+    dialPad._textFieldEl?.focus();
   }
 }
 function renderTextField(textFieldTag, buttonTag) {
@@ -162,6 +176,7 @@ function renderTextField(textFieldTag, buttonTag) {
 			@change="${syncFieldAndPadValues}"
 			@focus="${stopPropagation}"
 			@blur="${stopPropagation}"
+			?autofocus="${(x) => x.autofocus}"
 			>
          ${when(
     (x) => x.value && x.value.length && x.value.length > 0,
@@ -197,6 +212,7 @@ function renderDigits(buttonTag, iconTag) {
 					  label="${(x) => x.label === " " ? " " : x.label}"
 					  size='condensed'
 					  class="digit-btn"
+						?autofocus="${(_, c) => c.parent.autofocus && c.parent.noInput && c.index === 0}"
 					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
 					  ?disabled="${(_, c) => c.parent.disabled}"
 					  @click="${onDigitClick}">
@@ -204,7 +220,10 @@ function renderDigits(buttonTag, iconTag) {
 									name="${(x) => x.icon}"
 									class="digit-btn-num"></${iconTag}>
 					</${buttonTag}>
-		`
+		`,
+    {
+      positioning: true
+    }
   )}
 	`;
 }

package/shared/definition22.cjs

@@ -2,7 +2,7 @@
 
 const definition$1 = require('./definition28.cjs');
 const definition$2 = require('./definition11.cjs');
-const definition = require('./definition64.cjs');
+const definition = require('./definition65.cjs');
 const vividElement = require('./vivid-element.cjs');
 const index = require('./index.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
@@ -11,7 +11,7 @@ const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 
-const styles = ".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-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );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(.modal){z-index:var(--dialog-z-index, 1)}.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}.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{font:var(--vvd-typography-heading-4)}.subtitle{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}";
+const styles = ".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-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );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(.modal){z-index:var(--dialog-z-index, 1)}.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}.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 __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -262,10 +262,15 @@ function icon(iconTag) {
 	`;
 }
 function headline() {
-  return vividElement.html` <div class="headline">${(x) => x.headline}</div> `;
+  return vividElement.html` <h2 class="headline">${(x) => x.headline}</h2> `;
 }
 function subtitle() {
-  return vividElement.html` <div class="subtitle">${(x) => x.subtitle}</div> `;
+  return vividElement.html` <h3 class="subtitle">${(x) => x.subtitle}</h3> `;
+}
+function renderHeaderText() {
+  return vividElement.html`
+		<div class="header-text">${headline()} ${subtitle()}</div>
+	`;
 }
 function renderDismissButton(buttonTag) {
   return vividElement.html`
@@ -296,8 +301,9 @@ const DialogTemplate = (context) => {
 							<slot name="graphic">
 								${when.when((x) => x.icon, icon(iconTag))}
 							</slot>
-							${when.when((x) => x.headline, headline())}
-							${when.when((x) => x.subtitle, subtitle())}
+							${when.when((x) => x.headline && x.subtitle, renderHeaderText())}
+							${when.when((x) => x.headline && !x.subtitle, headline())}
+							${when.when((x) => x.subtitle && !x.headline, subtitle())}
 							${when.when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
 					</div>
 					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >

package/shared/definition22.js

@@ -1,7 +1,7 @@
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { E as Elevation, e as elevationDefinition } from './definition64.js';
-import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { E as Elevation, e as elevationDefinition } from './definition65.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { L as Localized } from './localized.js';
@@ -9,7 +9,7 @@ import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 
-const styles = ".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-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );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(.modal){z-index:var(--dialog-z-index, 1)}.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}.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{font:var(--vvd-typography-heading-4)}.subtitle{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}";
+const styles = ".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-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );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(.modal){z-index:var(--dialog-z-index, 1)}.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}.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 __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -260,10 +260,15 @@ function icon(iconTag) {
 	`;
 }
 function headline() {
-  return html` <div class="headline">${(x) => x.headline}</div> `;
+  return html` <h2 class="headline">${(x) => x.headline}</h2> `;
 }
 function subtitle() {
-  return html` <div class="subtitle">${(x) => x.subtitle}</div> `;
+  return html` <h3 class="subtitle">${(x) => x.subtitle}</h3> `;
+}
+function renderHeaderText() {
+  return html`
+		<div class="header-text">${headline()} ${subtitle()}</div>
+	`;
 }
 function renderDismissButton(buttonTag) {
   return html`
@@ -294,8 +299,9 @@ const DialogTemplate = (context) => {
 							<slot name="graphic">
 								${when((x) => x.icon, icon(iconTag))}
 							</slot>
-							${when((x) => x.headline, headline())}
-							${when((x) => x.subtitle, subtitle())}
+							${when((x) => x.headline && x.subtitle, renderHeaderText())}
+							${when((x) => x.headline && !x.subtitle, headline())}
+							${when((x) => x.subtitle && !x.headline, subtitle())}
 							${when((x) => x._showDismissButton, renderDismissButton(buttonTag))}
 					</div>
 					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >

package/shared/definition23.cjs

@@ -1,58 +1,26 @@
 'use strict';
 
 const vividElement = require('./vivid-element.cjs');
+const divider = require('./divider.cjs');
 const delegatesAria = require('./delegates-aria.cjs');
-const aria = require('./aria.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}";
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const DividerRole = {
-  /**
-   * The divider semantically separates content
-   */
-  separator: "separator",
-  /**
-   * The divider has no semantic value and is for visual presentation only.
-   */
-  presentation: "presentation"
-};
-class Divider extends delegatesAria.DelegatesAria(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    this.role = DividerRole.separator;
-    this.orientation = aria.Orientation.horizontal;
-  }
-}
-__decorateClass([
-  vividElement.attr
-], Divider.prototype, "role");
-__decorateClass([
-  vividElement.attr
-], Divider.prototype, "orientation");
-
 const getClasses = ({ orientation }) => classNames.classNames("base", [`${orientation}`, Boolean(orientation)]);
-const getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
+const getAriaOrientation = ({ role, orientation }) => role === divider.DividerRole.presentation ? null : orientation;
 const DividerTemplate = vividElement.html` <span
 	class="${getClasses}"
 	${delegatesAria.delegateAria({
-  role: (x) => x.role || DividerRole.separator,
+  role: (x) => x.role || divider.DividerRole.separator,
+  ariaHidden: true,
   ariaOrientation: getAriaOrientation
 })}
 ></span>`;
 
 const dividerDefinition = vividElement.defineVividComponent(
   "divider",
-  Divider,
+  divider.Divider,
   DividerTemplate,
   [],
   {
@@ -61,6 +29,5 @@ const dividerDefinition = vividElement.defineVividComponent(
 );
 const registerDivider = vividElement.createRegisterFunction(dividerDefinition);
 
-exports.Divider = Divider;
 exports.dividerDefinition = dividerDefinition;
 exports.registerDivider = registerDivider;

package/shared/definition23.js

@@ -1,49 +1,17 @@
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { O as Orientation } from './aria.js';
+import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { a as DividerRole, D as Divider } from './divider.js';
+import { d as delegateAria } from './delegates-aria.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ":host{display:block}.base{display:block;background-color:var(--vvd-color-neutral-200)}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}";
 
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const DividerRole = {
-  /**
-   * The divider semantically separates content
-   */
-  separator: "separator",
-  /**
-   * The divider has no semantic value and is for visual presentation only.
-   */
-  presentation: "presentation"
-};
-class Divider extends DelegatesAria(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.role = DividerRole.separator;
-    this.orientation = Orientation.horizontal;
-  }
-}
-__decorateClass([
-  attr
-], Divider.prototype, "role");
-__decorateClass([
-  attr
-], Divider.prototype, "orientation");
-
 const getClasses = ({ orientation }) => classNames("base", [`${orientation}`, Boolean(orientation)]);
 const getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
 const DividerTemplate = html` <span
 	class="${getClasses}"
 	${delegateAria({
   role: (x) => x.role || DividerRole.separator,
+  ariaHidden: true,
   ariaOrientation: getAriaOrientation
 })}
 ></span>`;
@@ -59,4 +27,4 @@ const dividerDefinition = defineVividComponent(
 );
 const registerDivider = createRegisterFunction(dividerDefinition);
 
-export { Divider as D, dividerDefinition as d, registerDivider as r };
+export { dividerDefinition as d, registerDivider as r };

package/shared/definition24.cjs

@@ -6,7 +6,7 @@ const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 
-const styles = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container)}.icon-decoration-outlined .icon-container{--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px;box-shadow:inset 0 0 0 21px var(--_connotation-color-faint)}.icon-container .icon{color:var(--_connotation-color-firm-all)}.icon-decoration-outlined .icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
+const styles = ":host{display:block}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-empty-state-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-dim: var(--vvd-empty-state-cta-dim, var(--vvd-color-cta-200));--_connotation-color-faint: var(--vvd-empty-state-cta-faint, var(--vvd-color-cta-50))}.base.connotation-success{--_connotation-color-firm-all: var(--vvd-empty-state-success-firm-all, var(--vvd-color-success-600));--_connotation-color-dim: var(--vvd-empty-state-success-dim, var(--vvd-color-success-200));--_connotation-color-faint: var(--vvd-empty-state-success-faint, var(--vvd-color-success-50))}.base.connotation-alert{--_connotation-color-firm-all: var(--vvd-empty-state-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-dim: var(--vvd-empty-state-alert-dim, var(--vvd-color-alert-200));--_connotation-color-faint: var(--vvd-empty-state-alert-faint, var(--vvd-color-alert-50))}.base.connotation-warning{--_connotation-color-firm-all: var(--vvd-empty-state-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-dim: var(--vvd-empty-state-warning-dim, var(--vvd-color-warning-200));--_connotation-color-faint: var(--vvd-empty-state-warning-faint, var(--vvd-color-warning-50))}.base.connotation-information{--_connotation-color-firm-all: var(--vvd-empty-state-information-firm-all, var(--vvd-color-information-600));--_connotation-color-dim: var(--vvd-empty-state-information-dim, var(--vvd-color-information-200));--_connotation-color-faint: var(--vvd-empty-state-information-faint, var(--vvd-color-information-50))}.base.connotation-announcement{--_connotation-color-firm-all: var(--vvd-empty-state-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-dim: var(--vvd-empty-state-announcement-dim, var(--vvd-color-announcement-200));--_connotation-color-faint: var(--vvd-empty-state-announcement-faint, var(--vvd-color-announcement-50))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-firm-all: var(--vvd-empty-state-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-dim: var(--vvd-empty-state-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-faint: var(--vvd-empty-state-accent-faint, var(--vvd-color-neutral-50))}.base{--_empty-state-icon-container: 120px;--_empty-state-icon-background: var(--_connotation-color-faint);--_empty-state-icon-font-size: 52px;display:flex;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;block-size:100%;gap:24px}.icon-container{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--_empty-state-icon-background);block-size:var(--_empty-state-icon-container);box-shadow:inset 0 0 0 21px var(--_connotation-color-faint);font-size:var(--_empty-state-icon-font-size);inline-size:var(--_empty-state-icon-container);--_empty-state-icon-background: transparent;--_empty-state-icon-font-size: 40px}.icon-container .icon{padding:19px;border:1px solid var(--_connotation-color-dim);border-radius:inherit;color:var(--_connotation-color-firm-all)}.content{display:flex;flex-direction:column;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);gap:8px;text-align:center}header{color:var(--_connotation-color-firm-all);font:var(--vvd-typography-base-extended-bold)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.base.no-actions .actions{display:none}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -35,14 +35,9 @@ __decorateClass([
   vividElement.observable
 ], EmptyState.prototype, "slottedActionItems");
 
-const getClasses = ({
-  connotation,
-  iconDecoration,
-  slottedActionItems
-}) => classNames.classNames(
+const getClasses = ({ connotation, slottedActionItems }) => classNames.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
-  [`icon-decoration-${iconDecoration}`, Boolean(iconDecoration)],
   ["no-actions", slottedActionItems?.length === 0]
 );
 const EmptyStateTemplate = (context) => {