@aurodesignsystem-dev/auro-formkit 0.0.0-pr1474.4 → 0.0.0-pr1475.1

package/components/combobox/demo/customize.md

@@ -58,7 +58,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-default.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/appearance-default.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-default.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Default Appearance&lt;/span&gt;
@@ -70,7 +71,7 @@
     &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper--ondark">
@@ -93,7 +94,8 @@
 <auro-accordion alignRight>
 <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 -->
+<!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox appearance="inverse"&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Inverse Appearance&lt;/span&gt;
@@ -105,7 +107,7 @@
     &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="displayValue">Custom Display Value</auro-header>
@@ -118,23 +120,23 @@
 <span slot="label">Name</span>
 <auro-menu>
 <auro-menuoption value="Apples" id="option-0">
-                Apples
+      Apples
 <span slot="displayValue">🍎</span>
 </auro-menuoption>
 <auro-menuoption value="Oranges" id="option-1">
-                Oranges
+      Oranges
 <span slot="displayValue">🍊</span>
 </auro-menuoption>
 <auro-menuoption value="Peaches" id="option-2">
-                Peaches
+      Peaches
 <span slot="displayValue">🍑</span>
 </auro-menuoption>
 <auro-menuoption value="Grapes" id="option-3">
-                Grapes
+      Grapes
 <span slot="displayValue">🍇</span>
 </auro-menuoption>
 <auro-menuoption value="Cherries" id="option-4">
-                Cherries
+      Cherries
 <span slot="displayValue">🍒</span>
 </auro-menuoption>
 <auro-menuoption static nomatch>No matching option</auro-menuoption>
@@ -145,7 +147,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/display-value.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/display-value.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/display-value.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox layout="snowflake" shape="snowflake" size="xl" appearance="inverse" value="Apples"&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -172,7 +175,7 @@
     &lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="checkmarks">Checkmark on Selected Option</auro-header>
@@ -197,7 +200,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/checkmark.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/checkmark.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/checkmark.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox checkmark&gt;
     &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
     &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -209,7 +213,7 @@
         &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
         &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
     &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="placement">Bib Placement</auro-header>
@@ -283,7 +287,8 @@
 <auro-accordion alignRight>
 <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 -->
+<!-- The below code snippet is automatically added from ./../apiExamples/floater-config.html -->
+
 <pre class="language-html"><code class="language-html">&lt;div style="width: 350px"&gt;
   &lt;auro-combobox offset="20" noFlip placement="bottom-end"&gt;
     &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
@@ -337,7 +342,7 @@
       &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
     &lt;/auro-menu&gt;
   &lt;/auro-combobox&gt;
-&lt;/div&gt;</code></pre>
+&lt;/div&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="noFlip">No Flip</auro-header>
@@ -363,7 +368,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noflip.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/noflip.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/noflip.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox noFlip&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -376,7 +382,7 @@
     &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="breakpoint">Fullscreen Breakpoint</auro-header>
@@ -402,7 +408,8 @@
 <auro-accordion alignRight>
 <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 -->
+<!-- The below code snippet is automatically added from ./../apiExamples/fullscreen-breakpoint.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox fullscreenBreakpoint="lg"&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -414,7 +421,7 @@
     &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 </section>
@@ -423,9 +430,10 @@
 <p>The component may be restyled by changing the values of the following token(s) for the dropown, input and menu</p>
 <auro-header level="4" id="cssTokensDropdown">Dropdown</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../dropdown/src/styles/tokens.scss) -->
-<!-- The below code snippet is automatically added from ./../../dropdown/src/styles/tokens.scss -->
+<!-- The below code snippet is automatically added from ./../../dropdown/src/styles/tokens.scss -->
+
 <pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
+@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
 ​
 :host(:not([ondark])),
 :host(:not([appearance="inverse"])) {
@@ -440,7 +448,7 @@
   --ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
   --ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
   --ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-}
+}
 ​
 :host([ondark]),
 :host([appearance="inverse"]) {
@@ -459,10 +467,11 @@
 <!-- AURO-GENERATED-CONTENT:END -->
 <auro-header level="4" id="cssTokensInput">Input</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../input/src/styles/tokens.scss) -->
