@aurodesignsystem-dev/auro-formkit 0.0.0-pr1474.2 → 0.0.0-pr1474.3

package/components/combobox/demo/customize.md

@@ -58,8 +58,7 @@
 <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;
@@ -71,7 +70,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">
@@ -94,8 +93,7 @@
 <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;
@@ -107,7 +105,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>
@@ -120,23 +118,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>
@@ -147,8 +145,7 @@
 <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;
@@ -175,7 +172,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>
@@ -200,8 +197,7 @@
 <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;
@@ -213,7 +209,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>
@@ -287,8 +283,7 @@
 <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;
@@ -342,7 +337,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>
@@ -368,8 +363,7 @@
 <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;
@@ -382,7 +376,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>
@@ -408,8 +402,7 @@
 <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;
@@ -421,7 +414,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>
@@ -430,10 +423,9 @@
 <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"])) {
@@ -448,7 +440,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"]) {
@@ -467,11 +459,10 @@
 <!-- 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"])) {
@@ -481,10 +472,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"]) {
@@ -494,16 +485,15 @@
   --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});
@@ -540,18 +530,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>
@@ -565,8 +555,7 @@
 <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;
@@ -587,7 +576,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>
@@ -619,8 +608,7 @@
 <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;
@@ -634,7 +622,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">
@@ -659,8 +647,7 @@
 <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;
@@ -674,7 +661,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>
@@ -688,23 +675,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>
@@ -714,8 +701,7 @@
 <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;
@@ -742,7 +728,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>
@@ -767,8 +753,7 @@
 <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;
@@ -780,7 +765,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>
@@ -805,8 +790,7 @@
 <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;
@@ -818,7 +802,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>
@@ -827,31 +811,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>
@@ -861,8 +845,7 @@
 <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
@@ -892,7 +875,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>
@@ -917,8 +900,7 @@
 <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;
@@ -930,7 +912,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>
@@ -962,8 +944,7 @@
 <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;
@@ -975,7 +956,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>
@@ -1001,8 +982,7 @@
 <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;
@@ -1015,7 +995,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>
@@ -1041,8 +1021,7 @@
 <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;
@@ -1055,7 +1034,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>
@@ -1087,8 +1066,7 @@
 <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;
@@ -1101,7 +1079,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>
@@ -1127,8 +1105,7 @@
 <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;
@@ -1141,7 +1118,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>
@@ -1153,52 +1130,51 @@
 <!-- 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
@@ -1240,7 +1216,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>