@vonage/vivid 3.31.0 → 3.32.0

package/shared/definition24.js

@@ -1,76 +1,124 @@
-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 { _ as __decorate, a as attr, b as __metadata, o as observable, h as html, r as registerFactory } from './index.js';
+import { f as focusRegistries } from './definition4.js';
+import { i as iconRegistries } from './definition3.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import './focus.js';
+import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
+import { T as TextField$1 } from './text-field2.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { c as css_248z } from './text-field.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { w as when } from './when.js';
+import { r as ref } from './ref.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",
-};
+let TextField = class TextField extends TextField$1 {};
+__decorate([attr, __metadata("design:type", String)], TextField.prototype, "appearance", void 0);
+__decorate([attr, __metadata("design:type", String)], TextField.prototype, "shape", void 0);
+__decorate([attr, __metadata("design:type", String)], TextField.prototype, "autoComplete", void 0);
+__decorate([observable, __metadata("design:type", Array)], TextField.prototype, "actionItemsSlottedContent", void 0);
+TextField = __decorate([errorText, formElements], TextField);
+applyMixins(TextField, AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
 
-/**
- * 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
- */
-class Divider$1 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;
-    }
+const getStateClasses = ({
+  errorValidationMessage,
+  disabled,
+  value,
+  readOnly,
+  placeholder,
+  appearance,
+  shape,
+  label,
+  successText,
+  actionItemsSlottedContent
+}) => classNames(['error connotation-alert', Boolean(errorValidationMessage)], ['disabled', disabled], ['has-value', Boolean(value)], ['readonly', readOnly], ['placeholder', Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['no-label', !label], ['success connotation-success', Boolean(successText)], ['action-items', !!(actionItemsSlottedContent === null || actionItemsSlottedContent === void 0 ? void 0 : actionItemsSlottedContent.length)]);
+function renderLabel() {
+  return html`
+	  <label for="control" class="label">
+		  ${x => x.label}
+	  </label>`;
 }
-__decorate([
-    attr
-], Divider$1.prototype, "role", void 0);
-__decorate([
-    attr
-], Divider$1.prototype, "orientation", void 0);
-
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 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 {}
+function renderCharCount() {
+  return html`
+		<span class="char-count">${x => x.value ? x.value.length : 0} / ${x => x.maxlength}</span>
+	`;
+}
+const TextfieldTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html`
+	<div class="base ${getStateClasses}">
+    ${when(x => x.charCount && x.maxlength, renderCharCount())}
+    ${when(x => x.label, renderLabel())}
+    <div class="fieldset">
+      ${x => affixIconTemplate(x.icon)}
+			<div class="wrapper">
+				<input class="control"
+            id="control"
+            @input="${x => x.handleTextInput()}"
+            @change="${x => x.handleChange()}"
+            ?autofocus="${x => x.autofocus}"
+            ?disabled="${x => x.disabled}"
+            list="${x => x.list}"
+            maxlength="${x => x.maxlength}"
+            minlength="${x => x.minlength}"
+            pattern="${x => x.pattern}"
+            placeholder="${x => x.placeholder}"
+            ?readonly="${x => x.readOnly}"
+            ?required="${x => x.required}"
+            size="${x => x.size}"
+            autocomplete="${x => x.autoComplete}"
+            name="${x => x.name}"
+            ?spellcheck="${x => x.spellcheck}"
+            :value="${x => x.value}"
+            type="${x => x.type}"
+            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-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-relevant="${x => x.ariaRelevant}"
+            aria-roledescription="${x => x.ariaRoledescription}"
+            ${ref('control')}
+      />
+      	${() => focusTemplate}
+			</div>
+			<div class="action-items-wrapper">
+				<slot name="action-items"  ${slotted('actionItemsSlottedContent')}></slot>
+			</div>
 
-const getClasses = ({
-  orientation
-}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
-const DividerTemplate = () => html` 
-  <span
-  class="${getClasses}"
-  	orientation="${x => x.orientation}"
-  	role="${x => x.role}"
-  ></span>`;
+    </div>
+	  ${when(x => {
+    var _a;
+    return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
+  }, getFeedbackTemplate('helper', context))}
+	  ${when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context))}
+	  ${when(x => x.successText, getFeedbackTemplate('success', context))}
+	</div>`;
+};
 
