From cf3ac6b7ad1dc9c530ba5038c754f1a697abd0e5 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 22 Oct 2023 17:09:35 +0300
Subject: [PATCH] docs(dialog): update demos

---
 elements/rh-dialog/demo/color-context.html    |  34 +++++
 elements/rh-dialog/demo/demo.css              |  22 ---
 elements/rh-dialog/demo/lots-of-content.html  |  70 +++++++++
 .../rh-dialog/demo/no-header-content.html     |  23 +++
 elements/rh-dialog/demo/no-headings.html      |  18 +++
 elements/rh-dialog/demo/rh-dialog.html        | 143 ++----------------
 elements/rh-dialog/demo/rh-dialog.js          |  10 --
 elements/rh-dialog/demo/video-modal.html      |  42 +++++
 8 files changed, 198 insertions(+), 164 deletions(-)
 create mode 100644 elements/rh-dialog/demo/color-context.html
 delete mode 100644 elements/rh-dialog/demo/demo.css
 create mode 100644 elements/rh-dialog/demo/lots-of-content.html
 create mode 100644 elements/rh-dialog/demo/no-header-content.html
 create mode 100644 elements/rh-dialog/demo/no-headings.html
 delete mode 100644 elements/rh-dialog/demo/rh-dialog.js
 create mode 100644 elements/rh-dialog/demo/video-modal.html

