@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.1

package/components/datepicker/demo/api.md

@@ -110,29 +110,27 @@ The `auro-datepicker` component provides users with a way to select a date or da
 ## Basic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datepicker>
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-datepicker>
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
-```html
-<auro-datepicker>
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -141,33 +139,31 @@ The `auro-datepicker` component provides users with a way to select a date or da
 The datepicker can also be used to select a range between two dates by adding the `range` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/range.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/range.html -->
-  <auro-datepicker range>
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.fromLabel">Departure</span>
-    <span slot="bib.fullscreen.toLabel">Return</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/range.html) -->
+<!-- The below content is automatically added from ./../apiExamples/range.html -->
+<auro-datepicker range>
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+<span slot="fromLabel">Departure</span>
+<span slot="toLabel">Return</span>
+<span slot="bib.fullscreen.fromLabel">Departure</span>
+<span slot="bib.fullscreen.toLabel">Return</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/range.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/range.html -->
 
-```html
-<auro-datepicker range>
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.fromLabel">Departure</span>
-  <span slot="bib.fullscreen.toLabel">Return</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker range&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Range Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -178,57 +174,53 @@ The datepicker can also be used to select a range between two dates by adding th
 Use `appearance="inverse"` to display the datepicker on dark backgrounds.
 
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
-  <auro-datepicker appearance="inverse">
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
+<auro-datepicker appearance="inverse">
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
 
-```html
-<auro-datepicker appearance="inverse">
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker appearance="inverse"&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-range.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-range.html -->
-  <auro-datepicker appearance="inverse" range>
-    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.fromLabel">Departure</span>
-    <span slot="bib.fullscreen.toLabel">Return</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-range.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-range.html -->
+<auro-datepicker appearance="inverse" range>
+<span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+<span slot="fromLabel">Departure</span>
+<span slot="toLabel">Return</span>
+<span slot="bib.fullscreen.fromLabel">Departure</span>
+<span slot="bib.fullscreen.toLabel">Return</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse-range.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-range.html -->
 
-```html
-<auro-datepicker appearance="inverse" range>
-  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.fromLabel">Departure</span>
-  <span slot="bib.fullscreen.toLabel">Return</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker appearance="inverse" range&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Range Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -243,77 +235,75 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
 - `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floater-config.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/floater-config.html -->
-  <div style="width: 400px">
-    <auro-datepicker offset="20" placement="bottom-start" noFlip>
-      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-      <span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
-      <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    </auro-datepicker>
-    <br/>
-    <auro-datepicker offset="20" placement="bottom-start">
-      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-      <span slot="fromLabel">bottom-start with 20px offset and flip</span>
-      <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    </auro-datepicker>
-    <br/>
-    <auro-datepicker offset="20" placement="right" autoPlacement noFlip>
-      <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-      <span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
-      <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    </auro-datepicker>
-  </div>
-  <div style="width: 600px; padding-top: 1em;">
-    <p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
-    <auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025">
-      <span slot="ariaLabel.bib.close">Close Calendar</span>
-      <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-      <span slot="fromLabel">Departure</span>
-      <span slot="toLabel">Return</span>
-      <span slot="bib.fullscreen.fromLabel">Departure</span>
-      <span slot="bib.fullscreen.toLabel">Return</span>
-    </auro-datepicker>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floater-config.html) -->
+<!-- The below content is automatically added from ./../apiExamples/floater-config.html -->
+<div style="width: 400px">
+<auro-datepicker offset="20" placement="bottom-start" noFlip>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<br/>
+<auro-datepicker offset="20" placement="bottom-start">
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">bottom-start with 20px offset and flip</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<br/>
+<auro-datepicker offset="20" placement="right" autoPlacement noFlip>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+</div>
+<div style="width: 600px; padding-top: 1em;">
+<p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
+<auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025">
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+<span slot="fromLabel">Departure</span>
+<span slot="toLabel">Return</span>
+<span slot="bib.fullscreen.fromLabel">Departure</span>
+<span slot="bib.fullscreen.toLabel">Return</span>
+</auro-datepicker>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/floater-config.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/floater-config.html -->
 
-```html
-<div style="width: 400px">
-  <auro-datepicker offset="20" placement="bottom-start" noFlip>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">bottom-start with 20px offset and noFlip</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <br/>
-  <auro-datepicker offset="20" placement="bottom-start">
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">bottom-start with 20px offset and flip</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <br/>
-  <auro-datepicker offset="20" placement="right" autoPlacement noFlip>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-</div>
-<div style="width: 600px; padding-top: 1em;">
-  <p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
-  <auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025">
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.fromLabel">Departure</span>
-    <span slot="bib.fullscreen.toLabel">Return</span>
-  </auro-datepicker>
-</div>
-```
+<pre class="language-html"><code class="language-html">&lt;div style="width: 400px"&gt;
+  &lt;auro-datepicker offset="20" placement="bottom-start" noFlip&gt;
+    &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+    &lt;span slot="fromLabel"&gt;bottom-start with 20px offset and noFlip&lt;/span&gt;
+    &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;/auro-datepicker&gt;
+  &lt;br/&gt;
+  &lt;auro-datepicker offset="20" placement="bottom-start"&gt;
+    &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+    &lt;span slot="fromLabel"&gt;bottom-start with 20px offset and flip&lt;/span&gt;
+    &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;/auro-datepicker&gt;
+  &lt;br/&gt;
+  &lt;auro-datepicker offset="20" placement="right" autoPlacement noFlip&gt;
+    &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+    &lt;span slot="fromLabel"&gt;right with 20px offset, noFlip and autoPlacement&lt;/span&gt;
+    &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;/auro-datepicker&gt;
+&lt;/div&gt;
+&lt;div style="width: 600px; padding-top: 1em;"&gt;
+  &lt;p&gt;Range bottom-start with 20px offset, noFlip and shift enabled&lt;/p&gt;
+  &lt;auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025"&gt;
+    &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+    &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Range Headline&lt;/span&gt;
+    &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
+    &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
+    &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
+    &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
+  &lt;/auro-datepicker&gt;
+&lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -330,27 +320,25 @@ In <strong>desktop</strong>, the calendar month navigation will be restricted by
 Note: This does not restrict setting a value outside of those date constraints. These properties _only_ define which months can be rendered in the calendar. A user may still type any date into the input field. If actual value selection restrictions are needed, see the `minDate` and `maxDate` properties which may be used standalone, or in conjunction with `calendarStartDate` and `calendarEndDate`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendar-start-and-end-date.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/calendar-start-and-end-date.html -->
-  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
-    <span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendar-start-and-end-date.html) -->
+<!-- The below content is automatically added from ./../apiExamples/calendar-start-and-end-date.html -->
+<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
+<span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/calendar-start-and-end-date.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/calendar-start-and-end-date.html -->
 
-```html
-<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
-  <span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;calendarStartDate &amp; calendarEndDate Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -363,27 +351,25 @@ In <strong>desktop</strong> layout, the first month actually rendered will be th
 In <strong>mobile</strong> layout, upon first opening the bib, the vertical list of months will scroll (with no animation) to the month defined by the `calendarFocusDate`. If the user scrolls the list to a different position, the scroll position will remain where the user left off when they close and reopen the bib. If the `calendarFocusDate` is changed, the list will scroll to the new dates month. If `calendarFocusDate` is undefined, the list will start at the top most scroll position.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendar-focus-date.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/calendar-focus-date.html -->
