@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/collection/components/dialog/dialog.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }:host,
 *,
 *::before,
 *::after {
@@ -22,35 +26,48 @@
 [hidden] {
   display: none !important;
 }
-/**
- * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
- * @prop --border-radius: defaults to var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));
- * @prop --content-background: defaults to var(--nano-layer-bg, #fff);
- * @prop --footer-background: defaults to  #f0efed;
- * @prop --box-shadow: defaults to $layer-shadow-xlarge;
- * @prop --close-button-color: defaults to #b5aea7;
- * @prop --scrim-color: overlay colour of alert display. Defaults to var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));
- * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #007495;
- * @prop --width: defaults to 60rem;
- * @prop --height: defaults to auto;
- * @prop --nano-layer-overlay-blur: inheritable theme applied to backdrop. Default to var(--nano-layer-overlay-blur, 3px)
- */
+@media (prefers-reduced-motion: reduce) {
+    :host,
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }/** Typography */
 :host {
-  --border-radius: var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));
-  --content-background: #fafafa;
-  --footer-content: #e4e6e8;
-  --scrim-color: var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));
-  --box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
-  --close-button-color: #b5aea7;
-  --width: 60rem;
+  /**
+   * @prop --border-radius: border radius of the dialog. Defaults to 0.
+   * @prop --content-background: background color of the dialog content. Defaults to var(--nano-color-neutral-75).
+   * @prop --footer-content: background color of the dialog footer. Defaults to var(--nano-color-neutral-75).
+   * @prop --scrim-color: color of the dialog scrim. Defaults to var(--nano-overlay-background-color).
+   * @prop --box-shadow: box shadow of the dialog. Defaults to var(--nano-shadow-l3).
+   * @prop --close-button-color: color of the close button. Defaults to var(--nano-color-primary-1200).
+   * @prop --width: width of the dialog. Defaults to 60rem.
+   * @prop --height: height of the dialog. Defaults to auto.
+   * @prop --body-padding-v: vertical padding of the dialog body. Defaults to var(--nano-spacing-l1-default).
+   * @prop --body-padding-h: horizontal padding of the dialog body. Defaults to var(--nano-spacing-l1-default).
+   * @prop --header-padding-v: vertical padding of the dialog header. Defaults to var(--nano-spacing-l).
+   * @prop --header-padding-h: horizontal padding of the dialog header. Defaults to var(--nano-spacing-l1-default).
+   * @prop --footer-padding-v: vertical padding of the dialog footer. Defaults to var(--nano-spacing-l).
+   * @prop --footer-padding-h: horizontal padding of the dialog footer. Defaults to var(--nano-spacing-l1-default)
+   */
+  --border-radius: 0;
+  --content-background: var(--nano-color-neutral-75);
+  --footer-content: var(--nano-color-neutral-75);
+  --scrim-color: var(--nano-overlay-background-color);
+  --box-shadow: var(--nano-shadow-l3);
+  --close-button-color: var(--nano-color-primary-1200);
+  --width: 50rem;
   --height: auto;
-  --tint-color: #00607b;
-  --body-padding-v: var(--nano-spacing-large, 20px);
-  --body-padding-h: var(--nano-spacing-large, 20px);
-  --header-padding-v: var(--nano-spacing-medium, 16px);
-  --header-padding-h: var(--nano-spacing-large, 20px);
-  --footer-padding-v: var(--nano-spacing-medium, 16px);
-  --footer-padding-h: var(--nano-spacing-large, 20px);
+  --body-padding-v: var(--nano-spacing-l1-default);
+  --body-padding-h: var(--nano-spacing-l1-default);
+  --header-padding-v: var(--nano-spacing-l);
+  --header-padding-h: var(--nano-spacing-l1-default);
+  --footer-padding-v: var(--nano-spacing-l);
+  --footer-padding-h: var(--nano-spacing-l1-default);
 }
 
 .dialog {
@@ -59,7 +76,7 @@
   justify-content: center;
   position: fixed;
   inset: 0;
-  z-index: var(--nano-layer-index-modal, 700);
+  z-index: var(--nano-z-index-modal);
   border: none;
   inline-size: unset;
   block-size: unset;
@@ -69,27 +86,25 @@
 .dialog::backdrop {
   display: none;
 }
+
 .dialog__panel {
   display: flex;
   flex-direction: column;
   z-index: 2;
   inline-size: var(--width);
   block-size: var(--height);
-  max-inline-size: calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));
-  max-block-size: calc(92vh - var(--nano-spacing-xlarge, 24px));
+  max-inline-size: calc(100% - (var(--nano-spacing-xl) + var(--nano-scroll-lock-size)));
+  max-block-size: calc(92vh - var(--nano-spacing-xl));
   background-color: var(--content-background);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   opacity: 0;
   transform: scale(0.8);
