@aurodesignsystem/auro-formkit 2.0.0-beta.4 → 2.0.0-beta.6

package/components/input/demo/api.md

@@ -1,20 +1,3 @@
-<style>
-  .exampleWrapper--flex * {
-    margin-bottom: 1rem;
-  }
-
-  @media screen and (min-width: 660px) {
-    .exampleWrapper--flex {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .exampleWrapper--flex * {
-      width: 45%;
-      margin-bottom: unset;
-    }
-  }
-</style>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
 <!-- The below content is automatically added from ../docs/api.md -->
 
@@ -117,10 +100,11 @@ The `auro-input` element supports the localization of all content managed within
 
 ## Basic
 
-<div class="exampleWrapper exampleWrapper--flex">
+The default component supports the basic input `type="text"` structure. The `(optional)` label is provided to instruct the user that their input is not required. Use the `bordered` attribute for a bordered `<auro-input>`.
+
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ../apiExamples/basic.html -->
-  <auro-input></auro-input>
   <auro-input bordered></auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -130,7 +114,6 @@ The `auro-input` element supports the localization of all content managed within
 <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
 
 ```html
-<auro-input></auro-input>
 <auro-input bordered></auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -141,12 +124,9 @@ The `auro-input` element supports the localization of all content managed within
 ### Disabled <a name="disabled"></a>
 Use the `disable` attribute to prevent the user from interacting with the input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<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="month-day-year" required>
-    <slot slot="label">Departure date</slot>
-  </auro-input>
   <auro-input disabled bordered type="month-day-year">
     <slot slot="label">Arrival date</slot>
   </auro-input>
@@ -158,9 +138,6 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 <!-- The below code snippet is automatically added from ../apiExamples/disabled.html -->
 
 ```html
-<auro-input disabled type="month-day-year" required>
-  <slot slot="label">Departure date</slot>
-</auro-input>
 <auro-input disabled bordered type="month-day-year">
   <slot slot="label">Arrival date</slot>
 </auro-input>
@@ -171,13 +148,10 @@ Use the `disable` attribute to prevent the user from interacting with the input.
 ### Placeholder <a name="placeholder"></a>
 Use the `placeholder` attribute to add a custom placeholder message within the element.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/placeholder.html) -->
   <!-- The below content is automatically added from ../apiExamples/placeholder.html -->
-  <auro-input required placeholder="John Doe">
-    <span slot="label">Full name</span>
-  </auro-input>
-  <auro-input required bordered placeholder="John Doe">
+  <auro-input placeholder="John Doe" bordered required>
     <span slot="label">Full name</span>
     <span slot="helptext">Please enter your full name.</span>
   </auro-input>
@@ -189,10 +163,7 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
 <!-- The below code snippet is automatically added from ../apiExamples/placeholder.html -->
 
 ```html
-<auro-input required placeholder="John Doe">
-  <span slot="label">Full name</span>
-</auro-input>
-<auro-input required bordered placeholder="John Doe">
+<auro-input placeholder="John Doe" bordered required>
   <span slot="label">Full name</span>
   <span slot="helptext">Please enter your full name.</span>
 </auro-input>
@@ -236,7 +207,8 @@ Note: Setting the `value` to `undefined` will also reset the element.
   <!-- 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>
+  <auro-button id="setUndefinedValueBtn">Set Value to Undefined</auro-button>
+  <br /><br />
   <auro-input id="setProgrammaticValueExample" value="Press one of the buttons above!" bordered>
     <span slot="label">Name</span>
     <span slot="helptext">Please enter your full name.</span>
@@ -250,7 +222,8 @@ Note: Setting the `value` to `undefined` will also reset the element.
 
 ```html
 <auro-button id="setValidValueBtn">Set Value to Alaska</auro-button>
-<auro-button id="setUndefinedValueBtn">Set Value to Undefined</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!" bordered>
   <span slot="label">Name</span>
   <span slot="helptext">Please enter your full name.</span>
@@ -288,7 +261,7 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxDate.html) -->
   <!-- The below content is automatically added from ../apiExamples/maxDate.html -->
-  <auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
+  <auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
     <span slot="label">Choose a date</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -299,7 +272,7 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <!-- The below code snippet is automatically added from ../apiExamples/maxDate.html -->
 
 ```html
-<auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date.">
+<auro-input type="month-day-year" max="03/25/2023" setCustomValidityRangeOverflow="The selected date is past the defined maximum date." bordered>
   <span slot="label">Choose a date</span>
 </auro-input>
 ```
