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

package/components/input/demo/api.md

@@ -107,27 +107,25 @@ The `auro-input` element provides users a way to enter data into a text field.
 ## Basic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-input>
-    <span slot="ariaLabel.clear">Clear All</span>
-    <span slot="label">Label</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-input>
+<span slot="ariaLabel.clear">Clear All</span>
+<span slot="label">Label</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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-input>
-  <span slot="ariaLabel.clear">Clear All</span>
-  <span slot="label">Label</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input&gt;
+  &lt;span slot="ariaLabel.clear"&gt;Clear All&lt;/span&gt;
+  &lt;span slot="label"&gt;Label&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -138,50 +136,46 @@ The `auro-input` element provides users a way to enter data into a text field.
 Use the `activeLabel` attribute to make the label stay fixed in the active position.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/active-label.html) -->
-  <!-- The below content is automatically added from ../apiExamples/active-label.html -->
-  <auro-input activeLabel>
-    <span slot="label">Address</span>
-    <span slot="helpText">Please enter your home address.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/active-label.html) -->
+<!-- The below content is automatically added from ../apiExamples/active-label.html -->
+<auro-input activeLabel>
+<span slot="label">Address</span>
+<span slot="helpText">Please enter your home address.</span>
+</auro-input>
+<!-- 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/active-label.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/active-label.html -->
 