-  transition: var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;
+  transition: var(--nano-transition-fast) opacity, var(--nano-transition-fast) transform;
 }
 .dialog__panel:focus {
   outline: none;
 }
-.dialog--with-ribbon .dialog__panel {
-  border-block-start: 5px solid var(--tint-color);
-}
 .dialog--open .dialog__panel {
   display: flex;
   opacity: 1;
@@ -109,44 +124,39 @@
     transform: scale(1);
   }
 }
+
 .dialog__header {
   flex: 0 0 auto;
   display: flex;
   inline-size: 100%;
   background-color: var(--content-background);
   border-radius: var(--border-radius) var(--border-radius) 0 0;
-  transition: var(--nano-transition-fast, 0.1s) box-shadow;
+  transition: var(--nano-transition-x-fast) box-shadow;
   min-inline-size: auto;
+  padding-block: var(--header-padding-v);
+  padding-inline: var(--header-padding-h);
 }
 [stuck] .dialog__header {
-  box-shadow: var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));
+  box-shadow: var(--nano-shadow-l0);
 }
+
 .dialog__title {
   flex: 1 1 auto;
-  font-size: var(--nano-fontsize-large, 1.25rem);
-  line-height: 1.6;
-  padding-block: var(--header-padding-v);
-  padding-inline: var(--header-padding-h);
+  font-weight: var(--nano-font-weight-normal);
+  font-size: var(--nano-font-size-xl);
+  line-height: var(--nano-line-height-denser);
 }
