@vonage/vivid 3.37.0 → 3.39.0

package/shared/definition19.js

@@ -1,78 +1,262 @@
-import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
-import { O as Orientation } from './aria.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 './definition25.js';
+import { B as Button, a as buttonRegistries } from './definition10.js';
+import { E as Elevation, e as elevationRegistries } from './definition57.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';
 
-/**
- * Divider roles
- * @public
- */
-const DividerRole = {
-    /**
-     * The divider semantically separates content
-     */
-    separator: "separator",
-    /**
-     * The divider has no semantic value and is for visual presentation only.
-     */
-    presentation: "presentation",
-};
-
-/**
- * A Divider Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
- *
- * @public
- */
-let Divider$1 = class Divider extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The role of the element.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: role
-         */
-        this.role = DividerRole.separator;
-        /**
-         * The orientation of the divider.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = Orientation.horizontal;
-    }
-};
-__decorate([
-    attr
-], Divider$1.prototype, "role", void 0);
-__decorate([
-    attr
-], Divider$1.prototype, "orientation", void 0);
+const dialogPolyfillStyles = "dialog {\n  position: absolute;\n  left: 0; right: 0;\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: -webkit-fit-content;\n  height: fit-content;\n  margin: auto;\n  border: solid;\n  padding: 1em;\n  background: white;\n  color: black;\n  display: block;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog + .backdrop {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n  background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n  position: fixed;\n  top: 50%;\n  transform: translate(0, -50%);\n}";
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 GMT\n */\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --_dialog-default-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n.base.modal {\n  position: fixed;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);\n}\n.base.modal::backdrop {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n}\n\n.main-wrapper {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  gap: 24px;\n  padding-block: 24px;\n}\n.main-wrapper > * {\n  box-sizing: border-box;\n}\n\n.header {\n  display: grid;\n  align-items: flex-start;\n  justify-content: space-between;\n  inline-size: 100%;\n  padding-inline: 24px;\n}\n.base:not(.icon-placement-side) .header {\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto auto auto;\n}\n.base:not(.icon-placement-side) .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  grid-column: 1/2;\n  grid-row: 1/2;\n  line-height: 1;\n  margin-block-end: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.icon-placement-side .header {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto;\n}\n.base.icon-placement-side .header .icon {\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.icon-placement-side .header ::slotted(*),\n.base.icon-placement-side .header .icon {\n  grid-column: 1/2;\n  grid-row: 1/-1;\n  margin-inline-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.header.border {\n  position: relative;\n}\n.header.border::after {\n  position: absolute;\n  bottom: -24px;\n  left: 0;\n  background-color: var(--vvd-color-neutral-200);\n  block-size: 1px;\n  content: \"\";\n  inline-size: 100%;\n}\n.base.hide-body .header.border::after {\n  content: none;\n}\n\n.body:not(.full-width) {\n  padding-inline: 24px;\n}\n.hide-body .body {\n  display: none;\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n.footer .actions {\n  display: flex;\n  align-self: flex-end;\n  gap: 8px;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  grid-column: -2/-1;\n  grid-row: 1/-1;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: 4px;\n}\n\n.headline {\n  font: var(--vvd-typography-heading-4);\n}\n\n.subtitle {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=main] {\n  display: block;\n  overflow: hidden auto;\n  max-width: inherit;\n  max-height: inherit;\n  border-radius: inherit;\n}";
 
-class Divider extends Divider$1 {
+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;
+  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);
+  return result;
+};
+const isDialogSupported = Boolean(HTMLDialogElement && HTMLDialogElement.prototype.showModal);
+let dialogPolyfill;
+(async () => {
+  if (!isDialogSupported) {
+    delete window.HTMLDialogElement;
+    dialogPolyfill = await import('./dialog-polyfill.esm.js');
+  }
+})();
+class Dialog extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.fullWidthBody = false;
+    this.ariaLabelledBy = null;
+    this.ariaLabel = null;
+    this.ariaDescribedBy = null;
+    this.#modal = false;
+    this.#handleScrimClick = (event) => {
+      if (event.target !== this.#dialog) {
+        return;
+      }
+      const rect = this.#dialog.getBoundingClientRect();
+      const clickedInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
+      this.open = clickedInDialog;
+    };
+    this.#handleInternalFormSubmit = (event) => {
+      if (event.target.method !== "dialog") {
+        return;
+      }
+      this.open = false;
+    };
+  }
+  #modal;
+  set returnValue(value) {
+    this.#dialog.returnValue = value;
+  }
+  get returnValue() {
+    return this.#dialog?.returnValue;
+  }
+  get modal() {
+    return this.#modal;
+  }
+  #dialogElement;
+  get #dialog() {
+    if (!this.#dialogElement) {
+      this.#dialogElement = this.shadowRoot.querySelector("dialog");
+      if (this.#dialogElement) {
+        this.#dialogElement.open = this.open;
+        if (dialogPolyfill) {
+          dialogPolyfill.registerDialog(this.#dialogElement);
+        }
+      }
+    }
+    return this.#dialogElement;
+  }
+  openChanged(oldValue, newValue) {
+    if (oldValue === void 0) {
+      return;
+    }
+    if (!newValue) {
+      this.close();
+    } else {
+      if (this.#dialog) {
+        this.#dialog.open = true;
+      }
+    }
+  }
+  #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();
+    this.open = true;
+  }
+  showModal() {
+    this.#handleModal(true);
+    this.#dialog.showModal();
+    this.open = true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#dialog.addEventListener("mousedown", this.#handleScrimClick);
+    this.#dialog.addEventListener("submit", this.#handleInternalFormSubmit);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#dialog.removeEventListener("mousedown", this.#handleScrimClick);
+    this.#dialog.removeEventListener("submit", this.#handleInternalFormSubmit);
+  }
 }
