@aurodesignsystem/auro-formkit 4.0.2 → 5.0.0

package/components/select/demo/index.md

@@ -21,6 +21,7 @@ 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.bib.close">Close Popup</span>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Select Example</span>
     <auro-menu>
@@ -58,6 +59,7 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
 
 ```html
 <auro-select>
+  <span slot="ariaLabel.bib.close">Close Popup</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Select Example</span>
   <auro-menu>
@@ -88,6 +90,358 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+## Shape | Size | Layout Support
+
+The `auro-select` component supports the `shape`, `size` and `layout` feature set. The component defaults to the `classic` shape and layout.
+
+### Supported Combinations
+
+#### Classic Layout (Legacy)
+
+The `classic` layout is default for `auro-select`. No customization is needed to achieve this look.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <auro-select>
+    <span slot="ariaLabel.bib.close">Close Popup</span>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Select Example</span>
+    <auro-menu>
+      <auro-menuoption value="stops">Stops</auro-menuoption>
+      <auro-menuoption value="price">Price</auro-menuoption>
+      <auro-menuoption value="duration">Duration</auro-menuoption>
+      <auro-menuoption value="departure">Departure</auro-menuoption>
+      <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+
+```html
+<auro-select>
+  <span slot="ariaLabel.bib.close">Close Popup</span>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">Select Example</span>
+  <auro-menu>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### Emphasized Layout
+
+The `emphasized` layout only supports `ondark` use.
+
+The `emphasized` layout supports the following shapes:
+- `pill`
+- `pill-left`
+- `pill-right`
+
+The `emphasized` layout supports the following sizes:
+- `xl`
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic-ondark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
+  <div>
+    <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
+      <span slot="ariaLabel.bib.close">Close Popup</span>
+      <span slot="label">Label</span>
+      <span slot="helpText">Help Text</span>
+      <auro-menu nocheckmark>
+        <auro-menuoption value="flights">
+          <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+        </auro-menuoption>
+        <auro-menuoption value="cars">
+          <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+        </auro-menuoption>
+        <auro-menuoption value="hotels">
+          <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+        </auro-menuoption>
+        <auro-menuoption value="packages">
+          <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+        </auro-menuoption>
+        <auro-menuoption value="cruises">
+          <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+        </auro-menuoption>
+      </auro-menu>
+    </auro-select>
+  </div>
+  <div style="display: flex; gap: 4px;">
+    <auro-select layout="emphasized" shape="pill-left" size="xl" ondark required style="width:300px;">
+      <span slot="label">Label</span>
+      <span slot="helpText">Help Text</span>
+      <auro-menu nocheckmark>
+        <auro-menuoption value="flights">
+          <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+        </auro-menuoption>
+        <auro-menuoption value="cars">
+          <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+        </auro-menuoption>
+        <auro-menuoption value="hotels">
+          <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+        </auro-menuoption>
+        <auro-menuoption value="packages">
+          <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+        </auro-menuoption>
+        <auro-menuoption value="cruises">
+          <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+        </auro-menuoption>
+      </auro-menu>
+    </auro-select>
+    <auro-select layout="emphasized" shape="pill-right" size="xl" ondark required style="width:300px;">
+      <span slot="label">Label</span>
+      <span slot="helpText">Help Text</span>
+      <auro-menu nocheckmark>
+        <auro-menuoption value="flights">
+          <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+        </auro-menuoption>
+        <auro-menuoption value="cars">
+          <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+        </auro-menuoption>
+        <auro-menuoption value="hotels">
+          <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+        </auro-menuoption>
+        <auro-menuoption value="packages">
+          <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+        </auro-menuoption>
+        <auro-menuoption value="cruises">
+          <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+        </auro-menuoption>
+      </auro-menu>
+    </auro-select>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
+
+```html
+<div>
+  <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
+</div>
+<div style="display: flex; gap: 4px;">
+  <auro-select layout="emphasized" shape="pill-left" size="xl" ondark required style="width:300px;">
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <auro-select layout="emphasized" shape="pill-right" size="xl" ondark required style="width:300px;">
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+#### Snowflake Layout
+
+The `snowflake` layout is a unique, one off layout that does not follow the normal pattern. There is only one way to use snowflake as shown in the following example.
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic-ondark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/snowflake/basic-ondark.html -->
+  <auro-select layout="snowflake" shape="snowflake" ondark required style="width:300px;">
+    <span slot="ariaLabel.bib.close">Close Popup</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic-ondark.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic-ondark.html -->
+
+```html
+<auro-select layout="snowflake" shape="snowflake" ondark required style="width:300px;">
+  <span slot="ariaLabel.bib.close">Close Popup</span>
+  <span slot="label">Label</span>
+  <span slot="helpText">Help Text</span>
+  <auro-menu nocheckmark>
+    <auro-menuoption value="flights">
+      <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
+    </auro-menuoption>
+    <auro-menuoption value="cars">
+      <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
+    </auro-menuoption>
+    <auro-menuoption value="hotels">
+      <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
+    </auro-menuoption>
+    <auro-menuoption value="packages">
+      <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
+    </auro-menuoption>
+    <auro-menuoption value="cruises">
+      <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
+    </auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+## Custom Value Display
+
+The `auro-select` supports the new formkit feature set enabling customized content displayed when a value is selected.
+
+e.g. You may have a menu option that reads "SeaTac International Airport". However, when that option is selected, you would like the value displayed in the auro-select to just be the airport code "SEA".
+
+The custom display value content is inserted using `slot="displayValue"` on each menu option. The `auro-select` component does not style or restrict the slotted content. It is the responsibility of the implementor to insure the content fits within the auro-select container and is styled appropriately.
+
+The following example demonstrates menu options with an icon and text. When selected, the auro-select renders an icon with no text.
+
+<div class="exampleWrapper--ondark">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/constantDisplayValue.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/emphasized/constantDisplayValue.html -->
+  <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
+    <span slot="label">Select Example</span>
+    <auro-menu nocheckmark>
+      <auro-menuoption value="flights">
+        <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cars">
+        <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="hotels">
+        <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="packages">
+        <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+      </auro-menuoption>
+      <auro-menuoption value="cruises">
+        <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+        <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+      </auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/constantDisplayValue.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/emphasized/constantDisplayValue.html -->
+
+```html
+<auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
+  <span slot="label">Select Example</span>
+  <auro-menu nocheckmark>
+    <auro-menuoption value="flights">
+      <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
+      <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
+    </auro-menuoption>
+    <auro-menuoption value="cars">
+      <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
+      <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
+    </auro-menuoption>
+    <auro-menuoption value="hotels">
+      <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
+      <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
+    </auro-menuoption>
+    <auro-menuoption value="packages">
+      <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
+      <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
+    </auro-menuoption>
+    <auro-menuoption value="cruises">
+      <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
+      <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
+    </auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## placeholder
 
 Use the `placeholder` slot to inject a custom placeholder option with the select element.
@@ -95,9 +449,9 @@ Use the `placeholder` slot to inject a custom placeholder option with the select
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customPlaceholder.html) -->
   <!-- The below content is automatically added from ./../apiExamples/customPlaceholder.html -->
-  <auro-select>
+  <auro-select placeholder="Please select your preferred option">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Please select your preferred option</label>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -115,9 +469,9 @@ Use the `placeholder` slot to inject a custom placeholder option with the select
 <!-- The below code snippet is automatically added from ./../apiExamples/customPlaceholder.html -->
 
 ```html