@@ -311,7 +284,7 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxNumber.html) -->
   <!-- The below content is automatically added from ../apiExamples/maxNumber.html -->
-  <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
+  <auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum." bordered>
     <span slot="label">Choose a number</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -322,7 +295,7 @@ The `setCustomValidityRangeOverflow` attribute may optionally be used in combina
 <!-- The below code snippet is automatically added from ../apiExamples/maxNumber.html -->
 
 ```html
-<auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum.">
+<auro-input type="number" max="10" setCustomValidityRangeOverflow="The selected value is above the defined maximum." bordered>
   <span slot="label">Choose a number</span>
 </auro-input>
 ```
@@ -339,7 +312,7 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minDate.html) -->
   <!-- The below content is automatically added from ../apiExamples/minDate.html -->
-  <auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
+  <auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
     <span slot="label">Choose a date</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -350,7 +323,7 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <!-- The below code snippet is automatically added from ../apiExamples/minDate.html -->
 
 ```html
-<auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date.">
+<auro-input type="month-day-year" min="03/25/2023" setCustomValidityRangeUnderflow="The selected date is before the defined minimum date." bordered>
   <span slot="label">Choose a date</span>
 </auro-input>
 ```
@@ -362,7 +335,7 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minNumber.html) -->
   <!-- The below content is automatically added from ../apiExamples/minNumber.html -->
-  <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
+  <auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum." bordered>
     <span slot="label">Choose a number</span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -373,7 +346,7 @@ The `setCustomValidityRangeUnderflow` attribute may optionally be used in combin
 <!-- The below code snippet is automatically added from ../apiExamples/minNumber.html -->
 
 ```html
-<auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum.">
+<auro-input type="number" min="10" setCustomValidityRangeUnderflow="The selected value is below the defined minimum." bordered>
   <span slot="label">Choose a number</span>
 </auro-input>
 ```
@@ -385,14 +358,10 @@ Use the `maxlength` attribute to control the length of the input entered.
 
 The `setCustomValidityTooLong` attribute may optionally be used in combination with the `maxLength` attribute to define custom help text used when the length of the input is too long.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxLength.html) -->
   <!-- The below content is automatically added from ../apiExamples/maxLength.html -->
-  <auro-input required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
-    <slot slot="label">Voucher Code</slot>
-    <slot slot="helptext">Please enter your 12 character voucher code.</slot>
-  </auro-input>
-  <auro-input bordered required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+  <auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." bordered required>
     <slot slot="label">Voucher Code</slot>
     <slot slot="helptext">Please enter your 12 character voucher code.</slot>
   </auro-input>
@@ -404,11 +373,7 @@ The `setCustomValidityTooLong` attribute may optionally be used in combination w
 <!-- The below code snippet is automatically added from ../apiExamples/maxLength.html -->
 
 ```html
-<auro-input required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
-  <slot slot="label">Voucher Code</slot>
-  <slot slot="helptext">Please enter your 12 character voucher code.</slot>
-</auro-input>
-<auro-input bordered required maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered.">
+<auro-input maxlength="12" setCustomValidityTooLong="Oops! There were too many characters entered." bordered required>
   <slot slot="label">Voucher Code</slot>
   <slot slot="helptext">Please enter your 12 character voucher code.</slot>
 </auro-input>
@@ -421,14 +386,10 @@ 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 exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minLength.html) -->
   <!-- The below content is automatically added from ../apiExamples/minLength.html -->
-  <auro-input required minlength="4" setCustomValidityTooShort="Please enter a full voucher code.">
-    <slot slot="label">Voucher Code</slot>
-    <slot slot="helptext">Please enter your 4 character voucher code.</slot>
-  </auro-input>
-  <auro-input bordered required minlength="4" setCustomValidityTooShort="Please enter a full voucher code.">
+  <auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered required>
     <slot slot="label">Voucher Code</slot>
     <slot slot="helptext">Please enter your 4 character voucher code.</slot>
   </auro-input>
@@ -440,11 +401,7 @@ The `setCustomValidityTooShort` attribute may optionally be used in combination
 <!-- The below code snippet is automatically added from ../apiExamples/minLength.html -->
 
 ```html