-  <auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
-    <span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/calendar-focus-date.html) -->
+<!-- The below content is automatically added from ./../apiExamples/calendar-focus-date.html -->
+<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
+<span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/calendar-focus-date.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/calendar-focus-date.html -->
 
-```html
-<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022">
-  <span slot="bib.fullscreen.headline">calendarFocusDate Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="12/01/2023" calendarFocusDate="11/01/2022"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;calendarFocusDate Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -392,27 +378,25 @@ In <strong>mobile</strong> layout, upon first opening the bib, the vertical list
 The `centralDate` attribute can be used to force the calendar to navigate to a specific month. WARNING: Do not set the `centralDate` attribute on blur.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/central-date.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/central-date.html -->
-  <auro-datepicker centralDate="06/16/1980">
-    <span slot="bib.fullscreen.headline">centralDate Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/central-date.html) -->
+<!-- The below content is automatically added from ./../apiExamples/central-date.html -->
+<auro-datepicker centralDate="06/16/1980">
+<span slot="bib.fullscreen.headline">centralDate Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/central-date.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/central-date.html -->
 
-```html
-<auro-datepicker centralDate="06/16/1980">
-  <span slot="bib.fullscreen.headline">centralDate Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker centralDate="06/16/1980"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;centralDate Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -421,25 +405,23 @@ The `centralDate` attribute can be used to force the calendar to navigate to a s
 Set the `disabled` attribute to disable all interaction with the datepicker.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-  <auro-datepicker disabled>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+<auro-datepicker disabled>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
 
-```html
-<auro-datepicker disabled>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker disabled&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -450,50 +432,46 @@ Use the `error` attribute to apply a persistent custom error that supersedes the
 A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/error.html -->
-  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
-  <br />
-  <auro-datepicker error="Custom error message" id="errorExample">
-    <span slot="bib.fullscreen.headline">Error Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
+<!-- The below content is automatically added from ./../apiExamples/error.html -->
+<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
+<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
+<br />
+<auro-datepicker error="Custom error message" id="errorExample">
+<span slot="bib.fullscreen.headline">Error Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
 
-```html
-<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
-<br />
-<auro-datepicker error="Custom error message" id="errorExample">
-  <span slot="bib.fullscreen.headline">Error Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="undefinedValueExampleBtnAddError"&gt;Set Error&lt;/auro-button&gt;
+&lt;auro-button id="undefinedValueExampleBtnRemoveError"&gt;Remove Error&lt;/auro-button&gt;
+&lt;br /&gt;
+&lt;auro-datepicker error="Custom error message" id="errorExample"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Error Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/error.js -->
 
-```js
-export function errorExample() {
+<pre class="language-js"><code class="language-js">export function errorExample() {
   const errorExample = document.querySelector('#errorExample');
-
-  document.querySelector('#undefinedValueExampleBtnAddError').addEventListener('click', () => {
+​
+  document.querySelector('#undefinedValueExampleBtnAddError').addEventListener('click', () =&gt; {
     errorExample.error = 'Custom New Error';
   })
-
-  document.querySelector('#undefinedValueExampleBtnRemoveError').addEventListener('click', () => {
+​
+  document.querySelector('#undefinedValueExampleBtnRemoveError').addEventListener('click', () =&gt; {
     errorExample.removeAttribute('error');
   })
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -502,27 +480,25 @@ export function errorExample() {
 The `format` attribute is used to define the date format used by the datepicker. The default value is `mm/dd/yyyy`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/format.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/format.html -->
-  <auro-datepicker format="yyyy/mm/dd">
-    <span slot="bib.fullscreen.headline">Format Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/format.html) -->
+<!-- The below content is automatically added from ./../apiExamples/format.html -->
+<auro-datepicker format="yyyy/mm/dd">
+<span slot="bib.fullscreen.headline">Format Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/format.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/format.html -->
 
-```html
-<auro-datepicker format="yyyy/mm/dd">
-  <span slot="bib.fullscreen.headline">Format Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker format="yyyy/mm/dd"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Format Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -537,29 +513,27 @@ Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/
 To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMMENDED**.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
-  <auro-datepicker fullscreenBreakpoint="lg">
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen-breakpoint.html) -->
+<!-- The below content is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
+<auro-datepicker fullscreenBreakpoint="lg">
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreen-breakpoint.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
 
-```html
-<auro-datepicker fullscreenBreakpoint="lg">
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker fullscreenBreakpoint="lg"&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -568,27 +542,25 @@ To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMM
 You can manually set the input mode for the input with the `inputmode` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
-  <auro-datepicker inputmode="numeric">
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
+<!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
+<auro-datepicker inputmode="numeric">
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inputmode.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
 
-```html
-<auro-datepicker inputmode="numeric">
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker inputmode="numeric"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -597,27 +569,25 @@ You can manually set the input mode for the input with the `inputmode` attribute
 To give a higher limit you can bind a date to the `maxDate` attribute. It is recommended to use the `setCustomValidityRangeOverflow` attribute to define an error message to display when validation fails the maximum date restriction.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/max-date.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/max-date.html -->
-  <auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
-    <span slot="bib.fullscreen.headline">maxDate Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/max-date.html) -->
+<!-- The below content is automatically added from ./../apiExamples/max-date.html -->
+<auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
+<span slot="bib.fullscreen.headline">maxDate Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/max-date.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/max-date.html -->
 
-```html
-<auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
-  <span slot="bib.fullscreen.headline">maxDate Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker maxDate="03/25/2023" setCustomValidityRangeOverflow="Selected date is later than maximum date."&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;maxDate Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -631,74 +601,70 @@ Setting the `maxDate` attribute to a date earlier than the auro-datepicker `valu
 This example demonstrates that behavior.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/update-max-date.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/update-max-date.html -->
-  <auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
-  <auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>
-  <br />
-  <auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
-    <span slot="bib.fullscreen.headline">maxDate Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/update-max-date.html) -->
+<!-- The below content is automatically added from ./../apiExamples/update-max-date.html -->
+<auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
+<auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>
+<br />
+<auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
+<span slot="bib.fullscreen.headline">maxDate Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-max-date.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/update-max-date.html -->
 
