@vonage/vivid 3.32.0 → 3.35.0

package/shared/definition18.js

@@ -1,184 +1,262 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { f as focusRegistries } from './definition4.js';
-import './affix.js';
-import './focus.js';
-import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './index2.js';
-import { C as CheckableFormAssociated } from './form-associated.js';
-import { e as keySpace$1 } from './key-codes.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { f as focusTemplateFactory } from './focus2.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 './definition24.js';
+import { B as Button, a as buttonRegistries } from './definition10.js';
+import { E as Elevation, e as elevationRegistries } from './definition56.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';
 
-class _Checkbox extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
- *
- * @internal
- */
-class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * A Checkbox Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
- *
- * @slot checked-indicator - The checked indicator
- * @slot indeterminate-indicator - The indeterminate indicator
- * @slot - The default slot for the label
- * @csspart control - The element representing the visual checkbox control
- * @csspart label - The label
- * @fires change - Emits a custom change event when the checked state changes
- *
- * @public
- */
-class Checkbox$1 extends FormAssociatedCheckbox {
-    constructor() {
-        super();
-        /**
-         * The element's value to be included in form submission when checked.
-         * Default to "on" to reach parity with input[type="checkbox"]
-         *
-         * @internal
-         */
-        this.initialValue = "on";
-        /**
-         * The indeterminate state of the control
-         */
-        this.indeterminate = false;
-        /**
-         * @internal
-         */
-        this.keypressHandler = (e) => {
-            if (this.readOnly) {
-                return;
-            }
-            switch (e.key) {
-                case keySpace$1:
-                    if (this.indeterminate) {
-                        this.indeterminate = false;
-                    }
-                    this.checked = !this.checked;
-                    break;
-            }
-        };
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            if (!this.disabled && !this.readOnly) {
-                if (this.indeterminate) {
-                    this.indeterminate = false;
-                }
-                this.checked = !this.checked;
-            }
-        };
-        this.proxy.setAttribute("type", "checkbox");
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-}
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], Checkbox$1.prototype, "readOnly", void 0);
-__decorate([
-    observable
-], Checkbox$1.prototype, "defaultSlottedNodes", void 0);
-__decorate([
-    observable
-], Checkbox$1.prototype, "indeterminate", 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}";
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n.base {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  vertical-align: middle;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-checkbox-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-checkbox-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-checkbox-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-checkbox-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-checkbox-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-checkbox-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-checkbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-checkbox-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-checkbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-checkbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-checkbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-checkbox-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base: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: var(--vvd-color-neutral-300);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n@supports selector(:focus-visible) {\n  .base:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: 5px;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n\n.indicator {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) - 4px);\n}\n.base:not(.checked) .indicator.checkmark {\n  display: none;\n}\n\n.base:not(.indeterminate) .indicator.minus, .base.checked .indicator.minus {\n  display: none;\n}\n\nlabel {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 0.6);\n  line-height: 1;\n}\n\n.message {\n  margin-block-start: 4px;\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 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}";
 
-const keySpace = ' ';
-let Checkbox = class Checkbox extends Checkbox$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.keypressHandler = e => {
-      switch (e.key) {
-        case keySpace:
-          if (this.indeterminate) {
-            this.indeterminate = false;
-          }
-          this.checked = !this.checked;
-          break;
+    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.clickHandler = () => {
-      if (!this.disabled && !this.readOnly) {
-        if (this.indeterminate) {
-          this.indeterminate = false;
-        }
-        this.checked = !this.checked;
+    this.#handleInternalFormSubmit = (event) => {
+      if (event.target.method !== "dialog") {
+        return;
       }
+      this.open = false;
     };
   }
-};
-__decorate([attr, __metadata("design:type", String)], Checkbox.prototype, "connotation", void 0);
-Checkbox = __decorate([errorText, formElements], Checkbox);
-applyMixins(Checkbox, FormElementHelperText, FormElementSuccessText);
+  #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("click", this.#handleScrimClick);
+    this.#dialog.addEventListener("submit", this.#handleInternalFormSubmit);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#dialog.removeEventListener("click", 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 = ({
-  connotation,
-  readOnly,
-  checked,
-  disabled,
-  indeterminate,
-  errorValidationMessage,
-  successText
-}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], ['readonly', Boolean(readOnly)], ['checked', Boolean(checked) || Boolean(indeterminate)], ['disabled', Boolean(disabled)], ['error connotation-alert', Boolean(errorValidationMessage)], ['success connotation-success', !!successText]);
-const CheckboxTemplate = context => {
-  const focusTemplate = focusTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  return html`<div
-  role="checkbox"
-  aria-checked="${x => x.checked}"
-  aria-required="${x => x.required}"
-  aria-disabled="${x => x.disabled}"
-  aria-readonly="${x => x.readOnly}"
-  tabindex="${x => x.disabled ? null : 0}"
-  @keypress="${(x, c) => x.keypressHandler(c.event)}"
-  @click="${x => x.clickHandler()}"
-  class="${getClasses}"
-  >
-    <div class="control">
-			${when(x => x.checked, html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`)}
-			${when(x => x.indeterminate, html`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`)}
-      ${() => focusTemplate}
-    </div>
-
-    ${when(x => x.label, html`<label>${x => x.label}</label>`)}
-
-  </div>
-
-	${when(x => {
-    var _a;
-    return (_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))}
+  iconPlacement,
+  bodySlottedContent,
+  footerSlottedContent,
+  actionItemsSlottedContent
+}) => classNames(
+  "base",
+  [`icon-placement-${iconPlacement}`, Boolean(iconPlacement)],
+  ["hide-body", !bodySlottedContent?.length],
+  [
+    "hide-footer",
+    !(footerSlottedContent?.length || actionItemsSlottedContent?.length)
+  ]
+);
+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 checkboxDefinition = Checkbox.compose({
-  baseName: 'checkbox',
-  template: CheckboxTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const dialogDefinition = Dialog.compose({
+  baseName: "dialog",
+  template: DialogTemplate,
+  styles: isDialogSupported ? [styles] : [styles, dialogPolyfillStyles]
 });
-const checkboxRegistries = [checkboxDefinition(), ...iconRegistries, ...focusRegistries];
-const registerCheckbox = registerFactory(checkboxRegistries);
+const dialogRegistries = [dialogDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
+const registerDialog = registerFactory(dialogRegistries);
 
-export { checkboxRegistries as a, checkboxDefinition as c, registerCheckbox as r };
+export { dialogRegistries as a, dialogDefinition as d, registerDialog as r };