-```html
-<auro-input activeLabel>
-  <span slot="label">Address</span>
-  <span slot="helpText">Please enter your home address.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input activeLabel&gt;
+  &lt;span slot="label"&gt;Address&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your home address.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Appearance 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-input appearance="inverse">
-    <span slot="label">Label</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- 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-input appearance="inverse">
+<span slot="label">Label</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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-input appearance="inverse">
-  <span slot="label">Label</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input appearance="inverse"&gt;
+  &lt;span slot="label"&gt;Label&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -190,47 +184,43 @@ Use the `activeLabel` attribute to make the label stay fixed in the active posit
 Use the `disable` attribute to prevent the user from interacting with the input.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-  <auro-input disabled type="date">
-    <span slot="label">Disabled</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+<auro-input disabled type="date">
+<span slot="label">Disabled</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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-input disabled type="date">
-  <span slot="label">Disabled</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input disabled type="date"&gt;
+  &lt;span slot="label"&gt;Disabled&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
-  <auro-input appearance="inverse" disabled type="date">
-    <span slot="label">Arrival date</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse-disabled.html) -->
+<!-- The below content is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
+<auro-input appearance="inverse" disabled type="date">
+<span slot="label">Arrival date</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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-disabled.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse-disabled.html -->
 
-```html
-<auro-input appearance="inverse" disabled type="date">
-  <span slot="label">Arrival date</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input appearance="inverse" disabled type="date"&gt;
+  &lt;span slot="label"&gt;Arrival date&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -241,95 +231,87 @@ 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="setCustomErrorBtn">Set Custom Error</auro-button>
-  <auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
-  <br /><br />
-  <auro-input id="setCustomErrorExample" error="Initial error attribute value">
-    <span slot="label">Name</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- 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="setCustomErrorBtn">Set Custom Error</auro-button>
+<auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
+<br /><br />
+<auro-input id="setCustomErrorExample" error="Initial error attribute value">
+<span slot="label">Name</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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="setCustomErrorBtn">Set Custom Error</auro-button>
-<auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
-<br /><br />
-<auro-input id="setCustomErrorExample" error="Initial error attribute value">
-  <span slot="label">Name</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="setCustomErrorBtn"&gt;Set Custom Error&lt;/auro-button&gt;
+&lt;auro-button id="setCustomErrorClearBtn"&gt;Clear Custom Error&lt;/auro-button&gt;
+&lt;br /&gt;&lt;br /&gt;
+&lt;auro-input id="setCustomErrorExample" error="Initial error attribute value"&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&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 customError() {
+<pre class="language-js"><code class="language-js">export function customError() {
   const elem = document.querySelector('#setCustomErrorExample');
   // set custom error
-  document.querySelector('#setCustomErrorBtn').addEventListener('click', () => {
+  document.querySelector('#setCustomErrorBtn').addEventListener('click', () =&gt; {
     elem.error = "Custom Error Message";
   });
-
+​
   // remove custom error
-  document.querySelector('#setCustomErrorClearBtn').addEventListener('click', () => {
+  document.querySelector('#setCustomErrorClearBtn').addEventListener('click', () =&gt; {
     elem.removeAttribute('error');
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/appearance-inverse-error.html) -->
-  <!-- The below content is automatically added from ../apiExamples/appearance-inverse-error.html -->
-  <auro-button appearance="inverse" id="setCustomErrorBtnOnDark">Set Custom Error</auro-button>
-  <auro-button appearance="inverse" id="setCustomErrorClearBtnOnDark">Clear Custom Error</auro-button>
-  <br /><br />
-  <auro-input appearance="inverse" id="setCustomErrorExampleOnDark" error="Initial error attribute value">
-    <span slot="label">Name</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/appearance-inverse-error.html) -->
+<!-- The below content is automatically added from ../apiExamples/appearance-inverse-error.html -->
+<auro-button appearance="inverse" id="setCustomErrorBtnOnDark">Set Custom Error</auro-button>
+<auro-button appearance="inverse" id="setCustomErrorClearBtnOnDark">Clear Custom Error</auro-button>
+<br /><br />
+<auro-input appearance="inverse" id="setCustomErrorExampleOnDark" error="Initial error attribute value">
+<span slot="label">Name</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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-error.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/appearance-inverse-error.html -->
 
-```html
-<auro-button appearance="inverse" id="setCustomErrorBtnOnDark">Set Custom Error</auro-button>
-<auro-button appearance="inverse" id="setCustomErrorClearBtnOnDark">Clear Custom Error</auro-button>
-<br /><br />
-<auro-input appearance="inverse" id="setCustomErrorExampleOnDark" error="Initial error attribute value">
-  <span slot="label">Name</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button appearance="inverse" id="setCustomErrorBtnOnDark"&gt;Set Custom Error&lt;/auro-button&gt;
+&lt;auro-button appearance="inverse" id="setCustomErrorClearBtnOnDark"&gt;Clear Custom Error&lt;/auro-button&gt;
+&lt;br /&gt;&lt;br /&gt;
+&lt;auro-input appearance="inverse" id="setCustomErrorExampleOnDark" error="Initial error attribute value"&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/appearance-inverse-error.js) -->
 <!-- The below code snippet is automatically added from ../apiExamples/appearance-inverse-error.js -->
 
-```js
-export function customErrorOnDark() {
+<pre class="language-js"><code class="language-js">export function customErrorOnDark() {
   const elem = document.querySelector('#setCustomErrorExampleOnDark');
   // set custom error
-  document.querySelector('#setCustomErrorBtnOnDark').addEventListener('click', () => {
+  document.querySelector('#setCustomErrorBtnOnDark').addEventListener('click', () =&gt; {
     elem.error = "Custom Error Message";
   });
-
+​
   // remove custom error
-  document.querySelector('#setCustomErrorClearBtnOnDark').addEventListener('click', () => {
+  document.querySelector('#setCustomErrorClearBtnOnDark').addEventListener('click', () =&gt; {
     elem.removeAttribute('error');
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -344,25 +326,23 @@ Default masking definitions:
 See [IMask](https://imask.js.org/) for more information on how to configure a mask.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/format.html) -->
-  <!-- The below content is automatically added from ../apiExamples/format.html -->
-  <auro-input format="47440000">
-    <span slot="label">Custom format</span>
-    <span slot="helpText">Format is: 47440000</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/format.html) -->
+<!-- The below content is automatically added from ../apiExamples/format.html -->
+<auro-input format="47440000">
+<span slot="label">Custom format</span>
+<span slot="helpText">Format is: 47440000</span>
+</auro-input>
+<!-- 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-input format="47440000">
-  <span slot="label">Custom format</span>
-  <span slot="helpText">Format is: 47440000</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input format="47440000"&gt;
+  &lt;span slot="label"&gt;Custom format&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Format is: 47440000&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -373,25 +353,23 @@ Set the `inputmode` for the input.
 **IMPORTANT**: If you are also passing a `type`, most browsers will use the `type` attribute to determine what keyboard to display on mobile devices and ignore 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-input inputmode="tel">
-    <span slot="label">Telephone</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inputmode.html) -->
+<!-- The below content is automatically added from ./../apiExamples/inputmode.html -->
+<auro-input inputmode="tel">
+<span slot="label">Telephone</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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-input inputmode="tel">
-  <span slot="label">Telephone</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input inputmode="tel"&gt;
+  &lt;span slot="label"&gt;Telephone&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -404,50 +382,46 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 #### Date Example
 
 <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-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
-    <span slot="label">Choose a date</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- 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-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
+<span slot="label">Choose a date</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
-  <span slot="label">Choose a date</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="date" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date."&gt;
+  &lt;span slot="label"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### Number Example
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/max-number.html) -->
-  <!-- The below content is automatically added from ../apiExamples/max-number.html -->
-  <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
-    <span slot="label">Choose a number</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/max-number.html) -->
+<!-- The below content is automatically added from ../apiExamples/max-number.html -->
+<auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
+<span slot="label">Choose a number</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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-number.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/max-number.html -->
 
-```html
-<auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
-  <span slot="label">Choose a number</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum."&gt;
+  &lt;span slot="label"&gt;Choose a number&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -460,25 +434,23 @@ The `setCustomValidityTooLong` attribute may optionally be used in combination w
 **Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/max-length.html) -->
-  <!-- The below content is automatically added from ../apiExamples/max-length.html -->
-  <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." required>
-    <span slot="label">Voucher Code</span>
-    <span slot="helpText">Please enter your 12 character voucher code.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/max-length.html) -->
+<!-- The below content is automatically added from ../apiExamples/max-length.html -->
+<auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." required>
+<span slot="label">Voucher Code</span>
+<span slot="helpText">Please enter your 12 character voucher code.</span>
+</auro-input>
+<!-- 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-length.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/max-length.html -->
 
-```html
-<auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." required>
-  <span slot="label">Voucher Code</span>
-  <span slot="helpText">Please enter your 12 character voucher code.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." required&gt;
+  &lt;span slot="label"&gt;Voucher Code&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your 12 character voucher code.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -490,50 +462,46 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 #### Date Example
 
 <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-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
-    <span slot="label">Choose a date</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- 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-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
+<span slot="label">Choose a date</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
-  <span slot="label">Choose a date</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="date" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date."&gt;
+  &lt;span slot="label"&gt;Choose a date&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 #### Number Example
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/min-number.html) -->
-  <!-- The below content is automatically added from ../apiExamples/min-number.html -->
-  <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
-    <span slot="label">Choose a number</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/min-number.html) -->
+<!-- The below content is automatically added from ../apiExamples/min-number.html -->
+<auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
+<span slot="label">Choose a number</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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-number.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/min-number.html -->
 
-```html
-<auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
-  <span slot="label">Choose a number</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum."&gt;
+  &lt;span slot="label"&gt;Choose a number&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -544,25 +512,23 @@ Use the `minlength` attribute to control the length of the input entered.
 The `setCustomValidityTooShort` attribute may optionally be used in combination with the `minLength` attribute to define custom help text used when the length of the input is not long enough.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/min-length.html) -->
-  <!-- The below content is automatically added from ../apiExamples/min-length.html -->
-  <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." required>
-    <span slot="label">Voucher Code</span>
-    <span slot="helpText">Please enter your 4 character voucher code.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/min-length.html) -->
+<!-- The below content is automatically added from ../apiExamples/min-length.html -->
+<auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." required>
+<span slot="label">Voucher Code</span>
+<span slot="helpText">Please enter your 4 character voucher code.</span>
+</auro-input>
+<!-- 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-length.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/min-length.html -->
 
-```html
-<auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." required>
-  <span slot="label">Voucher Code</span>
-  <span slot="helpText">Please enter your 4 character voucher code.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." required&gt;
+  &lt;span slot="label"&gt;Voucher Code&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your 4 character voucher code.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -571,25 +537,23 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
 For use cases where the field is `required`, but live validation is not wanted, use the `noValidate` attribute.
 
 <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-input noValidate required>
-    <span slot="label">Address</span>
-    <span slot="helpText">Please enter your home address.</span>
-  </auro-input>
-  <!-- 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-input noValidate required>
+<span slot="label">Address</span>
+<span slot="helpText">Please enter your home address.</span>
+</auro-input>
+<!-- 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-input noValidate required>
-  <span slot="label">Address</span>
-  <span slot="helpText">Please enter your home address.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input noValidate required&gt;
+  &lt;span slot="label"&gt;Address&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your home address.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -599,25 +563,23 @@ Use the `pattern` attribute to set custom input validation. This example also us
 The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityPatternMismatch` attribute.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/pattern.html) -->
-  <!-- The below content is automatically added from ../apiExamples/pattern.html -->
-  <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
-    <span slot="label">Username</span>
-    <span slot="helpText">Please enter a username.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/pattern.html) -->
+<!-- The below content is automatically added from ../apiExamples/pattern.html -->
+<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
+<span slot="label">Username</span>
+<span slot="helpText">Please enter a username.</span>
+</auro-input>
+<!-- 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/pattern.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/pattern.html -->
 
-```html
-<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
-  <span slot="label">Username</span>
-  <span slot="helpText">Please enter a username.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces"&gt;
+  &lt;span slot="label"&gt;Username&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter a username.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -626,25 +588,23 @@ The `<auro-input>` component supports setting a custom validity message specific
 Use the `placeholder` attribute to add a custom placeholder message within the element.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/placeholder.html) -->
-  <!-- The below content is automatically added from ../apiExamples/placeholder.html -->
-  <auro-input placeholder="John Doe" required>
-    <span slot="label">Full name</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/placeholder.html) -->
+<!-- The below content is automatically added from ../apiExamples/placeholder.html -->
+<auro-input placeholder="John Doe" required>
+<span slot="label">Full name</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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/placeholder.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/placeholder.html -->
 
-```html
-<auro-input placeholder="John Doe" required>
-  <span slot="label">Full name</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input placeholder="John Doe" required&gt;
+  &lt;span slot="label"&gt;Full name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -655,49 +615,45 @@ Use the `readonly` attribute to prevent the user from editing the value of the i
 In this example, the user is able to programmatically change the value of the input by clicking the button or clear out the contents of the input.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/readonly.html) -->
-  <!-- The below content is automatically added from ../apiExamples/readonly.html -->
-  <auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
-  <auro-button id="resetReadonlyValueBtn">Reset</auro-button>
-  <br /><br />
-  <auro-input readonly id="readonlyExample">
-    <span slot="label">Name</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/readonly.html) -->
+<!-- The below content is automatically added from ../apiExamples/readonly.html -->
+<auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
+<auro-button id="resetReadonlyValueBtn">Reset</auro-button>
+<br /><br />
+<auro-input readonly id="readonlyExample">
+<span slot="label">Name</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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/readonly.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/readonly.html -->
 
-```html
-<auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
-<auro-button id="resetReadonlyValueBtn">Reset</auro-button>
-<br /><br />
-<auro-input readonly id="readonlyExample">
-  <span slot="label">Name</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="setReadonlyValueBtn"&gt;Set Value to Auro Alaska&lt;/auro-button&gt;
+&lt;auro-button id="resetReadonlyValueBtn"&gt;Reset&lt;/auro-button&gt;
+&lt;br /&gt;&lt;br /&gt;
+&lt;auro-input readonly id="readonlyExample"&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/readonly.js) -->
 <!-- The below code snippet is automatically added from ../apiExamples/readonly.js -->
 
-```js
-export function setReadonlyValue() {
+<pre class="language-js"><code class="language-js">export function setReadonlyValue() {
   const elem = document.querySelector('#readonlyExample');
-
+​
   // set value of auro-input element
-  document.querySelector('#setReadonlyValueBtn').addEventListener('click', () => {
+  document.querySelector('#setReadonlyValueBtn').addEventListener('click', () =&gt; {
       elem.value = "Auro Alaska";
   });
-
-  document.querySelector('#resetReadonlyValueBtn').addEventListener('click', () => {
+​
+  document.querySelector('#resetReadonlyValueBtn').addEventListener('click', () =&gt; {
     elem.value = undefined;
 });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -708,25 +664,23 @@ When present, the `required` attribute specifies that an input field must be fil
 When the validity check fails, the validityState equals `valueMissing`. The error message for the `valueMissing` validityState can be changed to a custom string using the `setCustomValidityValueMissing`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/required.html) -->
-  <!-- The below content is automatically added from ../apiExamples/required.html -->
-  <auro-input required placeholder="John Doe">
-    <span slot="label">Full name</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/required.html) -->
+<!-- The below content is automatically added from ../apiExamples/required.html -->
+<auro-input required placeholder="John Doe">
+<span slot="label">Full name</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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-input required placeholder="John Doe">
-  <span slot="label">Full name</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input required placeholder="John Doe"&gt;
+  &lt;span slot="label"&gt;Full name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -737,25 +691,23 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
 **NOTE:** Custom strings are NOT localized. It is the responsibility of the element consumer to provide localized strings when using this element property.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-custom-validity.html) -->
-  <!-- The below content is automatically added from ../apiExamples/set-custom-validity.html -->
-  <auro-input required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
-    <span slot="label">Full Name</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-custom-validity.html) -->
+<!-- The below content is automatically added from ../apiExamples/set-custom-validity.html -->
+<auro-input required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
+<span slot="label">Full Name</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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/set-custom-validity.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/set-custom-validity.html -->
 
-```html
-<auro-input required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required).">
-  <span slot="label">Full Name</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input required minlength="3" setCustomValidity="Sorry, please enter your first and last name (one space required)."&gt;
+  &lt;span slot="label"&gt;Full Name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -768,53 +720,49 @@ Use the `type="password"` attribute for a password style input. The hide/show pa
 Default help text will be added to the input `type="password"` if custom help text is not provided. See the example below.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/password.html) -->
-  <!-- The below content is automatically added from ../apiExamples/password.html -->
-  <auro-input type="password" required>
-    <span slot="ariaLabel.clear">Clear All</span>
-    <span slot="ariaLabel.password.show">Show</span>
-    <span slot="ariaLabel.password.hide">Hide</span>
-    <span slot="label">Password</span>
-    <span slot="helpText">Please enter a secure password.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/password.html) -->
+<!-- The below content is automatically added from ../apiExamples/password.html -->
+<auro-input type="password" required>
+<span slot="ariaLabel.clear">Clear All</span>
+<span slot="ariaLabel.password.show">Show</span>
+<span slot="ariaLabel.password.hide">Hide</span>
+<span slot="label">Password</span>
+<span slot="helpText">Please enter a secure password.</span>
+</auro-input>
+<!-- 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/password.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/password.html -->
 
-```html
-<auro-input type="password" required>
-  <span slot="ariaLabel.clear">Clear All</span>
-  <span slot="ariaLabel.password.show">Show</span>
-  <span slot="ariaLabel.password.hide">Hide</span>
-  <span slot="label">Password</span>
-  <span slot="helpText">Please enter a secure password.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="password" required&gt;
+  &lt;span slot="ariaLabel.clear"&gt;Clear All&lt;/span&gt;
+  &lt;span slot="ariaLabel.password.show"&gt;Show&lt;/span&gt;
+  &lt;span slot="ariaLabel.password.hide"&gt;Hide&lt;/span&gt;
+  &lt;span slot="label"&gt;Password&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter a secure password.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/appearance-inverse-password.html) -->
-  <!-- The below content is automatically added from ../apiExamples/appearance-inverse-password.html -->
-  <auro-input appearance="inverse" type="password" required>
-    <span slot="label">Password</span>
-    <span slot="helpText">Please enter a secure password.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/appearance-inverse-password.html) -->
+<!-- The below content is automatically added from ../apiExamples/appearance-inverse-password.html -->
+<auro-input appearance="inverse" type="password" required>
+<span slot="label">Password</span>
+<span slot="helpText">Please enter a secure password.</span>
+</auro-input>
+<!-- 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-password.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/appearance-inverse-password.html -->
 
-```html
-<auro-input appearance="inverse" type="password" required>
-  <span slot="label">Password</span>
-  <span slot="helpText">Please enter a secure password.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input appearance="inverse" type="password" required&gt;
+  &lt;span slot="label"&gt;Password&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter a secure password.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -825,25 +773,23 @@ Use the `type="email"` attribute for a email style input. These examples illustr
 Default help text will be added to the input `type="email"` if custom help text is not provided. See the example below.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/email.html) -->
-  <!-- The below content is automatically added from ../apiExamples/email.html -->
-  <auro-input type="email" required>
-    <span slot="label">Email address</span>
-    <span slot="helpText">Please enter your email address.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/email.html) -->
+<!-- The below content is automatically added from ../apiExamples/email.html -->
+<auro-input type="email" required>
+<span slot="label">Email address</span>
+<span slot="helpText">Please enter your email address.</span>
+</auro-input>
+<!-- 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/email.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/email.html -->
 
-```html
-<auro-input type="email" required>
-  <span slot="label">Email address</span>
-  <span slot="helpText">Please enter your email address.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="email" required&gt;
+  &lt;span slot="label"&gt;Email address&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your email address.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -854,25 +800,23 @@ Use the `type="number"` attribute for a numeric style input and invoke a numeric
 This `number` input type should only be used for incremental numeric values, meaning values with decimals will be considered invalid. The `number` input type is not appropriate for values that happen to only consist of but aren't strictly speaking a number, such as postal codes in many countries or credit card numbers. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) for more information.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/number.html) -->
-  <!-- The below content is automatically added from ../apiExamples/number.html -->
-  <auro-input type="number" required>
-    <span slot="label">Number of Passengers</span>
-    <span slot="helpText">Please enter the number of passengers.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/number.html) -->
+<!-- The below content is automatically added from ../apiExamples/number.html -->
+<auro-input type="number" required>
+<span slot="label">Number of Passengers</span>
+<span slot="helpText">Please enter the number of passengers.</span>
+</auro-input>
+<!-- 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/number.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/number.html -->
 
-```html
-<auro-input type="number" required>
-  <span slot="label">Number of Passengers</span>
-  <span slot="helpText">Please enter the number of passengers.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="number" required&gt;
+  &lt;span slot="label"&gt;Number of Passengers&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter the number of passengers.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -883,25 +827,23 @@ Use the `type="credit-card"` attribute for a credit card formatted input.
 Default help text will be added to the input `type="credit-card"` if custom help text is not provided. See the example below.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/credit-card.html) -->