-```html
-<auro-button id="maxDateChange">Change maxDate to Today's Date</auro-button>
-<auro-button id="resetMaxDate">Reset Datepicker to Initial Example</auro-button>
-<br />
-<auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date.">
-  <span slot="bib.fullscreen.headline">maxDate Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="maxDateChange"&gt;Change maxDate to Today's Date&lt;/auro-button&gt;
+&lt;auro-button id="resetMaxDate"&gt;Reset Datepicker to Initial Example&lt;/auro-button&gt;
+&lt;br /&gt;
+&lt;auro-datepicker id="maxDateExample" setCustomValidityRangeOverflow="Selected date is later than maximum date."&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;maxDate Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-max-date.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/update-max-date.js -->
 
-```js
-function formatDateString(date) {
+<pre class="language-js"><code class="language-js">function formatDateString(date) {
   /* eslint-disable prefer-template, no-magic-numbers */
   const dd = String("0" + date.getDate()).slice(-2);
   const mm = String("0" + (date.getMonth() + 1)).slice(-2);
   /* eslint-enable prefer-template, no-magic-numbers */
   const yyyy = date.getFullYear();
-
+​
   return `${mm}/${dd}/${yyyy}`;
 }
-
+​
 export function updateMaxDateExample() {
   const maxDateExample = document.getElementById('maxDateExample');
   const changeMaxDateButton = document.getElementById('maxDateChange');
   const resetButton = document.getElementById('resetMaxDate');
-
+​
   const today = formatDateString(new Date());
-
+​
   let nextWeek = new Date();
   let addOneWeek = nextWeek.getDate() + 7;
-
+​
   nextWeek.setDate(addOneWeek);
   nextWeek = formatDateString(nextWeek);
-
+​
   maxDateExample.setAttribute('value', nextWeek);
   maxDateExample.setAttribute('maxDate', nextWeek);
-
-  changeMaxDateButton.addEventListener('click', () => {
+​
+  changeMaxDateButton.addEventListener('click', () =&gt; {
     maxDateExample.setAttribute('maxDate', today);
   });
-
-  resetButton.addEventListener('click', () => {
+​
+  resetButton.addEventListener('click', () =&gt; {
     maxDateExample.setAttribute('value', nextWeek);
     maxDateExample.setAttribute('maxDate', nextWeek);
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -707,27 +673,25 @@ export function updateMaxDateExample() {
 To give a lower limit you can bind a date to the `minDate` attribute. It is recommended to use the `setCustomValidityRangeUnderflow` attribute to define an error message to display when validation fails the minimum date restriction.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/min-date.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/min-date.html -->
-  <auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
-    <span slot="bib.fullscreen.headline">minDate Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/min-date.html) -->
+<!-- The below content is automatically added from ./../apiExamples/min-date.html -->
+<auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
+<span slot="bib.fullscreen.headline">minDate Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/min-date.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/min-date.html -->
 
-```html
-<auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
-  <span slot="bib.fullscreen.headline">minDate Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker minDate="03/25/2028" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date."&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;minDate Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -741,75 +705,71 @@ Setting the `minDate` attribute to a date later than the auro-datepicker `value`
 This example demonstrates that behavior.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/update-min-date.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/update-min-date.html -->
-  <auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
-  <auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>
-  <br />
-  <auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
-    <span slot="bib.fullscreen.headline">minDate Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/update-min-date.html) -->
+<!-- The below content is automatically added from ./../apiExamples/update-min-date.html -->
+<auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
+<auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>
+<br />
+<auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
+<span slot="bib.fullscreen.headline">minDate Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-min-date.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/update-min-date.html -->
 
-```html
-<auro-button id="minDateChange">Change minDate to a week from Today</auro-button>
-<auro-button id="resetMinDate">Reset Datepicker to Initial Example</auro-button>
-<br />
-<auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date.">
-  <span slot="bib.fullscreen.headline">minDate Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="minDateChange"&gt;Change minDate to a week from Today&lt;/auro-button&gt;
+&lt;auro-button id="resetMinDate"&gt;Reset Datepicker to Initial Example&lt;/auro-button&gt;
+&lt;br /&gt;
+&lt;auro-datepicker id="minDateExample" setCustomValidityRangeUnderflow="Selected date is earlier than the minimum date."&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;minDate Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/update-min-date.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/update-min-date.js -->
 
-```js
-function formatDateString(date) {
+<pre class="language-js"><code class="language-js">function formatDateString(date) {
   /* eslint-disable prefer-template, no-magic-numbers */
   const dd = String("0" + date.getDate()).slice(-2);
   const mm = String("0" + (date.getMonth() + 1)).slice(-2);
   /* eslint-enable prefer-template, no-magic-numbers */
   const yyyy = date.getFullYear();
-
+​
   return `${mm}/${dd}/${yyyy}`;
 }
-
+​
 export function updateMinDateExample() {
   const minDateExample = document.getElementById('minDateExample');
   const changeMinDateButton = document.getElementById('minDateChange');
   const resetButton = document.getElementById('resetMinDate');
-
+​
   const today = formatDateString(new Date());
-
+​
   let nextWeek = new Date();
   let addOneWeek = nextWeek.getDate() + 7;
-
+​
   nextWeek.setDate(addOneWeek);
   nextWeek = formatDateString(nextWeek);
-
+​
   minDateExample.setAttribute('value', today);
   minDateExample.setAttribute('minDate', today);
-
-  changeMinDateButton.addEventListener('click', () => {
+​
+  changeMinDateButton.addEventListener('click', () =&gt; {
     minDateExample.setAttribute('minDate', nextWeek);
   });
-
-  resetButton.addEventListener('click', () => {
+​
+  resetButton.addEventListener('click', () =&gt; {
     minDateExample.setAttribute('value', today);
     minDateExample.setAttribute('minDate', today);
   });
-
-}
-```
+​
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -820,38 +780,34 @@ The datepicker supports localized month names through the `monthNames` property.
 This example demonstrates how to set the `monthNames` property to Korean month names, with a Korean date format.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/localization.html -->
-  <auro-datepicker format="yyyy/mm/dd" id="localizationExample">
-    <span slot="bib.fullscreen.headline">Localization Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/localization.html) -->
+<!-- The below content is automatically added from ./../apiExamples/localization.html -->
+<auro-datepicker format="yyyy/mm/dd" id="localizationExample">
+<span slot="bib.fullscreen.headline">Localization Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/localization.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/localization.html -->
 
-```html
-<auro-datepicker format="yyyy/mm/dd" id="localizationExample">
-  <span slot="bib.fullscreen.headline">Localization Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker format="yyyy/mm/dd" id="localizationExample"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Localization Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/localization.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/localization.js -->
 
-```js
-export function localizationExample() {
+<pre class="language-js"><code class="language-js">export function localizationExample() {
   const localizedDatepicker = document.querySelector("#localizationExample");
-
+​
   localizedDatepicker.monthNames = ['일월', '이월', '삼월', '사월', '오월', '유월', '칠월', '팔월', '구월', '시월', '십일월', '십이월'];
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -860,27 +816,25 @@ export function localizationExample() {
 Set `noValidate` to force the datepicker not to validate when navigating away from the component.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-validate.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/no-validate.html -->
-  <auro-datepicker required noValidate>
-    <span slot="bib.fullscreen.headline">noValidate Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-validate.html) -->
+<!-- The below content is automatically added from ./../apiExamples/no-validate.html -->
+<auro-datepicker required noValidate>
+<span slot="bib.fullscreen.headline">noValidate Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-validate.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/no-validate.html -->
 
-```html
-<auro-datepicker required noValidate>
-  <span slot="bib.fullscreen.headline">noValidate Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker required noValidate&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;noValidate Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -889,34 +843,30 @@ Set `noValidate` to force the datepicker not to validate when navigating away fr
 You can choose to outline dates for the user to reference by passing a string containing an array of values to the component to tell it which dates are your reference dates.
 
 Example:
-```html
-<auro-datepicker referenceDates='["10/05/2025", "10/15/2025", "10/20/2025", "10/22/2025"]'></auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker referenceDates='["10/05/2025", "10/15/2025", "10/20/2025", "10/22/2025"]'&gt;&lt;/auro-datepicker&gt;</code></pre>
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reference-dates.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/reference-dates.html -->
-  <auro-datepicker referenceDates='["10/05/2025", "10/15/2025", "10/20/2025", "10/22/2025"]' minDate="10/12/2025">
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reference-dates.html) -->
+<!-- The below content is automatically added from ./../apiExamples/reference-dates.html -->
+<auro-datepicker referenceDates='["10/05/2025", "10/15/2025", "10/20/2025", "10/22/2025"]' minDate="10/12/2025">
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reference-dates.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/reference-dates.html -->
 
-```html
-<auro-datepicker referenceDates='["10/05/2025", "10/15/2025", "10/20/2025", "10/22/2025"]' minDate="10/12/2025">
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker referenceDates='["10/05/2025", "10/15/2025", "10/20/2025", "10/22/2025"]' minDate="10/12/2025"&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -927,43 +877,41 @@ Populates the `required` attribute on the input. Used for client-side validation
 When the validity check fails the validityState, equals `valueMissing`. The error message for the `valueMissing` validityState can be set to a custom string using the `setCustomValidityValueMissing`. There is no default error message defined.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/required.html -->
-  <auro-datepicker required setCustomValidityValueMissing="Custom value missing message.">
-    <span slot="bib.fullscreen.headline">Required Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <br />
-  <auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
-    <span slot="bib.fullscreen.headline">Required Example</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.fromLabel">Departure</span>
-    <span slot="bib.fullscreen.toLabel">Return</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
+<!-- The below content is automatically added from ./../apiExamples/required.html -->
+<auro-datepicker required setCustomValidityValueMissing="Custom value missing message.">
+<span slot="bib.fullscreen.headline">Required Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<br />
+<auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
+<span slot="bib.fullscreen.headline">Required Example</span>
+<span slot="fromLabel">Departure</span>
+<span slot="toLabel">Return</span>
+<span slot="bib.fullscreen.fromLabel">Departure</span>
+<span slot="bib.fullscreen.toLabel">Return</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/required.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
 
-```html
-<auro-datepicker required setCustomValidityValueMissing="Custom value missing message.">
-  <span slot="bib.fullscreen.headline">Required Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-<br />
-<auro-datepicker required range setCustomValidityValueMissing="Custom value missing message.">
-  <span slot="bib.fullscreen.headline">Required Example</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.fromLabel">Departure</span>
-  <span slot="bib.fullscreen.toLabel">Return</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker required setCustomValidityValueMissing="Custom value missing message."&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Required Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;
+&lt;br /&gt;
+&lt;auro-datepicker required range setCustomValidityValueMissing="Custom value missing message."&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Required Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -972,29 +920,27 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 Set the `stacked` attribute to make range datepicker stacked style.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/stacked.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/stacked.html -->
-  <auro-datepicker range stacked>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Departure</span>
-    <span slot="bib.fullscreen.toLabel">Return</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/stacked.html) -->
+<!-- The below content is automatically added from ./../apiExamples/stacked.html -->
+<auro-datepicker range stacked>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Departure</span>
+<span slot="bib.fullscreen.toLabel">Return</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/stacked.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/stacked.html -->
 
-```html
-<auro-datepicker range stacked>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Departure</span>
-  <span slot="bib.fullscreen.toLabel">Return</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker range stacked&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1003,46 +949,42 @@ Set the `stacked` attribute to make range datepicker stacked style.
 Specifies the `validityState` the element is in. Upon first interaction, or presetting the `error` attribute, the component will validate on `focusout`. After validation, `validityState` can be queried from the component by using the following JavaScript.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/validity.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/validity.html -->
-  <auro-button id="validityExampleBtn">Get validity</auro-button>
-  <br />
-  <auro-datepicker required id="validityExample">
-    <span slot="bib.fullscreen.headline">validity Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/validity.html) -->
+<!-- The below content is automatically added from ./../apiExamples/validity.html -->
+<auro-button id="validityExampleBtn">Get validity</auro-button>
+<br />
+<auro-datepicker required id="validityExample">
+<span slot="bib.fullscreen.headline">validity Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/validity.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/validity.html -->
 
-```html
-<auro-button id="validityExampleBtn">Get validity</auro-button>
-<br />
-<auro-datepicker required id="validityExample">
-  <span slot="bib.fullscreen.headline">validity Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="validityExampleBtn"&gt;Get validity&lt;/auro-button&gt;
+&lt;br /&gt;
+&lt;auro-datepicker required id="validityExample"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;validity Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/validity.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/validity.js -->
 
-```js
-export function validityExample() {
+<pre class="language-js"><code class="language-js">export function validityExample() {
   const validityExampleExample = document.querySelector('#validityExample');
   const validityExampleExampleBtn = document.querySelector('#validityExampleBtn');
-
-  validityExampleExampleBtn.addEventListener('click', () => {
+​
+  validityExampleExampleBtn.addEventListener('click', () =&gt; {
     console.warn('Validity set to:', validityExampleExample.validity);
     alert(`Validity set to: ${validityExampleExample.validity}`);
   })
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1051,27 +993,25 @@ export function validityExample() {
 The `value` attribute represents the value selected for the datepicker. Can be used to pre-set the value of the datepicker. When the `range` attribute is used, `value` is for the first input.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/value.html -->
-  <auro-datepicker id="valueExample" value="02/02/2022">
-    <span slot="bib.fullscreen.headline">value Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value.html) -->
+<!-- The below content is automatically added from ./../apiExamples/value.html -->
+<auro-datepicker id="valueExample" value="02/02/2022">
+<span slot="bib.fullscreen.headline">value Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/value.html -->
 
-```html
-<auro-datepicker id="valueExample" value="02/02/2022">
-  <span slot="bib.fullscreen.headline">value Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker id="valueExample" value="02/02/2022"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;value Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1080,31 +1020,29 @@ The `value` attribute represents the value selected for the datepicker. Can be u
 The `valueEnd` attribute represents the value of the second input (end date), selected for the datepicker. Can be used to pre-set the value of the datepicker. Only applicable for a datepicker with the `range` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value-end.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/value-end.html -->
-  <auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
-    <span slot="bib.fullscreen.headline">valueEnd Example</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.fromLabel">Departure</span>
-    <span slot="bib.fullscreen.toLabel">Return</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/value-end.html) -->
+<!-- The below content is automatically added from ./../apiExamples/value-end.html -->
+<auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
+<span slot="bib.fullscreen.headline">valueEnd Example</span>
+<span slot="fromLabel">Departure</span>
+<span slot="toLabel">Return</span>
+<span slot="bib.fullscreen.fromLabel">Departure</span>
+<span slot="bib.fullscreen.toLabel">Return</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/value-end.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/value-end.html -->
 
-```html
-<auro-datepicker id="valueEndExample" range valueEnd="03/03/2023">
-  <span slot="bib.fullscreen.headline">valueEnd Example</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.fromLabel">Departure</span>
-  <span slot="bib.fullscreen.toLabel">Return</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker id="valueEndExample" range valueEnd="03/03/2023"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;valueEnd Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1115,56 +1053,52 @@ The `valueEnd` attribute represents the value of the second input (end date), se
 The `focus()` method will apply focus state to the datepicker's input field.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/focus.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/focus.html -->
-  <auro-button id="focusExampleBtn">Apply focus to datepicker</auro-button>
-  <auro-button id="focusExampleBtnTwo">Apply focus to the second input in datepicker</auro-button>
-  <br />
-  <auro-datepicker id="focusExampleElem" range>
-    <span slot="bib.fullscreen.headline">Focus Example</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.toLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/focus.html) -->
+<!-- The below content is automatically added from ./../apiExamples/focus.html -->
+<auro-button id="focusExampleBtn">Apply focus to datepicker</auro-button>
+<auro-button id="focusExampleBtnTwo">Apply focus to the second input in datepicker</auro-button>
+<br />
+<auro-datepicker id="focusExampleElem" range>
+<span slot="bib.fullscreen.headline">Focus Example</span>
+<span slot="fromLabel">Departure</span>
+<span slot="toLabel">Return</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.toLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/focus.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/focus.html -->
 
-```html
-<auro-button id="focusExampleBtn">Apply focus to datepicker</auro-button>
-<auro-button id="focusExampleBtnTwo">Apply focus to the second input in datepicker</auro-button>
-<br />
-<auro-datepicker id="focusExampleElem" range>
-  <span slot="bib.fullscreen.headline">Focus Example</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.toLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="focusExampleBtn"&gt;Apply focus to datepicker&lt;/auro-button&gt;
+&lt;auro-button id="focusExampleBtnTwo"&gt;Apply focus to the second input in datepicker&lt;/auro-button&gt;
+&lt;br /&gt;
+&lt;auro-datepicker id="focusExampleElem" range&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Focus Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.toLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/focus.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/focus.js -->
 
-```js
-export function focusExample() {
+<pre class="language-js"><code class="language-js">export function focusExample() {
   const focusExampleElem = document.querySelector('#focusExampleElem');
   const focusExampleBtn = document.querySelector('#focusExampleBtn');
   const focusExampleBtnTwo = document.querySelector('#focusExampleBtnTwo');
-
-  focusExampleBtn.addEventListener('click', () => {
+​
+  focusExampleBtn.addEventListener('click', () =&gt; {
     focusExampleElem.focus();
   });
-
-  focusExampleBtnTwo.addEventListener('click', () => {
+​
+  focusExampleBtnTwo.addEventListener('click', () =&gt; {
     focusExampleElem.focus('endDate');
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1173,48 +1107,44 @@ export function focusExample() {
 Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd` and `validity` state. Doing so will preserve all other attributes and properties.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
-  <auro-button id="resetStateBtn">Reset</auro-button>
-  <br />
-  <auro-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
-    <span slot="bib.fullscreen.headline">Reset Example</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.fromLabel">Departure</span>
-    <span slot="bib.fullscreen.toLabel">Return</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/reset-state.html) -->
+<!-- The below content is automatically added from ./../apiExamples/reset-state.html -->
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br />
+<auro-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
+<span slot="bib.fullscreen.headline">Reset Example</span>
+<span slot="fromLabel">Departure</span>
+<span slot="toLabel">Return</span>
+<span slot="bib.fullscreen.fromLabel">Departure</span>
+<span slot="bib.fullscreen.toLabel">Return</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.html -->
 
-```html
-<auro-button id="resetStateBtn">Reset</auro-button>
-<br />
-<auro-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
-  <span slot="bib.fullscreen.headline">Reset Example</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.fromLabel">Departure</span>
-  <span slot="bib.fullscreen.toLabel">Return</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
+&lt;br /&gt;
+&lt;auro-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early."&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Reset Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/reset-state.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/reset-state.js -->
 
-```js
-export function resetStateExample() {
+<pre class="language-js"><code class="language-js">export function resetStateExample() {
   const elem = document.querySelector('#resetStateExample');
-
-  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+​
+  document.querySelector('#resetStateBtn').addEventListener('click', () =&gt; {
     elem.reset();
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1225,41 +1155,37 @@ export function resetStateExample() {
 The following example listens for the `auroDatePicker-valueSet` event. Once triggered, `element.value` may be queried for the new value **and** in successful scenarios, an alert will appear. Open the JavaScript console in the browser's developer tools to see the `console.warn` message that appears after the `auroDatePicker-valueSet` event has been triggered.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alert-value.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/alert-value.html -->
-  <auro-datepicker id="datePickerValueAlert">
-    <span slot="bib.fullscreen.headline">Alert Value Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alert-value.html) -->
+<!-- The below content is automatically added from ./../apiExamples/alert-value.html -->
+<auro-datepicker id="datePickerValueAlert">
+<span slot="bib.fullscreen.headline">Alert Value Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alert-value.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/alert-value.html -->
 
-```html
-<auro-datepicker id="datePickerValueAlert">
-  <span slot="bib.fullscreen.headline">Alert Value Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker id="datePickerValueAlert"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Alert Value Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alert-value.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/alert-value.js -->
 
-```js
-export function alertValueExample() {
+<pre class="language-js"><code class="language-js">export function alertValueExample() {
   const valueAlertExample = document.querySelector('#datePickerValueAlert');
-
-  valueAlertExample.addEventListener('auroDatePicker-valueSet', () => {
+​
+  valueAlertExample.addEventListener('auroDatePicker-valueSet', () =&gt; {
     console.warn('Select value changed to:', valueAlertExample.value);
     alert(`Select value changed to: ${valueAlertExample.value}`);
   })
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1270,58 +1196,54 @@ export function alertValueExample() {
 Use the `ariaLabel.input.clear` slot to set the `aria-label` for the clear button in the trigger input.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label-input-clear.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/aria-label-input-clear.html -->
-  <auro-datepicker>
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    <span slot="ariaLabel.input.clear">Custom Clear Input Button</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label-input-clear.html) -->
+<!-- The below content is automatically added from ./../apiExamples/aria-label-input-clear.html -->
+<auro-datepicker>
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+<span slot="ariaLabel.input.clear">Custom Clear Input Button</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/aria-label-input-clear.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/snowflake/aria-label-input-clear.html -->
-  <auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY">
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="label">Date</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    <span slot="ariaLabel.input.clear">Snowflake Clear Input Button</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/aria-label-input-clear.html) -->
+<!-- The below content is automatically added from ./../apiExamples/snowflake/aria-label-input-clear.html -->
+<auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY">
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="label">Date</span>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+<span slot="ariaLabel.input.clear">Snowflake Clear Input Button</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label-input-clear.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/aria-label-input-clear.html -->
 
-```html
-<auro-datepicker>
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  <span slot="ariaLabel.input.clear">Custom Clear Input Button</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="ariaLabel.input.clear"&gt;Custom Clear Input Button&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/aria-label-input-clear.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/aria-label-input-clear.html -->
 
-```html
-<auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY">
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="label">Date</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  <span slot="ariaLabel.input.clear">Snowflake Clear Input Button</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY"&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="label"&gt;Date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="ariaLabel.input.clear"&gt;Snowflake Clear Input Button&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1334,29 +1256,27 @@ To view this demo, set your window to a mobile screen size.
 **Note**: The previously supported `bib.fullscreen.dateLabel` slot is deprecated and will continue to work for backwards compatibility, but it is recommended to use the new `bib.fullscreen.fromLabel` and `bib.fullscreen.toLabel` slots to apply a label for each input when in mobile layout.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datepicker>
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-datepicker>
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
-```html
-<auro-datepicker>
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1365,29 +1285,27 @@ To view this demo, set your window to a mobile screen size.
 The `fromLabel` slot sets the label used for the input. When the `range` attribute is used this is the first of two inputs.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datepicker>
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-datepicker>
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Headline</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
-```html
-<auro-datepicker>
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1396,33 +1314,31 @@ The `fromLabel` slot sets the label used for the input. When the `range` attribu
 The `toLabel` slot sets the label for the second input. Only for use with the `range` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/range.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/range.html -->
-  <auro-datepicker range>
-    <span slot="ariaLabel.bib.close">Close Calendar</span>
-    <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.fromLabel">Departure</span>
-    <span slot="bib.fullscreen.toLabel">Return</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/range.html) -->
+<!-- The below content is automatically added from ./../apiExamples/range.html -->
+<auro-datepicker range>
+<span slot="ariaLabel.bib.close">Close Calendar</span>
+<span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
+<span slot="fromLabel">Departure</span>
+<span slot="toLabel">Return</span>
+<span slot="bib.fullscreen.fromLabel">Departure</span>
+<span slot="bib.fullscreen.toLabel">Return</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/range.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/range.html -->
 
-```html
-<auro-datepicker range>
-  <span slot="ariaLabel.bib.close">Close Calendar</span>
-  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.fromLabel">Departure</span>
-  <span slot="bib.fullscreen.toLabel">Return</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker range&gt;
+  &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Range Headline&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.toLabel"&gt;Return&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1431,29 +1347,27 @@ The `toLabel` slot sets the label for the second input. Only for use with the `r
 Sets the help text displayed below the trigger. The `helpText` slot can be used to provide additional context for the combobox. When using the `error` attribute, the `helpText` slot can be used to describe the error.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/help-text.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/help-text.html -->
-  <auro-datepicker>
-    <span slot="bib.fullscreen.headline">helpText Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    <span slot="helpText">Choose a date must be today or earlier.</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/help-text.html) -->
+<!-- The below content is automatically added from ./../apiExamples/help-text.html -->
+<auro-datepicker>
+<span slot="bib.fullscreen.headline">helpText Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+<span slot="helpText">Choose a date must be today or earlier.</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/help-text.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/help-text.html -->
 
-```html
-<auro-datepicker>
-  <span slot="bib.fullscreen.headline">helpText Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  <span slot="helpText">Choose a date must be today or earlier.</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;helpText Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Choose a date must be today or earlier.&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1468,41 +1382,39 @@ Slot content support is limited to text only and a maximum of five (5) character
 Slot content can be styled using [inline styles](https://www.codecademy.com/article/html-inline-styles) or [CSS Parts](https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts/) (`part="dateSlot"`).
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/date-slot.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/date-slot.html -->
-  <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
-    <span slot="bib.fullscreen.headline">dateSlot Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    <span slot="date_12_03_2023">Sold</span>
-    <span highlight slot="date_12_04_2023">$89</span>
-    <span slot="date_12_05_2023">$100</span>
-    <span slot="date_12_06_2023">$2345</span>
-    <span highlight slot="date_12_07_2023">$149</span>
-    <span highlight slot="date_12_08_2023">$382</span>
-    <span slot="date_12_09_2023">$560</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/date-slot.html) -->
+<!-- The below content is automatically added from ./../apiExamples/date-slot.html -->
+<auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
+<span slot="bib.fullscreen.headline">dateSlot Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+<span slot="date_12_03_2023">Sold</span>
+<span highlight slot="date_12_04_2023">$89</span>
+<span slot="date_12_05_2023">$100</span>
+<span slot="date_12_06_2023">$2345</span>
+<span highlight slot="date_12_07_2023">$149</span>
+<span highlight slot="date_12_08_2023">$382</span>
+<span slot="date_12_09_2023">$560</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/date-slot.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/date-slot.html -->
 
-```html
-<auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
-  <span slot="bib.fullscreen.headline">dateSlot Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  <span slot="date_12_03_2023">Sold</span>
-  <span highlight slot="date_12_04_2023">$89</span>
-  <span slot="date_12_05_2023">$100</span>
-  <span slot="date_12_06_2023">$2345</span>
-  <span highlight slot="date_12_07_2023">$149</span>
-  <span highlight slot="date_12_08_2023">$382</span>
-  <span slot="date_12_09_2023">$560</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;dateSlot Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="date_12_03_2023"&gt;Sold&lt;/span&gt;
+  &lt;span highlight slot="date_12_04_2023"&gt;$89&lt;/span&gt;
+  &lt;span slot="date_12_05_2023"&gt;$100&lt;/span&gt;
+  &lt;span slot="date_12_06_2023"&gt;$2345&lt;/span&gt;
+  &lt;span highlight slot="date_12_07_2023"&gt;$149&lt;/span&gt;
+  &lt;span highlight slot="date_12_08_2023"&gt;$382&lt;/span&gt;
+  &lt;span slot="date_12_09_2023"&gt;$560&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1513,41 +1425,39 @@ Custom content can be added to any day's `auro-popover` in the calendar using a
 The popover slot is intended for use with calendar dates that are `disabled` (e.g. before minimum date or after maximum date).
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popover-slot.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/popover-slot.html -->
-  <auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
-    <span slot="bib.fullscreen.headline">Popover Slot Example</span>
-    <span slot="fromLabel">Choose a date</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-    <span slot="popover_12_03_2023">Tickets for this day are sold out</span>
-    <span slot="popover_12_04_2023">Tickets for this day are $89</span>
-    <span slot="popover_12_05_2023">Tickets for this day are $100</span>
-    <span slot="popover_12_06_2023">Tickets for this day are $2345</span>
-    <span slot="popover_12_07_2023">Tickets for this day are $149</span>
-    <span slot="popover_12_08_2023">Tickets for this day are $382</span>
-    <span slot="popover_12_09_2023">Tickets for this day are $560</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popover-slot.html) -->
+<!-- The below content is automatically added from ./../apiExamples/popover-slot.html -->
+<auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
+<span slot="bib.fullscreen.headline">Popover Slot Example</span>
+<span slot="fromLabel">Choose a date</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+<span slot="popover_12_03_2023">Tickets for this day are sold out</span>
+<span slot="popover_12_04_2023">Tickets for this day are $89</span>
+<span slot="popover_12_05_2023">Tickets for this day are $100</span>
+<span slot="popover_12_06_2023">Tickets for this day are $2345</span>
+<span slot="popover_12_07_2023">Tickets for this day are $149</span>
+<span slot="popover_12_08_2023">Tickets for this day are $382</span>
+<span slot="popover_12_09_2023">Tickets for this day are $560</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/popover-slot.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/popover-slot.html -->
 
-```html
-<auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023">
-  <span slot="bib.fullscreen.headline">Popover Slot Example</span>
-  <span slot="fromLabel">Choose a date</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  <span slot="popover_12_03_2023">Tickets for this day are sold out</span>
-  <span slot="popover_12_04_2023">Tickets for this day are $89</span>
-  <span slot="popover_12_05_2023">Tickets for this day are $100</span>
-  <span slot="popover_12_06_2023">Tickets for this day are $2345</span>
-  <span slot="popover_12_07_2023">Tickets for this day are $149</span>
-  <span slot="popover_12_08_2023">Tickets for this day are $382</span>
-  <span slot="popover_12_09_2023">Tickets for this day are $560</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker centralDate="12/03/2023" minDate="12/04/2023" maxDate="12/09/2023"&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;Popover Slot Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="popover_12_03_2023"&gt;Tickets for this day are sold out&lt;/span&gt;
+  &lt;span slot="popover_12_04_2023"&gt;Tickets for this day are $89&lt;/span&gt;
+  &lt;span slot="popover_12_05_2023"&gt;Tickets for this day are $100&lt;/span&gt;
+  &lt;span slot="popover_12_06_2023"&gt;Tickets for this day are $2345&lt;/span&gt;
+  &lt;span slot="popover_12_07_2023"&gt;Tickets for this day are $149&lt;/span&gt;
+  &lt;span slot="popover_12_08_2023"&gt;Tickets for this day are $382&lt;/span&gt;
+  &lt;span slot="popover_12_09_2023"&gt;Tickets for this day are $560&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1558,39 +1468,36 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
 This example demonstrates data driven slot content for days in the calendar. In this example, the slot content is inserted into each `auro-calendar-cell` after the bib of the `auro-datepicker` is opened, simulating an API call on a dynamic data source.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamic-slot.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dynamic-slot.html -->
-  <auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
-    <span slot="bib.fullscreen.headline">dynamic slot Example</span>
-    <span slot="fromLabel">Departure</span>
-    <span slot="toLabel">Return</span>
-    <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-  </auro-datepicker>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dynamic-slot.html) -->
+<!-- The below content is automatically added from ./../apiExamples/dynamic-slot.html -->
+<auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
+<span slot="bib.fullscreen.headline">dynamic slot Example</span>
+<span slot="fromLabel">Departure</span>
+<span slot="toLabel">Return</span>
+<span slot="bib.fullscreen.fromLabel">Choose a date</span>
+</auro-datepicker>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic-slot.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/dynamic-slot.html -->
 
-```html
-<auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range>
-  <span slot="bib.fullscreen.headline">dynamic slot Example</span>
-  <span slot="fromLabel">Departure</span>
-  <span slot="toLabel">Return</span>
-  <span slot="bib.fullscreen.fromLabel">Choose a date</span>
-</auro-datepicker>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datepicker id="slotContentExample" centralDate="12/13/2023" minDate="12/13/2023" maxDate="01/18/2024" range&gt;
+  &lt;span slot="bib.fullscreen.headline"&gt;dynamic slot Example&lt;/span&gt;
+  &lt;span slot="fromLabel"&gt;Departure&lt;/span&gt;
+  &lt;span slot="toLabel"&gt;Return&lt;/span&gt;
+  &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
+&lt;/auro-datepicker&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic-slot.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/dynamic-slot.js -->
 
-```js
-export function populateSlotContentExample() {
+<pre class="language-js"><code class="language-js">export function populateSlotContentExample() {
   const populateSlotContentExample = document.querySelector('#slotContentExample');
-
+​
   // Insert slot content when the datepicker has been opened
-  populateSlotContentExample.addEventListener('auroDatePicker-toggled', (event) => {
+  populateSlotContentExample.addEventListener('auroDatePicker-toggled', (event) =&gt; {
     if (event.detail.expanded) {
       // Array of object(s) containing key, value pairs defining what slot content to render
       const data = [
@@ -1671,41 +1578,40 @@ export function populateSlotContentExample() {
         {slot: 'popover', month: 1, day: 19, year: 2024, content: 'Tickets for this date are sold out'},
         {slot: 'popover', month: 1, day: 20, year: 2024, content: 'Tickets for this date are sold out'}
       ];
-
+​
       // For each item in the array, parse the keys into an HTML element and insert it into the DOM
-      data.forEach((item) => {
+      data.forEach((item) =&gt; {
         // Create the new element for the slot content
         const slotElement = document.createElement('span');
-
+​
         if (item.month.toString().length === 1) {
           item.month = `0` + item.month;
         }
-
+​
         if (item.day.toString().length === 1) {
           item.day = `0` + item.day;
         }
-
+​
         // Create the slot name from the item's keys
         const slotName = `${item.slot}_${item.month}_${item.day}_${item.year}`;
-
+​
         // Set the slot name and content
         slotElement.setAttribute('slot', slotName);
         slotElement.textContent = item.content;
-
+​
         // Set the 'highlight' attribute on date slot content
-        if (item.slot === 'date' && item.highlight) {
+        if (item.slot === 'date' &amp;&amp; item.highlight) {
           slotElement.setAttribute('highlight', item.highlight);
         }
-
+​
         // Append the new element to the DOM
         populateSlotContentExample.appendChild(slotElement);
       });
     }
-
+​
     populateSlotContentExample.pushSlotContent();
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1714,49 +1620,45 @@ export function populateSlotContentExample() {
 The following example demonstrates the use of `<auro-datepicker>` within an `<auro-dialog>` component.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-dialog.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/in-dialog.html -->
-  <div>
-    <auro-button id="datepicker-dialog-opener">Datepicker in Dialog</auro-button>
-    <auro-dialog id="datepicker-dialog">
-      <span slot="bib.fullscreen.headline">inDialog Example</span>
-      <span slot="header">Datepicker in Dialog</span>
-      <div slot="content">
-        <auro-datepicker />
-      </div>
-    </auro-dialog>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-dialog.html) -->
+<!-- The below content is automatically added from ./../apiExamples/in-dialog.html -->
+<div>
+<auro-button id="datepicker-dialog-opener">Datepicker in Dialog</auro-button>
+<auro-dialog id="datepicker-dialog">
+<span slot="bib.fullscreen.headline">inDialog Example</span>
+<span slot="header">Datepicker in Dialog</span>
+<div slot="content">
+<auro-datepicker />
+</div>
+</auro-dialog>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.html -->
 
-```html
-<div>
-  <auro-button id="datepicker-dialog-opener">Datepicker in Dialog</auro-button>
-  <auro-dialog id="datepicker-dialog">
-    <span slot="bib.fullscreen.headline">inDialog Example</span>
-    <span slot="header">Datepicker in Dialog</span>
-    <div slot="content">
-      <auro-datepicker />
-    </div>
-  </auro-dialog>
-</div>
-```
+<pre class="language-html"><code class="language-html">&lt;div&gt;
+  &lt;auro-button id="datepicker-dialog-opener"&gt;Datepicker in Dialog&lt;/auro-button&gt;
+  &lt;auro-dialog id="datepicker-dialog"&gt;
+    &lt;span slot="bib.fullscreen.headline"&gt;inDialog Example&lt;/span&gt;
+    &lt;span slot="header"&gt;Datepicker in Dialog&lt;/span&gt;
+    &lt;div slot="content"&gt;
+      &lt;auro-datepicker /&gt;
+    &lt;/div&gt;
+  &lt;/auro-dialog&gt;
+&lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-dialog.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/in-dialog.js -->
 
-```js
-export function inDialogExample() {
-  document.querySelector("#datepicker-dialog-opener").addEventListener("click", () => {
+<pre class="language-js"><code class="language-js">export function inDialogExample() {
+  document.querySelector("#datepicker-dialog-opener").addEventListener("click", () =&gt; {
     const dialog = document.querySelector("#datepicker-dialog");
     dialog.open = true;
   });
-};
-```
+};</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1765,46 +1667,43 @@ export function inDialogExample() {
 The following example demonstrates the use of `<auro-datepicker>` within an `<auro-drawer>` component.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
-  <div>
-    <auro-button id="datepicker-drawer-opener">Datepicker in Drawer</auro-button>
-    <auro-drawer id="datepicker-drawer">
-      <span slot="header">Datepicker in Drawer</span>
-      <div slot="content">
-        <auro-datepicker>
-          <span slot="bib.fullscreen.headline">inDrawer Example</span>
-        </auro-datepicker>
-      </div>
-    </auro-drawer>
-  </div>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/in-drawer.html) -->
+<!-- The below content is automatically added from ./../apiExamples/in-drawer.html -->
+<div>
+<auro-button id="datepicker-drawer-opener">Datepicker in Drawer</auro-button>
+<auro-drawer id="datepicker-drawer">
+<span slot="header">Datepicker in Drawer</span>
+<div slot="content">
+<auro-datepicker>
+<span slot="bib.fullscreen.headline">inDrawer Example</span>
+</auro-datepicker>
+</div>
+</auro-drawer>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.html -->
 
-```html
-<div>
-  <auro-button id="datepicker-drawer-opener">Datepicker in Drawer</auro-button>
-  <auro-drawer id="datepicker-drawer">
-    <span slot="header">Datepicker in Drawer</span>
-    <div slot="content">
-      <auro-datepicker>
-        <span slot="bib.fullscreen.headline">inDrawer Example</span>
-      </auro-datepicker>
-    </div>
-  </auro-drawer>
-</div>
-```
+<pre class="language-html"><code class="language-html">&lt;div&gt;
+  &lt;auro-button id="datepicker-drawer-opener"&gt;Datepicker in Drawer&lt;/auro-button&gt;
+  &lt;auro-drawer id="datepicker-drawer"&gt;
+    &lt;span slot="header"&gt;Datepicker in Drawer&lt;/span&gt;
+    &lt;div slot="content"&gt;
+      &lt;auro-datepicker&gt;
+        &lt;span slot="bib.fullscreen.headline"&gt;inDrawer Example&lt;/span&gt;
+      &lt;/auro-datepicker&gt;
+    &lt;/div&gt;
+  &lt;/auro-drawer&gt;
+&lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/in-drawer.js) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/in-drawer.js -->
 
-```js
-export function inDrawerExample() {
-  document.querySelector("#datepicker-drawer-opener").addEventListener("click", () => {
+<pre class="language-js"><code class="language-js">export function inDrawerExample() {
+  document.querySelector("#datepicker-drawer-opener").addEventListener("click", () =&gt; {
     const drawer = document.querySelector("#datepicker-drawer");
     if (drawer.hasAttribute('open')) {
       drawer.removeAttribute('open');
@@ -1812,8 +1711,7 @@ export function inDrawerExample() {
       drawer.setAttribute('open', true);
     }
   });
-};
-```
+};</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1824,11 +1722,10 @@ The component may be restyled by changing the values of the following token(s).
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
 <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
 
-```scss
-/* stylelint-disable color-function-notation */
-
+<pre class="language-scss"><code class="language-scss">/* stylelint-disable color-function-notation */
+​
 @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-
+​
 :host(:not([ondark])),
 :host(:not([appearance="inverse"])) {
   // datepicker
@@ -1836,7 +1733,7 @@ The component may be restyled by changing the values of the following token(s).
   --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
   --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
   --ds-auro-datepicker-outline-color: transparent;
-
+​
   // calendar
   --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
   --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
@@ -1853,7 +1750,7 @@ The component may be restyled by changing the values of the following token(s).
   --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
   --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
 }
-
+​
 :host([ondark]),
 :host([appearance="inverse"]) {
   // datepicker
@@ -1861,7 +1758,7 @@ The component may be restyled by changing the values of the following token(s).
   --ds-auro-datepicker-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
   --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
   --ds-auro-datepicker-outline-color: transparent;
-
+​
   // calendar
   --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
   --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
@@ -1877,6 +1774,5 @@ The component may be restyled by changing the values of the following token(s).
   --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
   --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
   --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->