@aurodesignsystem/auro-formkit 2.2.1 → 3.0.0

package/components/select/demo/api.md

@@ -27,6 +27,7 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [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.        |
 | [offset](#offset)                        | `offset`                        | `number`  | "0"            | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                        | `onDark`                        | `boolean` |                | If declared, onDark styles will be applied to the trigger. |
 | [optionSelected](#optionSelected)                | `optionSelected`                |           |                | Specifies the current selected menuOption.       |
 | [placement](#placement)                     | `placement`                     | `string`  | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
 | [required](#required)                      | `required`                      | `boolean` |                | Populates the `required` attribute on the element. Used for client-side validation. |
@@ -90,7 +91,24 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements.
     </auro-menu>
   </auro-select>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+  <auro-select onDark>
+    <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) -->
@@ -111,6 +129,21 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements.
 </auro-select>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
+<!-- The below content is automatically added from ./../apiExamples/onDark.html -->
+<auro-select onDark>
+  <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>
 
 ### Property Examples
@@ -229,20 +262,33 @@ When the validity check fails the validityState, equals `valueMissing`. The erro
 </auro-accordion>
 
 #### error <a name="error"></a>
-Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
-
-A custom error message can be set using the `error` attribute, or it can be used in conjuction with the `setCustomValidityCustomError` attribute.
+Use the `error` boolean attribute to toggle the error UI.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/errorApi.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/errorApi.html -->
-  <auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-  <auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
-  <br /><br />
-  <auro-select id="errorExample" error="Custom error message">
+  <!-- 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>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
+    <label slot="placeholder">Placeholder Text</label>
+    <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>
+<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>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
-    <span slot="label">error Select Example</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -256,17 +302,14 @@ A custom error message can be set using the `error` attribute, or it can be used
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/errorApi.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/errorApi.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
 
 ```html
-<auro-button id="undefinedValueExampleBtnAddError">Set Error</auro-button>
-<auro-button id="undefinedValueExampleBtnRemoveError">Remove Error</auro-button>
-<br /><br />
-<auro-select id="errorExample" error="Custom error message">
+<auro-select error="Custom error message">
+  <span slot="label">error select example</span>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
-  <span slot="label">error Select Example</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -278,6 +321,22 @@ A custom error message can be set using the `error` attribute, or it can be used
 </auro-select>
 ```
 <!-- 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>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
+  <label slot="placeholder">Placeholder Text</label>
+  <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>
 
 #### disabled <a name="disabled"></a>
@@ -301,6 +360,24 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
   </auro-select>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
+<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>
+    <span slot="bib.fullscreen.headline">Bib Headline</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>
+      <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/disabled.html) -->
@@ -322,6 +399,22 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 </auro-select>
 ```
 <!-- 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>
+  <span slot="bib.fullscreen.headline">Bib Headline</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>
+    <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>
 
 #### multiselect <a name="multiselect"></a>
@@ -1039,20 +1132,4 @@ export function valueAlertExample() {
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Theme Support
-
-The component may be restyled using the following code sample and changing the values of the following token(s).
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
-<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
-
-```scss
-@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-
-:host {
-  --ds-auro-select-placeholder-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default);
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>