@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.10

package/components/input/demo/index.md

@@ -1,21 +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>
-
 # Input
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
@@ -37,10 +19,9 @@ The `<auro-input>` element should be used in situations where users may:
 
 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 exampleWrapper--flex">
+<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>
@@ -50,7 +31,6 @@ The default component supports the basic input `type="text"` structure. The `(op
 <!-- 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 -->
@@ -60,13 +40,10 @@ The default component supports the basic input `type="text"` structure. The `(op
 
 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>
@@ -78,10 +55,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>
@@ -93,12 +67,9 @@ Use the `placeholder` attribute to add a custom placeholder message within the e
 
 Use the `disabled` 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>
@@ -110,9 +81,6 @@ Use the `disabled` 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>
@@ -127,10 +95,6 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th
 <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>
@@ -143,10 +107,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>
@@ -186,16 +146,12 @@ Use the `value` attribute to preset the value of the element.
 
 Use the `pattern` attribute to set custom input validation. This example also uses the `spellcheck` attribute set to `false` which in turn sets `autocorrect` to `off` and `autocapitalize` to `none`. Additionally the `maxlength` attribute sets the maximum length of characters that can be entered.
 
-The `<auro-input>` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityBadInput` attribute.
+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" setCustomValidityBadInput="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" setCustomValidityBadInput="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>
@@ -207,11 +163,7 @@ 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" setCustomValidityBadInput="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" setCustomValidityBadInput="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>
@@ -233,10 +185,9 @@ AuroInput.register('custom-input');
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-input>` element.
 
-<div class="exampleWrapper exampleWrapper--flex">
+<div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
   <!-- The below content is automatically added from ./../apiExamples/custom.html -->
-  <custom-input></custom-input>
   <custom-input bordered></custom-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -246,8 +197,7 @@ This will create a new custom element that you can use in your HTML that will fu
 <!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
 
 ```html
-<custom-input></custom-input>
 <custom-input bordered></custom-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>