-<auro-input required minlength="4" setCustomValidityTooShort="Please enter a full voucher code.">
-  <slot slot="label">Voucher Code</slot>
-  <slot slot="helptext">Please enter your 4 character voucher code.</slot>
-</auro-input>
-<auro-input bordered required minlength="4" setCustomValidityTooShort="Please enter a full voucher code.">
+<auro-input minlength="4" setCustomValidityTooShort="Please enter a full voucher code." bordered required>
   <slot slot="label">Voucher Code</slot>
   <slot slot="helptext">Please enter your 4 character voucher code.</slot>
 </auro-input>
@@ -457,14 +414,10 @@ 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 exampleWrapper--flex">
+<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-input bordered pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces">
+  <auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
     <span slot="label">Username</span>
     <span slot="helptext">Please enter a username.</span>
   </auro-input>
@@ -476,40 +429,10 @@ The `<auro-input>` component supports setting a custom validity message specific
 <!-- 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">
+<auro-input pattern="[a-z]{1,15}" spellcheck="false" setCustomValidityPatternMismatch="Only contain lowercase letters w/no spaces" bordered>
   <span slot="label">Username</span>
   <span slot="helptext">Please enter a username.</span>
 </auro-input>
-<auro-input bordered 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-accordion>
-
-### Borderless <a name="borderless"></a>
-Use the `borderless` attribute to remove the bottom border. This attribute is intended for use when input is wrapped in a container that already handles the different state displays, e.g. [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown).
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/borderless.html) -->
-  <!-- The below content is automatically added from ../apiExamples/borderless.html -->
-  <auro-input borderless>
-    <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>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/borderless.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/borderless.html -->
-
-```html
-<auro-input borderless>
-  <span slot="label">Name</span>
-  <span slot="helptext">Please enter your full name.</span>
-</auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -523,7 +446,8 @@ In this example, the user is able to programmatically change the value of the in
   <!-- 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>
+  <auro-button id="resetReadonlyValueBtn">Reset</auro-button>
+  <br /><br />
   <auro-input readonly bordered id="readonlyExample">
     <span slot="label">Name</span>
     <span slot="helptext">Please enter your full name.</span>
@@ -537,7 +461,8 @@ In this example, the user is able to programmatically change the value of the in
 
 ```html
 <auro-button id="setReadonlyValueBtn">Set Value to Auro Alaska</auro-button>
-<auro-button id="resetReadonlyValueBtn">Reset</auro-button>
+<auro-button id="resetReadonlyValueBtn">Reset</auro-button>
+<br /><br />
 <auro-input readonly bordered id="readonlyExample">
   <span slot="label">Name</span>
   <span slot="helptext">Please enter your full name.</span>
@@ -567,13 +492,9 @@ export function setReadonlyValue() {
 ### Active Label <a name="activeLabel"></a>
 Example use cases for auro-input support the `activeLabel` attribute. If set, the label will stay fixed in the active position.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/activeLabel.html) -->
   <!-- The below content is automatically added from ../apiExamples/activeLabel.html -->
-  <auro-input activeLabel>
-    <slot slot="label">Address</slot>
-    <slot slot="helptext">Please enter your home address.</slot>
-  </auro-input>
   <auro-input activeLabel bordered>
     <slot slot="label">Address</slot>
     <slot slot="helptext">Please enter your home address.</slot>
@@ -586,10 +507,6 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
 <!-- The below code snippet is automatically added from ../apiExamples/activeLabel.html -->
 
 ```html
-<auro-input activeLabel>
-  <slot slot="label">Address</slot>
-  <slot slot="helptext">Please enter your home address.</slot>
-</auro-input>
 <auro-input activeLabel bordered>
   <slot slot="label">Address</slot>
   <slot slot="helptext">Please enter your home address.</slot>
@@ -601,13 +518,9 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
 ### Disable auto-validation <a name="noValidate"></a>
 For use cases where the field is `required`, but live validation is not wanted, use the `noValidate` attribute.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/noValidate.html) -->
   <!-- The below content is automatically added from ../apiExamples/noValidate.html -->
-  <auro-input noValidate required>
-    <slot slot="label">Address</slot>
-    <slot slot="helptext">Please enter your home address.</slot>
-  </auro-input>
   <auro-input noValidate required bordered>
     <slot slot="label">Address</slot>
     <slot slot="helptext">Please enter your home address.</slot>
@@ -620,10 +533,6 @@ For use cases where the field is `required`, but live validation is not wanted,
 <!-- The below code snippet is automatically added from ../apiExamples/noValidate.html -->
 
 ```html