-<!-- The below code snippet is automatically added from ./../../input/src/styles/tokens.scss -->
-<pre class="language-scss"><code class="language-scss">/* stylelint-disable custom-property-empty-line-before */
+<!-- The below code snippet is automatically added from ./../../input/src/styles/tokens.scss -->
+
+<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;
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
 ​
 :host(:not([ondark])),
 :host(:not([appearance="inverse"])) {
@@ -472,10 +481,10 @@
   --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
   --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-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"]) {
@@ -485,15 +494,16 @@
   --ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
   --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-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 -->
 <auro-header level="4" id="cssTokensMenu">Menu</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../menu/src/styles/default/tokens.scss) -->
-<!-- The below code snippet is automatically added from ./../../menu/src/styles/default/tokens.scss -->
-<pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
+<!-- The below code snippet is automatically added from ./../../menu/src/styles/default/tokens.scss -->
+
+<pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
 ​
 :host {
   --ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
@@ -530,18 +540,18 @@
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/css-parts.html) -->
 <!-- The below content is automatically added from ../apiExamples/css-parts.html -->
 <style>
-            auro-combobox.css-parts-demo::part(dropdownTrigger) {
-              border-color: orange;
-            }
-            auro-combobox.css-parts-demo::part(dropdownChevron) {
-              color: purple;
-            }
-            auro-combobox.css-parts-demo::part(helpText) {
-              color: green;
-            }
-            auro-combobox.css-parts-demo::part(dropdownSize) {
-              max-height: 200px;
-            }
+  auro-combobox.css-parts-demo::part(dropdownTrigger) {
+    border-color: orange;
+  }
+  auro-combobox.css-parts-demo::part(dropdownChevron) {
+    color: purple;
+  }
+  auro-combobox.css-parts-demo::part(helpText) {
+    color: green;
+  }
+  auro-combobox.css-parts-demo::part(dropdownSize) {
+    max-height: 200px;
+  }
 </style>
 <auro-combobox class="css-parts-demo">
 <span slot="label">CSS Parts Example</span>
@@ -555,7 +565,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/css-parts.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/css-parts.html -->
+<!-- The below code snippet is automatically added from ../apiExamples/css-parts.html -->
+
 <pre class="language-html"><code class="language-html">&lt;style&gt;
   auro-combobox.css-parts-demo::part(dropdownTrigger) {
     border-color: orange;
@@ -576,7 +587,7 @@
   &lt;auro-menuoption value="one"&gt;Option One&lt;/auro-menuoption&gt;
   &lt;auro-menuoption value="two"&gt;Option Two&lt;/auro-menuoption&gt;
   &lt;auro-menuoption value="three"&gt;Option Three&lt;/auro-menuoption&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 </section>
@@ -608,7 +619,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/suggestion.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/suggestion.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/suggestion.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox behavior="suggestion"&gt;
   &lt;span slot="ariaLabel.bib.close"&gt;Close combobox&lt;/span&gt;
   &lt;span slot="ariaLabel.input.clear"&gt;Clear All&lt;/span&gt;
@@ -622,7 +634,7 @@
     &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <div class="exampleWrapper">
@@ -647,7 +659,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/filter.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/filter.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/filter.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox behavior="filter" setCustomValidityValueMissingFilter="Please select an option from the list"&gt;
   &lt;span slot="ariaLabel.bib.close"&gt;Close combobox&lt;/span&gt;
   &lt;span slot="ariaLabel.input.clear"&gt;Clear All&lt;/span&gt;
@@ -661,7 +674,7 @@
     &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="inputType">Input Type</auro-header>
@@ -675,23 +688,23 @@
 <auro-menu>
 <auro-menuoption value="4500000000000000" id="option-cc-0">
 <auro-icon category="payment" customcolor name="cc-visa"></auro-icon>
-                4000 0000 0000 0000
+      4000 0000 0000 0000
 </auro-menuoption>
 <auro-menuoption value="340000000000000" id="option-cc-1">
 <auro-icon category="payment" customcolor name="cc-amex"></auro-icon>
-                3400 000000 00000
+      3400 000000 00000
 </auro-menuoption>
 <auro-menuoption value="30000000000000" id="option-cc-2">
 <auro-icon category="payment" customcolor name="credit-card"></auro-icon>
-                3000 000000 0000
+      3000 000000 0000
 </auro-menuoption>
 <auro-menuoption value="5100000000000000" id="option-cc-4">
 <auro-icon category="payment" customcolor name="cc-mastercard"></auro-icon>
-                5000 0000 0000 0000
+      5000 0000 0000 0000
 </auro-menuoption>
 <auro-menuoption value="6011000000000000" id="option-cc-5">
 <auro-icon category="payment" customcolor name="cc-discover"></auro-icon>
-                6000 0000 0000 0000
+      6000 0000 0000 0000
 </auro-menuoption>
 <auro-menuoption static nomatch>No matching credit card saved</auro-menuoption>
 </auro-menu>
@@ -701,7 +714,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/type_credit-card.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/type_credit-card.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/type_credit-card.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox type="credit-card" triggerIcon&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Credit Card&lt;/span&gt;
   &lt;span slot="label"&gt;Credit Card Number&lt;/span&gt;
@@ -728,7 +742,7 @@
     &lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching credit card saved&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="inputMode">Input Mode</auro-header>
@@ -753,7 +767,8 @@
 <auro-accordion alignRight>
 <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 -->
+<!-- The below code snippet is automatically added from ./../apiExamples/inputmode.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox inputmode="numeric"&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -765,7 +780,7 @@
     &lt;auro-menuoption value="5" id="option-4"&gt;5&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="noFilter">Turn off Filtering</auro-header>
@@ -790,7 +805,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-filter.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/no-filter.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/no-filter.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox noFilter&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;noFilter Combobox Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -802,7 +818,7 @@
     &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="persistInput">Persist Input</auro-header>
@@ -811,31 +827,31 @@
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/persist-input.html) -->
 <!-- The below content is automatically added from ./../apiExamples/persist-input.html -->
 <auro-combobox