-const dividerDefinition = Divider.compose({
-  baseName: 'divider',
-  template: DividerTemplate,
-  styles: css_248z
+const textFieldDefinition = TextField.compose({
+  baseName: 'text-field',
+  template: TextfieldTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const dividerRegistries = [dividerDefinition()];
-const registerDivider = registerFactory(dividerRegistries);
+const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
+const registerTextField = registerFactory(textFieldRegistries);
 
-export { Divider as D, dividerDefinition as a, dividerRegistries as d, registerDivider as r };
+export { TextField as T, textFieldDefinition as a, registerTextField as r, textFieldRegistries as t };

package/shared/definition25.js

@@ -1,46 +1,76 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.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';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 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",
+};
 
-class EmptyState extends FoundationElement {}
-__decorate([attr, __metadata("design:type", String)], EmptyState.prototype, "headline", void 0);
-__decorate([attr, __metadata("design:type", String)], EmptyState.prototype, "icon", void 0);
-__decorate([observable, __metadata("design:type", Array)], EmptyState.prototype, "slottedActionItems", void 0);
+/**
+ * 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
+ */
+class Divider$1 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 getClasses = x => {
-  var _a;
-  return classNames('base', ['no-actions', ((_a = x.slottedActionItems) === null || _a === void 0 ? void 0 : _a.length) === 0]);
-};
-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>`;
-};
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 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 {}
+
+const getClasses = ({
+  orientation
+}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
+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: css_248z
 });
-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, dividerDefinition as a, dividerRegistries as d, registerDivider as r };

package/shared/definition26.js

@@ -1,85 +1,233 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, d as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, o as observable, f as __classPrivateFieldSet, h as html, r as registerFactory } from './index.js';
 import { i as iconRegistries } from './definition3.js';
-import { f as focusRegistries } from './definition4.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.js';
-import { B as Button } from './button.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { r as ref } from './ref.js';
+import { B as Button, b as buttonRegistries } from './definition7.js';
+import { E as Elevation, e as elevationRegistries } from './definition8.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';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 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 */\n.icon {\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n.control.size-extended .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) .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}";
+var css_248z$1 = "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}";
 
-class Fab extends Button {}
-__decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
-__decorate([attr, __metadata("design:type", String)], Fab.prototype, "size", void 0);
-__decorate([attr, __metadata("design:type", String)], Fab.prototype, "label", void 0);
-applyMixins(Fab, AffixIconWithTrailing);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 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}";
+
+var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;
+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);
+    _Dialog_instances.add(this);
+    this.open = false;
+    this.fullWidthBody = false;
+    this.ariaLabelledBy = null;
+    this.ariaLabel = null;
+    this.ariaDescribedBy = null;
+    _Dialog_modal.set(this, false);
+    _Dialog_dialogElement.set(this, void 0);
+    _Dialog_handleScrimClick.set(this, event => {
+      if (event.target !== __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) {
+        return;
+      }
+      const rect = __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).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;
+    });
+    _Dialog_handleInternalFormSubmit.set(this, event => {
+      if (event.target.method !== 'dialog') {
+        return;
+      }
+      this.open = false;
+    });
+  }
+  set returnValue(value) {
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).returnValue = value;
+  }
+  get returnValue() {
+    var _a;
+    return (_a = __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) === null || _a === void 0 ? void 0 : _a.returnValue;
+  }
+  get modal() {
+    return __classPrivateFieldGet(this, _Dialog_modal, "f");
+  }
+  openChanged(oldValue, newValue) {
+    if (oldValue === undefined) {
+      return;
+    }
+    if (!newValue) {
+      this.close();
+    } else {
+      if (__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get)) {
+        __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).open = true;
+      }
+    }
+  }
+  close() {
+    if (__classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).open) {
+      __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).close();
+      this.$emit('close', this.returnValue, {
+        bubbles: false
+      });
+    }
+    this.open = false;
+    __classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, false);
+  }
+  show() {
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).show();
+    this.open = true;
+  }
+  showModal() {
+    __classPrivateFieldGet(this, _Dialog_instances, "m", _Dialog_handleModal).call(this, true);
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).showModal();
+    this.open = true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).addEventListener('click', __classPrivateFieldGet(this, _Dialog_handleScrimClick, "f"));
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).addEventListener('submit', __classPrivateFieldGet(this, _Dialog_handleInternalFormSubmit, "f"));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).removeEventListener('click', __classPrivateFieldGet(this, _Dialog_handleScrimClick, "f"));
+    __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).removeEventListener('submit', __classPrivateFieldGet(this, _Dialog_handleInternalFormSubmit, "f"));
+  }
+}
+_Dialog_modal = new WeakMap(), _Dialog_dialogElement = new WeakMap(), _Dialog_handleScrimClick = new WeakMap(), _Dialog_handleInternalFormSubmit = new WeakMap(), _Dialog_instances = new WeakSet(), _Dialog_dialog_get = function _Dialog_dialog_get() {
+  if (!__classPrivateFieldGet(this, _Dialog_dialogElement, "f")) {
+    __classPrivateFieldSet(this, _Dialog_dialogElement, this.shadowRoot.querySelector('dialog'), "f");
+    if (__classPrivateFieldGet(this, _Dialog_dialogElement, "f")) {
+      __classPrivateFieldGet(this, _Dialog_dialogElement, "f").open = this.open;
+      if (dialogPolyfill) {
+        dialogPolyfill.registerDialog(__classPrivateFieldGet(this, _Dialog_dialogElement, "f"));
+      }
+    }
+  }
+  return __classPrivateFieldGet(this, _Dialog_dialogElement, "f");
+}, _Dialog_handleModal = function _Dialog_handleModal(show) {
+  __classPrivateFieldSet(this, _Dialog_modal, show, "f");
+  __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).toggleAttribute('aria-modal', show);
+  __classPrivateFieldGet(this, _Dialog_instances, "a", _Dialog_dialog_get).classList.toggle('modal', show);
+};
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Dialog.prototype, "open", void 0);
+__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "icon", void 0);
+__decorate([attr({
+  attribute: 'icon-placement'
+}), __metadata("design:type", String)], Dialog.prototype, "iconPlacement", void 0);
+__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "subtitle", void 0);
+__decorate([attr, __metadata("design:type", String)], Dialog.prototype, "headline", void 0);
+__decorate([attr({
+  attribute: 'full-width-body',
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Dialog.prototype, "fullWidthBody", void 0);
+__decorate([attr({
+  attribute: 'aria-labelledby'
+}), __metadata("design:type", Object)], Dialog.prototype, "ariaLabelledBy", void 0);
+__decorate([attr({
+  attribute: 'aria-label'
+}), __metadata("design:type", Object)], Dialog.prototype, "ariaLabel", void 0);
+__decorate([attr({
+  attribute: 'aria-describedby'
+}), __metadata("design:type", Object)], Dialog.prototype, "ariaDescribedBy", void 0);
+__decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "bodySlottedContent", void 0);
+__decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "footerSlottedContent", void 0);
+__decorate([observable, __metadata("design:type", Array)], Dialog.prototype, "actionItemsSlottedContent", void 0);
 
 const getClasses = ({
-  connotation,
-  size,
-  icon,
-  label,
-  iconTrailing,
-  disabled
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['disabled', disabled]);
-const FabTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
+  iconPlacement,
+  bodySlottedContent,
+  footerSlottedContent,
+  actionItemsSlottedContent
+}) => classNames('base', [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)], ['hide-body', !(bodySlottedContent === null || bodySlottedContent === void 0 ? void 0 : bodySlottedContent.length)], ['hide-footer', !((footerSlottedContent === null || footerSlottedContent === void 0 ? void 0 : footerSlottedContent.length) || (actionItemsSlottedContent === null || actionItemsSlottedContent === void 0 ? void 0 : actionItemsSlottedContent.length))]);
+function icon(iconTag) {
+  return html`
+		<${iconTag} class="icon" name="${x => x.icon}"></${iconTag}>
+	`;
+}
+function headline() {
   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)}
-            ${x => x.label}
-        </button>
-`;
+	  <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 fabDefinition = Fab.compose({
-  baseName: 'fab',
-  template: FabTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const dialogDefinition = Dialog.compose({
+  baseName: 'dialog',
+  template: DialogTemplate,
+  styles: isDialogSupported ? [css_248z] : [css_248z, css_248z$1]
 });
-const fabRegistries = [fabDefinition(), ...iconRegistries, ...focusRegistries];
-const registerFab = registerFactory(fabRegistries);
+const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
+const registerDialog = registerFactory(dialogRegistries);
 
-export { fabRegistries as a, fabDefinition as f, registerFab as r };
+export { dialogRegistries as a, dialogDefinition as d, registerDialog as r };