-  <!-- The below content is automatically added from ../apiExamples/credit-card.html -->
-  <auro-input type="credit-card" required>
-    <span slot="label">Card number</span>
-    <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/credit-card.html) -->
+<!-- The below content is automatically added from ../apiExamples/credit-card.html -->
+<auro-input type="credit-card" required>
+<span slot="label">Card number</span>
+<span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
+</auro-input>
+<!-- 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/credit-card.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/credit-card.html -->
 
-```html
-<auro-input type="credit-card" required>
-  <span slot="label">Card number</span>
-  <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="credit-card" required&gt;
+  &lt;span slot="label"&gt;Card number&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Valid credit card numbers must include 16 digits (15 for Amex).&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 Use the `type="credit-card"` and `icon` attributes for a credit card formatted input with credit card icon support.
@@ -909,26 +851,24 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 **Dependency**: Please be sure to also install [auro-icon](https://auro.alaskaair.com/components/auro/icon/install) as a peer dependency.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/credit-card-icon.html) -->
-  <!-- The below content is automatically added from ../apiExamples/credit-card-icon.html -->
-  <auro-input icon type="credit-card" required>
-    <span slot="label">Card number</span>
-    <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/credit-card-icon.html) -->
+<!-- The below content is automatically added from ../apiExamples/credit-card-icon.html -->
+<auro-input icon type="credit-card" required>
+<span slot="label">Card number</span>
+<span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
+</auro-input>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 // Use 4147 3411 1111 1111 to see the Alaska Airline's credit card!
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/credit-card-icon.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/credit-card-icon.html -->
 
-```html
-<auro-input icon type="credit-card" required>
-  <span slot="label">Card number</span>
-  <span slot="helpText">Valid credit card numbers must include 16 digits (15 for Amex).</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input icon type="credit-card" required&gt;
+  &lt;span slot="label"&gt;Card number&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Valid credit card numbers must include 16 digits (15 for Amex).&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -937,25 +877,23 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 Use the `type="tel"` attribute for a phone number formatted input. The default format is `+1 (000) 000-0000`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tel.html) -->
-  <!-- The below content is automatically added from ../apiExamples/tel.html -->
-  <auro-input type="tel">
-    <span slot="label">Telephone</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tel.html) -->
+<!-- The below content is automatically added from ../apiExamples/tel.html -->
+<auro-input type="tel">
+<span slot="label">Telephone</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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/tel.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/tel.html -->
 