-<auro-select>
+<auro-select placeholder="Please select your preferred option">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
-  <label slot="placeholder">Please select your preferred option</label>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -138,11 +492,10 @@ The following example illustrates the use of the `label`, `placeholder` and `hel
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/slots.html) -->
   <!-- The below content is automatically added from ./../apiExamples/slots.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">Please choose a preference</span>
-    <span slot="helpText">Preferences are maintained for future use</span>
+    <span slot="label">Label</span>
+    <span slot="helpText">Help Text</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -160,11 +513,10 @@ The following example illustrates the use of the `label`, `placeholder` and `hel
 <!-- The below code snippet is automatically added from ./../apiExamples/slots.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">Please choose a preference</span>
-  <span slot="helpText">Preferences are maintained for future use</span>
+  <span slot="label">Label</span>
+  <span slot="helpText">Help Text</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -362,10 +714,9 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withIcons.html) -->
   <!-- The below content is automatically added from ./../apiExamples/withIcons.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">Select Example</span>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="air">
         <auro-icon label customColor category="health" name="air">Air</auro-icon>
@@ -392,10 +743,9 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
 <!-- The below code snippet is automatically added from ./../apiExamples/withIcons.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">Select Example</span>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="air">
       <auro-icon label customColor category="health" name="air">Air</auro-icon>
@@ -425,10 +775,9 @@ This example shows nesting `<auro-menu>` elements to create submenus.
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withSubmenus.html) -->
   <!-- The below content is automatically added from ./../apiExamples/withSubmenus.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">Select Example</span>
+    <span slot="label">Label</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -469,10 +818,9 @@ This example shows nesting `<auro-menu>` elements to create submenus.
 <!-- The below code snippet is automatically added from ./../apiExamples/withSubmenus.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">Select Example</span>
+  <span slot="label">Label</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -516,10 +864,9 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noCheckmark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/noCheckmark.html -->
-  <auro-select nocheckmark>
-      <span slot="bib.fullscreen.headline">Bib Headline</span>
-      <label slot="placeholder">Placeholder Text</label>
-      <span slot="label">nocheckmark Select Example</span>
+  <auro-select nocheckmark placeholder="Placeholder Text">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <span slot="label">Label</span>
       <auro-menu>
           <auro-menuoption value="stops">Stops</auro-menuoption>
           <auro-menuoption value="price">Price</auro-menuoption>
@@ -537,10 +884,9 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
 <!-- The below code snippet is automatically added from ./../apiExamples/noCheckmark.html -->
 
 ```html
-<auro-select nocheckmark>
-    <span slot="bib.fullscreen.headline">Bib Headline</span>
-    <label slot="placeholder">Placeholder Text</label>
-    <span slot="label">nocheckmark Select Example</span>
+<auro-select nocheckmark placeholder="Placeholder Text">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <span slot="label">Label</span>
     <auro-menu>
         <auro-menuoption value="stops">Stops</auro-menuoption>
         <auro-menuoption value="price">Price</auro-menuoption>
@@ -563,10 +909,9 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customBibHeight.html) -->
   <!-- The below content is automatically added from ../apiExamples/customBibHeight.html -->
-  <auro-select id="customBibHeightExample">
+  <auro-select id="customBibHeightExample" 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>
@@ -589,10 +934,9 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
 <!-- The below code snippet is automatically added from ../apiExamples/customBibHeight.html -->
 
 ```html
-<auro-select id="customBibHeightExample">
+<auro-select id="customBibHeightExample" 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>
@@ -663,10 +1007,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>
@@ -681,10 +1024,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>
@@ -702,10 +1044,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>
@@ -719,10 +1060,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>
@@ -742,10 +1082,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>
@@ -760,10 +1099,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>
@@ -781,10 +1119,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>
@@ -798,10 +1135,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>