@vonage/vivid 4.3.0 → 4.4.0

package/index.js

@@ -59,6 +59,6 @@ export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries }
 export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition59.js';
 export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition60.js';
 export { r as registerVideoPlayer, v as videoPlayerDefinition, a as videoPlayerRegistries } from './shared/definition61.js';
-export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, L as LayoutSize, M as MediaSkipBy, P as Position, R as Role, S as Shape, b as Size, T as TabsGutters } from './shared/enums.js';
+export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, I as IconDecoration, L as LayoutSize, M as MediaSkipBy, P as Position, R as Role, S as Shape, b as Size, T as TabsGutters } from './shared/enums.js';
 export { d as designSystem, r as registerFactory } from './shared/index.js';
 export { s as setLocale } from './shared/index2.js';

package/lib/dialog/dialog.d.ts

@@ -13,6 +13,7 @@ export declare class Dialog extends FoundationElement {
     ariaLabel: string | null;
     dismissButtonAriaLabel: string | null;
     noLightDismiss: boolean;
+    modal: boolean;
     set returnValue(value: string);
     get returnValue(): string;
     close(): void;

package/lib/empty-state/definition.d.ts

@@ -1,3 +1,4 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export type { EmptyStateConnotation, EmptyStateIconDecoration, } from './empty-state';
 export declare const emptyStateDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
 export declare const registerEmptyState: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;

package/lib/empty-state/empty-state.d.ts

@@ -1,5 +1,10 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Connotation, IconDecoration } from '../enums.js';
+export type EmptyStateConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information>;
+export type EmptyStateIconDecoration = Extract<IconDecoration, IconDecoration.Filled | IconDecoration.Outlined>;
 export declare class EmptyState extends FoundationElement {
+    connotation?: EmptyStateConnotation;
     headline?: string;
     icon?: string;
+    iconDecoration?: EmptyStateIconDecoration;
 }

package/lib/enums.d.ts

@@ -28,6 +28,10 @@ export declare enum Appearance {
     Listitem = "listitem",
     Elevated = "elevated"
 }
