@aurodesignsystem-dev/auro-formkit 0.0.0-pr788.0 → 0.0.0-pr792.0

package/components/select/demo/api.md

@@ -48,9 +48,7 @@ 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
@@ -66,7 +64,6 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | Name                      | Description                                      |
 |---------------------------|--------------------------------------------------|
 |                           | Default slot for the menu content.               |
-| `ariaLabel.close`         | Sets aria-label on close button in fullscreen bib |
 | `bib.fullscreen.headline` | Defines the headline to display above menu-options |
 | [displayValue](#displayValue)            | Allows custom HTML content to display the selected value when select is not focused. |
 | [helpText](#helpText)                | Defines the content of the helpText.             |
@@ -91,7 +88,6 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-select>
-    <span slot="ariaLabel.close">Close Popup</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Select Example</span>
     <auro-menu>
@@ -129,7 +125,6 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements.
 
 ```html
 <auro-select>
-  <span slot="ariaLabel.close">Close Popup</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Select Example</span>
   <auro-menu>
@@ -413,9 +408,10 @@ 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." placeholder="Placeholder Text">
+  <auro-select required setCustomValidityValueMissing="Custom required validation error message.">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <span slot="label">required field</span>
+    <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -433,9 +429,10 @@ 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." placeholder="Placeholder Text">
+<auro-select required setCustomValidityValueMissing="Custom required validation error message.">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <span slot="label">required field</span>
+  <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -499,9 +496,10 @@ 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" placeholder="Placeholder Text">
+  <auro-select error="Custom error message">
+    <span slot="label">error select example</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -516,9 +514,10 @@ 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" placeholder="Placeholder Text">
+  <auro-select onDark error="Custom error message">
+    <span slot="label">error select example</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -536,9 +535,10 @@ 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" placeholder="Placeholder Text">
+<auro-select error="Custom error message">
+  <span slot="label">error select example</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -552,9 +552,10 @@ 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" placeholder="Placeholder Text">
+<auro-select onDark error="Custom error message">
+  <span slot="label">error select example</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -573,9 +574,10 @@ 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 placeholder="Placeholder Text">
+  <auro-select disabled>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">disabled select example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -590,9 +592,10 @@ 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 placeholder="Placeholder Text">
+  <auro-select onDark disabled>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">disabled select example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -610,9 +613,10 @@ 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 placeholder="Placeholder Text">
+<auro-select disabled>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">disabled select example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -626,9 +630,10 @@ 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 placeholder="Placeholder Text">
+<auro-select onDark disabled>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">disabled select example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -685,9 +690,10 @@ 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" placeholder="Placeholder Text">
+  <auro-select flexMenuWidth id="flexMenuWidthExample">
+    <span slot="label">flexMenuWidth select example</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
     <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>
@@ -709,9 +715,10 @@ 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" placeholder="Placeholder Text">
+<auro-select flexMenuWidth id="flexMenuWidthExample">
+  <span slot="label">flexMenuWidth select example</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
   <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>
@@ -779,10 +786,11 @@ 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 placeholder="Placeholder Text">
+  <auro-select>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
     <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>
@@ -800,10 +808,11 @@ 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 placeholder="Placeholder Text">
+<auro-select>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
   <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>
@@ -828,9 +837,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" placeholder="Placeholder Text">
+  <auro-select id="resetStateExample" value="price">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -851,9 +860,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" placeholder="Placeholder Text">
+<auro-select id="resetStateExample" value="price">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -888,9 +897,10 @@ 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" placeholder="Placeholder Text">
+  <auro-select id="valueExtraction">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Select Example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -909,9 +919,10 @@ 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" placeholder="Placeholder Text">
+<auro-select id="valueExtraction">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -950,9 +961,10 @@ 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" placeholder="Placeholder Text">
+  <auro-select id="primaryError">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
+    <span slot="label">Select Example</span>
     <auro-menu>
       <auro-menuoption value="1">1</auro-menuoption>
       <auro-menuoption value="2">2</auro-menuoption>
@@ -970,9 +982,10 @@ 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" placeholder="Placeholder Text">
+<auro-select id="primaryError">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
+  <span slot="label">Select Example</span>
   <auro-menu>
     <auro-menuoption value="1">1</auro-menuoption>
     <auro-menuoption value="2">2</auro-menuoption>
@@ -1359,9 +1372,10 @@ 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" placeholder="Placeholder Text">
+  <auro-select id="valueAlert">
+    <span slot="label">Select Example</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <span slot="label">Label</span>
+    <label slot="placeholder">Placeholder Text</label>
     <auro-menu id="valueAlertMenu">
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -1379,9 +1393,10 @@ 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" placeholder="Placeholder Text">
+<auro-select id="valueAlert">
+  <span slot="label">Select Example</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <span slot="label">Label</span>
+  <label slot="placeholder">Placeholder Text</label>
   <auro-menu id="valueAlertMenu">
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>