-```html
-<auro-input type="tel">
-  <span slot="label">Telephone</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="tel"&gt;
+  &lt;span slot="label"&gt;Telephone&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -964,25 +902,23 @@ Use the `type="tel"` attribute for a phone number formatted input. The default f
 Use the `format` attribute to set a custom phone number format.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tel-format.html) -->
-  <!-- The below content is automatically added from ../apiExamples/tel-format.html -->
-  <auro-input type="tel" format="+00 000 00 0000">
-    <span slot="label">Telephone</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tel-format.html) -->
+<!-- The below content is automatically added from ../apiExamples/tel-format.html -->
+<auro-input type="tel" format="+00 000 00 0000">
+<span slot="label">Telephone</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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/tel-format.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/tel-format.html -->
 
-```html
-<auro-input type="tel" format="+00 000 00 0000">
-  <span slot="label">Telephone</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="tel" format="+00 000 00 0000"&gt;
+  &lt;span slot="label"&gt;Telephone&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -991,25 +927,23 @@ Use the `format` attribute to set a custom phone number format.
 Use the `type="date"` attribute for a date formatted input. The default date format is `mm/dd/yyyy`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/month-day-year.html) -->
-  <!-- The below content is automatically added from ../apiExamples/month-day-year.html -->
-  <auro-input type="date">
-    <span slot="label">Arrival date</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/month-day-year.html) -->
+<!-- The below content is automatically added from ../apiExamples/month-day-year.html -->
+<auro-input type="date">
+<span slot="label">Arrival date</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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/month-day-year.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/month-day-year.html -->
 
