@aurodesignsystem-dev/auro-formkit 0.0.0-pr622.1 → 0.0.0-pr624.1

package/components/select/demo/api.md

@@ -17,12 +17,14 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | Property                        | Attribute                       | Type      | Default        | Description                                      |
 |---------------------------------|---------------------------------|-----------|----------------|--------------------------------------------------|
 | [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean` | "false"        | If declared, bib's position will be automatically calculated where to appear. |
+| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`  |                | If declared, sets the autocomplete attribute for the select element. |
 | [disabled](#disabled)                      | `disabled`                      | `boolean` |                | When attribute is present, element shows disabled state. |
 | [error](#error)                         | `error`                         | `string`  |                | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean` |                | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`  | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
 | [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
 | [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean` |                | Sets multi-select mode, allowing multiple options to be selected at once. |
+| [name](#name)                          | `name`                          | `string`  |                | The name for the select element.                 |
 | [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean` |                | When true, checkmark on selected option will no longer be present. |
 | [noFlip](#noFlip)                        | `noFlip`                        | `boolean` | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
 | [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |                | If set, disables auto-validation on blur.        |
@@ -215,6 +217,182 @@ export function valueExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Autocomplete <a name="autocomplete"></a>
+Use the `autocomplete` attribute to let browser's know what information to use to fill out the form.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autocomplete.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/autocomplete.html -->
+  <div class="autofill-example-form">
+    <div class="input-row">
+      <auro-input autocomplete="given-name">
+        <span slot="label">First Name</span>
+        <span slot="bib.fullscreen.headline">First Name</span>
+      </auro-input>
+      <auro-input autocomplete="family-name">
+        <span slot="label">Last Name</span>
+        <span slot="bib.fullscreen.headline">Last Name</span>
+      </auro-input>
+    </div>
+    <div class="input-row">
+      <auro-input autocomplete="address-line1">
+        <span slot="label">Street Address</span>
+        <span slot="bib.fullscreen.headline">Street Address</span>
+      </auro-input>
+      <auro-input autocomplete="address-level2">
+        <span slot="label">City</span>
+        <span slot="bib.fullscreen.headline">City</span>
+      </auro-input>
+      <auro-select autocomplete="address-level1">
+        <span slot="bib.fullscreen.headline">Select Your State</span>
+        <span slot="label">Select Your State</span>
+        <auro-menu>
+          <auro-menuoption value="AL">Alabama</auro-menuoption>
+          <auro-menuoption value="AK">Alaska</auro-menuoption>
+          <auro-menuoption value="AZ">Arizona</auro-menuoption>
+          <auro-menuoption value="AR">Arkansas</auro-menuoption>
+          <auro-menuoption value="CA">California</auro-menuoption>
+          <auro-menuoption value="CO">Colorado</auro-menuoption>
+          <auro-menuoption value="CT">Connecticut</auro-menuoption>
+          <auro-menuoption value="DE">Delaware</auro-menuoption>
+          <auro-menuoption value="DC">District of Columbia</auro-menuoption>
+          <auro-menuoption value="FL">Florida</auro-menuoption>
+          <auro-menuoption value="GA">Georgia</auro-menuoption>
+          <auro-menuoption value="HI">Hawaii</auro-menuoption>
+          <auro-menuoption value="ID">Idaho</auro-menuoption>
+          <auro-menuoption value="IL">Illinois</auro-menuoption>
+          <auro-menuoption value="IN">Indiana</auro-menuoption>
+          <auro-menuoption value="IA">Iowa</auro-menuoption>
+          <auro-menuoption value="KS">Kansas</auro-menuoption>
+          <auro-menuoption value="KY">Kentucky</auro-menuoption>
+          <auro-menuoption value="LA">Louisiana</auro-menuoption>
+          <auro-menuoption value="ME">Maine</auro-menuoption>
+          <auro-menuoption value="MD">Maryland</auro-menuoption>
+          <auro-menuoption value="MA">Massachusetts</auro-menuoption>
+          <auro-menuoption value="MI">Michigan</auro-menuoption>
+          <auro-menuoption value="MN">Minnesota</auro-menuoption>
+          <auro-menuoption value="MS">Mississippi</auro-menuoption>
+          <auro-menuoption value="MO">Missouri</auro-menuoption>
+          <auro-menuoption value="MT">Montana</auro-menuoption>
+          <auro-menuoption value="NE">Nebraska</auro-menuoption>
+          <auro-menuoption value="NV">Nevada</auro-menuoption>
+          <auro-menuoption value="NH">New Hampshire</auro-menuoption>
+          <auro-menuoption value="NJ">New Jersey</auro-menuoption>
+          <auro-menuoption value="NM">New Mexico</auro-menuoption>
+          <auro-menuoption value="NY">New York</auro-menuoption>
+          <auro-menuoption value="NC">North Carolina</auro-menuoption>
+          <auro-menuoption value="ND">North Dakota</auro-menuoption>
+          <auro-menuoption value="OH">Ohio</auro-menuoption>
+          <auro-menuoption value="OK">Oklahoma</auro-menuoption>
+          <auro-menuoption value="OR">Oregon</auro-menuoption>
+          <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
+          <auro-menuoption value="RI">Rhode Island</auro-menuoption>
+          <auro-menuoption value="SC">South Carolina</auro-menuoption>
+          <auro-menuoption value="SD">South Dakota</auro-menuoption>
+          <auro-menuoption value="TN">Tennessee</auro-menuoption>
+          <auro-menuoption value="TX">Texas</auro-menuoption>
+          <auro-menuoption value="UT">Utah</auro-menuoption>
+          <auro-menuoption value="VT">Vermont</auro-menuoption>
+          <auro-menuoption value="VA">Virginia</auro-menuoption>
+          <auro-menuoption value="WA">Washington</auro-menuoption>
+          <auro-menuoption value="WV">West Virginia</auro-menuoption>
+          <auro-menuoption value="WI">Wisconsin</auro-menuoption>
+          <auro-menuoption value="WY">Wyoming</auro-menuoption>
+        </auro-menu>
+      </auro-select>
+    </div>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autocomplete.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/autocomplete.html -->
+
+```html
+<div class="autofill-example-form">
+  <div class="input-row">
+    <auro-input autocomplete="given-name">
+      <span slot="label">First Name</span>
+      <span slot="bib.fullscreen.headline">First Name</span>
+    </auro-input>
+    <auro-input autocomplete="family-name">
+      <span slot="label">Last Name</span>
+      <span slot="bib.fullscreen.headline">Last Name</span>
+    </auro-input>
+  </div>
+  <div class="input-row">
+    <auro-input autocomplete="address-line1">
+      <span slot="label">Street Address</span>
+      <span slot="bib.fullscreen.headline">Street Address</span>
+    </auro-input>
+    <auro-input autocomplete="address-level2">
+      <span slot="label">City</span>
+      <span slot="bib.fullscreen.headline">City</span>
+    </auro-input>
+    <auro-select autocomplete="address-level1">
+      <span slot="bib.fullscreen.headline">Select Your State</span>
+      <span slot="label">Select Your State</span>
+      <auro-menu>
+        <auro-menuoption value="AL">Alabama</auro-menuoption>
+        <auro-menuoption value="AK">Alaska</auro-menuoption>
+        <auro-menuoption value="AZ">Arizona</auro-menuoption>
+        <auro-menuoption value="AR">Arkansas</auro-menuoption>
+        <auro-menuoption value="CA">California</auro-menuoption>
+        <auro-menuoption value="CO">Colorado</auro-menuoption>
+        <auro-menuoption value="CT">Connecticut</auro-menuoption>
+        <auro-menuoption value="DE">Delaware</auro-menuoption>
+        <auro-menuoption value="DC">District of Columbia</auro-menuoption>
+        <auro-menuoption value="FL">Florida</auro-menuoption>
+        <auro-menuoption value="GA">Georgia</auro-menuoption>
+        <auro-menuoption value="HI">Hawaii</auro-menuoption>
+        <auro-menuoption value="ID">Idaho</auro-menuoption>
+        <auro-menuoption value="IL">Illinois</auro-menuoption>
+        <auro-menuoption value="IN">Indiana</auro-menuoption>
+        <auro-menuoption value="IA">Iowa</auro-menuoption>
+        <auro-menuoption value="KS">Kansas</auro-menuoption>
+        <auro-menuoption value="KY">Kentucky</auro-menuoption>
+        <auro-menuoption value="LA">Louisiana</auro-menuoption>
+        <auro-menuoption value="ME">Maine</auro-menuoption>
+        <auro-menuoption value="MD">Maryland</auro-menuoption>
+        <auro-menuoption value="MA">Massachusetts</auro-menuoption>
+        <auro-menuoption value="MI">Michigan</auro-menuoption>
+        <auro-menuoption value="MN">Minnesota</auro-menuoption>
+        <auro-menuoption value="MS">Mississippi</auro-menuoption>
+        <auro-menuoption value="MO">Missouri</auro-menuoption>
+        <auro-menuoption value="MT">Montana</auro-menuoption>
+        <auro-menuoption value="NE">Nebraska</auro-menuoption>
+        <auro-menuoption value="NV">Nevada</auro-menuoption>
+        <auro-menuoption value="NH">New Hampshire</auro-menuoption>
+        <auro-menuoption value="NJ">New Jersey</auro-menuoption>
+        <auro-menuoption value="NM">New Mexico</auro-menuoption>
+        <auro-menuoption value="NY">New York</auro-menuoption>
+        <auro-menuoption value="NC">North Carolina</auro-menuoption>
+        <auro-menuoption value="ND">North Dakota</auro-menuoption>
+        <auro-menuoption value="OH">Ohio</auro-menuoption>
+        <auro-menuoption value="OK">Oklahoma</auro-menuoption>
+        <auro-menuoption value="OR">Oregon</auro-menuoption>
+        <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
+        <auro-menuoption value="RI">Rhode Island</auro-menuoption>
+        <auro-menuoption value="SC">South Carolina</auro-menuoption>
+        <auro-menuoption value="SD">South Dakota</auro-menuoption>
+        <auro-menuoption value="TN">Tennessee</auro-menuoption>
+        <auro-menuoption value="TX">Texas</auro-menuoption>
+        <auro-menuoption value="UT">Utah</auro-menuoption>
+        <auro-menuoption value="VT">Vermont</auro-menuoption>
+        <auro-menuoption value="VA">Virginia</auro-menuoption>
+        <auro-menuoption value="WA">Washington</auro-menuoption>
+        <auro-menuoption value="WV">West Virginia</auro-menuoption>
+        <auro-menuoption value="WI">Wisconsin</auro-menuoption>
+        <auro-menuoption value="WY">Wyoming</auro-menuoption>
+      </auro-menu>
+    </auro-select>
+  </div>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### required <a name="required"></a>
 When present, the `required` attribute specifies that a select field must be filled out before submitting the form.