+__decorateClass([
+  attr({ mode: "boolean" })
+], Dialog.prototype, "open", 2);
+__decorateClass([
+  attr
+], Dialog.prototype, "icon", 2);
+__decorateClass([
+  attr({ attribute: "icon-placement" })
+], Dialog.prototype, "iconPlacement", 2);
+__decorateClass([
+  attr
+], Dialog.prototype, "subtitle", 2);
+__decorateClass([
+  attr
+], Dialog.prototype, "headline", 2);
+__decorateClass([
+  attr({ attribute: "full-width-body", mode: "boolean" })
+], Dialog.prototype, "fullWidthBody", 2);
+__decorateClass([
+  attr({ attribute: "aria-labelledby" })
+], Dialog.prototype, "ariaLabelledBy", 2);
+__decorateClass([
+  attr({ attribute: "aria-label" })
+], Dialog.prototype, "ariaLabel", 2);
+__decorateClass([
+  attr({ attribute: "aria-describedby" })
+], Dialog.prototype, "ariaDescribedBy", 2);
+__decorateClass([
+  observable
+], Dialog.prototype, "bodySlottedContent", 2);
+__decorateClass([
+  observable
+], Dialog.prototype, "footerSlottedContent", 2);
+__decorateClass([
+  observable
+], Dialog.prototype, "actionItemsSlottedContent", 2);
 
-const getClasses = ({ orientation }) => classNames(
+const getClasses = ({
+  iconPlacement,
+  bodySlottedContent,
+  footerSlottedContent,
+  actionItemsSlottedContent
+}) => classNames(
   "base",
-  [`${orientation}`, Boolean(orientation)]
+  [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)],
+  ["hide-body", !bodySlottedContent?.length],
+  [
+    "hide-footer",
+    !(footerSlottedContent?.length || actionItemsSlottedContent?.length)
+  ]
 );