-```html
-<auro-input type="date">
-  <span slot="label">Arrival date</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="date"&gt;
+  &lt;span slot="label"&gt;Arrival date&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1018,69 +952,63 @@ Use the `type="date"` attribute for a date formatted input. The default date for
 Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyyy` or `yy`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/year-month-day.html) -->
-  <!-- The below content is automatically added from ../apiExamples/year-month-day.html -->
-  <auro-input type="date" format="yyyy/mm/dd">
-    <span slot="label">Arrival date</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/year-month-day.html) -->
+<!-- The below content is automatically added from ../apiExamples/year-month-day.html -->
+<auro-input type="date" format="yyyy/mm/dd">
+<span slot="label">Arrival date</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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/year-month-day.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/year-month-day.html -->
 
-```html
-<auro-input type="date" format="yyyy/mm/dd">
-  <span slot="label">Arrival date</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="date" format="yyyy/mm/dd"&gt;
+  &lt;span slot="label"&gt;Arrival date&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/month-year.html) -->
-  <!-- The below content is automatically added from ../apiExamples/month-year.html -->
-  <auro-input type="date" format="mm/yy">
-    <span slot="label">Expiration date</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/month-year.html) -->
+<!-- The below content is automatically added from ../apiExamples/month-year.html -->
+<auro-input type="date" format="mm/yy">
+<span slot="label">Expiration date</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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/month-year.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/month-year.html -->
 
-```html
-<auro-input type="date" format="mm/yy">
-  <span slot="label">Expiration date</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="date" format="mm/yy"&gt;
+  &lt;span slot="label"&gt;Expiration date&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/day.html) -->
-  <!-- The below content is automatically added from ../apiExamples/day.html -->
-  <auro-input type="date" format="dd">
-    <span slot="label">Day</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/day.html) -->
+<!-- The below content is automatically added from ../apiExamples/day.html -->
+<auro-input type="date" format="dd">
+<span slot="label">Day</span>
+<span slot="helpText">Help Text</span>
+</auro-input>
+<!-- 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/day.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/day.html -->
 