diff --git a/elements/rh-dialog/demo/color-context.html b/elements/rh-dialog/demo/color-context.html
new file mode 100644
index 0000000000..b6be2c10b3
--- /dev/null
+++ b/elements/rh-dialog/demo/color-context.html
@@ -0,0 +1,34 @@
+<rh-context-picker target="context-provider"></rh-context-picker>
+
+<rh-context-provider id="context-provider" color-palette="darkest">
+  <rh-dialog trigger="context-trigger">
+    <h2 slot="header">Color Context</h2>
+    <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor
+      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+      qui officia deserunt mollit anim id est laborum.</p>
+    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere
+      consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis
+      parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi
+      erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
+    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
+      odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+      condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+    <rh-cta slot="footer">
+      <a href="#bar">Learn more</a>
+    </rh-cta>
+  </rh-dialog>
+  <rh-button id="context-trigger" slot="footer">Open Dialog</rh-button>
+</rh-context-provider>
+
+<script type="module">
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-dialog/rh-dialog.js';
+  import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js';
+  import '@rhds/elements/lib/elements/rh-context-provider/rh-context-provider.js';
+</script>
+
diff --git a/elements/rh-dialog/demo/demo.css b/elements/rh-dialog/demo/demo.css
deleted file mode 100644
index d821eb6b8c..0000000000
--- a/elements/rh-dialog/demo/demo.css
+++ /dev/null
@@ -1,22 +0,0 @@
-section {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
-  padding: var(--rh-space-lg, 16px);
-}
-
-section > h2 {
-  grid-column: -1/1;
-}
-
-dl {
-  display: grid;
-  grid-template-columns: max-content max-content;
-  align-items: center;
-  gap: var(--rh-space-md, 8px);
-  margin-inline: var(--rh-space-lg, 16px);
-}
-
-[data-demo] :is(dt, dd) {
-  margin-block: 0;
-}
diff --git a/elements/rh-dialog/demo/lots-of-content.html b/elements/rh-dialog/demo/lots-of-content.html
new file mode 100644
index 0000000000..195cb5df64
--- /dev/null
+++ b/elements/rh-dialog/demo/lots-of-content.html
@@ -0,0 +1,70 @@
+<rh-button id="lots-of-content-trigger">Open</rh-button>
+<rh-dialog trigger="lots-of-content-trigger">
+  <h2 slot="header">Modal with a header with a truly excessive super duper long title containing entirely too many words and in addition to the remarkably verbose title it also contains and a lot of content</h2>
+  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+    qui officia deserunt mollit anim id est laborum.</p>
+  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere
+    consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis
+    parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi
+    erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
+  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
+    odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+    condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+    qui officia deserunt mollit anim id est laborum.</p>
+  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere
+    consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis
+    parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi
+    erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
+  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
+    odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+    condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+    qui officia deserunt mollit anim id est laborum.</p>
+  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere
+    consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis
+    parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi
+    erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
+  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
+    odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+    condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+    qui officia deserunt mollit anim id est laborum.</p>
+  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere
+    consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis
+    parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi
+    erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
+  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
+    odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
+    condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+  <rh-cta slot="footer">
+    <a href="#bar">Learn more</a>
+  </rh-cta>
+</rh-dialog>
+
+<script type="module">
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-dialog/rh-dialog.js';
+</script>
+
diff --git a/elements/rh-dialog/demo/no-header-content.html b/elements/rh-dialog/demo/no-header-content.html
new file mode 100644
index 0000000000..42c234f86b
--- /dev/null
+++ b/elements/rh-dialog/demo/no-header-content.html
@@ -0,0 +1,23 @@
+<rh-button id="no-header-content-trigger">Open</rh-button>
+<rh-dialog trigger="no-header-content-trigger">
+  <p>A modal with no slotted header content</p>
+  <h3>This has no header content</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+    laborum.</p>
+  <rh-cta id="test-dark-child">
+    <a href="#">Call-to-action</a>
+  </rh-cta>
+</rh-dialog>
+
+<script type="module">
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-dialog/rh-dialog.js';
+  import '@patternfly/elements/pf-panel/pf-panel.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+  import '@patternfly/elements/pf-card/pf-card.js';
+</script>
+
diff --git a/elements/rh-dialog/demo/no-headings.html b/elements/rh-dialog/demo/no-headings.html
new file mode 100644
index 0000000000..28b666d63d
--- /dev/null
+++ b/elements/rh-dialog/demo/no-headings.html
@@ -0,0 +1,18 @@
+<rh-button id="no-headings-trigger">Open</rh-button>
+<rh-dialog trigger="no-headings-trigger">
+  <p>This modal doesn't have any headings. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+    officia deserunt mollit anim id est laborum.</p>
+  <rh-cta>
+    <a href="#">Call-to-action</a>
+  </rh-cta>
+</rh-dialog>
+
+<script type="module">
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-dialog/rh-dialog.js';
+</script>
+
diff --git a/elements/rh-dialog/demo/rh-dialog.html b/elements/rh-dialog/demo/rh-dialog.html
index 44f14c110b..2f59977aba 100644
--- a/elements/rh-dialog/demo/rh-dialog.html
+++ b/elements/rh-dialog/demo/rh-dialog.html
@@ -1,38 +1,4 @@
-<link rel="stylesheet" href="demo.css">
-<script type="module" src="rh-dialog.js"></script>
-
-<dl>
-  <dt>Standard modal dialog</dt>
-  <dd>
-    <rh-button id="first-modal-trigger">Open</rh-button>
-  </dd>
-
-  <dt>Video modal dialog</dt>
-  <dd>
-    <rh-button id="video-modal-trigger">Open</rh-button>
-  </dd>
-
-  <dt>YouTube embed modal dialog</dt>
-  <dd>
-    <rh-button id="youtube-modal-trigger">Open</rh-button>
-  </dd>
-
-  <dt>No header content</dt>
-  <dd>
-    <rh-button id="no-header-content-trigger">Open</rh-button>
-  </dd>
-
-  <dt>No headings</dt>
-  <dd>
-    <rh-button id="no-headings-trigger">Open</rh-button>
-  </dd>
-
-  <dt>A lot of content</dt>
-  <dd>
-    <rh-button id="lots-of-content-trigger">Open</rh-button>
-  </dd>
-</dl>
-
+<rh-button id="first-modal-trigger">Open</rh-button>
 <rh-dialog trigger="first-modal-trigger">
   <h2 slot="header">Modal dialog with a header</h2>
   <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor incididunt
@@ -45,103 +11,6 @@ <h2 slot="header">Modal dialog with a header</h2>
   </rh-cta>
 </rh-dialog>
 
