diff --git a/.eslintrc.js b/.eslintrc.js
index e922731d..01390bdf 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -29,7 +29,6 @@ module.exports = {
   },
   rules: {
     'no-setter-return': 'off',
-    'ember/classic-decorator-no-classic-methods': 'warn',
     'ember/classic-decorator-hooks': 'warn',
     'ember/no-classic-classes': 'warn',
     'ember/no-classic-components': 'warn',
diff --git a/tests/acceptance/basic-test.js b/tests/acceptance/basic-test.js
index 39d67c4f..6ee8064a 100644
--- a/tests/acceptance/basic-test.js
+++ b/tests/acceptance/basic-test.js
@@ -27,26 +27,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-basic button',
       dialogText: 'Basic',
       closeSelector: overlaySelector,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-basic button',
       dialogText: 'Basic',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -55,26 +41,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-translucent button',
       dialogText: 'With Translucent Overlay',
       closeSelector: overlaySelector,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-translucent button',
       dialogText: 'With Translucent Overlay',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -83,26 +55,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-without-overlay button',
       dialogText: 'Without Overlay',
       closeSelector: '#example-without-overlay',
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-without-overlay button',
       dialogText: 'Without Overlay',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -111,26 +69,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-translucent button',
       dialogText: 'With Translucent Overlay',
       closeSelector: overlaySelector,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-translucent button',
       dialogText: 'With Translucent Overlay',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -139,26 +83,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-overlay-sibling button',
       dialogText: 'With Translucent Overlay as Sibling',
       closeSelector: overlaySelector,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
 
     await assert.dialogOpensAndCloses({
       openSelector: '#example-overlay-sibling button',
       dialogText: 'With Translucent Overlay as Sibling',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -191,24 +121,12 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
             'custom-styles-modal-container',
             'has provided container-class',
           );
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
       },
     });
     await assert.dialogOpensAndCloses({
       openSelector: '#example-custom-styles button',
       dialogText: 'Custom Styles',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -224,11 +142,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
             'ember-modal-dialog-target-attachment-left',
             'has targetAttachment class name',
           );
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
       },
     });
   });
@@ -238,13 +151,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
       openSelector: '#example-target-element button',
       dialogText: 'Target - Element',
       closeSelector: dialogCloseButton,
-      whileOpen: async function () {
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
-      },
     });
   });
 
@@ -257,11 +163,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
         assert
           .dom(dialogSelector)
           .hasClass('my-cool-modal', 'has provided containerClassNames');
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
       },
     });
   });
@@ -278,11 +179,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
         assert
           .dom(dialogSelector)
           .hasClass('my-cool-modal-2', 'has provided containerClassNames');
-        assert.hasDataTest(
-          dialogSelector,
-          'my-data-test',
-          'dialog has data-test attribute',
-        );
       },
     });
   });
@@ -302,11 +198,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
     assert
       .dom(inPlaceDialogSelector)
       .hasClass('my-custom-class', 'has provided containerClass');
-    assert.hasDataTest(
-      inPlaceDialogSelector,
-      'my-data-test',
-      'dialog has data-test attribute',
-    );
     assert.strictEqual(
       getComputedStyle(dialogElement).getPropertyValue('position'),
       'static',
@@ -356,11 +247,6 @@ module('Acceptance: modal-dialog | no animation, no tether', function (hooks) {
     assert
       .dom(inPlaceDialogSelector)
       .hasClass('my-custom-class-2', 'has provided containerClassNames');
-    assert.hasDataTest(
-      inPlaceDialogSelector,
-      'my-data-test',
-      'dialog has data-test attribute',
-    );
     await click(inPlaceCloseButton);
   });
 });