-```html
-<auro-input type="date" format="dd">
-  <span slot="label">Day</span>
-  <span slot="helpText">Help Text</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input type="date" format="dd"&gt;
+  &lt;span slot="label"&gt;Day&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1089,25 +1017,23 @@ Use the `format` attribute to put together any combination of `mm`, `dd`, & `yyy
 Use the `validateOnInput` attribute to enable live validation on the `input` event. Recommended use is with setting a custom `pattern` and validation is required prior to a `blur` event.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/validate-on-input.html) -->
-  <!-- The below content is automatically added from ../apiExamples/validate-on-input.html -->
-  <auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
-    <span slot="label">Full Name</span>
-    <span slot="helpText">Please enter your full name as it appears on the card.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/validate-on-input.html) -->
+<!-- The below content is automatically added from ../apiExamples/validate-on-input.html -->
+<auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
+<span slot="label">Full Name</span>
+<span slot="helpText">Please enter your full name as it appears on the card.</span>
+</auro-input>
+<!-- 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/validate-on-input.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/validate-on-input.html -->
 
-```html
-<auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space.">
-  <span slot="label">Full Name</span>
-  <span slot="helpText">Please enter your full name as it appears on the card.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input validateOnInput required pattern="[a-zA-Z-.']+( +[a-zA-Z-.']+)+" setCustomValidityPatternMismatch="Full name requires two or more names with at least one space."&gt;
+  &lt;span slot="label"&gt;Full Name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name as it appears on the card.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1115,25 +1041,23 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
 Use the `value` attribute to programmatically set the value of the input.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/programmatic-value.html) -->
-  <!-- The below content is automatically added from ../apiExamples/programmatic-value.html -->
-  <auro-input value="Alaska Airlines is the best!">
-    <span slot="label">Name</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/programmatic-value.html) -->
+<!-- The below content is automatically added from ../apiExamples/programmatic-value.html -->
+<auro-input value="Alaska Airlines is the best!">
+<span slot="label">Name</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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/programmatic-value.html) -->
 <!-- The below code snippet is automatically added from ../apiExamples/programmatic-value.html -->
 
-```html
-<auro-input value="Alaska Airlines is the best!">
-  <span slot="label">Name</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input value="Alaska Airlines is the best!"&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1144,50 +1068,46 @@ Use the `value` and other components to dynamically set the value of the input.
 Note: Setting the `value` to `undefined` will also reset the element.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/value.html) -->