-            required
-            persistInput
-            setCustomValidityValueMissing="Please select an option from the list."
-            >
+  required
+  persistInput
+  setCustomValidityValueMissing="Please select an option from the list."
+  >
 <span slot="bib.fullscreen.headline">Persistant Input</span>
 <span slot="label">Persistant Input</span>
 <auro-menu>
 <auro-menuoption value="Apples" id="option-0">
-                Apples
+      Apples
 <div slot="displayValue">Apples</div>
 </auro-menuoption>
 <auro-menuoption value="Oranges" id="option-1">
-                Oranges
+      Oranges
 <div slot="displayValue">Oranges</div>
 </auro-menuoption>
 <auro-menuoption value="Peaches" id="option-2">
-                Peaches
+      Peaches
 <div slot="displayValue">Peaches</div>
 </auro-menuoption>
 <auro-menuoption value="Grapes" id="option-3">
-                Grapes
+      Grapes
 <div slot="displayValue">Grapes</div>
 </auro-menuoption>
 <auro-menuoption value="Cherries" id="option-4">
-                Cherries
+      Cherries
 <div slot="displayValue">Cherries</div>
 </auro-menuoption>
 </auro-menu>
@@ -845,7 +861,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/persist-input.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/persist-input.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/persist-input.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox
   required
   persistInput
@@ -875,7 +892,7 @@
       &lt;div slot="displayValue"&gt;Cherries&lt;/div&gt;
     &lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="disableComponent">Disable Component</auro-header>
@@ -900,7 +917,8 @@
 <auro-accordion alignRight>
 <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 -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox disabled&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -912,7 +930,7 @@
     &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="disableOptions">Disable Option(s)</auro-header>
@@ -944,7 +962,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-option.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/disabled-option.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled-option.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -956,7 +975,7 @@
     &lt;auro-menuoption value="Cherries" id="option-4" disabled&gt;Cherries&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="requireSelection">Require Selection</auro-header>
@@ -982,7 +1001,8 @@
 <auro-accordion alignRight>
 <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 -->
+<!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox required&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -995,7 +1015,7 @@
     &lt;auro-menuoption value="Prefer Alaska" id="option-5"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="forceError">Force Error State</auro-header>