-<rh-dialog id="video-modal" type="video" trigger="video-modal-trigger">
-  <video controls src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
-</rh-dialog>
-
-<rh-dialog id="youtube-modal" type="video" trigger="youtube-modal-trigger">
-  <iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ?enablejsapi=1" title="YouTube video player" frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen></iframe>
-</rh-dialog>
-
-<rh-dialog trigger="no-header-content-trigger">
-  <p>A modal with no slotted header content</p>
-  <h3>This has no header content</h3>
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
-    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-    laborum.</p>
-  <rh-cta id="test-dark-child">
-    <a href="#">Call-to-action</a>
-  </rh-cta>
-</rh-dialog>
-
-<rh-dialog trigger="no-headings-trigger">
-  <p>This modal doesn't have any headings. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-    officia deserunt mollit anim id est laborum.</p>
-  <rh-cta>
-    <a href="#">Call-to-action</a>
-  </rh-cta>
-</rh-dialog>
-
-<rh-dialog trigger="lots-of-content-trigger">
-  <h2 slot="header">Modal with a header with a truly excessive super duper long title containing entirely too many words and in addition to the remarkably verbose title it also contains and a lot of content</h2>
-  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor
-    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-    qui officia deserunt mollit anim id est laborum.</p>
-  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere
-    consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet,
-    consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi
-    erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
-  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
-    odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-    condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor
-    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-    qui officia deserunt mollit anim id est laborum.</p>
-  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere
-    consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet,
-    consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi
-    erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
-  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
-    odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-    condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor
-    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-    qui officia deserunt mollit anim id est laborum.</p>
-  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere
-    consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet,
-    consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi
-    erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
-  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
-    odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-    condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-  <p>Lorem ipsum dolor sit amet, <a href="#foo">consectetur adipisicing</a> elit, sed do eiusmod tempor
-    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-    qui officia deserunt mollit anim id est laborum.</p>
-  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Sed posuere
-    consectetur est at lobortis. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis
-    parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet,
-    consectetur adipiscing elit. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi
-    erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.</p>
-  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed
-    odio dui. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-    condimentum nibh, ut fermentum massa justo sit amet risus.</p>
-  <rh-cta slot="footer">
-    <a href="#bar">Learn more</a>
-  </rh-cta>
-</rh-dialog>
-
 <section>
   <h2>Color Context</h2>
   <rh-context-provider>
@@ -195,3 +64,13 @@ <h2 slot="header">Dark Context</h2>
   </rh-context-provider>
 
 </section>
+
+<script type="module">
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-dialog/rh-dialog.js';
+  import '@patternfly/elements/pf-panel/pf-panel.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+  import '@patternfly/elements/pf-card/pf-card.js';
+</script>
+
diff --git a/elements/rh-dialog/demo/rh-dialog.js b/elements/rh-dialog/demo/rh-dialog.js
deleted file mode 100644
index b0df67e4ec..0000000000
--- a/elements/rh-dialog/demo/rh-dialog.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import '@rhds/elements/rh-button/rh-button.js';
-import '@rhds/elements/rh-cta/rh-cta.js';
-import '@rhds/elements/rh-dialog/rh-dialog.js';
-import '@patternfly/elements/pf-panel/pf-panel.js';
-import '@patternfly/elements/pf-button/pf-button.js';
-import '@patternfly/elements/pf-card/pf-card.js';
-
-const customTriggerModal = document.querySelector('#custom-modal');
-
-customTriggerModal?.setTrigger(document.querySelector('#custom-trigger'));
diff --git a/elements/rh-dialog/demo/video-modal.html b/elements/rh-dialog/demo/video-modal.html
new file mode 100644
index 0000000000..4c99b0a70b
--- /dev/null
+++ b/elements/rh-dialog/demo/video-modal.html
@@ -0,0 +1,42 @@
+<dl>
+  <dt>Video modal dialog</dt>
+  <dd>
+    <rh-button id="video-modal-trigger">Open</rh-button>
+    <rh-dialog id="video-modal" type="video" trigger="video-modal-trigger">
+      <video controls src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
+    </rh-dialog>
+  </dd>
+
+  <dt>YouTube embed modal dialog</dt>
+  <dd>
+    <rh-button id="youtube-modal-trigger">Open</rh-button>
+    <rh-dialog id="youtube-modal" type="video" trigger="youtube-modal-trigger">
+      <iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ?enablejsapi=1" title="YouTube video player" frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen></iframe>
+    </rh-dialog>
+  </dd>
+</dl>
+
+<style>
+  [data-demo="rh-dialog"] dl {
+    display: grid;
+    grid-template-columns: max-content max-content;
+    align-items: center;
+    gap: var(--rh-space-md, 8px);
+    margin-inline: var(--rh-space-lg, 16px);
+  }
+
+  [data-demo="rh-dialog"] :is(dt, dd) {
+    margin-block: 0;
+  }
+</style>
+<script type="module">
+  import '@rhds/elements/rh-button/rh-button.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-dialog/rh-dialog.js';
+  import '@patternfly/elements/pf-panel/pf-panel.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+  import '@patternfly/elements/pf-card/pf-card.js';
+</script>
+