diff --git a/tests/dummy/app/components/component-that-uses-modal-dialog.hbs b/tests/dummy/app/components/component-that-uses-modal-dialog.hbs
deleted file mode 100644
index 08a4e259..00000000
--- a/tests/dummy/app/components/component-that-uses-modal-dialog.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-{{#if this.isShowingModalDialog}}
-  <ModalDialog>
-    <h1>Stop! Modal Time!</h1>
-    <button
-      class="close"
-      type="button"
-      {{action "closeModalDialog"}}
-    >Close</button>
-  </ModalDialog>
-{{/if}}
-
-<h1>A component that has a modal dialog</h1>
-<button
-  class="open"
-  type="button"
-  {{action "openModalDialog"}}
->Open Dialog</button>
\ No newline at end of file
diff --git a/tests/dummy/app/components/component-that-uses-modal-dialog.js b/tests/dummy/app/components/component-that-uses-modal-dialog.js
deleted file mode 100644
index 65daa6fe..00000000
--- a/tests/dummy/app/components/component-that-uses-modal-dialog.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Component from '@ember/component';
-import { action, set } from '@ember/object';
-
-export default class ComponentThatUsesModalDialog extends Component {
-  isShowingModalDialog = false;
-
-  @action
-  openModalDialog() {
-    set(this, 'isShowingModalDialog', true);
-  }
-
-  @action
-  closeModalDialog() {
-    set(this, 'isShowingModalDialog', false);
-  }
-}
diff --git a/tests/dummy/app/components/demo-modal.hbs b/tests/dummy/app/components/demo-modal.hbs
new file mode 100644
index 00000000..88b0da13
--- /dev/null
+++ b/tests/dummy/app/components/demo-modal.hbs
@@ -0,0 +1,34 @@
+<div class="example" id={{@id}}>
+  <h2>{{@title}}</h2>
+
+  <div>
+    {{yield
+      (hash
+        OpenButton=(component
+          "demo-modal/button"
+          label="Open"
+          onClick=this.openModal
+        )
+      )
+      to="menu"
+    }}
+  </div>
+
+  <div>
+    {{yield to="code"}}
+  </div>
+
+  <div>
+    {{yield
+      (hash
+        CloseButton=(component
+          "demo-modal/button"
+          label="Close"
+          onClick=this.closeModal
+        )
+        closeModal=this.closeModal
+        isModalOpen=this.isModalOpen
+      )
+    }}
+  </div>
+</div>
\ No newline at end of file
diff --git a/tests/dummy/app/components/demo-modal.js b/tests/dummy/app/components/demo-modal.js
new file mode 100644
index 00000000..14a6a51b
--- /dev/null
+++ b/tests/dummy/app/components/demo-modal.js
@@ -0,0 +1,19 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoModal extends Component {
+  @tracked isModalOpen = false;
+
+  @action closeModal() {
+    this.isModalOpen = false;
+
+    this.args.onClose?.();
+  }
+
+  @action openModal() {
+    this.isModalOpen = true;
+
+    this.args.onOpen?.();
+  }
+}
diff --git a/tests/dummy/app/components/demo-modal/button.hbs b/tests/dummy/app/components/demo-modal/button.hbs
new file mode 100644
index 00000000..c84c9343
--- /dev/null
+++ b/tests/dummy/app/components/demo-modal/button.hbs
@@ -0,0 +1,8 @@
+<button
+  data-test-button={{@label}}
+  type="button"
+  {{on "click" @onClick}}
+  ...attributes
+>
+  {{@label}}
+</button>
\ No newline at end of file
diff --git a/tests/dummy/app/components/demo-modal/button.js b/tests/dummy/app/components/demo-modal/button.js
new file mode 100644
index 00000000..5c9132f8
--- /dev/null
+++ b/tests/dummy/app/components/demo-modal/button.js
@@ -0,0 +1,5 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+const DemoModalButton = templateOnlyComponent();
+
+export default DemoModalButton;
diff --git a/tests/dummy/app/controllers/animatable.js b/tests/dummy/app/controllers/animatable.js
index 4752cf1b..d919e58f 100644
--- a/tests/dummy/app/controllers/animatable.js
+++ b/tests/dummy/app/controllers/animatable.js
@@ -1,94 +1,7 @@
 import Controller from '@ember/controller';
-import { set, action } from '@ember/object';
 
 import { codeSnippets } from '../utils/code-snippets/animatable';
 
 export default class AnimatableController extends Controller {
   codeSnippets = codeSnippets;
-
-  isShowingBasic = false;
-  isShowingTranslucent = false;
-  isShowingTranslucentWithCallback = false;
-  isShowingWithoutOverlay = false;
-  isShowingWithoutOverlayClickOutsideToClose = false;
-  isShowingWithoutOverlayClickOutsideToCloseAnotherOne = false;
-  isShowingSubclassed = false;
-  isShowingCenteredScrolling = false;
-  isShowingElementCenterModal = false;
-
-  nextAttachment(val) {
-    switch (val) {
-      case 'middle right':
-        return 'bottom center';
-      case 'bottom center':
-        return 'middle left';
-      case 'middle left':
-        return 'top center';
-      case 'top center':
-        return 'middle right';
-    }
-    return false;
-  }
-
-  @action
-  toggleActiveComponent() {
-    if (this.activeComponent === 'modal-dialog') {
-      set(this, 'activeComponent', 'tether-dialog');
-    } else {
-      set(this, 'activeComponent', 'modal-dialog');
-    }
-  }
-
-  @action
-  toggleBasic() {
-    this.toggleProperty('isShowingBasic');
-  }
-
-  @action
-  toggleTranslucent() {
-    this.toggleProperty('isShowingTranslucent');
-  }
-
-  @action
-  toggleTranslucentWithCallback() {
-    this.toggleProperty('isShowingTranslucentWithCallback');
-  }
-
-  @action
-  toggleWithoutOverlay() {
-    this.toggleProperty('isShowingWithoutOverlay');
-  }
-
-  @action
-  toggleWithoutOverlayClickOutsideToClose() {
-    this.toggleProperty('isShowingWithoutOverlayClickOutsideToClose');
-  }
-
-  @action
-  toggleWithoutOverlayClickOutsideToCloseAnotherOne() {
-    this.toggleProperty('isShowingWithoutOverlayClickOutsideToCloseAnotherOne');
-  }
-
-  @action
-  toggleSubclassed() {
-    this.toggleProperty('isShowingSubclassed');
-  }
-
-  @action
-  toggleCenteredScrolling() {
-    this.toggleProperty('isShowingCenteredScrolling');
-
-    if (this.isShowingCenteredScrolling) {
-      document.querySelector('#modal-overlays').classList.add('active');
-      document.body.classList.add('centered-modal-showing');
-    } else {
-      document.querySelector('#modal-overlays').classList.remove('active');
-      document.body.classList.remove('centered-modal-showing');
-    }
-  }
-
-  @action
-  clickedTranslucentOverlay() {
-    window.onClickOverlayCallbackCalled = true;
-  }
 }
diff --git a/tests/dummy/app/controllers/index.js b/tests/dummy/app/controllers/index.js
index b0d6bf23..f06d93a2 100644
--- a/tests/dummy/app/controllers/index.js
+++ b/tests/dummy/app/controllers/index.js
@@ -1,28 +1,14 @@
-import { action, set } from '@ember/object';
+import { action } from '@ember/object';
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 
 import { codeSnippets } from '../utils/code-snippets/index';
 
 export default class IndexController extends Controller {
   codeSnippets = codeSnippets;
 
-  isShowingBasic = false;
-  isShowingTranslucent = false;
-  isShowingTranslucentWithCallback = false;
-  isShowingWithoutOverlay = false;
-  isShowingWithoutOverlayClickOutsideToClose = false;
-  isShowingWithoutOverlayClickOutsideToCloseAnotherOne = false;
-  isShowingCustomStyles = false;
-  isShowingTargetSelector = false;
-  isShowingTargetElement = false;
-  isShowingSubclassed = false;
-  isShowingSubclassed2 = false;
-  isShowingInPlace = false;
-  isShowingCenteredScrolling = false;
-  isShowingElementCenterModal = false;
-  exampleTargetAttachment = 'middle left';
-  exampleAttachment = 'middle right';
-  customContainerClassNames = 'custom-styles-modal-container';
+  @tracked exampleTargetAttachment = 'middle left';
+  @tracked exampleAttachment = 'middle right';
 
   nextAttachment(val) {
     switch (val) {
@@ -38,67 +24,27 @@ export default class IndexController extends Controller {
     return false;
   }
 
-  @action
-  toggleTargetSelector() {
-    if (this.isShowingTargetSelector) {
-      let newTargetAttachment = this.nextAttachment(
-        this.exampleTargetAttachment,
-      );
-      let newAttachment = this.nextAttachment(this.exampleAttachment);
-      set(this, 'exampleTargetAttachment', newTargetAttachment);
-      set(this, 'exampleAttachment', newAttachment);
-      if (newTargetAttachment !== 'middle left') {
-        return;
-      }
-    }
-    this.toggleProperty('isShowingTargetSelector');
+  @action onClickTranslucentOverlay() {
+    window.onClickOverlayCallbackCalled = true;
   }
 
-  @action
-  toggleTargetElement() {
-    if (this.isShowingTargetElement) {
-      let newTargetAttachment = this.nextAttachment(
-        this.exampleTargetAttachment,
-      );
-      let newAttachment = this.nextAttachment(this.exampleAttachment);
-      set(this, 'exampleTargetAttachment', newTargetAttachment);
-      set(this, 'exampleAttachment', newAttachment);
-      if (newTargetAttachment !== 'middle left') {
-        return;
-      }
-    }
-    this.toggleProperty('isShowingTargetElement');
+  @action onCloseCenteredScrolling() {
+    document.querySelector('#modal-overlays').classList.remove('active');
+    document.body.classList.remove('centered-modal-showing');
   }
 
-  @action
-  toggleCenteredScrolling() {
-    this.toggleProperty('isShowingCenteredScrolling');
-
-    if (this.isShowingCenteredScrolling) {
-      document.querySelector('#modal-overlays').classList.add('active');
-      document.body.classList.add('centered-modal-showing');
-    } else {
-      document.querySelector('#modal-overlays').classList.remove('active');
-      document.body.classList.remove('centered-modal-showing');
-    }
+  @action onOpenCenteredScrolling() {
+    document.querySelector('#modal-overlays').classList.add('active');
+    document.body.classList.add('centered-modal-showing');
   }
 
-  @action
-  closeTargetSelector() {
-    set(this, 'isShowingTargetSelector', false);
-    set(this, 'exampleTargetAttachment', 'middle left');
-    set(this, 'exampleAttachment', 'middle right');
-  }
-
-  @action
-  closeTargetElement() {
-    set(this, 'isShowingTargetElement', false);
-    set(this, 'exampleTargetAttachment', 'middle left');
-    set(this, 'exampleAttachment', 'middle right');
-  }
+  @action toggleTarget() {
+    const newTargetAttachment = this.nextAttachment(
+      this.exampleTargetAttachment,
+    );
+    const newAttachment = this.nextAttachment(this.exampleAttachment);
 
-  @action
-  clickedTranslucentOverlay() {
-    window.onClickOverlayCallbackCalled = true;
+    this.exampleTargetAttachment = newTargetAttachment;
+    this.exampleAttachment = newAttachment;
   }
 }
diff --git a/tests/dummy/app/controllers/tethered-animatable.js b/tests/dummy/app/controllers/tethered-animatable.js
index a030eca9..b52cc55f 100644
--- a/tests/dummy/app/controllers/tethered-animatable.js
+++ b/tests/dummy/app/controllers/tethered-animatable.js
@@ -1,24 +1,17 @@
 import Controller from '@ember/controller';
-import { set, action } from '@ember/object';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 import { codeSnippets } from '../utils/code-snippets/tethered-animatable';
 
 export default class TetheredAnimatableController extends Controller {
   codeSnippets = codeSnippets;
 
-  isShowingBasic = false;
-  isShowingTranslucent = false;
-  isShowingTranslucentWithCallback = false;
-  isShowingWithoutOverlay = false;
-  isShowingWithoutOverlayClickOutsideToClose = false;
-  isShowingWithoutOverlayClickOutsideToCloseAnotherOne = false;
-  isShowingTargetSelector = false;
-  isShowingTargetElement = false;
-  isShowingSubclassed = false;
-  isShowingCenteredScrolling = false;
-  isShowingElementCenterModal = false;
-  exampleTargetAttachment = 'middle left';
-  exampleAttachment = 'middle right';
+  @tracked exampleTargetAttachment = 'middle left';
+  @tracked exampleAttachment = 'middle right';
+  @tracked isShowingSeparateStacksModal1 = false;
+  @tracked isShowingSeparateStacksModal2 = false;
+  @tracked isShowingSeparateStacksModal3 = false;
 
   nextAttachment(val) {
     switch (val) {
@@ -34,121 +27,37 @@ export default class TetheredAnimatableController extends Controller {
     return false;
   }
 
-  @action
-  toggleActiveComponent() {
-    if (this.activeComponent === 'modal-dialog') {
-      set(this, 'activeComponent', 'tether-dialog');
-    } else {
-      set(this, 'activeComponent', 'modal-dialog');
-    }
-  }
-
-  @action
-  toggleBasic() {
-    this.toggleProperty('isShowingBasic');
+  @action closeSeparateStackModal1() {
+    this.isShowingSeparateStacksModal1 = false;
   }
 
-  @action
-  toggleTranslucent() {
-    this.toggleProperty('isShowingTranslucent');
+  @action closeSeparateStackModal2() {
+    this.isShowingSeparateStacksModal2 = false;
   }
 
-  @action
-  toggleTranslucentWithCallback() {
-    this.toggleProperty('isShowingTranslucentWithCallback');
+  @action closeSeparateStackModal3() {
+    this.isShowingSeparateStacksModal3 = false;
   }
 
-  @action
-  toggleWithoutOverlay() {
-    this.toggleProperty('isShowingWithoutOverlay');
+  @action openSeparateStackModal1() {
+    this.isShowingSeparateStacksModal1 = true;
   }
 
-  @action
-  toggleWithoutOverlayClickOutsideToClose() {
-    this.toggleProperty('isShowingWithoutOverlayClickOutsideToClose');
-  }
-
-  @action
-  toggleWithoutOverlayClickOutsideToCloseAnotherOne() {
-    this.toggleProperty('isShowingWithoutOverlayClickOutsideToCloseAnotherOne');
-  }
-
-  @action
-  toggleTargetSelector() {
-    if (this.isShowingTargetSelector) {
-      let newTargetAttachment = this.nextAttachment(
-        this.exampleTargetAttachment,
-      );
-      let newAttachment = this.nextAttachment(this.exampleAttachment);
-      set(this, 'exampleTargetAttachment', newTargetAttachment);
-      set(this, 'exampleAttachment', newAttachment);
-      if (newTargetAttachment !== 'middle left') {
-        return;
-      }
-    }
-    this.toggleProperty('isShowingTargetSelector');
-  }
-
-  @action
-  toggleTargetElement() {
-    if (this.isShowingTargetElement) {
-      let newTargetAttachment = this.nextAttachment(
-        this.exampleTargetAttachment,
-      );
-      let newAttachment = this.nextAttachment(this.exampleAttachment);
-      set(this, 'exampleTargetAttachment', newTargetAttachment);
-      set(this, 'exampleAttachment', newAttachment);
-      if (newTargetAttachment !== 'middle left') {
-        return;
-      }
-    }
-    this.toggleProperty('isShowingTargetElement');
+  @action openSeparateStackModal2() {
+    this.isShowingSeparateStacksModal2 = true;
   }
 
-  @action
-  toggleSubclassed() {
-    this.toggleProperty('isShowingSubclassed');
+  @action openSeparateStackModal3() {
+    this.isShowingSeparateStacksModal3 = true;
   }
 
-  @action
-  toggleCenteredScrolling() {
-    this.toggleProperty('isShowingCenteredScrolling');
-
-    if (this.isShowingCenteredScrolling) {
-      document.querySelector('#modal-overlays').classList.add('active');
-      document.body.classList.add('centered-modal-showing');
-    } else {
-      document.querySelector('#modal-overlays').classList.remove('active');
-      document.body.classList.remove('centered-modal-showing');
-    }
-  }
-
-  @action
-  toggleElementCenterModal() {
-    this.toggleProperty('isShowingElementCenterModal');
-    if (this.isShowingElementCenterModal) {
-      set(this, 'targetAttachment', 'elementCenter');
-      set(this, 'exampleTargetAttachment', 'elementCenter');
-      set(this, 'exampleAttachment', 'elementCenter');
-    }
-  }
-
-  @action
-  closeTargetSelector() {
-    set(this, 'isShowingTargetSelector', false);
-    set(this, 'exampleTargetAttachment', 'middle left');
-    set(this, 'exampleAttachment', 'middle right');
-  }
-
-  @action
-  closeTargetElement() {
-    set(this, 'isShowingTargetElement', false);
-    set(this, 'exampleTargetAttachment', 'middle left');
-    set(this, 'exampleAttachment', 'middle right');
-  }
+  @action toggleTarget() {
+    const newTargetAttachment = this.nextAttachment(
+      this.exampleTargetAttachment,
+    );
+    const newAttachment = this.nextAttachment(this.exampleAttachment);
 
-  @action
-  clickedTranslucentOverlay() {
-    window.onClickOverlayCallbackCalled = true;
+    this.exampleTargetAttachment = newTargetAttachment;
+    this.exampleAttachment = newAttachment;
   }
 }
diff --git a/tests/dummy/app/controllers/tethered.js b/tests/dummy/app/controllers/tethered.js
index ef3fa3aa..e0b8ffc7 100644
--- a/tests/dummy/app/controllers/tethered.js
+++ b/tests/dummy/app/controllers/tethered.js
@@ -1,16 +1,14 @@
-import { action, set } from '@ember/object';
+import { action } from '@ember/object';
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 
 import { codeSnippets } from '../utils/code-snippets/tethered';
 
 export default class TetheredController extends Controller {
   codeSnippets = codeSnippets;
 
-  isShowingTargetSelector = false;
-  isShowingTargetElement = false;
-  isShowingElementCenterModal = false;
-  exampleTargetAttachment = 'middle left';
-  exampleAttachment = 'middle right';
+  @tracked exampleTargetAttachment = 'middle left';
+  @tracked exampleAttachment = 'middle right';
 
   nextAttachment(val) {
     switch (val) {
@@ -26,49 +24,13 @@ export default class TetheredController extends Controller {
     return false;
   }
 
-  @action
-  toggleTargetSelector() {
-    if (this.isShowingTargetSelector) {
-      let newTargetAttachment = this.nextAttachment(
-        this.exampleTargetAttachment,
-      );
-      let newAttachment = this.nextAttachment(this.exampleAttachment);
-      set(this, 'exampleTargetAttachment', newTargetAttachment);
-      set(this, 'exampleAttachment', newAttachment);
-      if (newTargetAttachment !== 'middle left') {
-        return;
-      }
-    }
-    this.toggleProperty('isShowingTargetSelector');
-  }
-
-  @action
-  toggleTargetElement() {
-    if (this.isShowingTargetElement) {
-      let newTargetAttachment = this.nextAttachment(
-        this.exampleTargetAttachment,
-      );
-      let newAttachment = this.nextAttachment(this.exampleAttachment);
-      set(this, 'exampleTargetAttachment', newTargetAttachment);
-      set(this, 'exampleAttachment', newAttachment);
-      if (newTargetAttachment !== 'middle left') {
-        return;
-      }
-    }
-    this.toggleProperty('isShowingTargetElement');
-  }
-
-  @action
-  closeTargetSelector() {
-    set(this, 'isShowingTargetSelector', false);
-    set(this, 'exampleTargetAttachment', 'middle left');
-    set(this, 'exampleAttachment', 'middle right');
-  }
+  @action toggleTarget() {
+    const newTargetAttachment = this.nextAttachment(
+      this.exampleTargetAttachment,
+    );
+    const newAttachment = this.nextAttachment(this.exampleAttachment);
 
-  @action
-  closeTargetElement() {
-    set(this, 'isShowingTargetElement', false);
-    set(this, 'exampleTargetAttachment', 'middle left');
-    set(this, 'exampleAttachment', 'middle right');
+    this.exampleTargetAttachment = newTargetAttachment;
+    this.exampleAttachment = newAttachment;
   }
 }
diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
index 02f6be02..ce1c2a0f 100644
--- a/tests/dummy/app/styles/app.css
+++ b/tests/dummy/app/styles/app.css
@@ -128,6 +128,7 @@ body.centered-modal-showing {
   top: 0;
   left: 0;
   overflow-y: scroll;
+  z-index: 1;
 }
 
 .centered-scrolling-overlay {
diff --git a/tests/dummy/app/templates/animatable.hbs b/tests/dummy/app/templates/animatable.hbs
index af1c2fd0..7647d483 100644
--- a/tests/dummy/app/templates/animatable.hbs
+++ b/tests/dummy/app/templates/animatable.hbs
@@ -22,258 +22,214 @@
   />
 </div>
 
-<div class="example" id="example-basic">
-  <h2>Basic</h2>
-
-  <button type="button" {{action "toggleBasic"}}>
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "basic-modal-dialog-animatable-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingBasic}}
-    <ModalDialog
-      @onClose={{action "toggleBasic"}}
-      @overlayPosition="sibling"
-      @clickOutsideToClose={{true}}
-      @animatable={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Basic</p>
-      <button type="button" {{action "toggleBasic"}}>
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-translucent">
-  <h2>With Translucent Overlay</h2>
-
-  <button type="button" {{action "toggleTranslucent"}}>
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "translucent-modal-dialog-animatable-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingTranslucent}}
-    <ModalDialog
-      @onClose={{action "toggleTranslucent"}}
-      @translucentOverlay={{true}}
-      @overlayPosition="sibling"
-      @clickOutsideToClose={{true}}
-      @animatable={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>With Translucent Overlay</p>
-      <button type="button" {{action "toggleTranslucent"}}>
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-without-overlay">
-  <h2>Without Overlay</h2>
-
-  <button type="button" {{action "toggleWithoutOverlay"}}>
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "without-overlay-modal-dialog-animatable-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingWithoutOverlay}}
-    <ModalDialog
-      @onClose={{action "toggleWithoutOverlay"}}
-      @hasOverlay={{false}}
-      @animatable={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Without Overlay</p>
-      <button type="button" {{action "toggleWithoutOverlay"}}>
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div
-  class="example"
-  id="example-without-overlay-click-outside-to-close"
+<DemoModal @id="example-basic" @title="Basic">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "basic-modal-dialog-animatable-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @overlayPosition="sibling"
+        @clickOutsideToClose={{true}}
+        @animatable={{true}}
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Basic</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-translucent"
+  @title="With Translucent Overlay"
 >
-  <h2>Without Overlay - Click Outside to Close</h2>
-
-  <button
-    type="button"
-    {{action "toggleWithoutOverlayClickOutsideToClose"}}
-  >
-    Do It
-  </button>
-  <button
-    id="without-overlay-another-one-button"
-    type="button"
-    {{action
-      "toggleWithoutOverlayClickOutsideToCloseAnotherOne"
-    }}
-  >
-    Another one
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "without-overlay-click-outside-to-close-modal-dialog-animatable-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingWithoutOverlayClickOutsideToClose}}
-    <ModalDialog
-      @onClose={{action
-        "toggleWithoutOverlayClickOutsideToClose"
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "translucent-modal-dialog-animatable-hbs"
       }}
-      @hasOverlay={{false}}
-      @clickOutsideToClose={{true}}
-      @animatable={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Without Overlay - Click Outside to Close</p>
-      <button
-        type="button"
-        {{action "toggleWithoutOverlayClickOutsideToClose"}}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @translucentOverlay={{true}}
+        @overlayPosition="sibling"
+        @clickOutsideToClose={{true}}
+        @animatable={{true}}
       >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-
-  {{#if
-    this.isShowingWithoutOverlayClickOutsideToCloseAnotherOne
-  }}
-    <ModalDialog
-      @onClose={{action
-        "toggleWithoutOverlayClickOutsideToCloseAnotherOne"
+        <h1>Stop! Modal Time!</h1>
+        <p>With Translucent Overlay</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-without-overlay"
+  @title="Without Overlay"
+>
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "without-overlay-modal-dialog-animatable-hbs"
       }}
-      @hasOverlay={{false}}
-      @clickOutsideToClose={{true}}
-      @offset="100px 0"
-      @animatable={{true}}
-    >
-      <h1>Stop! Another modal!</h1>
-      <p>Without Overlay Another One - Click Outside to Close</p>
-      <button
-        type="button"
-        {{action
-          "toggleWithoutOverlayClickOutsideToCloseAnotherOne"
-        }}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @hasOverlay={{false}}
+        @animatable={{true}}
       >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-custom-styles">
-  <h2>Custom Styles</h2>
-
-  <button
-    onclick={{action (mut this.isShowingCustomStyles) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "custom-styles-modal-dialog-animatable-hbs"
-    }}
-    @language="hbs"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "custom-styles-css"}}
-    @language="css"
-  />
-
-  {{#if this.isShowingCustomStyles}}
-    <ModalDialog
-      @onClose={{action (mut this.isShowingCustomStyles) false}}
-      @containerClass="custom-styles-modal-container"
-      @overlayClass="custom-styles-overlay"
-      @wrapperClass="custom-styles-wrapper"
-      @overlayPosition="sibling"
-      @clickOutsideToClose={{true}}
-      @targetAttachment="none"
-      @animatable={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Custom Styles</p>
-      <button
-        type="button"
-        {{action
-          (action (mut this.isShowingCustomStyles) false)
-        }}
+        <h1>Stop! Modal Time!</h1>
+        <p>Without Overlay</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-without-overlay-click-outside-to-close"
+  @title="Without Overlay - Click Outside to Close"
+>
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "without-overlay-click-outside-to-close-modal-dialog-animatable-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @hasOverlay={{false}}
+        @clickOutsideToClose={{true}}
+        @animatable={{true}}
       >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-subclass">
-  <h2>Via Subclass</h2>
-
-  <button type="button" {{action "toggleSubclassed"}}>
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get this.codeSnippets "subclass-js"}}
-    @language="js"
-  />
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "subclass-modal-dialog-animatable-hbs"
-    }}
-    @language="hbs"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "subclass-styles-css"}}
-    @language="css"
-  />
-
-  {{#if this.isShowingSubclassed}}
-    <MyCoolModalDialog
-      @onClose={{action "toggleSubclassed"}}
-      @animatable={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Via Subclass</p>
-      <button type="button" {{action "toggleSubclassed"}}>
-        Close
-      </button>
-    </MyCoolModalDialog>
-  {{/if}}
-</div>
\ No newline at end of file
+        <h1>Stop! Modal Time!</h1>
+        <p>Without Overlay - Click Outside to Close</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal @id="example-custom-styles" @title="Custom Styles">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "custom-styles-modal-dialog-animatable-hbs"
+      }}
+      @language="hbs"
+    />
+
+    <CodeBlock
+      @code={{get this.codeSnippets "custom-styles-css"}}
+      @language="css"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @containerClass="custom-styles-modal-container"
+        @overlayClass="custom-styles-overlay"
+        @wrapperClass="custom-styles-wrapper"
+        @overlayPosition="sibling"
+        @clickOutsideToClose={{true}}
+        @targetAttachment="none"
+        @animatable={{true}}
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Custom Styles</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal @id="example-subclass" @title="Via Subclass">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get this.codeSnippets "subclass-js"}}
+      @language="js"
+    />
+
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "subclass-modal-dialog-animatable-hbs"
+      }}
+      @language="hbs"
+    />
+
+    <CodeBlock
+      @code={{get this.codeSnippets "subclass-styles-css"}}
+      @language="css"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <MyCoolModalDialog
+        @onClose={{D.closeModal}}
+        @animatable={{true}}
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Via Subclass</p>
+        <D.CloseButton />
+      </MyCoolModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
\ No newline at end of file
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index f345d92a..606df1d0 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/tests/dummy/app/templates/index.hbs
@@ -23,587 +23,509 @@
   is passed.
 </p>
 
-<div class="example" id="example-basic">
-  <h2>Basic</h2>
-
-  <button
-    onclick={{action (mut this.isShowingBasic) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get this.codeSnippets "basic-modal-dialog-hbs"}}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingBasic}}
-    <ModalDialog
-      data-test="my-data-test"
-      @onClose={{action (mut this.isShowingBasic) false}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Basic</p>
-      <button
-        onclick={{action (mut this.isShowingBasic) false}}
-        type="button"
-      >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-translucent">
-  <h2>With Translucent Overlay</h2>
-
-  <button
-    onclick={{action (mut this.isShowingTranslucent) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "translucent-modal-dialog-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingTranslucent}}
-    <ModalDialog
-      data-test="my-data-test"
-      @onClose={{action (mut this.isShowingTranslucent) false}}
-      @translucentOverlay={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>With Translucent Overlay</p>
-      <button
-        onclick={{action (mut this.isShowingTranslucent) false}}
-        type="button"
-      >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-translucent-with-callback">
-  <h2>Translucent Overlay with Callback</h2>
-
-  <button
-    onclick={{action
-      (mut this.isShowingTranslucentWithCallback)
-      true
-    }}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "translucent-modal-dialog-with-callback-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingTranslucentWithCallback}}
-    <ModalDialog
-      data-test="my-data-test"
-      @onClose={{action
-        (mut this.isShowingTranslucentWithCallback)
-        false
+<DemoModal @id="example-basic" @title="Basic">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get this.codeSnippets "basic-modal-dialog-hbs"}}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog @onClose={{D.closeModal}}>
+        <h1>Stop! Modal Time!</h1>
+        <p>Basic</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-translucent"
+  @title="With Translucent Overlay"
+>
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "translucent-modal-dialog-hbs"
       }}
-      @translucentOverlay={{true}}
-      @onClickOverlay={{action "clickedTranslucentOverlay"}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Translucent Overlay with Callback</p>
-      <button
-        onclick={{action
-          (mut this.isShowingTranslucentWithCallback)
-          false
-        }}
-        type="button"
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @translucentOverlay={{true}}
       >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-without-overlay">
-  <h2>Without Overlay</h2>
-
-  <button
-    onclick={{action (mut this.isShowingWithoutOverlay) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "modal-dialog-without-overlay-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingWithoutOverlay}}
-    <ModalDialog
-      data-test="my-data-test"
-      @onClose={{action
-        (mut this.isShowingWithoutOverlay)
-        false
+        <h1>Stop! Modal Time!</h1>
+        <p>With Translucent Overlay</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-translucent-with-callback"
+  @title="Translucent Overlay with Callback"
+>
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "translucent-modal-dialog-with-callback-hbs"
       }}
-      @hasOverlay={{false}}
-      @clickOutsideToClose={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Without Overlay</p>
-      <button
-        onclick={{action
-          (mut this.isShowingWithoutOverlay)
-          false
-        }}
-        type="button"
-      >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-overlay-sibling">
-  <h2>With Overlay as a Sibling in the DOM</h2>
-
-  <button
-    onclick={{action (mut this.isShowingSibling) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "translucent-modal-dialog-sibling-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingSibling}}
-    <ModalDialog
-      data-test="my-data-test"
-      @onClose={{action (mut this.isShowingSibling) false}}
-      @translucentOverlay={{true}}
-      @overlayPosition="sibling"
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>With Translucent Overlay as Sibling</p>
-      <button
-        onclick={{action (mut this.isShowingSibling) false}}
-        type="button"
-      >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-custom-styles">
-  <h2>Custom Styles</h2>
-
-  <button
-    onclick={{action (mut this.isShowingCustomStyles) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "custom-styles-modal-dialog-hbs"
-    }}
-    @language="hbs"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "custom-styles-css"}}
-    @language="css"
-  />
-
-  {{#if this.isShowingCustomStyles}}
-    <ModalDialog
-      data-test="my-data-test"
-      @onClose={{action (mut this.isShowingCustomStyles) false}}
-      @targetAttachment="none"
-      @containerClass={{this.customContainerClassNames}}
-      @overlayClass="custom-styles-overlay"
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Custom Styles</p>
-      <button
-        onclick={{action
-          (mut this.isShowingCustomStyles)
-          false
-        }}
-        type="button"
-      >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-<div class="example" id="example-target-selector">
-  <h2>Target (Selector)</h2>
-
-  <div>
-    <button
-      id="alignModalDialogToMe"
-      type="button"
-      {{action "toggleTargetSelector"}}
-    >
-      Do It
-    </button>
-  </div>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "target-selector-modal-dialog-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingTargetSelector}}
-    <ModalDialog
-      data-test="my-data-test"
-      @onClose={{action "toggleTargetSelector"}}
-      @targetAttachment={{this.exampleTargetAttachment}}
-      @attachment={{this.exampleAttachment}}
-      @target="#alignModalDialogToMe"
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Target - Selector: "#alignModalDialogToMe"</p>
-      <p>Target Attachment: {{this.exampleTargetAttachment}}</p>
-      <p>Attachment: {{this.exampleAttachment}}</p>
-      <button type="button" {{action "closeTargetSelector"}}>
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-target-element">
-  <h2>Target (Element)</h2>
-
-  <div>
-    <span id="bwmde">
-      <button type="button" {{action "toggleTargetElement"}}>
-        Do It
-      </button>
-    </span>
-  </div>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "target-element-modal-dialog-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingTargetElement}}
-    <ModalDialog
-      data-test="my-data-test"
-      @onClose={{action "toggleTargetElement"}}
-      @targetAttachment={{this.exampleTargetAttachment}}
-      @attachment={{this.exampleAttachment}}
-      @target="#bwmde"
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Target - Element #bwmde</p>
-      <p>Target Attachment: {{this.exampleTargetAttachment}}</p>
-      <p>Attachment: {{this.exampleAttachment}}</p>
-      <button type="button" {{action "closeTargetElement"}}>
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-subclass">
-  <h2>Via Subclass</h2>
-
-  <button
-    onclick={{action (mut this.isShowingSubclassed) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get this.codeSnippets "subclass-js"}}
-    @language="js"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "subclass-modal-dialog-hbs"}}
-    @language="hbs"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "subclass-styles-css"}}
-    @language="css"
-  />
-
-  {{#if this.isShowingSubclassed}}
-    <MyCoolModalDialog
-      data-test="my-data-test"
-      @onClose={{action (mut this.isShowingSubclassed) false}}
-      @translucentOverlay={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Via Subclass</p>
-      <button
-        onclick={{action (mut this.isShowingSubclassed) false}}
-        type="button"
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @translucentOverlay={{true}}
+        @onClickOverlay={{this.onClickTranslucentOverlay}}
       >
-        Close
-      </button>
-    </MyCoolModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-subclass-2">
-  <h2>Via Subclass</h2>
-
-  <button
-    onclick={{action (mut this.isShowingSubclassed2) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get this.codeSnippets "subclass-js"}}
-    @language="js"
-  />
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "subclass-modal-dialog-2-hbs"
-    }}
-    @language="hbs"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "subclass-styles-css"}}
-    @language="css"
-  />
-
-  {{#if this.isShowingSubclassed2}}
-    <MyCoolModalDialogTwo
-      data-test="my-data-test"
-      @onClose={{action (mut this.isShowingSubclassed2) false}}
-      @translucentOverlay={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Via Subclass</p>
-      <button
-        onclick={{action (mut this.isShowingSubclassed2) false}}
-        type="button"
+        <h1>Stop! Modal Time!</h1>
+        <p>Translucent Overlay with Callback</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-without-overlay"
+  @title="Without Overlay"
+>
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "modal-dialog-without-overlay-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @hasOverlay={{false}}
+        @clickOutsideToClose={{true}}
       >
-        Close
-      </button>
-    </MyCoolModalDialogTwo>
-  {{/if}}
-</div>
-
-<div class="example" id="example-in-place">
-  <h2>In Place</h2>
-
-  <button
-    onclick={{action (mut this.isShowingInPlace) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get this.codeSnippets "in-place-modal-dialog-hbs"}}
-    @language="hbs"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "in-place-css"}}
-    @language="css"
-  />
-
-  <div id="container-in-place">
-    I AM THE CONTAINER
-    {{#if this.isShowingInPlace}}
+        <h1>Stop! Modal Time!</h1>
+        <p>Without Overlay</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-overlay-sibling"
+  @title="With Overlay as a Sibling in the DOM"
+>
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "translucent-modal-dialog-sibling-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
       <ModalDialog
-        data-test="my-data-test"
-        @onClose={{action (mut this.isShowingInPlace) false}}
-        @renderInPlace={{true}}
-        @targetAttachment="none"
-        @containerClass="ember-modal-dialog-in-place my-custom-class"
-        @overlayClass="ember-modal-overlay-in-place"
+        @onClose={{D.closeModal}}
+        @translucentOverlay={{true}}
+        @overlayPosition="sibling"
       >
         <h1>Stop! Modal Time!</h1>
-        <p>In Place</p>
-        <button
-          onclick={{action (mut this.isShowingInPlace) false}}
-          type="button"
-        >
-          Close
-        </button>
+        <p>With Translucent Overlay as Sibling</p>
+        <D.CloseButton />
       </ModalDialog>
     {{/if}}
-  </div>
-</div>
-
-<div class="example" id="example-in-place-2">
-  <h2>In Place</h2>
-
-  <button
-    onclick={{action (mut this.isShowingInPlace2) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "in-place-modal-dialog-2-hbs"
-    }}
-    @language="hbs"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "in-place-css"}}
-    @language="css"
-  />
-
-  <div id="container-in-place-2">
-    I AM THE CONTAINER
-    {{#if this.isShowingInPlace2}}
+  </:default>
+</DemoModal>
+
+<DemoModal @id="example-custom-styles" @title="Custom Styles">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "custom-styles-modal-dialog-hbs"
+      }}
+      @language="hbs"
+    />
+
+    <CodeBlock
+      @code={{get this.codeSnippets "custom-styles-css"}}
+      @language="css"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
       <ModalDialog
-        data-test="my-data-test"
-        @onClose={{action (mut this.isShowingInPlace2) false}}
-        @renderInPlace={{true}}
+        @onClose={{D.closeModal}}
         @targetAttachment="none"
-        @containerClassNames="ember-modal-dialog-in-place my-custom-class-2"
-        @overlayClassNames="ember-modal-overlay-in-place"
+        @containerClass="custom-styles-modal-container"
+        @overlayClass="custom-styles-overlay"
       >
         <h1>Stop! Modal Time!</h1>
-        <p>In Place</p>
-        <button
-          onclick={{action (mut this.isShowingInPlace2) false}}
-          type="button"
-        >
-          Close
-        </button>
+        <p>Custom Styles</p>
+        <D.CloseButton />
       </ModalDialog>
     {{/if}}
-  </div>
-</div>
-
-<div class="example" id="example-centered-scrolling">
-  <h2>Centered Scrolling</h2>
-
-  <button type="button" {{action "toggleCenteredScrolling"}}>
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "centered-scrolling-modal-dialog-hbs"
-    }}
-    @language="hbs"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "centered-scrolling-css"}}
-    @language="css"
-  />
-
-  <div id="container-centered-scrolling">
-    {{#if this.isShowingCenteredScrolling}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-target-selector"
+  @onClose={{this.toggleTarget}}
+  @title="Target (Selector)"
+>
+  <:menu as |M|>
+    <M.OpenButton id="alignModalDialogToMe" />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "target-selector-modal-dialog-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
       <ModalDialog
-        data-test="my-data-test"
-        @onClose={{action "toggleCenteredScrolling"}}
-        @translucentOverlay={{true}}
-        @targetAttachment="none"
-        @containerClass="centered-scrolling-container"
-        @overlayClass="centered-scrolling-overlay"
-        @wrapperClass="centered-scrolling-wrapper"
+        @onClose={{D.closeModal}}
+        @targetAttachment={{this.exampleTargetAttachment}}
+        @attachment={{this.exampleAttachment}}
+        @target="#alignModalDialogToMe"
       >
-        <h1>Really Long Content To Demonstrate Scrolling</h1>
-        <ul>
-          <li>Hover over modal and scroll</li>
-          <li>Also hover over overlay and scroll</li>
-        </ul>
-        {{lorem-ipsum length=30000}}
-        <button
-          type="button"
-          {{action "toggleCenteredScrolling"}}
-        >
-          Close
-        </button>
+        <h1>Stop! Modal Time!</h1>
+        <p>Target - Selector: "#alignModalDialogToMe"</p>
+        <p>Target Attachment:
+          {{this.exampleTargetAttachment}}</p>
+        <p>Attachment: {{this.exampleAttachment}}</p>
+        <D.CloseButton />
       </ModalDialog>
     {{/if}}
-  </div>
-</div>
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-target-element"
+  @onClose={{this.toggleTarget}}
+  @title="Target (Element)"
+>
+  <:menu as |M|>
+    <span id="bwmde">
+      <M.OpenButton />
+    </span>
+  </:menu>
 
-<div class="example">
-  <h2>Element Center</h2>
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "target-element-modal-dialog-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
 
-  <span id="elementCenter">
-    <button
-      onclick={{action
-        (mut this.isShowingElementCenterModal)
-        true
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @targetAttachment={{this.exampleTargetAttachment}}
+        @attachment={{this.exampleAttachment}}
+        @target="#bwmde"
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Target - Element #bwmde</p>
+        <p>Target Attachment:
+          {{this.exampleTargetAttachment}}</p>
+        <p>Attachment: {{this.exampleAttachment}}</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal @id="example-subclass" @title="Via Subclass">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get this.codeSnippets "subclass-js"}}
+      @language="js"
+    />
+
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "subclass-modal-dialog-hbs"
       }}
-      type="button"
-    >
-      Do It
-    </button>
-  </span>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "element-centered-modal-dialog-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingElementCenterModal}}
-    <ModalDialog
-      data-test="my-data-test"
-      @onClose={{action
-        (mut this.isShowingElementCenterModal)
-        false
+      @language="hbs"
+    />
+
+    <CodeBlock
+      @code={{get this.codeSnippets "subclass-styles-css"}}
+      @language="css"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <MyCoolModalDialog
+        @onClose={{D.closeModal}}
+        @translucentOverlay={{true}}
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Via Subclass</p>
+        <D.CloseButton />
+      </MyCoolModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal @id="example-subclass-2" @title="Via Subclass">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get this.codeSnippets "subclass-js"}}
+      @language="js"
+    />
+
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "subclass-modal-dialog-2-hbs"
       }}
-      @elementId={{this.elementId}}
-      @translucentOverlay={{true}}
-      @targetAttachment="elementCenter"
-      @target="#elementCenter"
-    >
-      <p>Centered on element.</p>
-    </ModalDialog>
-  {{/if}}
-</div>
\ No newline at end of file
+      @language="hbs"
+    />
+
+    <CodeBlock
+      @code={{get this.codeSnippets "subclass-styles-css"}}
+      @language="css"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <MyCoolModalDialogTwo
+        @onClose={{D.closeModal}}
+        @translucentOverlay={{true}}
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Via Subclass</p>
+        <D.CloseButton />
+      </MyCoolModalDialogTwo>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal @id="example-in-place" @title="In Place">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "in-place-modal-dialog-hbs"
+      }}
+      @language="hbs"
+    />
+
+    <CodeBlock
+      @code={{get this.codeSnippets "in-place-css"}}
+      @language="css"
+    />
+  </:code>
+
+  <:default as |D|>
+    <div id="container-in-place">
+      I AM THE CONTAINER
+      {{#if D.isModalOpen}}
+        <ModalDialog
+          @onClose={{D.closeModal}}
+          @renderInPlace={{true}}
+          @targetAttachment="none"
+          @containerClass="ember-modal-dialog-in-place my-custom-class"
+          @overlayClass="ember-modal-overlay-in-place"
+        >
+          <h1>Stop! Modal Time!</h1>
+          <p>In Place</p>
+          <D.CloseButton />
+        </ModalDialog>
+      {{/if}}
+    </div>
+  </:default>
+</DemoModal>
+
+<DemoModal @id="example-in-place-2" @title="In Place">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "in-place-modal-dialog-2-hbs"
+      }}
+      @language="hbs"
+    />
+
+    <CodeBlock
+      @code={{get this.codeSnippets "in-place-css"}}
+      @language="css"
+    />
+  </:code>
+
+  <:default as |D|>
+    <div id="container-in-place-2">
+      I AM THE CONTAINER
+      {{#if D.isModalOpen}}
+        <ModalDialog
+          @onClose={{D.closeModal}}
+          @renderInPlace={{true}}
+          @targetAttachment="none"
+          @containerClassNames="ember-modal-dialog-in-place my-custom-class-2"
+          @overlayClassNames="ember-modal-overlay-in-place"
+        >
+          <h1>Stop! Modal Time!</h1>
+          <p>In Place</p>
+          <D.CloseButton />
+        </ModalDialog>
+      {{/if}}
+    </div>
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-centered-scrolling"
+  @onClose={{this.onCloseCenteredScrolling}}
+  @onOpen={{this.onOpenCenteredScrolling}}
+  @title="Centered Scrolling"
+>
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "centered-scrolling-modal-dialog-hbs"
+      }}
+      @language="hbs"
+    />
+
+    <CodeBlock
+      @code={{get this.codeSnippets "centered-scrolling-css"}}
+      @language="css"
+    />
+  </:code>
+
+  <:default as |D|>
+    <div id="container-centered-scrolling">
+      {{#if D.isModalOpen}}
+        <ModalDialog
+          @onClose={{D.closeModal}}
+          @translucentOverlay={{true}}
+          @targetAttachment="none"
+          @containerClass="centered-scrolling-container"
+          @overlayClass="centered-scrolling-overlay"
+          @wrapperClass="centered-scrolling-wrapper"
+        >
+          <h1>Really Long Content To Demonstrate Scrolling</h1>
+          <ul>
+            <li>Hover over modal and scroll</li>
+            <li>Also hover over overlay and scroll</li>
+          </ul>
+          {{lorem-ipsum length=30000}}
+          <D.CloseButton />
+        </ModalDialog>
+      {{/if}}
+    </div>
+  </:default>
+</DemoModal>
+
+<DemoModal @id="example-element-center" @title="Element Center">
+  <:menu as |M|>
+    <span id="elementCenter">
+      <M.OpenButton />
+    </span>
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "element-centered-modal-dialog-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @elementId={{this.elementId}}
+        @translucentOverlay={{true}}
+        @targetAttachment="elementCenter"
+        @target="#elementCenter"
+      >
+        <p>Centered on element.</p>
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
\ No newline at end of file
diff --git a/tests/dummy/app/templates/tethered-animatable.hbs b/tests/dummy/app/templates/tethered-animatable.hbs
index a5b92cec..4119d4ba 100644
--- a/tests/dummy/app/templates/tethered-animatable.hbs
+++ b/tests/dummy/app/templates/tethered-animatable.hbs
@@ -37,192 +37,179 @@
   />
 </div>
 
-<div class="example" id="example-custom-styles">
-  <h2>Custom Styles</h2>
+<DemoModal @id="example-custom-styles" @title="Custom Styles">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
 
-  <button
-    onclick={{action (mut this.isShowingCustomStyles) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "custom-styles-modal-dialog-liquid-tether-hbs"
-    }}
-    @language="hbs"
-  />
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "custom-styles-modal-dialog-liquid-tether-hbs"
+      }}
+      @language="hbs"
+    />
 
-  <CodeBlock
-    @code={{get this.codeSnippets "custom-styles-css"}}
-    @language="css"
-  />
+    <CodeBlock
+      @code={{get this.codeSnippets "custom-styles-css"}}
+      @language="css"
+    />
+  </:code>
 
-  {{#if this.isShowingCustomStyles}}
-    <ModalDialog
-      @onClose={{action (mut this.isShowingCustomStyles) false}}
-      @tetherTarget="body"
-      @targetAttachment="top right"
-      @targetModifier="visible"
-      @attachment="top right"
-      @containerClass="custom-styles-modal-container"
-      @overlayClass="custom-styles-overlay"
-      @animatable={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Custom Styles</p>
-      <button
-        onclick={{action
-          (mut this.isShowingCustomStyles)
-          false
-        }}
-        type="button"
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @tetherTarget="body"
+        @targetAttachment="top right"
+        @targetModifier="visible"
+        @attachment="top right"
+        @containerClass="custom-styles-modal-container"
+        @overlayClass="custom-styles-overlay"
+        @animatable={{true}}
       >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-target-selector">
-  <h2>Target (Selector)</h2>
+        <h1>Stop! Modal Time!</h1>
+        <p>Custom Styles</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
 
-  <div>
-    <button
-      id="alignTetherDialogToMe"
-      type="button"
-      {{action "toggleTargetSelector"}}
-    >
-      Do It
-    </button>
-  </div>
+<DemoModal
+  @id="example-target-selector"
+  @onClose={{this.toggleTarget}}
+  @title="Target (Selector)"
+>
+  <:menu as |M|>
+    <M.OpenButton id="alignTetherDialogToMe" />
+  </:menu>
 
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "target-selector-modal-dialog-liquid-tether-hbs"
-    }}
-    @language="hbs"
-  />
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "target-selector-modal-dialog-liquid-tether-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
 
-  {{#if this.isShowingTargetSelector}}
-    <ModalDialog
-      @onClose={{action "toggleTargetSelector"}}
-      @hasOverlay={{false}}
-      @targetAttachment={{this.exampleTargetAttachment}}
-      @attachment={{this.exampleAttachment}}
-      @tetherTarget="#alignTetherDialogToMe"
-      @animatable={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Target - Selector: "#alignTetherDialogToMe"</p>
-      <p>Target Attachment: {{this.exampleTargetAttachment}}</p>
-      <p>Attachment: {{this.exampleAttachment}}</p>
-      <button type="button" {{action "closeTargetSelector"}}>
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @hasOverlay={{false}}
+        @targetAttachment={{this.exampleTargetAttachment}}
+        @attachment={{this.exampleAttachment}}
+        @tetherTarget="#alignTetherDialogToMe"
+        @animatable={{true}}
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Target - Selector: "#alignTetherDialogToMe"</p>
+        <p>Target Attachment:
+          {{this.exampleTargetAttachment}}</p>
+        <p>Attachment: {{this.exampleAttachment}}</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
 
-<div class="example" id="example-target-element">
-  <h2>Target (Element)</h2>
-  <div>
+<DemoModal
+  @id="example-target-element"
+  @onClose={{this.toggleTarget}}
+  @title="Target (Element)"
+>
+  <:menu as |M|>
     <span id="bwtde">
-      <button type="button" {{action "toggleTargetElement"}}>
-        Do It
-      </button>
+      <M.OpenButton />
     </span>
-  </div>
+  </:menu>
 
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "target-element-modal-dialog-liquid-tether-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingTargetElement}}
-    <ModalDialog
-      @onClose={{action "toggleTargetElement"}}
-      @hasOverlay={{false}}
-      @targetAttachment={{this.exampleTargetAttachment}}
-      @attachment={{this.exampleAttachment}}
-      @tetherTarget="#bwtde"
-      @animatable={{true}}
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Target - Element #bwtde</p>
-      <p>Target Attachment: {{this.exampleTargetAttachment}}</p>
-      <p>Attachment: {{this.exampleAttachment}}</p>
-      <button type="button" {{action "closeTargetElement"}}>
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "target-element-modal-dialog-liquid-tether-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
 
-<div class="example">
-  <h2>Element Center</h2>
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @hasOverlay={{false}}
+        @targetAttachment={{this.exampleTargetAttachment}}
+        @attachment={{this.exampleAttachment}}
+        @tetherTarget="#bwtde"
+        @animatable={{true}}
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Target - Element #bwtde</p>
+        <p>Target Attachment:
+          {{this.exampleTargetAttachment}}</p>
+        <p>Attachment: {{this.exampleAttachment}}</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
 
-  <span id="elementCenter">
-    <button type="button" {{action "toggleElementCenterModal"}}>
-      Element Center
-    </button>
-  </span>
+<DemoModal @id="example-element-center" @title="Element Center">
+  <:menu as |M|>
+    <span id="elementCenter">
+      <M.OpenButton />
+    </span>
+  </:menu>
 
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "element-centered-modal-dialog-liquid-tether-hbs"
-    }}
-    @language="hbs"
-  />
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "element-centered-modal-dialog-liquid-tether-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
 
-  {{#if this.isShowingElementCenterModal}}
-    <ModalDialog
-      @onClose={{action "toggleElementCenterModal"}}
-      @translucentOverlay={{true}}
-      @tetherTarget="#elementCenter"
-      @animatable={{true}}
-    >
-      <p>Centered on element.</p>
-    </ModalDialog>
-  {{/if}}
-</div>
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @translucentOverlay={{true}}
+        @tetherTarget="#elementCenter"
+        @animatable={{true}}
+      >
+        <p>Centered on element.</p>
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
 
 <div class="example">
   <h2>Separate Stacks</h2>
   <button
     id="separateStacksButton1"
-    onclick={{action
-      (mut this.isShowingSeparateStacksModal1)
-      true
-    }}
     type="button"
+    {{on "click" this.openSeparateStackModal1}}
   >
     Show Modal 1 (modal-stack-a)
   </button>
   <button
     id="separateStacksButton2"
-    onclick={{action
-      (mut this.isShowingSeparateStacksModal2)
-      true
-    }}
     type="button"
+    {{on "click" this.openSeparateStackModal2}}
   >
     Show Modal 2 (modal-stack-b)
   </button>
   <button
     id="separateStacksButton3"
-    onclick={{action
-      (mut this.isShowingSeparateStacksModal3)
-      true
-    }}
     type="button"
+    {{on "click" this.openSeparateStackModal3}}
   >
     Show Modal 3 (modal-stack-b)
   </button>
@@ -243,10 +230,7 @@
     <ModalDialog
       @stack="modal-stack-a"
       @containerClass="modal-stack"
-      @onClose={{action
-        (mut this.isShowingSeparateStacksModal1)
-        false
-      }}
+      @onClose={{this.closeSeparateStackModal1}}
       @hasOverlay={{false}}
       @clickOutsideToClose={{true}}
       @tetherTarget="#separateStacksButton1"
@@ -262,10 +246,7 @@
       @stack="modal-stack-b"
       @value={{2}}
       @containerClass="modal-stack"
-      @onClose={{action
-        (mut this.isShowingSeparateStacksModal2)
-        false
-      }}
+      @onClose={{this.closeSeparateStackModal2}}
       @hasOverlay={{false}}
       @clickOutsideToClose={{true}}
       @tetherTarget="#separateStacksButton2"
@@ -281,10 +262,7 @@
       @stack="modal-stack-b"
       @value={{2}}
       @containerClass="modal-stack"
-      @onClose={{action
-        (mut this.isShowingSeparateStacksModal3)
-        false
-      }}
+      @onClose={{this.closeSeparateStackModal3}}
       @hasOverlay={{false}}
       @clickOutsideToClose={{true}}
       @tetherTarget="#separateStacksButton3"
diff --git a/tests/dummy/app/templates/tethered.hbs b/tests/dummy/app/templates/tethered.hbs
index d8f2ec9e..2f56c442 100644
--- a/tests/dummy/app/templates/tethered.hbs
+++ b/tests/dummy/app/templates/tethered.hbs
@@ -35,165 +35,151 @@
   is installed, an error will be raised.
 </p>
 
-<div class="example" id="example-custom-styles">
-  <h2>Custom Styles</h2>
-
-  <button
-    onclick={{action (mut this.isShowingCustomStyles) true}}
-    type="button"
-  >
-    Do It
-  </button>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "custom-styles-modal-dialog-tethered-hbs"
-    }}
-    @language="hbs"
-  />
-
-  <CodeBlock
-    @code={{get this.codeSnippets "custom-styles-css"}}
-    @language="css"
-  />
-
-  {{#if this.isShowingCustomStyles}}
-    <ModalDialog
-      @onClose={{action (mut this.isShowingCustomStyles) false}}
-      @tetherTarget="body"
-      @targetModifier="visible"
-      @targetAttachment="top right"
-      @attachment="top right"
-      @containerClass="custom-styles-modal-container"
-      @overlayClass="custom-styles-overlay"
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Custom Styles</p>
-      <button
-        onclick={{action
-          (mut this.isShowingCustomStyles)
-          false
-        }}
-        type="button"
+<DemoModal @id="example-custom-styles" @title="Custom Styles">
+  <:menu as |M|>
+    <M.OpenButton />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "custom-styles-modal-dialog-tethered-hbs"
+      }}
+      @language="hbs"
+    />
+
+    <CodeBlock
+      @code={{get this.codeSnippets "custom-styles-css"}}
+      @language="css"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @tetherTarget="body"
+        @targetModifier="visible"
+        @targetAttachment="top right"
+        @attachment="top right"
+        @containerClass="custom-styles-modal-container"
+        @overlayClass="custom-styles-overlay"
       >
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-target-selector">
-  <h2>Target (Selector)</h2>
-
-  <div>
-    <button
-      id="alignTetherDialogToMe"
-      type="button"
-      {{action "toggleTargetSelector"}}
-    >
-      Do It
-    </button>
-  </div>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "target-selector-modal-dialog-tethered-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingTargetSelector}}
-    <ModalDialog
-      @onClose={{action "toggleTargetSelector"}}
-      @hasOverlay={{false}}
-      @targetAttachment={{this.exampleTargetAttachment}}
-      @attachment={{this.exampleAttachment}}
-      @tetherTarget="#alignTetherDialogToMe"
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Target - Selector: "#alignTetherDialogToMe"</p>
-      <p>Target Attachment: {{this.exampleTargetAttachment}}</p>
-      <p>Attachment: {{this.exampleAttachment}}</p>
-      <button type="button" {{action "closeTargetSelector"}}>
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
-
-<div class="example" id="example-target-element">
-  <h2>Target (Element)</h2>
-
-  <div>
+        <h1>Stop! Modal Time!</h1>
+        <p>Custom Styles</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-target-selector"
+  @onClose={{this.toggleTarget}}
+  @title="Target (Selector)"
+>
+  <:menu as |M|>
+    <M.OpenButton id="alignTetherDialogToMe" />
+  </:menu>
+
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "target-selector-modal-dialog-tethered-hbs"
+      }}
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @hasOverlay={{false}}
+        @targetAttachment={{this.exampleTargetAttachment}}
+        @attachment={{this.exampleAttachment}}
+        @tetherTarget="#alignTetherDialogToMe"
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Target - Selector: "#alignTetherDialogToMe"</p>
+        <p>Target Attachment:
+          {{this.exampleTargetAttachment}}</p>
+        <p>Attachment: {{this.exampleAttachment}}</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal
+  @id="example-target-element"
+  @onClose={{this.toggleTarget}}
+  @title="Target (Element)"
+>
+  <:menu as |M|>
     <span id="bwtde">
-      <button type="button" {{action "toggleTargetElement"}}>
-        Do It
-      </button>
+      <M.OpenButton />
     </span>
-  </div>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "target-element-modal-dialog-tethered-hbs"
-    }}
-    @language="hbs"
-  />
-
-  {{#if this.isShowingTargetElement}}
-    <ModalDialog
-      @onClose={{action "toggleTargetElement"}}
-      @hasOverlay={{false}}
-      @targetAttachment={{this.exampleTargetAttachment}}
-      @attachment={{this.exampleAttachment}}
-      @tetherTarget="#bwtde"
-    >
-      <h1>Stop! Modal Time!</h1>
-      <p>Target - Element #bwtde</p>
-      <p>Target Attachment: {{this.exampleTargetAttachment}}</p>
-      <p>Attachment: {{this.exampleAttachment}}</p>
-      <button type="button" {{action "closeTargetElement"}}>
-        Close
-      </button>
-    </ModalDialog>
-  {{/if}}
-</div>
+  </:menu>
 
-<div class="example">
-  <h2>Element Center</h2>
-
-  <span id="elementCenter">
-    <button
-      onclick={{action
-        (mut this.isShowingElementCenterModal)
-        true
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "target-element-modal-dialog-tethered-hbs"
       }}
-      type="button"
-    >
-      Element Center
-    </button>
-  </span>
-
-  <CodeBlock
-    @code={{get
-      this.codeSnippets
-      "element-centered-modal-dialog-tethered-hbs"
-    }}
-    @language="hbs"
-  />
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @onClose={{D.closeModal}}
+        @hasOverlay={{false}}
+        @targetAttachment={{this.exampleTargetAttachment}}
+        @attachment={{this.exampleAttachment}}
+        @tetherTarget="#bwtde"
+      >
+        <h1>Stop! Modal Time!</h1>
+        <p>Target - Element #bwtde</p>
+        <p>Target Attachment:
+          {{this.exampleTargetAttachment}}</p>
+        <p>Attachment: {{this.exampleAttachment}}</p>
+        <D.CloseButton />
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
+
+<DemoModal @id="example-element-center" @title="Element Center">
+  <:menu as |M|>
+    <span id="elementCenter">
+      <M.OpenButton />
+    </span>
+  </:menu>
 
-  {{#if this.isShowingElementCenterModal}}
-    <ModalDialog
-      @translucentOverlay={{true}}
-      @tetherTarget="#elementCenter"
-      @onClose={{action
-        (mut this.isShowingElementCenterModal)
-        false
+  <:code>
+    <CodeBlock
+      @code={{get
+        this.codeSnippets
+        "element-centered-modal-dialog-tethered-hbs"
       }}
-    >
-      <p>Centered on element.</p>
-    </ModalDialog>
-  {{/if}}
-</div>
\ No newline at end of file
+      @language="hbs"
+    />
+  </:code>
+
+  <:default as |D|>
+    {{#if D.isModalOpen}}
+      <ModalDialog
+        @translucentOverlay={{true}}
+        @tetherTarget="#elementCenter"
+        @onClose={{D.closeModal}}
+      >
+        <p>Centered on element.</p>
+      </ModalDialog>
+    {{/if}}
+  </:default>
+</DemoModal>
\ No newline at end of file
diff --git a/tests/dummy/app/utils/code-snippets/animatable.js b/tests/dummy/app/utils/code-snippets/animatable.js
index 9f697fce..405d0df7 100644
--- a/tests/dummy/app/utils/code-snippets/animatable.js
+++ b/tests/dummy/app/utils/code-snippets/animatable.js
@@ -15,7 +15,7 @@ export const codeSnippets = {
 );`,
 
   'basic-modal-dialog-animatable-hbs': `<ModalDialog
-  @onClose={{action "toggleBasic"}}
+  @onClose={{this.closeModal}}
   @overlayPosition="sibling"
   @clickOutsideToClose={{true}}
   @animatable={{true}}
@@ -24,14 +24,14 @@ export const codeSnippets = {
   <p>Basic</p>
   <button
     type="button"
-    {{action "toggleBasic"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'translucent-modal-dialog-animatable-hbs': `<ModalDialog
-  @onClose={{action "toggleTranslucent"}}
+  @onClose={{this.closeModal}}
   @translucentOverlay={{true}}
   @overlayPosition="sibling"
   @clickOutsideToClose={{true}}
@@ -41,14 +41,14 @@ export const codeSnippets = {
   <p>With Translucent Overlay</p>
   <button
     type="button"
-    {{action "toggleTranslucent"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'without-overlay-modal-dialog-animatable-hbs': `<ModalDialog
-  @onClose={{action "toggleWithoutOverlay"}}
+  @onClose={{this.closeModal}}
   @hasOverlay={{false}}
   @animatable={{true}}
 >
@@ -56,16 +56,14 @@ export const codeSnippets = {
   <p>Without Overlay</p>
   <button
     type="button"
-    {{action "toggleWithoutOverlay"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'without-overlay-click-outside-to-close-modal-dialog-animatable-hbs': `<ModalDialog
-  @onClose={{action
-    "toggleWithoutOverlayClickOutsideToClose"
-  }}
+  @onClose={{this.closeModal}}
   @hasOverlay={{false}}
   @clickOutsideToClose={{true}}
   @animatable={{true}}
@@ -74,14 +72,14 @@ export const codeSnippets = {
   <p>Without Overlay - Click Outside to Close</p>
   <button
     type="button"
-    {{action "toggleWithoutOverlayClickOutsideToClose"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'custom-styles-modal-dialog-animatable-hbs': `<ModalDialog
-  @onClose={{action (mut this.isShowingCustomStyles) false}}
+  @onClose={{this.closeModal}}
   @containerClass="custom-styles-modal-container"
   @overlayClass="custom-styles-overlay"
   @wrapperClass="custom-styles-wrapper"
@@ -94,9 +92,7 @@ export const codeSnippets = {
   <p>Custom Styles</p>
   <button
     type="button"
-    {{action
-      (action (mut this.isShowingCustomStyles) false)
-    }}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
@@ -139,14 +135,14 @@ export default class MyCoolModalDialog extends ModalDialogComponent {
 }`,
 
   'subclass-modal-dialog-animatable-hbs': `<MyCoolModalDialog
-  @onClose={{action "toggleSubclassed"}}
+  @onClose={{this.closeModal}}
   @animatable={{true}}
 >
   <h1>Stop! Modal Time!</h1>
   <p>Via Subclass</p>
   <button
     type="button"
-    {{action "toggleSubclassed"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
diff --git a/tests/dummy/app/utils/code-snippets/index.js b/tests/dummy/app/utils/code-snippets/index.js
index e6dacfd1..c0b51c25 100644
--- a/tests/dummy/app/utils/code-snippets/index.js
+++ b/tests/dummy/app/utils/code-snippets/index.js
@@ -1,90 +1,78 @@
 export const codeSnippets = {
   'basic-modal-dialog-hbs': `<ModalDialog
-  @onClose={{action (mut this.isShowingBasic) false}}
+  @onClose={{this.closeModal}}
 >
   <h1>Stop! Modal Time!</h1>
   <p>Basic</p>
   <button
-    onclick={{action (mut this.isShowingBasic) false}}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'translucent-modal-dialog-hbs': `<ModalDialog
-  @onClose={{action (mut this.isShowingTranslucent) false}}
+  @onClose={{this.closeModal}}
   @translucentOverlay={{true}}
 >
   <h1>Stop! Modal Time!</h1>
   <p>With Translucent Overlay</p>
   <button
-    onclick={{action (mut this.isShowingTranslucent) false}}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'translucent-modal-dialog-with-callback-hbs': `<ModalDialog
-  @onClose={{action
-    (mut this.isShowingTranslucentWithCallback)
-    false
-  }}
+  @onClose={{this.closeModal}}
   @translucentOverlay={{true}}
-  @onClickOverlay={{action "clickedTranslucentOverlay"}}
+  @onClickOverlay={{this.onClickTranslucentOverlay}}
 >
   <h1>Stop! Modal Time!</h1>
   <p>Translucent Overlay with Callback</p>
   <button
-    onclick={{action
-      (mut this.isShowingTranslucentWithCallback)
-      false
-    }}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'modal-dialog-without-overlay-hbs': `<ModalDialog
-  @onClose={{action
-    (mut this.isShowingWithoutOverlay)
-    false
-  }}
+  @onClose={{this.closeModal}}
   @hasOverlay={{false}}
   @clickOutsideToClose={{true}}
 >
   <h1>Stop! Modal Time!</h1>
   <p>Without Overlay</p>
   <button
-    onclick={{action
-      (mut this.isShowingWithoutOverlay)
-      false
-    }}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'translucent-modal-dialog-sibling-hbs': `<ModalDialog
-  @onClose={{action (mut this.isShowingSibling) false}}
+  @onClose={{this.closeModal}}
   @translucentOverlay={{true}}
   @overlayPosition="sibling"
 >
   <h1>Stop! Modal Time!</h1>
   <p>With Translucent Overlay as Sibling</p>
   <button
-    onclick={{action (mut this.isShowingSibling) false}}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'custom-styles-modal-dialog-hbs': `<ModalDialog
-  @onClose={{action (mut this.isShowingCustomStyles) false}}
+  @onClose={{this.closeModal}}
   @targetAttachment="none"
   @containerClass={{this.customContainerClassNames}}
   @overlayClass="custom-styles-overlay"
@@ -92,11 +80,8 @@ export const codeSnippets = {
   <h1>Stop! Modal Time!</h1>
   <p>Custom Styles</p>
   <button
-    onclick={{action
-      (mut this.isShowingCustomStyles)
-      false
-    }}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
@@ -131,7 +116,7 @@ export const codeSnippets = {
 }`,
 
   'target-selector-modal-dialog-hbs': `<ModalDialog
-  @onClose={{action "toggleTargetSelector"}}
+  @onClose={{this.closeModal}}
   @targetAttachment={{this.exampleTargetAttachment}}
   @attachment={{this.exampleAttachment}}
   @target="#alignModalDialogToMe"
@@ -142,14 +127,14 @@ export const codeSnippets = {
   <p>Attachment: {{this.exampleAttachment}}</p>
   <button
     type="button"
-    {{action "closeTargetSelector"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'target-element-modal-dialog-hbs': `<ModalDialog
-  @onClose={{action "toggleTargetElement"}}
+  @onClose={{this.closeModal}}
   @targetAttachment={{this.exampleTargetAttachment}}
   @attachment={{this.exampleAttachment}}
   @target="#bwmde"
@@ -160,7 +145,7 @@ export const codeSnippets = {
   <p>Attachment: {{this.exampleAttachment}}</p>
   <button
     type="button"
-    {{action "closeTargetElement"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
@@ -182,21 +167,21 @@ export default class MyCoolModalDialog extends ModalDialogComponent {
   <p>Via Subclass</p>
   <button
     type="button"
-    {{action "toggleSubclassed"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </MyCoolModalDialog>`,
 
   'subclass-modal-dialog-hbs': `<MyCoolModalDialog
-  @onClose={{action (mut this.isShowingSubclassed) false}}
+  @onClose={{this.closeModal}}
   @translucentOverlay={{true}}
 >
   <h1>Stop! Modal Time!</h1>
   <p>Via Subclass</p>
   <button
-    onclick={{action (mut this.isShowingSubclassed) false}}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
@@ -208,21 +193,21 @@ export default class MyCoolModalDialog extends ModalDialogComponent {
 }`,
 
   'subclass-modal-dialog-2-hbs': `<MyCoolModalDialogTwo
-  @onClose={{action (mut this.isShowingSubclassed2) false}}
+  @onClose={{this.closeModal}}
   @translucentOverlay={{true}}
 >
   <h1>Stop! Modal Time!</h1>
   <p>Via Subclass</p>
   <button
-    onclick={{action (mut this.isShowingSubclassed2) false}}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </MyCoolModalDialogTwo>`,
 
   'in-place-modal-dialog-hbs': `<ModalDialog
-  @onClose={{action (mut this.isShowingInPlace) false}}
+  @onClose={{this.closeModal}}
   @renderInPlace={{true}}
   @targetAttachment="none"
   @containerClass="ember-modal-dialog-in-place my-custom-class"
@@ -231,8 +216,8 @@ export default class MyCoolModalDialog extends ModalDialogComponent {
   <h1>Stop! Modal Time!</h1>
   <p>In Place</p>
   <button
-    onclick={{action (mut this.isShowingInPlace) false}}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
@@ -249,7 +234,7 @@ export default class MyCoolModalDialog extends ModalDialogComponent {
 }`,
 
   'in-place-modal-dialog-2-hbs': `<ModalDialog
-  @onClose={{action (mut this.isShowingInPlace2) false}}
+  @onClose={{this.closeModal}}
   @renderInPlace={{true}}
   @targetAttachment="none"
   @containerClassNames="ember-modal-dialog-in-place my-custom-class-2"
@@ -258,15 +243,15 @@ export default class MyCoolModalDialog extends ModalDialogComponent {
   <h1>Stop! Modal Time!</h1>
   <p>In Place</p>
   <button
-    onclick={{action (mut this.isShowingInPlace2) false}}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'centered-scrolling-modal-dialog-hbs': `<ModalDialog
-  @onClose={{action "toggleCenteredScrolling"}}
+  @onClose={{this.closeModal}}
   @translucentOverlay={{true}}
   @targetAttachment="none"
   @containerClass="centered-scrolling-container"
@@ -281,7 +266,7 @@ export default class MyCoolModalDialog extends ModalDialogComponent {
   {{lorem-ipsum length=30000}}
   <button
     type="button"
-    {{action "toggleCenteredScrolling"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
@@ -325,10 +310,7 @@ export default class MyCoolModalDialog extends ModalDialogComponent {
 
   'element-centered-modal-dialog-hbs': `<ModalDialog
   data-test="my-data-test"
-  @onClose={{action
-    (mut this.isShowingElementCenterModal)
-    false
-  }}
+  @onClose={{this.closeModal}}
   @elementId={{this.elementId}}
   @translucentOverlay={{true}}
   @targetAttachment="elementCenter"
diff --git a/tests/dummy/app/utils/code-snippets/tethered-animatable.js b/tests/dummy/app/utils/code-snippets/tethered-animatable.js
index 18e2e9f1..f7d525fa 100644
--- a/tests/dummy/app/utils/code-snippets/tethered-animatable.js
+++ b/tests/dummy/app/utils/code-snippets/tethered-animatable.js
@@ -39,7 +39,7 @@ this.transition(
 );`,
 
   'custom-styles-modal-dialog-liquid-tether-hbs': `<ModalDialog
-  @onClose={{action (mut this.isShowingCustomStyles) false}}
+  @onClose={{this.closeModal}}
   @tetherTarget="body"
   @targetAttachment="top right"
   @targetModifier="visible"
@@ -51,11 +51,8 @@ this.transition(
   <h1>Stop! Modal Time!</h1>
   <p>Custom Styles</p>
   <button
-    onclick={{action
-      (mut this.isShowingCustomStyles)
-      false
-    }}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
@@ -90,7 +87,7 @@ this.transition(
 }`,
 
   'target-selector-modal-dialog-liquid-tether-hbs': `<ModalDialog
-  @onClose={{action "toggleTargetSelector"}}
+  @onClose={{this.closeModal}}
   @hasOverlay={{false}}
   @targetAttachment={{this.exampleTargetAttachment}}
   @attachment={{this.exampleAttachment}}
@@ -103,14 +100,14 @@ this.transition(
   <p>Attachment: {{this.exampleAttachment}}</p>
   <button
     type="button"
-    {{action "closeTargetSelector"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'target-element-modal-dialog-liquid-tether-hbs': `<ModalDialog
-  @onClose={{action "toggleTargetElement"}}
+  @onClose={{this.closeModal}}
   @hasOverlay={{false}}
   @targetAttachment={{this.exampleTargetAttachment}}
   @attachment={{this.exampleAttachment}}
@@ -123,14 +120,14 @@ this.transition(
   <p>Attachment: {{this.exampleAttachment}}</p>
   <button
     type="button"
-    {{action "closeTargetElement"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'element-centered-modal-dialog-liquid-tether-hbs': `<ModalDialog
-  @onClose={{action "toggleElementCenterModal"}}
+  @onClose={{this.closeModal}}
   @translucentOverlay={{true}}
   @tetherTarget="#elementCenter"
   @animatable={{true}}
@@ -142,10 +139,7 @@ this.transition(
   <ModalDialog
     @stack="modal-stack-a"
     @containerClass="modal-stack"
-    @onClose={{action
-      (mut this.isShowingSeparateStacksModal1)
-      false
-    }}
+    @onClose={{this.closeModal1}}
     @hasOverlay={{false}}
     @clickOutsideToClose={{true}}
     @tetherTarget="#separateStacksButton1"
@@ -161,10 +155,7 @@ this.transition(
     @stack="modal-stack-b"
     @value={{2}}
     @containerClass="modal-stack"
-    @onClose={{action
-      (mut this.isShowingSeparateStacksModal2)
-      false
-    }}
+    @onClose={{this.closeModal2}}
     @hasOverlay={{false}}
     @clickOutsideToClose={{true}}
     @tetherTarget="#separateStacksButton2"
@@ -180,10 +171,7 @@ this.transition(
     @stack="modal-stack-b"
     @value={{2}}
     @containerClass="modal-stack"
-    @onClose={{action
-      (mut this.isShowingSeparateStacksModal3)
-      false
-    }}
+    @onClose={{this.closeModal3}}
     @hasOverlay={{false}}
     @clickOutsideToClose={{true}}
     @tetherTarget="#separateStacksButton3"
diff --git a/tests/dummy/app/utils/code-snippets/tethered.js b/tests/dummy/app/utils/code-snippets/tethered.js
index 2713b140..9ef12742 100644
--- a/tests/dummy/app/utils/code-snippets/tethered.js
+++ b/tests/dummy/app/utils/code-snippets/tethered.js
@@ -1,6 +1,6 @@
 export const codeSnippets = {
   'custom-styles-modal-dialog-tethered-hbs': `<ModalDialog
-  @onClose={{action (mut this.isShowingCustomStyles) false}}
+  @onClose={{this.closeModal}}
   @tetherTarget="body"
   @targetModifier="visible"
   @targetAttachment="top right"
@@ -11,11 +11,8 @@ export const codeSnippets = {
   <h1>Stop! Modal Time!</h1>
   <p>Custom Styles</p>
   <button
-    onclick={{action
-      (mut this.isShowingCustomStyles)
-      false
-    }}
     type="button"
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
@@ -50,7 +47,7 @@ export const codeSnippets = {
 }`,
 
   'target-selector-modal-dialog-tethered-hbs': `<ModalDialog
-  @onClose={{action "toggleTargetSelector"}}
+  @onClose={{this.closeModal}}
   @hasOverlay={{false}}
   @targetAttachment={{this.exampleTargetAttachment}}
   @attachment={{this.exampleAttachment}}
@@ -62,14 +59,14 @@ export const codeSnippets = {
   <p>Attachment: {{this.exampleAttachment}}</p>
   <button
     type="button"
-    {{action "closeTargetSelector"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
 </ModalDialog>`,
 
   'target-element-modal-dialog-tethered-hbs': `<ModalDialog
-  @onClose={{action "toggleTargetElement"}}
+  @onClose={{this.closeModal}}
   @hasOverlay={{false}}
   @targetAttachment={{this.exampleTargetAttachment}}
   @attachment={{this.exampleAttachment}}
@@ -81,7 +78,7 @@ export const codeSnippets = {
   <p>Attachment: {{this.exampleAttachment}}</p>
   <button
     type="button"
-    {{action "closeTargetElement"}}
+    {{on "click" this.closeModal}}
   >
     Close
   </button>
@@ -90,10 +87,7 @@ export const codeSnippets = {
   'element-centered-modal-dialog-tethered-hbs': `<ModalDialog
   @translucentOverlay={{true}}
   @tetherTarget="#elementCenter"
-  @onClose={{action
-    (mut this.isShowingElementCenterModal)
-    false
-  }}
+  @onClose={{this.closeModal}}
 >
   <p>Centered on element.</p>
 </ModalDialog>`,