-<auro-input noValidate required>
-  <slot slot="label">Address</slot>
-  <slot slot="helptext">Please enter your home address.</slot>
-</auro-input>
 <auro-input noValidate required bordered>
   <slot slot="label">Address</slot>
   <slot slot="helptext">Please enter your home address.</slot>
@@ -643,12 +552,9 @@ 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 exampleWrapper--flex">
+<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>
-  </auro-input>
   <auro-input required bordered placeholder="John Doe">
     <span slot="label">Full name</span>
     <span slot="helptext">Please enter your full name.</span>
@@ -661,9 +567,6 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
 <!-- The below code snippet is automatically added from ../apiExamples/required.html -->
 
 ```html
-<auro-input required placeholder="John Doe">
-  <span slot="label">Full name</span>
-</auro-input>
 <auro-input required bordered placeholder="John Doe">
   <span slot="label">Full name</span>
   <span slot="helptext">Please enter your full name.</span>
@@ -675,13 +578,9 @@ When the validity check fails, the validityState equals `valueMissing`. The erro
 ### Validation on input <a name="validateOnInput"></a>
 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 exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/validateOnInput.html) -->
   <!-- The below content is automatically added from ../apiExamples/validateOnInput.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-input validateOnInput bordered 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>
@@ -694,10 +593,6 @@ Use the `validateOnInput` attribute to enable live validation on the `input` eve
 <!-- The below code snippet is automatically added from ../apiExamples/validateOnInput.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>
 <auro-input validateOnInput bordered 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>
@@ -711,13 +606,9 @@ 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 exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/setCustomValidity.html) -->
   <!-- The below content is automatically added from ../apiExamples/setCustomValidity.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-input bordered 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>
@@ -730,10 +621,6 @@ The `setCustomValidity` attribute can be used to set a custom string for all val
 <!-- The below code snippet is automatically added from ../apiExamples/setCustomValidity.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>
 <auro-input bordered 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>
@@ -751,8 +638,9 @@ A custom error message can be set using the `error` attribute, or it can be used
   <!-- 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>
-  <auro-input id="setCustomErrorExample" error="Initial error attribute value">
+  <auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
+  <br /><br />
+  <auro-input id="setCustomErrorExample" error="Initial error attribute value" bordered>
     <span slot="label">Name</span>
     <span slot="helptext">Please enter your full name.</span>
   </auro-input>
@@ -765,8 +653,9 @@ A custom error message can be set using the `error` attribute, or it can be used
 
 ```html
 <auro-button id="setCustomErrorBtn">Set Custom Error</auro-button>
-<auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
-<auro-input id="setCustomErrorExample" error="Initial error attribute value">
+<auro-button id="setCustomErrorClearBtn">Clear Custom Error</auro-button>
+<br /><br />
+<auro-input id="setCustomErrorExample" error="Initial error attribute value" bordered>
   <span slot="label">Name</span>
   <span slot="helptext">Please enter your full name.</span>
 </auro-input>
@@ -800,12 +689,9 @@ 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 exampleWrapper--flex">
+<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="label">Password</span>
-  </auro-input>
   <auro-input type="password" required bordered>
     <span slot="label">Password</span>
     <span slot="helptext">Please enter a secure password.</span>
@@ -818,9 +704,6 @@ Default help text will be added to the input `type="password"` if custom help te
 <!-- The below code snippet is automatically added from ../apiExamples/password.html -->
 
 ```html
-<auro-input type="password" required>
-  <span slot="label">Password</span>
-</auro-input>
 <auro-input type="password" required bordered>
   <span slot="label">Password</span>
   <span slot="helptext">Please enter a secure password.</span>
@@ -835,13 +718,10 @@ 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 exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/email.html) -->
   <!-- The below content is automatically added from ../apiExamples/email.html -->
-  <auro-input required type="email">
-    <slot slot="label">Email address</slot>
-  </auro-input>
-  <auro-input bordered required type="email">
+  <auro-input type="email" bordered required>
     <slot slot="label">Email address</slot>
     <slot slot="helptext">Please enter your email address.</slot>
   </auro-input>
@@ -853,10 +733,7 @@ Default help text will be added to the input `type="email"` if custom help text
 <!-- The below code snippet is automatically added from ../apiExamples/email.html -->
 
 ```html
