diff --git a/static/demos/api/accordion/index.html b/static/demos/api/accordion/index.html
new file mode 100644
index 00000000000..b44376250fd
--- /dev/null
+++ b/static/demos/api/accordion/index.html
@@ -0,0 +1,353 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width initial-scale=1.0">
+  <title>Accordion</title>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css"/>
+  <style>
+    :root {
+      --ion-safe-area-top: 20px;
+      --ion-safe-area-bottom: 22px;
+    }
+
+    ion-list-header {
+      padding-bottom: 12px;
+    }
+
+    ion-content {
+      --background: #f2f2f7;
+    }
+  </style>
+  <script type="module">
+    import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/index.esm.js';
+    window.toastController = toastController;
+  </script>
+</head>
+<body>
+  <ion-app>
+    <ion-header translucent="true">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button defaultHref="/"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Accordion</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content fullscreen class="component-content">
+      <component-details description="description" url="url"></component-details>
+
+      <ion-list inset="true">
+        <ion-list-header>Basic</ion-list-header>
+        <ion-accordion-group>
+          <ion-accordion value="colors">
+            <ion-item slot="header" color="primary">
+              <ion-label>Colors</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Red</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Green</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Blue</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="shapes">
+            <ion-item slot="header" color="success">
+              <ion-label>Shapes</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Circle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Triangle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Square</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="numbers">
+            <ion-item slot="header" color="danger">
+              <ion-label>Numbers</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>1</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>2</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>3</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+        </ion-accordion-group>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Custom Icon</ion-list-header>
+        <ion-accordion-group>
+          <ion-accordion value="colors" toggle-icon="arrow-down-circle">
+            <ion-item slot="header" color="primary">
+              <ion-label>Colors</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Red</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Green</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Blue</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="shapes" toggle-icon="arrow-down-circle">
+            <ion-item slot="header" color="success">
+              <ion-label>Shapes</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Circle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Triangle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Square</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="numbers" toggle-icon="arrow-down-circle">
+            <ion-item slot="header" color="danger">
+              <ion-label>Numbers</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>1</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>2</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>3</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+        </ion-accordion-group>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Open Accordion</ion-list-header>
+        <ion-accordion-group value="colors">
+          <ion-accordion value="colors">
+            <ion-item slot="header" color="primary">
+              <ion-label>Colors</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Red</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Green</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Blue</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="shapes">
+            <ion-item slot="header" color="success">
+              <ion-label>Shapes</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Circle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Triangle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Square</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="numbers">
+            <ion-item slot="header" color="danger">
+              <ion-label>Numbers</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>1</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>2</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>3</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+        </ion-accordion-group>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Multiple Accordions</ion-list-header>
+        <ion-accordion-group multiple="true" id="multiple">
+          <ion-accordion value="colors">
+            <ion-item slot="header" color="primary">
+              <ion-label>Colors</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Red</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Green</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Blue</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="shapes">
+            <ion-item slot="header" color="success">
+              <ion-label>Shapes</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Circle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Triangle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Square</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="numbers">
+            <ion-item slot="header" color="danger">
+              <ion-label>Numbers</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>1</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>2</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>3</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+        </ion-accordion-group>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Managing State</ion-list-header>
+        <ion-accordion-group id="state" value="numbers">
+          <ion-accordion value="colors">
+            <ion-item slot="header" color="primary">
+              <ion-label>Colors</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Red</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Green</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Blue</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="shapes">
+            <ion-item slot="header" color="success">
+              <ion-label>Shapes</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>Circle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Triangle</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>Square</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+          <ion-accordion value="numbers">
+            <ion-item slot="header" color="danger">
+              <ion-label>Numbers</ion-label>
+            </ion-item>
+
+            <ion-list slot="content">
+              <ion-item>
+                <ion-label>1</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>2</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-label>3</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-accordion>
+        </ion-accordion-group>
+      </ion-list>
+
+      <div class="ion-padding-start ion-padding-end ion-padding-bottom">
+        <ion-button expand="block" onclick="logAccordionGroup()">Log Value of Accordion Group</ion-button>
+        <ion-button expand="block" onclick="closeAccordions()">Close Accordion</ion-button>
+      </div>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const stateAccordion = document.querySelector('#state');
+    function logAccordionGroup() {
+      const toast = toastController.create({
+        message: 'Accordion Value: ' + stateAccordion.value,
+        duration: 5000
+      });
+
+      toast.then((toastEl) => {
+        toastEl.present();
+      })
+    }
+
+    function closeAccordions() {
+      stateAccordion.value = undefined;
+    }
+  </script>
+</body>
+</html>
diff --git a/static/demos/api/breadcrumbs/index.html b/static/demos/api/breadcrumbs/index.html
new file mode 100644
index 00000000000..c87747a19d8
--- /dev/null
+++ b/static/demos/api/breadcrumbs/index.html
@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Breadcrumbs</title>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css"/>
+  <style>
+    :root {
+      --ion-safe-area-top: 20px;
+      --ion-safe-area-bottom: 22px;
+    }
+
+    ion-breadcrumbs.ios {
+      padding: 6px 8px;
+    }
+
+    ion-breadcrumbs.md {
+      padding: 0 4px;
+    }
+
+    ion-content {
+      --background: #f2f2f7;
+    }
+
+  </style>
+</head>
+<body>
+  <ion-app>
+    <ion-header translucent>
+      <ion-toolbar>
+        <ion-title>Breadcrumbs</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true">
+      <ion-list inset="true">
+        <ion-list-header>Basic</ion-list-header>
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#">
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#photography">
+            Photography
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Colors</ion-list-header>
+        <ion-breadcrumbs color="secondary">
+          <ion-breadcrumb href="#">
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#photography">
+            Photography
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Icons - Start</ion-list-header>
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#">
+            <ion-icon slot="start" name="home"></ion-icon>
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#files">
+            <ion-icon slot="start" name="folder"></ion-icon>
+            Files
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#projects">
+            <ion-icon slot="start" name="folder"></ion-icon>
+            Projects
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Icons - End</ion-list-header>
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#">
+            Home
+            <ion-icon slot="end" name="home"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#files">
+            Files
+            <ion-icon slot="end" name="folder"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#projects">
+            Projects
+            <ion-icon slot="end" name="folder"></ion-icon>
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Custom Separator - Icon</ion-list-header>
+        <ion-breadcrumbs>
+          <ion-breadcrumb href="#">
+            Home
+            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#photography">
+            Photography
+            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Max Items</ion-list-header>
+        <ion-breadcrumbs max-items="4">
+          <ion-breadcrumb href="#">
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#photography">
+            Photography
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            35 mm
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Items Before Collapse</ion-list-header>
+        <ion-breadcrumbs max-items="4" items-before-collapse="2">
+          <ion-breadcrumb href="#">
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#photography">
+            Photography
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            35 mm
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Items After Collapse</ion-list-header>
+        <ion-breadcrumbs max-items="4" items-after-collapse="3">
+          <ion-breadcrumb href="#">
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#photography">
+            Photography
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            35 mm
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Items Before And After Collapse</ion-list-header>
+        <ion-breadcrumbs max-items="4" items-before-collapse="0" items-after-collapse="3">
+          <ion-breadcrumb href="#">
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#photography">
+            Photography
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            35 mm
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Expand on Collapsed Indicator Click</ion-list-header>
+        <ion-breadcrumbs id="expand">
+          <ion-breadcrumb href="#">
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#photography">
+            Photography
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            35 mm
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+
+        <ion-popover alignment="center">
+          <ion-content>
+            <ion-list>
+              <ion-item href="#electronics">
+                <ion-label>Electronics</ion-label>
+              </ion-item>
+              <ion-item href="#photography">
+                <ion-label>Photography</ion-label>
+              </ion-item>
+              <ion-item href="#cameras">
+                <ion-label>Cameras</ion-label>
+              </ion-item>
+              <ion-item href="#film">
+                <ion-label>Film</ion-label>
+              </ion-item>
+            </ion-list>
+          </ion-content>
+        </ion-popover>
+      </ion-list>
+
+      <ion-list inset="true">
+        <ion-list-header>Popover on Collapsed Indicator Click</ion-list-header>
+        <ion-breadcrumbs max-items="4" id="popover">
+          <ion-breadcrumb href="#">
+            Home
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#electronics">
+            Electronics
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#photography">
+            Photography
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#cameras">
+            Cameras
+          </ion-breadcrumb>
+          <ion-breadcrumb href="#film">
+            Film
+          </ion-breadcrumb>
+          <ion-breadcrumb>
+            35 mm
+          </ion-breadcrumb>
+        </ion-breadcrumbs>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const expandBreadcrumb = document.querySelector('#expand');
+    const popoverBreadcrumb = document.querySelector('#popover');
+    const popover = document.querySelector('ion-popover');
+
+    expandBreadcrumb.maxItems = 4;
+    expandBreadcrumb.addEventListener('ionCollapsedClick', () => {
+      expandBreadcrumb.maxItems = undefined;
+    });
+
+    popoverBreadcrumb.addEventListener('ionCollapsedClick', (ev) => {
+      popover.present(ev);
+    })
+  </script>
+</body>
+</html>
diff --git a/static/demos/api/datetime/index.html b/static/demos/api/datetime/index.html
index eacd712994f..a562d7ea9b6 100644
--- a/static/demos/api/datetime/index.html
+++ b/static/demos/api/datetime/index.html
@@ -4,14 +4,42 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DateTime</title>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
-  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css"/>
   <style>
     :root {
       --ion-safe-area-top: 20px;
       --ion-safe-area-bottom: 22px;
     }
