@aurodesignsystem-dev/auro-formkit 0.0.0-pr798.0 → 0.0.0-pr800.1

package/components/select/demo/api.md

@@ -23,7 +23,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [forceDisplayValue](#forceDisplayValue)             | `forceDisplayValue`             | `boolean`                         | false          | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. |
 | [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. |
-| [layout](#layout)                        |                                 | `string`                          | "snowflake"    |                                                  |
+| [layout](#layout)                        |                                 | `string`                          |                |                                                  |
 | [matchWidth](#matchWidth)                    | `matchWidth`                    | `boolean`                         | false          | If declared, the popover and trigger will be set to the same width. |
 | [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.                 |
@@ -39,8 +39,6 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`                          |                | Sets a custom help text message to display for all validityStates. |
 | [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`                          |                | Custom help text message to display when validity = `customError`. |
 | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`                          |                | Custom help text message to display when validity = `valueMissing`. |
-| [shape](#shape)                         |                                 | `string`                          | "snowflake"    |                                                  |
-| [size](#size)                          |                                 | `string`                          | "xl"           |                                                  |
 | [validity](#validity)                      | `validity`                      | `string`                          |                | Specifies the `validityState` this element is in. |
 | [value](#value)                         | `value`                         | `string`                          |                | Value selected for the component.                |
 
@@ -48,7 +46,9 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
+| [hideBib](#hideBib)  | `(): void`                             | Hides the dropdown bib if its open.              |
 | [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [showBib](#showBib)  | `(): void`                             | Shows the dropdown bib if there are options to show. |
 | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
@@ -411,10 +411,9 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/required.html) -->
   <!-- The below content is automatically added from ./../apiExamples/required.html -->
-  <auro-select required setCustomValidityValueMissing="Custom required validation error message.">
+  <auro-select required setCustomValidityValueMissing="Custom required validation error message." placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">required field</span>
-    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -432,10 +431,9 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 <!-- The below code snippet is automatically added from ./../apiExamples/required.html -->
 
 ```html
-<auro-select required setCustomValidityValueMissing="Custom required validation error message.">
+<auro-select required setCustomValidityValueMissing="Custom required validation error message." placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">required field</span>
-  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -499,10 +497,9 @@ Use the `error` boolean attribute to toggle the error UI.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/error.html -->
-  <auro-select error="Custom error message">
-    <span slot="label">error select example</span>
+  <auro-select error="Custom error message" placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -517,10 +514,9 @@ Use the `error` boolean attribute to toggle the error UI.
 <div class="exampleWrapper--ondark" aria-hidden>
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
   <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
-  <auro-select onDark error="Custom error message">
-    <span slot="label">error select example</span>
+  <auro-select onDark error="Custom error message" placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -538,10 +534,9 @@ Use the `error` boolean attribute to toggle the error UI.
 <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
 
 ```html
-<auro-select error="Custom error message">
-  <span slot="label">error select example</span>
+<auro-select error="Custom error message" placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -555,10 +550,9 @@ Use the `error` boolean attribute to toggle the error UI.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkError.html) -->
 <!-- The below content is automatically added from ./../apiExamples/onDarkError.html -->
-<auro-select onDark error="Custom error message">
-  <span slot="label">error select example</span>
+<auro-select onDark error="Custom error message" placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -577,10 +571,9 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
   <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
-  <auro-select disabled>
+  <auro-select disabled placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
-    <span slot="label">disabled select example</span>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -595,10 +588,9 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 <div class="exampleWrapper--ondark" aria-hidden>
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
   <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
-  <auro-select onDark disabled>
+  <auro-select onDark disabled placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
-    <span slot="label">disabled select example</span>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -616,10 +608,9 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 <!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
 
 ```html
-<auro-select disabled>
+<auro-select disabled placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
-  <span slot="label">disabled select example</span>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -633,10 +624,9 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDisabled.html) -->
 <!-- The below content is automatically added from ./../apiExamples/onDarkDisabled.html -->
-<auro-select onDark disabled>
+<auro-select onDark disabled placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
-  <span slot="label">disabled select example</span>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -693,10 +683,9 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-sele
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/flexMenuWidth.html) -->
   <!-- The below content is automatically added from ../apiExamples/flexMenuWidth.html -->
-  <auro-select flexMenuWidth id="flexMenuWidthExample">
-    <span slot="label">flexMenuWidth select example</span>
+  <auro-select flexMenuWidth id="flexMenuWidthExample" placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
       <auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
@@ -718,10 +707,9 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-sele
 <!-- The below code snippet is automatically added from ../apiExamples/flexMenuWidth.html -->
 
 ```html
-<auro-select flexMenuWidth id="flexMenuWidthExample">
-  <span slot="label">flexMenuWidth select example</span>
+<auro-select flexMenuWidth id="flexMenuWidthExample" placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="united states">United States has a country code of (+1)</auro-menuoption>
     <auro-menuoption value="costa rica">Costa Rica has a country code of (+506)</auro-menuoption>
@@ -789,11 +777,10 @@ Use the `helpText` slot to provide additional information back to your user abou
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/helpText.html) -->
   <!-- The below content is automatically added from ./../apiExamples/helpText.html -->
-  <auro-select>
+  <auro-select placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Label</span>
     <span slot="helpText">Custom help text message.</span>
-    <span slot="label">helpText select example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -811,11 +798,10 @@ Use the `helpText` slot to provide additional information back to your user abou
 <!-- The below code snippet is automatically added from ./../apiExamples/helpText.html -->
 
 ```html
-<auro-select>
+<auro-select placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Label</span>
   <span slot="helpText">Custom help text message.</span>
-  <span slot="label">helpText select example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -840,9 +826,9 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
   <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
   <auro-button id="resetStateBtn">Reset</auro-button>
   <br/><br/>
-  <auro-select id="resetStateExample" value="price">
+  <auro-select id="resetStateExample" value="price" placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Label</span>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -863,9 +849,9 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
 ```html
 <auro-button id="resetStateBtn">Reset</auro-button>
 <br/><br/>
-<auro-select id="resetStateExample" value="price">
+<auro-select id="resetStateExample" value="price" placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Label</span>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -900,10 +886,9 @@ The following example illustrates how a user may query the `element.value` or `e
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueExtraction.html) -->
   <!-- The below content is automatically added from ./../apiExamples/valueExtraction.html -->
-  <auro-select id="valueExtraction">
+  <auro-select id="valueExtraction" placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
-    <span slot="label">Select Example</span>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -922,10 +907,9 @@ The following example illustrates how a user may query the `element.value` or `e
 <!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.html -->
 
 ```html
-<auro-select id="valueExtraction">
+<auro-select id="valueExtraction" placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
-  <span slot="label">Select Example</span>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -964,10 +948,9 @@ This example programmatically adds the `error` state when a user selects an opti
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customErrorValidity.html) -->
   <!-- The below content is automatically added from ./../apiExamples/customErrorValidity.html -->
-  <auro-select id="primaryError">
+  <auro-select id="primaryError" placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
-    <span slot="label">Select Example</span>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="1">1</auro-menuoption>
       <auro-menuoption value="2">2</auro-menuoption>
@@ -985,10 +968,9 @@ This example programmatically adds the `error` state when a user selects an opti
 <!-- The below code snippet is automatically added from ./../apiExamples/customErrorValidity.html -->
 
 ```html
-<auro-select id="primaryError">
+<auro-select id="primaryError" placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
-  <span slot="label">Select Example</span>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="1">1</auro-menuoption>
     <auro-menuoption value="2">2</auro-menuoption>
@@ -1375,10 +1357,9 @@ The following example listens for the `auroMenu-selectedOption` event. Once trig
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueAlert.html) -->
   <!-- The below content is automatically added from ./../apiExamples/valueAlert.html -->
-  <auro-select id="valueAlert">
-    <span slot="label">Select Example</span>
+  <auro-select id="valueAlert" placeholder="Placeholder Text">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Label</span>
     <auro-menu id="valueAlertMenu">
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -1396,10 +1377,9 @@ The following example listens for the `auroMenu-selectedOption` event. Once trig
 <!-- The below code snippet is automatically added from ./../apiExamples/valueAlert.html -->
 
 ```html
-<auro-select id="valueAlert">
-  <span slot="label">Select Example</span>
+<auro-select id="valueAlert" placeholder="Placeholder Text">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Label</span>
   <auro-menu id="valueAlertMenu">
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>