-  <!-- The below content is automatically added from ../apiExamples/value.html -->
-  <auro-button id="setValidValueBtn">Set Value to Alaska</auro-button>
-  <auro-button id="setUndefinedValueBtn">Set Value to Undefined</auro-button>
-  <br /><br />
-  <auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!">
-    <span slot="label">Name</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/value.html) -->
+<!-- The below content is automatically added from ../apiExamples/value.html -->
+<auro-button id="setValidValueBtn">Set Value to Alaska</auro-button>
+<auro-button id="setUndefinedValueBtn">Set Value to Undefined</auro-button>
+<br /><br />
+<auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!">
+<span slot="label">Name</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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-button id="setValidValueBtn">Set Value to Alaska</auro-button>
-<auro-button id="setUndefinedValueBtn">Set Value to Undefined</auro-button>
-<br /><br />
-<auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!">
-  <span slot="label">Name</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="setValidValueBtn"&gt;Set Value to Alaska&lt;/auro-button&gt;
+&lt;auro-button id="setUndefinedValueBtn"&gt;Set Value to Undefined&lt;/auro-button&gt;
+&lt;br /&gt;&lt;br /&gt;
+&lt;auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!"&gt;
+  &lt;span slot="label"&gt;Name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/value.js) -->
 <!-- The below code snippet is automatically added from ../apiExamples/value.js -->
 
-```js
-export function programmaticallySetValue() {
+<pre class="language-js"><code class="language-js">export function programmaticallySetValue() {
   const elem = document.querySelector('#setProgrammaticValueExample');
-
+​
   // set value of auro-input element
-  document.querySelector('#setValidValueBtn').addEventListener('click', () => {
+  document.querySelector('#setValidValueBtn').addEventListener('click', () =&gt; {
     elem.value = "Alaska Airlines is the best";
   });
-
+​
   // reset the value of auro-input element
-  document.querySelector('#setUndefinedValueBtn').addEventListener('click', () => {
+  document.querySelector('#setUndefinedValueBtn').addEventListener('click', () =&gt; {
     elem.value = undefined;
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1198,42 +1118,38 @@ export function programmaticallySetValue() {
 Use the `reset()` method to reset the `<auro-input>`'s `value` 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 /><br />
-  <auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
-    <span slot="label">Full Name</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- 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 /><br />
+<auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
+<span slot="label">Full Name</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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 /><br />
-<auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
-  <span slot="label">Full Name</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-button id="resetStateBtn"&gt;Reset&lt;/auro-button&gt;
+&lt;br /&gt;&lt;br /&gt;
+&lt;auro-input id="resetStateExample" minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!"&gt;
+  &lt;span slot="label"&gt;Full Name&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&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>
 
@@ -1244,27 +1160,25 @@ export function resetStateExample() {
 The `<auro-input>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
-  <auro-input placeholder="John Doe" bordered>
-    <span slot="label">Full name</span>
-    <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
-    <span slot="helpText">Please enter your full name.</span>
-  </auro-input>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
+<!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
+<auro-input placeholder="John Doe" bordered>
+<span slot="label">Full name</span>
+<span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
+<span slot="helpText">Please enter your full name.</span>
+</auro-input>
+<!-- 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/optional-label.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
 