+
+    ion-content {
+      --background: #f2f2f7;
+    }
+
+    ion-datetime {
+      height: auto;
+      width: auto;
+
+      max-width: 350px;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+      grid-gap: 0 10px;
+    }
+
+    ion-modal {
+      --width: 290px;
+      --height: 382px;
+      --border-radius: 8px;
+    }
+
+    ion-modal ion-datetime {
+      height: 382px;
+    }
+
   </style>
 </head>
 <body>
@@ -20,42 +48,82 @@
       <ion-toolbar>
         <ion-title>DateTime</ion-title>
       </ion-toolbar>
-    </ion-header>,
-    <ion-content fullscreen>
-      <ion-list>
-        <ion-item>
-          <ion-input placeholder="Title"></ion-input>
-        </ion-item>
-        <ion-item>
-          <ion-input placeholder="Location"></ion-input>
-        </ion-item>
-        <ion-item-divider></ion-item-divider>
-        <ion-item>
-          <ion-label>Start Date</ion-label>
-          <ion-datetime value="1990-02-19" placeholder="Select Date"></ion-datetime>
-        </ion-item>
-        <ion-item>
-          <ion-label>Start Time</ion-label>
-          <ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z"></ion-datetime>
-        </ion-item>
-        <ion-item>
-          <ion-label>Ends</ion-label>
-          <ion-datetime value="1990-02-20" placeholder="Select Date"></ion-datetime>
-        </ion-item>
-        <ion-item>
-          <ion-label>Repeat</ion-label>
-          <ion-datetime placeholder="Never" disabled></ion-datetime>
-        </ion-item>
-        <ion-item>
-          <ion-label>Travel Time</ion-label>
-          <ion-datetime placeholder="None" disabled></ion-datetime>
-        </ion-item>
-        <ion-item-divider></ion-item-divider>
-        <ion-item>
-          <ion-label>Alert</ion-label>
-          <ion-datetime placeholder="None" disabled></ion-datetime>
-        </ion-item>
-      </ion-list>
+    </ion-header>
+    <ion-content class="ion-padding-start ion-padding-end" fullscreen>
+      <div class="grid">
+        <div class="grid-item">
+          <h2>Initial Value</h2>
+          <ion-datetime value="2012-12-15T13:47:20.789"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Readonly</h2>
+          <ion-datetime readonly="true"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Disabled</h2>
+          <ion-datetime disabled="true"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Custom Locale</h2>
+          <ion-datetime locale="en-GB"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Max and min</h2>
+          <ion-datetime min="1994-03-14" max="2012-12-09" value="2008-09-02"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>15 minute increments</h2>
+          <ion-datetime minute-values="0,15,30,45"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Specific days/months/years</h2>
+          <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10,11,12,13,14"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Time Only</h2>
+          <ion-datetime presentation="time"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Time First, Date Second</h2>
+          <ion-datetime presentation="time-date"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Custom Hour Cycle</h2>
+          <ion-datetime hour-cycle="h23"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Custom First Day Of Week</h2>
+          <ion-datetime first-day-of-week="1"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Custom Title</h2>
+          <ion-datetime>
+            <div slot="title">My Custom Title</div>
+          </ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Clear Button</h2>
+          <ion-datetime show-clear-button="true"></ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Custom Buttons</h2>
+          <ion-datetime ref="el => this.customDatetime = el">
+            <ion-buttons slot="buttons">
+              <ion-button color="primary" onClick="() => this.confirm()">Good to go!</ion-button>
+              <ion-button color="danger" onClick="() => this.reset()">Reset</ion-button>
+            </ion-buttons>
+          </ion-datetime>
+        </div>
+        <div class="grid-item">
+          <h2>Datetime in Overlay</h2>
+          <ion-button id="open-modal">Open Datetime Modal</ion-button>
+          <ion-modal trigger="open-modal">
+            <ion-content force-overscroll="false">
+              <ion-datetime></ion-datetime>
+            </ion-content>
+          </ion-modal>
+        </div>
+      </div>
     </ion-content>
   </ion-app>
 </body>