-const DividerTemplate = () => html` 
-  <span
-  class="${getClasses}"
-  	orientation="${(x) => x.orientation}"
-  	role="${(x) => x.role}"
-  ></span>`;
+function icon(iconTag) {
+  return html`
+		<${iconTag} class="icon" name="${(x) => x.icon}"></${iconTag}>
+	`;
+}
+function headline() {
+  return html`
+	  <div class="headline">
+		  ${(x) => x.headline}
+	  </div>
+	`;
+}
+function subtitle() {
+  return html`
+	  <div class="subtitle">
+		  ${(x) => x.subtitle}
+	  </div>
+	`;
+}
+function renderDismissButton(buttonTag) {
+  return html`
+	  <${buttonTag}
+			  size="condensed"
+			  class="dismiss-button"
+			  icon="close-line"
+			  @click="${(x) => {
+    x.open = false;
+  }}">
+	  </${buttonTag}>`;
+}
+function handleEscapeKey(dialog, event) {
+  if (event.key === "Escape" && dialog.modal) {
+    dialog.open = false;
+  }
+  return true;
+}
+const DialogTemplate = (context) => {
+  const elevationTag = context.tagFor(Elevation);
+  const iconTag = context.tagFor(Icon);
+  const buttonTag = context.tagFor(Button);
+  return html`
+	<${elevationTag} dp="8">
+		<dialog class="${getClasses}"
+				@keydown="${(x, c) => handleEscapeKey(x, c.event)}"
+				returnValue="${(x) => x.returnValue}"
+				aria-labelledby="${(x) => x.ariaLabelledBy}"
+				aria-label="${(x) => x.ariaLabel}"
+				aria-describedby="${(x) => x.ariaDescribedBy}"
+		>
+			<slot name="main">
+				<div class="main-wrapper">
+					<div class="header ${(x) => x.subtitle ? "border" : ""}">
+							<slot name="graphic">
+								${when((x) => x.icon, icon(iconTag))}
+							</slot>
+							${when((x) => x.headline, headline())}
+							${when((x) => x.subtitle, subtitle())}
+							${renderDismissButton(buttonTag)}
+					</div>
+					<div class="body ${(x) => x.fullWidthBody ? "full-width" : ""}" >
+						<slot name="body" ${slotted("bodySlottedContent")}></slot>
+					</div>
+					<div class="footer">
+						<div>
+							<slot name="footer" ${slotted("footerSlottedContent")}></slot>
+						</div>
+						<div class="actions">
+							<slot name="action-items" ${slotted("actionItemsSlottedContent")}></slot>
+						</div>
+					</div>
+				</div>
+			</slot>
+		</dialog>
+	</${elevationTag}>`;
+};
 