-<auro-input required type="email">
-  <slot slot="label">Email address</slot>
-</auro-input>
-<auro-input bordered required type="email">
+<auro-input type="email" bordered required>
   <slot slot="label">Email address</slot>
   <slot slot="helptext">Please enter your email address.</slot>
 </auro-input>
@@ -870,14 +747,10 @@ 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 exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/number.html) -->
   <!-- The below content is automatically added from ../apiExamples/number.html -->
-  <auro-input required type="number">
-    <slot slot="label">Number of Passengers</slot>
-    <slot slot="helptext">Please enter the number of passengers.</slot>
-  </auro-input>
-  <auro-input bordered required type="number">
+  <auro-input type="number" bordered required>
     <slot slot="label">Number of Passengers</slot>
     <slot slot="helptext">Please enter the number of passengers.</slot>
   </auro-input>
@@ -889,11 +762,7 @@ This `number` input type should only be used for incremental numeric values, mea
 <!-- The below code snippet is automatically added from ../apiExamples/number.html -->
 
 ```html
-<auro-input required type="number">
-  <slot slot="label">Number of Passengers</slot>
-  <slot slot="helptext">Please enter the number of passengers.</slot>
-</auro-input>
-<auro-input bordered required type="number">
+<auro-input type="number" bordered required>
   <slot slot="label">Number of Passengers</slot>
   <slot slot="helptext">Please enter the number of passengers.</slot>
 </auro-input>
@@ -907,13 +776,10 @@ 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 exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/creditCard.html) -->
   <!-- The below content is automatically added from ../apiExamples/creditCard.html -->
-  <auro-input required type="credit-card">
-    <slot slot="label">Card number</slot>
-  </auro-input>
-  <auro-input bordered required type="credit-card">
+  <auro-input type="credit-card" bordered required>
     <slot slot="label">Card number</slot>
     <slot slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</slot>
   </auro-input>
@@ -925,10 +791,7 @@ Default help text will be added to the input `type="credit-card"` if custom help
 <!-- The below code snippet is automatically added from ../apiExamples/creditCard.html -->
 
 ```html
-<auro-input required type="credit-card">
-  <slot slot="label">Card number</slot>
-</auro-input>
-<auro-input bordered required type="credit-card">
+<auro-input type="credit-card" bordered required>
   <slot slot="label">Card number</slot>
   <slot slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</slot>
 </auro-input>
@@ -939,13 +802,10 @@ 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 exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/creditCardIcon.html) -->
   <!-- The below content is automatically added from ../apiExamples/creditCardIcon.html -->
-  <auro-input required icon type="credit-card">
-    <slot slot="label">Card number</slot>
-  </auro-input>
-  <auro-input bordered required icon type="credit-card">
+  <auro-input icon type="credit-card" bordered required>
     <slot slot="label">Card number</slot>
     <slot slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</slot>
   </auro-input>
@@ -958,10 +818,7 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 <!-- The below code snippet is automatically added from ../apiExamples/creditCardIcon.html -->
 
 ```html
-<auro-input required icon type="credit-card">
-  <slot slot="label">Card number</slot>
-</auro-input>
-<auro-input bordered required icon type="credit-card">
+<auro-input icon type="credit-card" bordered required>
   <slot slot="label">Card number</slot>
   <slot slot="helptext">Valid credit card numbers must include 16 digits (15 for Amex).</slot>
 </auro-input>
@@ -973,13 +830,10 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i
 
 Use the `type="month-day-year"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthDayYear.html) -->
   <!-- The below content is automatically added from ../apiExamples/monthDayYear.html -->
-  <auro-input type="month-day-year" required>
-    <slot slot="label">Departure date</slot>
-  </auro-input>
-  <auro-input bordered type="month-day-year">
+  <auro-input type="month-day-year" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -990,10 +844,7 @@ Use the `type="month-day-year"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/monthDayYear.html -->
 
 ```html
-<auro-input type="month-day-year" required>
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="month-day-year">
+<auro-input type="month-day-year" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -1001,13 +852,10 @@ Use the `type="month-day-year"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="month-year"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthYear.html) -->
   <!-- The below content is automatically added from ../apiExamples/monthYear.html -->
-  <auro-input type="month-year">
-    <slot slot="label">Departure date</slot>
-  </auro-input>
-  <auro-input bordered type="month-year" required>
+  <auro-input type="month-year" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1018,10 +866,7 @@ Use the `type="month-year"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/monthYear.html -->
 
 ```html
-<auro-input type="month-year">
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="month-year" required>
+<auro-input type="month-year" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -1029,13 +874,10 @@ Use the `type="month-year"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="month-fullYear"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/monthFullYear.html) -->
   <!-- The below content is automatically added from ../apiExamples/monthFullYear.html -->