diff --git a/static/demos/api/modal/index.html b/static/demos/api/modal/index.html
index 76048105436..4f856dfde2a 100644
--- a/static/demos/api/modal/index.html
+++ b/static/demos/api/modal/index.html
@@ -4,9 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Modal</title>
-  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
-  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css"/>
   <style>
     :root {
       --ion-safe-area-top: 20px;
@@ -14,23 +14,28 @@
     }
   </style>
   <script type="module">
-    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
+    import { modalController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/index.esm.js';
     window.modalController = modalController;
   </script>
 </head>
 <body>
   <ion-app>
-    <ion-header translucent>
-      <ion-toolbar>
-        <ion-title>Modal</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content fullscreen class="ion-padding">
-      <ion-button expand="block">Show Modal</ion-button>
-    </ion-content>
+    <div class="ion-page">
+      <ion-header translucent>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content fullscreen class="ion-padding">
+        <ion-button expand="block" onclick="openModal()">Show Modal</ion-button>
+        <ion-button expand="block" onclick="openCardModal()">Show Card Modal</ion-button>
+        <ion-button expand="block" onclick="openSheetModal()">Show Sheet Modal</ion-button>
+      </ion-content>
+    </div>
   </ion-app>
 
   <script>
+    const pageEl = document.querySelector('.ion-page');
     customElements.define('modal-content', class ModalContent extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `
@@ -78,18 +83,30 @@ <h2>Samwise</h2>
     });
 
     let currentModal = null;
-    const button = document.querySelector('ion-button');
-    button.addEventListener('click', createModal);
-
-    async function createModal() {
+    async function openModal(opts = {}) {
       const modal = await modalController.create({
-        component: 'modal-content'
+        component: 'modal-content',
+        ...opts
       });
+      modal.present();
 
-      await modal.present();
       currentModal = modal;
     }
 
+    function openSheetModal() {
+      openModal({
+        breakpoints: [0, 0.2, 0.5, 1],
+        initialBreakpoint: 0.2
+      });
+    }
+
+    function openCardModal() {
+      openModal({
+        swipeToClose: true,
+        presentingElement: pageEl
+      })
+    }
+
     function dismissModal() {
       if (currentModal) {
         currentModal.dismiss().then(() => { currentModal = null; });