-.dialog .dialog__close-icon {
+
+.dialog__close-icon {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  font-size: var(--nano-fontsize-xlarge, 1.5rem);
-  padding-block: 0;
-  padding-inline: var(--header-padding-h);
+  font-size: 1.375rem;
+  position: relative;
+  inset-inline-end: calc(var(--nano-spacing-l1-default) / 2 * -1);
   --color: var(--close-button-color);
 }
-.dialog__body {
-  padding-block: 0 var(--body-padding-v);
-  padding-inline: var(--body-padding-h);
-}
-.dialog:not(.dialog--has-header) .dialog__body {
-  padding-block-start: var(--body-padding-v);
-}
-.dialog__body ::slotted(*) {
-  max-inline-size: 100%;
-}
+
 .dialog__body-wrap {
   flex: 1 1 auto;
   overflow: auto;
@@ -165,6 +175,18 @@
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
+
+.dialog__body {
+  padding-block: 0 var(--body-padding-v);
+  padding-inline: var(--body-padding-h);
+}
+.dialog:not(.dialog--has-header) .dialog__body {
+  padding-block-start: var(--body-padding-v);
+}
+.dialog__body ::slotted(*) {
+  max-inline-size: 100%;
+}
+
 .dialog__footer {
   inline-size: 100%;
   padding-block: var(--footer-padding-v);
@@ -174,40 +196,20 @@
   position: relative;
   inset-block-start: 1px;
   min-inline-size: auto;
-}
-.dialog__footer ::slotted(button) {
-  margin-inline-end: var(--nano-spacing-small, 8px) !important;
+  border-block-start: 1px solid var(--nano-color-neutral-300);
+  gap: var(--nano-spacing-md);
+  display: inline-flex;
 }
 .dialog:not(.dialog--has-footer) .dialog__footer {
   display: none;
 }
-.dialog__close-txt {
-  color: var(--tint-color);
-  border: none;
-  text-decoration: underline;
-  margin: 0;
-  text-underline-offset: 4px;
-  background-color: transparent;
-  font: inherit;
-  -webkit-box-align: center;
-  cursor: pointer;
-  font-size: var(--nano-fontsize-small, 0.875rem);
-  padding: 0.5rem;
-  border-radius: var(--nano-border-radius-small, 2px);
-  transition: box-shadow 100ms ease-in-out;
-}
-.dialog__close-txt:focus {
-  outline: none;
-  box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
-}
+
 .dialog__overlay {
   position: fixed;
   inset: 0 !important;
   background-color: var(--scrim-color);
   opacity: 0;
-  transition: var(--nano-transition-fast, 0.3s) opacity;
-  -webkit-backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));
-          backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));
+  transition: var(--nano-transition-fast) opacity;
 }
 .dialog--open .dialog__overlay {
   opacity: 1;

package/dist/collection/components/dialog/dialog.helpers.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { transformTag } from "../../utils/renderer";
 /**
@@ -21,13 +21,20 @@ export function nanoCreateDialog(body, buttons = [], dialogOptions) {
         innerHTML: `
       ${body}
       ${buttons.length
-            ? buttons
-                .map((btn, i) => `<button data-btn="${i}" class="button ${btn.classes}" slot="footer">${btn.content}</button>`)
-                .join('')
+            ? `<nano-cta group="balanced" slot="footer">` +
+                buttons
+                    .map((btn, i) => `<button 
+                  data-btn="${i}" 
+                  class="${btn.classes}"
+                  theme="${btn.theme}"
+                  secondary="${btn.secondary ? 'true' : 'false'}"
+                >${btn.content}</button>`)
+                    .join('') +
+                `</nano-cta>`
             : ''}`,
     });
     if (buttons.length) {
-        Array.from(dialog.querySelectorAll('button[slot="footer"]')).map((btn) => {
+        Array.from(dialog.querySelectorAll('nano-cta[slot="footer"] button')).map((btn) => {
             const foundBtn = buttons.find((_fb, i) => btn.dataset.btn === i.toString());
             if (foundBtn && foundBtn.handler) {
                 btn.addEventListener('click', foundBtn.handler);
@@ -35,6 +42,10 @@ export function nanoCreateDialog(body, buttons = [], dialogOptions) {
         });
     }
     document.body.appendChild(dialog);
-    return dialog;
+    return new Promise((resolve) => {
+        requestAnimationFrame(async (_) => {
+            await dialog.show();
+            resolve(dialog);
+        });
+    });
 }
-//# sourceMappingURL=dialog.helpers.js.map

package/dist/collection/components/dialog/dialog.js

@@ -1,16 +1,20 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 import Modal from "../../utils/modal";
 import { lockBodyScrolling, unlockBodyScrolling } from "../../utils/scroll";
-import { hasSlot } from "../../utils/slot";
+import { HasSlotController } from "../../utils/slot";
 import { ComponentStore, } from "../../utils/store/component-store";
+import { getTabbableElements } from "../../utils/tabbable";
 let id = 0;
 /**
  * Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
  *
+ * @version 1.0.0
+ * @status stable
+ *
  * @part base - The component’s base wrapper
  * @part overlay - The overlay that covers the screen behind the dialog
  * @part panel - The dialog’s panel (where the dialog and its content are rendered)
@@ -33,6 +37,7 @@ export class Dialog {
     originalTrigger;
     overlay;
     dialog;
+    slotCtrl = new HasSlotController(this, 'footer');
     get panel() {
         return this._panel;
     }
@@ -46,7 +51,6 @@ export class Dialog {
     _panel;
     host;
     noDismiss = false;
-    hasFooter = false;
     hidden = true;
     /** Show a colour ribbon at the top of the modal */
     showRibbon = true;
@@ -64,9 +68,6 @@ export class Dialog {
     /** Set to true to disable the header. This will also remove the default close button,
      * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */
     noHeader = false;
-    /** Set to true to disable the footer. This will also remove the footer close button,
-     * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */
-    noFooter = false;
     /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */
     noUserDismiss = false;
     /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */
@@ -117,15 +118,22 @@ export class Dialog {
             this.dialog.showPopover();
         }
         lockBodyScrolling(this.host);
-        if (this.open) {
-            // Wait for the next frame before setting initial focus so the dialog is technically visible
-            this.host.addEventListener('nanoAfterShow', () => {
-                const nanoInitialFocus = this.nanoInitialFocus.emit();
-                if (!nanoInitialFocus.defaultPrevented) {
-                    this.panel.focus({ preventScroll: true });
-                }
-            }, { once: true });
+        // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the
+        // drawer's animation to jitter.
+        const autoFocusTarget = this.host.querySelector('[autofocus]');
+        if (autoFocusTarget) {
+            autoFocusTarget.removeAttribute('autofocus');
         }
+        // Wait for the next frame before setting initial focus so the dialog is technically visible
+        this.host.addEventListener('nanoAfterShow', () => {
+            const nanoInitialFocus = this.nanoInitialFocus.emit();
+            if (!nanoInitialFocus.defaultPrevented) {
+                const firstTabbable = autoFocusTarget ||
+                    getTabbableElements(this.host, true, true, true)[0] ||
+                    this.panel;
+                firstTabbable.focus({ preventScroll: true });
+            }
+        }, { once: true });
     }
     /** Hides the dialog */
     async hide() {
@@ -143,8 +151,13 @@ export class Dialog {
         this.stopVideos();
         // Restore focus to the original trigger
         const trigger = this.originalTrigger;
-        if (trigger && typeof trigger.focus === 'function') {
-            setTimeout(() => trigger.focus());
+        if (trigger) {
+            if (trigger['setFocus'] && typeof trigger['setFocus'] === 'function') {
+                // @ts-expect-error
+                trigger.setFocus();
+            }
+            else
+                trigger.focus();
         }
         setTimeout(() => {
             if (!this.open && typeof this.dialog?.hidePopover === 'function') {
@@ -186,9 +199,6 @@ export class Dialog {
             }
         }
     };
-    handleSlotChange = () => {
-        this.hasFooter = hasSlot(this.host, 'footer');
-    };
     stopVideos() {
         const videos = Array.from(this.host.querySelectorAll('iframe,video'));
         videos.forEach((video) => {
@@ -205,15 +215,17 @@ export class Dialog {
         this.modal = new Modal(this.host);
     }
     componentWillLoad() {
-        this.handleSlotChange();
-        // Show on init if open
-        if (this.open)
-            this.show();
-        if (this.storeId)
+        if (this.storeId) {
             ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);
+        }
     }
     componentDidLoad() {
         this.dialog.hidden = !this.open;
+        // Show on init if open
+        if (this.open) {
+            this.show();
+            this.nanoAfterShow.emit();
+        }
     }
     disconnectedCallback() {
         unlockBodyScrolling(this.host);
@@ -222,14 +234,14 @@ export class Dialog {
         this.panel.removeEventListener('transitionend', this.handleTransitionEnd);
     }
     render() {
-        return (h(Host, { key: 'ecd2ed516be353ff67709a8091bb4bf3efe6f250', class: "nano-dialog" }, h("div", { key: 'c461f3cb97b4bec6409eddf83934cba04d3f649d', part: "base", class: {
+        return (h(Host, { key: '40e8bc877fd5b34bbc02b9ab28a331d6bf81415a', class: "nano-dialog" }, h("div", { key: '3d8c4f2b68831a42039e597d532e2efe680082df', part: "base", class: {
                 dialog: true,
                 'dialog--open': this.open,
-                'dialog--has-footer': !this.noFooter,
+                'dialog--has-footer': this.slotCtrl.has('footer'),
                 'dialog--has-header': !this.noHeader,
                 'dialog--nodismiss': this.noDismiss,
                 'dialog--with-ribbon': this.showRibbon,
-            }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele), popover: "manual" }, h("div", { key: 'e54d7cf6106039f4d6c19357576de9da241970ab', part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { key: '0e5faa8f6c97e584e1c3f2ffe079b7548466f5f1', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": !this.hidden ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, h("div", { key: '3a51d64ddd77f662e2aaea65d5f7ddf0895fb334', class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", { key: '43e5d67892f8afeeef5d6528407888175fcedd64' }, h("header", { key: '229b41c3da0bdf7af0d2ff7670059d5213e80f6a', part: "header", class: "dialog__header" }, h("span", { key: '2432a5424e4307610d9ea546f9fd95010ea15f4f', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: 'fa310058f83f77addd68ebffe137dfe98dd21d02', name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { key: '628a2209cc13e3b2b97512debfa5c4495ab63ff3', part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/xmark" }))))), h("div", { key: '081b6c433700ebfdd17919f007a2a15dc48a9510', part: "body", class: "dialog__body" }, h("slot", { key: '704d5a44e1c47d7de9b67b5911bba385991e0c95' })), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { key: '908ca9562cd246cc520c396725b68026cd610a26', position: "bottom" }, h("footer", { key: '9c5c2a8e3c8851b729453a1ac1a35cfeac240302', part: "footer", class: "dialog__footer" }, h("slot", { key: 'e2b48e7a7ef217c06ee6600f8b2000e3a0906a38', name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { key: 'f99cee27f04c252ace3fb9f4305013f10cce07fc', class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
+            }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele), popover: "manual" }, h("div", { key: '48ec09fb5c08830fd9f4f54e528ce47d16dcf60e', part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { key: '9b28aef25fc3054e329e87293e1f24b1f7bd4f63', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": !this.hidden ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, h("div", { key: 'a25853d8c1d11e52235d6d9300cc39e529b3306f', class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", { key: '111ee49da4468e834046ecef442873d7956a9a8f' }, h("header", { key: '5f40b8920bd3b7ddac34d08593752cdc58a64f4f', part: "header", class: "dialog__header" }, h("span", { key: '2f35793fb4c9009db7321c27feed4448c5a67ada', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: '0b5de133cf8f63237cccafb96fbe635c82bdf8fb', name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { key: 'd517fbc641ba1e35040f08e1ba53b56d2e2f1fcd', part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/xmark" }))))), h("div", { key: 'd09658d8fa0c306068e4ccf77dbae233e345a648', part: "body", class: "dialog__body" }, h("slot", { key: '46ef0d9c1ca1a136e15baa859a19b7e46e467d3c' })), this.slotCtrl.has('footer') && (h("nano-sticker", { key: '86dc8c994c6e3d3f7677ce9c032a3a1b9433a5e3', position: "bottom" }, h("footer", { key: '6876b4a53b64469170ee81c6d442e217c844596f', part: "footer", class: "dialog__footer" }, h("slot", { key: 'faff1e531b53fc1895ade69bcdf8360ceedfa619', name: "footer" })))))))));
     }
     static get is() { return "nano-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -247,6 +259,7 @@ export class Dialog {
         return {
             "showRibbon": {
                 "type": "boolean",
+                "attribute": "show-ribbon",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -261,12 +274,12 @@ export class Dialog {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-ribbon",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -281,12 +294,12 @@ export class Dialog {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -301,31 +314,11 @@ export class Dialog {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "noHeader": {
                 "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to true to disable the header. This will also remove the default close button,\nso please ensure you  provide an easy, accessible way for users to dismiss the dialog."
-                },
-                "getter": false,
-                "setter": false,
                 "attribute": "no-header",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "noFooter": {
-                "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -336,16 +329,16 @@ export class Dialog {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set to true to disable the footer. This will also remove the footer close button,\nso please ensure you  provide an easy, accessible way for users to dismiss the dialog."
+                    "text": "Set to true to disable the header. This will also remove the default close button,\nso please ensure you  provide an easy, accessible way for users to dismiss the dialog."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-footer",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noUserDismiss": {
                 "type": "boolean",
+                "attribute": "no-user-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -360,12 +353,12 @@ export class Dialog {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-user-dismiss",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "storeId": {
                 "type": "string",
+                "attribute": "store-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -380,11 +373,11 @@ export class Dialog {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "store-id",
                 "reflect": false
             },
             "storeMethod": {
                 "type": "string",
+                "attribute": "store-method",
                 "mutable": false,
                 "complexType": {
                     "original": "StorageMethods",
@@ -405,12 +398,12 @@ export class Dialog {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "store-method",
                 "reflect": false,
                 "defaultValue": "'url-hash'"
             },
             "hoist": {
                 "type": "boolean",
+                "attribute": "hoist",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -425,7 +418,6 @@ export class Dialog {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hoist",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -434,7 +426,6 @@ export class Dialog {
     static get states() {
         return {
             "noDismiss": {},
-            "hasFooter": {},
             "hidden": {}
         };
     }
@@ -584,4 +575,3 @@ export class Dialog {
             }];
     }
 }
-//# sourceMappingURL=dialog.js.map