-  <auro-input type="month-fullYear">
-    <slot slot="label">Departure date</slot>
-  </auro-input>
-  <auro-input bordered type="month-fullYear" required>
+  <auro-input type="month-fullYear" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1046,10 +888,7 @@ Use the `type="month-fullYear"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/monthFullYear.html -->
 
 ```html
-<auro-input type="month-fullYear">
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="month-fullYear" required>
+<auro-input type="month-fullYear" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -1057,13 +896,10 @@ Use the `type="month-fullYear"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="year-month-day"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/yearMonthDay.html) -->
   <!-- The below content is automatically added from ../apiExamples/yearMonthDay.html -->
-  <auro-input type="year-month-day" required>
-    <slot slot="label">Departure date</slot>
-  </auro-input>
-  <auro-input bordered type="year-month-day">
+  <auro-input type="year-month-day" bordered>
     <slot slot="label">Arrival date</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1074,10 +910,7 @@ Use the `type="year-month-day"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/yearMonthDay.html -->
 
 ```html
-<auro-input type="year-month-day" required>
-  <slot slot="label">Departure date</slot>
-</auro-input>
-<auro-input bordered type="year-month-day">
+<auro-input type="year-month-day" bordered>
   <slot slot="label">Arrival date</slot>
 </auro-input>
 ```
@@ -1085,10 +918,10 @@ Use the `type="year-month-day"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="month"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/month.html) -->
   <!-- The below content is automatically added from ../apiExamples/month.html -->
-  <auro-input type="month">
+  <auro-input type="month" bordered>
     <slot slot="label">Month</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1099,7 +932,7 @@ Use the `type="month"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/month.html -->
 
 ```html
-<auro-input type="month">
+<auro-input type="month" bordered>
   <slot slot="label">Month</slot>
 </auro-input>
 ```
@@ -1107,10 +940,10 @@ Use the `type="month"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="year"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/year.html) -->
   <!-- The below content is automatically added from ../apiExamples/year.html -->
-  <auro-input type="year">
+  <auro-input type="year" bordered>
     <slot slot="label">Year</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1121,7 +954,7 @@ Use the `type="year"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/year.html -->
 
 ```html
-<auro-input type="year">
+<auro-input type="year" bordered>
   <slot slot="label">Year</slot>
 </auro-input>
 ```
@@ -1129,10 +962,10 @@ Use the `type="year"` attribute for a date formatted input.
 </auro-accordion>
 Use the `type="fullYear"` attribute for a date formatted input.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/fullYear.html) -->
   <!-- The below content is automatically added from ../apiExamples/fullYear.html -->
-  <auro-input type="fullYear">
+  <auro-input type="fullYear" bordered>
     <slot slot="label">Full Year</slot>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -1143,7 +976,7 @@ Use the `type="fullYear"` attribute for a date formatted input.
 <!-- The below code snippet is automatically added from ../apiExamples/fullYear.html -->
 
 ```html
-<auro-input type="fullYear">
+<auro-input type="fullYear" bordered>
   <slot slot="label">Full Year</slot>
 </auro-input>
 ```
@@ -1160,7 +993,7 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/resetState.html) -->
   <!-- The below content is automatically added from ../apiExamples/resetState.html -->
   <auro-button id="resetStateBtn">Reset</auro-button>
-  <br /><br />
+  <br /><br />
   <auro-input id="resetStateExample" bordered minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
     <slot slot="label">Full Name</slot>
     <slot slot="helptext">Please enter your full name.</slot>
@@ -1174,7 +1007,7 @@ Use the `reset()` method to reset the `<auro-input>`'s `value` and `validity` st
 
 ```html
 <auro-button id="resetStateBtn">Reset</auro-button>
-<br /><br />
+<br /><br />
 <auro-input id="resetStateExample" bordered minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
   <slot slot="label">Full Name</slot>
   <slot slot="helptext">Please enter your full name.</slot>
@@ -1200,7 +1033,7 @@ export function resetStateExample() {
 
 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 exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/swapValue.html) -->
   <!-- The below content is automatically added from ../apiExamples/swapValue.html -->
   <auro-input id="swapExampleLeft" bordered>