-```html
-<auro-input placeholder="John Doe" bordered>
-  <span slot="label">Full name</span>
-  <span slot="optionalLabel" style="color: grey; font-size: small"> - optional</span>
-  <span slot="helpText">Please enter your full name.</span>
-</auro-input>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-input placeholder="John Doe" bordered&gt;
+  &lt;span slot="label"&gt;Full name&lt;/span&gt;
+  &lt;span slot="optionalLabel" style="color: grey; font-size: small"&gt; - optional&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Please enter your full name.&lt;/span&gt;
+&lt;/auro-input&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1275,84 +1189,80 @@ The `<auro-input>` supports an `optionalLabel` slot, where users can can overrid
 Example illustrates using a JavaScript function attached to an `auro-button` component `click` event to swap the values of two `auro-input` elements. An example of this use case would be swapping the departure and arrival airports in a flight search form.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/swap-value.html) -->
-  <!-- The below content is automatically added from ../apiExamples/swap-value.html -->
-  <auro-input id="swapExampleLeft">
-    <span slot="label">Left Input</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <auro-button id="swapExampleBtn">Swap Values</auro-button>
-  <auro-input id="swapExampleRight">
-    <span slot="label">Right Input</span>
-    <span slot="helpText">Help Text</span>
-  </auro-input>
-  <style>
-    #swapExampleWrapper {
-      align-items: center;
-    }
-
-    #swapExampleLeft,
-    #swapExampleRight {
-      flex: 1;
-    }
-
-    #swapExampleBtn {
-      width: unset;
-      margin: 0 var(--auro-size-xs);
-    }
-  </style>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/swap-value.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/swap-value.html -->
-
-```html
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/swap-value.html) -->
+<!-- The below content is automatically added from ../apiExamples/swap-value.html -->
 <auro-input id="swapExampleLeft">
-  <span slot="label">Left Input</span>
-  <span slot="helpText">Help Text</span>
+<span slot="label">Left Input</span>
+<span slot="helpText">Help Text</span>
 </auro-input>
 <auro-button id="swapExampleBtn">Swap Values</auro-button>
 <auro-input id="swapExampleRight">
-  <span slot="label">Right Input</span>
-  <span slot="helpText">Help Text</span>
+<span slot="label">Right Input</span>
+<span slot="helpText">Help Text</span>
 </auro-input>
 <style>
+#swapExampleWrapper {
+align-items: center;
+}
+
+#swapExampleLeft,
+#swapExampleRight {
+flex: 1;
+}
+
+#swapExampleBtn {
+width: unset;
+margin: 0 var(--auro-size-xs);
+}
+</style>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/swap-value.html) -->
+<!-- The below code snippet is automatically added from ../apiExamples/swap-value.html -->
+
+<pre class="language-html"><code class="language-html">&lt;auro-input id="swapExampleLeft"&gt;
+  &lt;span slot="label"&gt;Left Input&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;
+&lt;auro-button id="swapExampleBtn"&gt;Swap Values&lt;/auro-button&gt;
+&lt;auro-input id="swapExampleRight"&gt;
+  &lt;span slot="label"&gt;Right Input&lt;/span&gt;
+  &lt;span slot="helpText"&gt;Help Text&lt;/span&gt;
+&lt;/auro-input&gt;
+&lt;style&gt;
   #swapExampleWrapper {
     align-items: center;
   }
-
+​
   #swapExampleLeft,
   #swapExampleRight {
     flex: 1;
   }
-
+​
   #swapExampleBtn {
     width: unset;
     margin: 0 var(--auro-size-xs);
   }
-</style>
-```
+&lt;/style&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/swap-value.js) -->
 <!-- The below code snippet is automatically added from ../apiExamples/swap-value.js -->
 
-```js
-export function swapInputValues() {
+<pre class="language-js"><code class="language-js">export function swapInputValues() {
   const btn = document.querySelector('#swapExampleBtn');
   const inputOne = document.querySelector('#swapExampleLeft');
   const inputTwo = document.querySelector('#swapExampleRight');
-
-  btn.addEventListener('click', () => {
+​
+  btn.addEventListener('click', () =&gt; {
     const valueOne = inputOne.value;
     const valueTwo = inputTwo.value;
-
+​
     inputOne.value = valueTwo;
     inputTwo.value = valueOne;
   });
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
@@ -1363,11 +1273,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 custom-property-empty-line-before */
-
+<pre class="language-scss"><code class="language-scss">/* stylelint-disable custom-property-empty-line-before */
+​
 @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-
+​
 :host(:not([ondark])),
 :host(:not([appearance="inverse"])) {
   --ds-auro-input-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
@@ -1377,10 +1286,10 @@ The component may be restyled by changing the values of the following token(s).
   --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
   --ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
   --ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
-
+​
   --ds-auro-input-outline-color: transparent;
 }
-
+​
 :host([ondark]),
 :host([appearance="inverse"]) {
   --ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #{v.$ds-basic-color-border-inverse});
@@ -1390,8 +1299,7 @@ The component may be restyled by changing the values of the following token(s).
   --ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
   --ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
   --ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #{v.$ds-advanced-color-state-error-inverse});
-
+​
   --ds-auro-input-outline-color: transparent;
-}
-```
+}</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->