-const dividerDefinition = Divider.compose({
-  baseName: "divider",
-  template: DividerTemplate,
-  styles
+const dialogDefinition = Dialog.compose({
+  baseName: "dialog",
+  template: DialogTemplate,
+  styles: isDialogSupported ? [styles] : [styles, dialogPolyfillStyles]
 });
-const dividerRegistries = [dividerDefinition()];
-const registerDivider = registerFactory(dividerRegistries);
+const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
+const registerDialog = registerFactory(dialogRegistries);
 
-export { Divider as D, dividerRegistries as a, dividerDefinition as d, registerDivider as r };
+export { dialogRegistries as a, dialogDefinition as d, registerDialog as r };

package/shared/definition2.js

@@ -186,7 +186,7 @@ __decorate([
     observable
 ], Accordion$1.prototype, "accordionItems", void 0);
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
 
 class Accordion extends Accordion$1 {
   constructor() {

package/shared/definition20.js

@@ -1,70 +1,78 @@
-import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition24.js';
-import { I as Icon } from './icon.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
+import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
+import { O as Orientation } from './aria.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  block-size: 100%;\n  gap: 24px;\n}\n\n.icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 120px;\n  border-radius: 50%;\n  inline-size: 120px;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  text-align: center;\n}\n\nheader {\n  font: var(--vvd-typography-base-bold);\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n.base.no-actions .actions {\n  display: none;\n}";
+/**
+ * Divider roles
+ * @public
+ */
+const DividerRole = {
+    /**
+     * The divider semantically separates content
+     */
+    separator: "separator",
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    presentation: "presentation",
+};
 
-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;
-  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);
-  return result;
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+let Divider$1 = class Divider extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = DividerRole.separator;
+        /**
+         * The orientation of the divider.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = Orientation.horizontal;
+    }
 };
-class EmptyState extends FoundationElement {
+__decorate([
+    attr
+], Divider$1.prototype, "role", void 0);
+__decorate([
+    attr
+], Divider$1.prototype, "orientation", void 0);
+
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+
+class Divider extends Divider$1 {
 }
-__decorateClass([
-  attr
-], EmptyState.prototype, "headline", 2);
-__decorateClass([
-  attr
-], EmptyState.prototype, "icon", 2);
-__decorateClass([
-  observable
-], EmptyState.prototype, "slottedActionItems", 2);
 
-const getClasses = (x) => classNames(
+const getClasses = ({ orientation }) => classNames(
   "base",
-  ["no-actions", x.slottedActionItems?.length === 0]
+  [`${orientation}`, Boolean(orientation)]
 );
-const EmptyStateTemplate = (context) => {
-  const iconTag = context.tagFor(Icon);
-  return html`
-		<div class="${getClasses}">
-			<slot name="graphic">
-				${when(
-    (x) => x.icon,
-    html`<div class="icon-container">
-					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
-				</div>`
-  )}
-			</slot>
-			<div class="content">
-				${when(
-    (x) => x.headline,
-    html`<header>${(x) => x.headline}</header>`
-  )}
-				<slot></slot>
-			</div>
-			<div class="actions">
-				<slot name="action-items" ${slotted("slottedActionItems")}></slot>
-			</div>
-		</div>`;
-};
+const DividerTemplate = () => html` 
+  <span
+  class="${getClasses}"
+  	orientation="${(x) => x.orientation}"
+  	role="${(x) => x.role}"
+  ></span>`;
 
-const emptyStateDefinition = EmptyState.compose({
-  baseName: "empty-state",
-  template: EmptyStateTemplate,
+const dividerDefinition = Divider.compose({
+  baseName: "divider",
+  template: DividerTemplate,
   styles
 });
-const emptyStateRegistries = [emptyStateDefinition(), ...iconRegistries];
-const registerEmptyState = registerFactory(emptyStateRegistries);
+const dividerRegistries = [dividerDefinition()];
+const registerDivider = registerFactory(dividerRegistries);
 
-export { emptyStateRegistries as a, emptyStateDefinition as e, registerEmptyState as r };
+export { Divider as D, dividerRegistries as a, dividerDefinition as d, registerDivider as r };

package/shared/definition21.js

@@ -1,14 +1,11 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition24.js';
-import { f as focusRegistries } from './definition55.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { B as Button$1 } from './button.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { r as ref } from './ref.js';
+import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition25.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 = "/**\n * Do not edit directly\n * Generated on Tue, 26 Sep 2023 13:00:58 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  font: var(--vvd-typography-base-bold);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-fab-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-fab-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-contrast=var(--vvd-color-neutral-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-fab-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-fab-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-fab-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-fab-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-fab-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-fab-cta-contrast=var(--vvd-color-cta-800)] */\n  --_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));\n  /* @cssprop [--vvd-fab-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-fab-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600));\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control.size-expanded {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control:not(.size-expanded) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\nslot[name=icon] {\n  line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n  display: inline-block;\n  order: 1;\n}\n.control.size-extended slot[name=icon] {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16)) / 2.3333);\n}\n.control:not(.size-extended) slot[name=icon] {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.control:not(.connotation-accent, .connotation-cta) .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  block-size: 100%;\n  gap: 24px;\n}\n\n.icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 120px;\n  border-radius: 50%;\n  inline-size: 120px;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  text-align: center;\n}\n\nheader {\n  font: var(--vvd-typography-base-bold);\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n.base.no-actions .actions {\n  display: none;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,91 +18,53 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Fab extends Button$1 {
+class EmptyState extends FoundationElement {
 }
 __decorateClass([
   attr
-], Fab.prototype, "connotation", 2);
+], EmptyState.prototype, "headline", 2);
 __decorateClass([
   attr
-], Fab.prototype, "size", 2);
+], EmptyState.prototype, "icon", 2);
 __decorateClass([
-  attr
-], Fab.prototype, "label", 2);
-applyMixins(Fab, AffixIconWithTrailing);
+  observable
+], EmptyState.prototype, "slottedActionItems", 2);
 
-const getClasses = ({
-  connotation,
-  size,
-  icon,
-  label,
-  iconTrailing,
-  disabled,
-  iconSlottedContent
-}) => classNames(
-  "control",
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
-  ["icon-trailing", iconTrailing],
-  ["disabled", disabled]
+const getClasses = (x) => classNames(
+  "base",
+  ["no-actions", x.slottedActionItems?.length === 0]
 );
-const FabTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
+const EmptyStateTemplate = (context) => {
+  const iconTag = context.tagFor(Icon);
   return html`
-        <button
-            class="${getClasses} "
-            ?autofocus="${(x) => x.autofocus}"
-            ?disabled="${(x) => x.disabled}"
-            form="${(x) => x.formId}"
-            formaction="${(x) => x.formaction}"
-            formenctype="${(x) => x.formenctype}"
-            formmethod="${(x) => x.formmethod}"
-            formnovalidate="${(x) => x.formnovalidate}"
-            formtarget="${(x) => x.formtarget}"
-            name="${(x) => x.name}"
-            type="${(x) => x.type}"
-            value="${(x) => x.value}"
-            aria-atomic="${(x) => x.ariaAtomic}"
-            aria-busy="${(x) => x.ariaBusy}"
-            aria-controls="${(x) => x.ariaControls}"
-            aria-current="${(x) => x.ariaCurrent}"
-            aria-describedby="${(x) => x.ariaDescribedby}"
-            aria-details="${(x) => x.ariaDetails}"
-            aria-disabled="${(x) => x.ariaDisabled}"
-            aria-errormessage="${(x) => x.ariaErrormessage}"
-            aria-expanded="${(x) => x.ariaExpanded}"
-            aria-flowto="${(x) => x.ariaFlowto}"
-            aria-haspopup="${(x) => x.ariaHaspopup}"
-            aria-hidden="${(x) => x.ariaHidden}"
-            aria-invalid="${(x) => x.ariaInvalid}"
-            aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-            aria-label="${(x) => x.ariaLabel}"
-            aria-labelledby="${(x) => x.ariaLabelledby}"
-            aria-live="${(x) => x.ariaLive}"
-            aria-owns="${(x) => x.ariaOwns}"
-            aria-pressed="${(x) => x.ariaPressed}"
-            aria-relevant="${(x) => x.ariaRelevant}"
-            aria-roledescription="${(x) => x.ariaRoledescription}"
-            ${ref("control")}
-        >
-            ${() => focusTemplate}
-					  ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-            ${(x) => x.label}
-        </button>
-`;
+		<div class="${getClasses}">
+			<slot name="graphic">
+				${when(
+    (x) => x.icon,
+    html`<div class="icon-container">
+					<${iconTag} class="icon" name="${(x) => x.icon}" size="5"></${iconTag}>
+				</div>`
+  )}
+			</slot>
+			<div class="content">
+				${when(
+    (x) => x.headline,
+    html`<header>${(x) => x.headline}</header>`
+  )}
+				<slot></slot>
+			</div>
+			<div class="actions">
+				<slot name="action-items" ${slotted("slottedActionItems")}></slot>
+			</div>
+		</div>`;
 };
 
-const fabDefinition = Fab.compose({
-  baseName: "fab",
-  template: FabTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const emptyStateDefinition = EmptyState.compose({
+  baseName: "empty-state",
+  template: EmptyStateTemplate,
+  styles
 });
-const fabRegistries = [fabDefinition(), ...iconRegistries, ...focusRegistries];
-const registerFab = registerFactory(fabRegistries);
+const emptyStateRegistries = [emptyStateDefinition(), ...iconRegistries];
+const registerEmptyState = registerFactory(emptyStateRegistries);
 
-export { fabRegistries as a, fabDefinition as f, registerFab as r };
+export { emptyStateRegistries as a, emptyStateDefinition as e, registerEmptyState as r };