@@ -1021,7 +1041,8 @@
 <auro-accordion alignRight>
 <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 -->
+<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox error="Custom error message"&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -1034,7 +1055,7 @@
     &lt;auro-menuoption value="Prefer Alaska" id="option-5"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="customValidation">Custom Validation Messages</auro-header>
@@ -1066,7 +1087,8 @@
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-validity-message.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/custom-validity-message.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/custom-validity-message.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox required setCustomValidityValueMissing="Please select a fruit from the list."&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -1079,7 +1101,7 @@
     &lt;auro-menuoption value="Prefer Alaska" id="option-5"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="noValidate">No Validation</auro-header>
@@ -1105,7 +1127,8 @@
 <auro-accordion alignRight>
 <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 -->
+<!-- The below code snippet is automatically added from ./../apiExamples/no-validate.html -->
+
 <pre class="language-html"><code class="language-html">&lt;auro-combobox required noValidate&gt;
   &lt;span slot="bib.fullscreen.headline"&gt;noValidate Combobox Header&lt;/span&gt;
   &lt;span slot="label"&gt;Name&lt;/span&gt;
@@ -1118,7 +1141,7 @@
     &lt;auro-menuoption value="Prefer Alaska" id="option-5"&gt;Prefer Alaska&lt;/auro-menuoption&gt;
     &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
   &lt;/auro-menu&gt;
-&lt;/auro-combobox&gt;</code></pre>
+&lt;/auro-combobox&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 <auro-header level="3" id="dynamicMenu">Dynamic Menu</auro-header>
@@ -1130,51 +1153,52 @@
 <!-- HTML example file -->
 <!-- ----------------- -->
 <auro-combobox
-            id="dynamicMenuExample"
-            value="TAN"
-            noFilter
-            persistInput
-            dvInputOnly
-            setCustomValidityValueMissing="Please select an option from the list."
-            required>
+  id="dynamicMenuExample"
+  value="TAN"
+  noFilter
+  persistInput
+  dvInputOnly
+  setCustomValidityValueMissing="Please select an option from the list."
+  required>
 <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
 <span slot="label">First</span>
 <!--
-              The auro-combobox element requires an empty auro-menu element
-              due to the requirements of auro-dropdown and auro-input
-            -->
+    The auro-combobox element requires an empty auro-menu element
+    due to the requirements of auro-dropdown and auro-input
+  -->
 <auro-menu id="initMenu"></auro-menu>
 </auro-combobox>
 <br>
 <auro-combobox
-            id="dynamicMenuExampleTwo"
-            value="GER"
-            noFilter
-            persistInput
-            dvInputOnly
-            setCustomValidityValueMissing="Please select an option from the list."
-            required>
+  id="dynamicMenuExampleTwo"
+  value="GER"
+  noFilter
+  persistInput
+  dvInputOnly
+  setCustomValidityValueMissing="Please select an option from the list."
+  required>
 <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
 <span slot="label">Second</span>
 <!--
-              The auro-combobox element requires an empty auro-menu element
-              due to the requirements of auro-dropdown and auro-input
-            -->
+    The auro-combobox element requires an empty auro-menu element
+    due to the requirements of auro-dropdown and auro-input
+  -->
 <auro-menu id="initMenuTwo"></auro-menu>
 </auro-combobox>
 <br>
 <auro-button id="dynamicMenuSwapButton">
-            Swap Values
+  Swap Values
 </auro-button>
 <auro-button id="dynamicMenuPersistButton">
-            Toggle Persist Input
+  Toggle Persist Input
 </auro-button>
 <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
 <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamic-menu.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/dynamic-menu.html -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dynamic-menu.html -->
+
 <pre class="language-html"><code class="language-html">&lt;!-- HTML example file --&gt;
 &lt;!-- ----------------- --&gt;
 &lt;auro-combobox
@@ -1216,7 +1240,7 @@
 &lt;/auro-button&gt;
 &lt;auro-button id="dynamicMenuPersistButton"&gt;
   Toggle Persist Input
-&lt;/auro-button&gt;</code></pre>
+&lt;/auro-button&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 </section>