+export declare enum IconDecoration {
+    Filled = "filled",
+    Outlined = "outlined"
+}
 export declare enum Size {
     UltraCondensed = "ultra-condensed",
     SuperCondensed = "super-condensed",

package/lib/popup/popup.d.ts

@@ -0,0 +1,5 @@
+export declare const PlacementStrategy: {
+    readonly Flip: "flip";
+    readonly AutoPlacementHorizontal: "auto-placement-horizontal";
+    readonly AutoPlacementVertical: "auto-placement-vertical";
+};

package/lib/range-slider/range-slider.d.ts

@@ -3,6 +3,7 @@ import { Connotation } from '../enums';
 import { type FormElement, Localized } from '../../shared/patterns';
 import { FormAssociatedRangeSlider } from './range-slider.form-associated';
 export type RangeSliderConnotation = Connotation.Accent | Connotation.CTA;
+export type ThumbId = 'start' | 'end';
 export declare class RangeSlider extends FormAssociatedRangeSlider {
     #private;
     start: string;
@@ -23,6 +24,7 @@ export declare class RangeSlider extends FormAssociatedRangeSlider {
     ariaEndLabel: string | null;
     markers: boolean;
     connotation?: RangeSliderConnotation;
+    pin: boolean;
     valueTextFormatter: (value: string) => string;
     formResetCallback(): void;
     connectedCallback(): void;

package/lib/slider/slider.d.ts

@@ -3,11 +3,16 @@ import type { Connotation } from '../enums';
 import { Localized } from '../../shared/patterns';
 export type SliderConnotation = Connotation.Accent | Connotation.CTA;
 export declare class Slider extends FastSlider {
+    #private;
     ariaLabel: string | null;
     ariaValuetext: string | null;
     markers: boolean;
+    pin: boolean;
     connotation?: SliderConnotation;
     valueTextFormatter: (value: string) => string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
 }
 export interface Slider extends Localized {
 }

package/lib/slider/slider.template.d.ts

@@ -1,5 +1,5 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import type { Slider } from './slider';
 export declare const getMarkersTemplate: (isHorizontal: boolean, numMarkers: number) => ViewTemplate<any, any>;
-export declare const SliderTemplate: (context: ElementDefinitionContext) => ViewTemplate<Slider>;
+export declare const SliderTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Slider>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.3.0",
+	"version": "4.4.0",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/definition.cjs

@@ -76,7 +76,7 @@ index.__decorate([
 ], AccordionItem$1.prototype, "id", void 0);
 applyMixins.applyMixins(AccordionItem$1, startEnd.StartEnd);
 
-const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:20%;flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition.js

@@ -74,7 +74,7 @@ __decorate([
 ], AccordionItem$1.prototype, "id", void 0);
 applyMixins(AccordionItem$1, StartEnd);
 
-const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:20%;flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition21.cjs

@@ -44,7 +44,8 @@ class Dialog extends index.FoundationElement {
     this.ariaLabel = null;
     this.dismissButtonAriaLabel = null;
     this.noLightDismiss = false;
-    this.#modal = false;
+    this.modal = false;
+    this._openedAsModal = false;
     this.#handleScrimClick = (event) => {
       if (event.target !== this.#dialog || this.noLightDismiss) {
         return;
@@ -60,19 +61,26 @@ class Dialog extends index.FoundationElement {
       this.open = false;
     };
   }
-  #modal;
+  /**
+   * @internal
+   */
+  modalChanged(_, newValue) {
+    if (this.open) {
+      this._openedAsModal = newValue;
+      if (this.$fastController.isConnected) {
+        this.#closeDialog();
+        this.#showDialog();
+      }
+    }
+  }
   set returnValue(value) {
-    this.#dialog.returnValue = value;
+    if (this.#dialog) {
+      this.#dialog.returnValue = value;
+    }
   }
   get returnValue() {
     return this.#dialog?.returnValue;
   }
-  /**
-   * @internal
-   */
-  get modal() {
-    return this.#modal;
-  }
   #dialogElement;
   get #dialog() {
     if (!this.#dialogElement) {
@@ -80,7 +88,6 @@ class Dialog extends index.FoundationElement {
         "dialog"
       );
       if (this.#dialogElement) {
-        this.#dialogElement.open = this.open;
         if (dialogPolyfill) {
           dialogPolyfill.registerDialog(this.#dialogElement);
         }
@@ -96,44 +103,66 @@ class Dialog extends index.FoundationElement {
       return;
     }
     if (!newValue) {
-      this.close();
+      this._openedAsModal = false;
+      if (this.$fastController.isConnected) {
+        this.#closeDialog();
+      }
+      this.$emit("close", this.returnValue, { bubbles: false });
     } else {
-      if (this.#dialog) {
-        this.#dialog.open = true;
+      this._openedAsModal = this._openedAsModal || this.modal;
+      if (this.$fastController.isConnected) {
+        this.#showDialog();
       }
+      this.$emit("open", void 0, { bubbles: false });
     }
   }
   #handleScrimClick;
   #handleInternalFormSubmit;
   close() {
-    if (this.#dialog.open) {
-      this.#dialog.close();
-      this.$emit("close", this.returnValue, { bubbles: false });
-    }
     this.open = false;
-    this.#handleModal(false);
-  }
-  #handleModal(show) {
-    this.#modal = show;
-    this.#dialog.toggleAttribute("aria-modal", show);
-    this.#dialog.classList.toggle("modal", show);
   }
   show() {
-    this.#dialog.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 = true;
   }
   showModal() {
-    this.#handleModal(true);
-    this.#dialog.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 = true;
     this.open = true;
   }
+  #closeDialog() {
+    this.#dialog.close();
+  }
+  #showDialog() {
+    if (this._openedAsModal) {
+      this.#dialog.showModal();
+    } else {
+      this.#dialog.show();
+    }
+  }
   connectedCallback() {
     super.connectedCallback();
+    if (this.open) {
+      this.#showDialog();
+    }
     this.#dialog.addEventListener("mousedown", this.#handleScrimClick);
     this.#dialog.addEventListener("submit", this.#handleInternalFormSubmit);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    if (this.open) {
+      this.#closeDialog();
+    }
     this.#dialog.removeEventListener("mousedown", this.#handleScrimClick);
     this.#dialog.removeEventListener("submit", this.#handleInternalFormSubmit);
   }
@@ -165,6 +194,12 @@ __decorateClass([
 __decorateClass([
   index.attr({ attribute: "no-light-dismiss", mode: "boolean" })
 ], Dialog.prototype, "noLightDismiss");
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Dialog.prototype, "modal");
+__decorateClass([
+  index.observable
+], Dialog.prototype, "_openedAsModal");
 __decorateClass([
   index.observable
 ], Dialog.prototype, "bodySlottedContent");
@@ -180,7 +215,8 @@ const getClasses = ({
   iconPlacement,
   bodySlottedContent,
   footerSlottedContent,
-  actionItemsSlottedContent
+  actionItemsSlottedContent,
+  _openedAsModal
 }) => classNames.classNames(
   "base",
   [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)],
@@ -188,7 +224,8 @@ const getClasses = ({
   [
     "hide-footer",
     !(footerSlottedContent?.length || actionItemsSlottedContent?.length)
-  ]
+  ],
+  ["modal", _openedAsModal]
 );
 function icon(iconTag) {
   return index.html`
@@ -212,7 +249,7 @@ function renderDismissButton(buttonTag) {
 	></${buttonTag}>`;
 }
 function handleEscapeKey(dialog, event) {
-  if (event.key === "Escape" && dialog.modal) {
+  if (event.key === "Escape" && dialog._openedAsModal) {
     dialog.open = false;
   }
   return true;
@@ -226,8 +263,8 @@ const DialogTemplate = (context) => {
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
-				returnValue="${(x) => x.returnValue}"
 				aria-label="${(x) => x.ariaLabel}"
+				?aria-modal="${(x) => x._openedAsModal}"
 		>
 			<slot name="main">
 				<div class="main-wrapper">

package/shared/definition21.js

@@ -42,7 +42,8 @@ class Dialog extends FoundationElement {
     this.ariaLabel = null;
     this.dismissButtonAriaLabel = null;
     this.noLightDismiss = false;
-    this.#modal = false;
+    this.modal = false;
+    this._openedAsModal = false;
     this.#handleScrimClick = (event) => {
       if (event.target !== this.#dialog || this.noLightDismiss) {
         return;
@@ -58,19 +59,26 @@ class Dialog extends FoundationElement {
       this.open = false;
     };
   }
-  #modal;
+  /**
+   * @internal
+   */
+  modalChanged(_, newValue) {
+    if (this.open) {
+      this._openedAsModal = newValue;
+      if (this.$fastController.isConnected) {
+        this.#closeDialog();
+        this.#showDialog();
+      }
+    }
+  }
   set returnValue(value) {
-    this.#dialog.returnValue = value;
+    if (this.#dialog) {
+      this.#dialog.returnValue = value;
+    }
   }
   get returnValue() {
     return this.#dialog?.returnValue;
   }
-  /**
-   * @internal
-   */
-  get modal() {
-    return this.#modal;
-  }
   #dialogElement;
   get #dialog() {
     if (!this.#dialogElement) {
@@ -78,7 +86,6 @@ class Dialog extends FoundationElement {
         "dialog"
       );
       if (this.#dialogElement) {
-        this.#dialogElement.open = this.open;
         if (dialogPolyfill) {
           dialogPolyfill.registerDialog(this.#dialogElement);
         }
@@ -94,44 +101,66 @@ class Dialog extends FoundationElement {
       return;
     }
     if (!newValue) {
-      this.close();
+      this._openedAsModal = false;
+      if (this.$fastController.isConnected) {
+        this.#closeDialog();
+      }
+      this.$emit("close", this.returnValue, { bubbles: false });
     } else {
-      if (this.#dialog) {
-        this.#dialog.open = true;
+      this._openedAsModal = this._openedAsModal || this.modal;
+      if (this.$fastController.isConnected) {
+        this.#showDialog();
       }
+      this.$emit("open", void 0, { bubbles: false });
     }
   }
   #handleScrimClick;
   #handleInternalFormSubmit;
   close() {
-    if (this.#dialog.open) {
-      this.#dialog.close();
-      this.$emit("close", this.returnValue, { bubbles: false });
-    }
     this.open = false;
-    this.#handleModal(false);
-  }
-  #handleModal(show) {
-    this.#modal = show;
-    this.#dialog.toggleAttribute("aria-modal", show);
-    this.#dialog.classList.toggle("modal", show);
   }
   show() {
-    this.#dialog.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 = true;
   }
   showModal() {
-    this.#handleModal(true);
-    this.#dialog.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 = true;
     this.open = true;
   }
+  #closeDialog() {
+    this.#dialog.close();
+  }
+  #showDialog() {
+    if (this._openedAsModal) {
+      this.#dialog.showModal();
+    } else {
+      this.#dialog.show();
+    }
+  }
   connectedCallback() {
     super.connectedCallback();
+    if (this.open) {
+      this.#showDialog();
+    }
     this.#dialog.addEventListener("mousedown", this.#handleScrimClick);
     this.#dialog.addEventListener("submit", this.#handleInternalFormSubmit);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    if (this.open) {
+      this.#closeDialog();
+    }
     this.#dialog.removeEventListener("mousedown", this.#handleScrimClick);
     this.#dialog.removeEventListener("submit", this.#handleInternalFormSubmit);
   }
@@ -163,6 +192,12 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "no-light-dismiss", mode: "boolean" })
 ], Dialog.prototype, "noLightDismiss");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Dialog.prototype, "modal");
+__decorateClass([
+  observable
+], Dialog.prototype, "_openedAsModal");
 __decorateClass([
   observable
 ], Dialog.prototype, "bodySlottedContent");
@@ -178,7 +213,8 @@ const getClasses = ({
   iconPlacement,
   bodySlottedContent,
   footerSlottedContent,
-  actionItemsSlottedContent
+  actionItemsSlottedContent,
+  _openedAsModal
 }) => classNames(
   "base",
   [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)],
@@ -186,7 +222,8 @@ const getClasses = ({
   [
     "hide-footer",
     !(footerSlottedContent?.length || actionItemsSlottedContent?.length)
-  ]
+  ],
+  ["modal", _openedAsModal]
 );
 function icon(iconTag) {
   return html`
@@ -210,7 +247,7 @@ function renderDismissButton(buttonTag) {
 	></${buttonTag}>`;
 }
 function handleEscapeKey(dialog, event) {
-  if (event.key === "Escape" && dialog.modal) {
+  if (event.key === "Escape" && dialog._openedAsModal) {
     dialog.open = false;
   }
   return true;
@@ -224,8 +261,8 @@ const DialogTemplate = (context) => {
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"
-				returnValue="${(x) => x.returnValue}"
 				aria-label="${(x) => x.ariaLabel}"
+				?aria-modal="${(x) => x._openedAsModal}"
 		>
 			<slot name="main">
 				<div class="main-wrapper">

package/shared/definition23.cjs

@@ -7,7 +7,7 @@ const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block}.base{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-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{--_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}.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))}.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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20,17 +20,32 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 class EmptyState extends index.FoundationElement {
 }
+__decorateClass([
+  index.attr
+], EmptyState.prototype, "connotation");
 __decorateClass([
   index.attr
 ], EmptyState.prototype, "headline");
 __decorateClass([
   index.attr
 ], EmptyState.prototype, "icon");
+__decorateClass([
+  index.attr({ attribute: "icon-decoration" })
+], EmptyState.prototype, "iconDecoration");
 __decorateClass([
   index.observable
 ], EmptyState.prototype, "slottedActionItems");
 
-const getClasses = (x) => classNames.classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
+const getClasses = ({
+  connotation,
+  iconDecoration,
+  slottedActionItems
+}) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`icon-decoration-${iconDecoration}`, Boolean(iconDecoration)],
+  ["no-actions", slottedActionItems?.length === 0]
+);
 const EmptyStateTemplate = (context) => {
   const iconTag = context.tagFor(icon.Icon);
   return index.html` <div class="${getClasses}">
@@ -38,7 +53,7 @@ const EmptyStateTemplate = (context) => {
 			${when.when(
     (x) => x.icon,
     index.html`<div class="icon-container">
-					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
+					<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
 				</div>`
   )}
 		</slot>

package/shared/definition23.js

@@ -1,11 +1,11 @@
-import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
 import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block}.base{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(--vvd-color-neutral-100);block-size:120px;inline-size:120px}.content{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:8px;text-align:center}header{font:var(--vvd-typography-base-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{--_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}.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))}.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}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,17 +18,32 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 class EmptyState extends FoundationElement {
 }
+__decorateClass([
+  attr
+], EmptyState.prototype, "connotation");
 __decorateClass([
   attr
 ], EmptyState.prototype, "headline");
 __decorateClass([
   attr
 ], EmptyState.prototype, "icon");
+__decorateClass([
+  attr({ attribute: "icon-decoration" })
+], EmptyState.prototype, "iconDecoration");
 __decorateClass([
   observable
 ], EmptyState.prototype, "slottedActionItems");
 
-const getClasses = (x) => classNames("base", ["no-actions", x.slottedActionItems?.length === 0]);
+const getClasses = ({
+  connotation,
+  iconDecoration,
+  slottedActionItems
+}) => classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`icon-decoration-${iconDecoration}`, Boolean(iconDecoration)],
+  ["no-actions", slottedActionItems?.length === 0]
+);
 const EmptyStateTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
   return html` <div class="${getClasses}">
@@ -36,7 +51,7 @@ const EmptyStateTemplate = (context) => {
 			${when(
     (x) => x.icon,
     html`<div class="icon-container">
-					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
+					<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
 				</div>`
   )}
 		</slot>

package/shared/definition25.cjs

@@ -13,7 +13,7 @@ const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;