@aurodesignsystem/auro-formkit 1.6.0-beta.8 → 2.0.0-beta.1

package/components/select/.turbo/turbo-build.log

@@ -137,13 +137,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 505ms
+created dist in 541ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 504ms
+created ./demo/ in 598ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 380ms
+created ./demo/ in 450ms
 
 > @auro-formkit/auro-select@3.3.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component select
@@ -205,11 +205,12 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/select
   ⁕ FILE:src=./../apiExamples/label.html 
   ⁕ FILE:src=./../apiExamples/labelWithPlaceholder.html 
   ⁕ FILE:src=./../apiExamples/helpText.html 
+  ⁕ FILE:src=./../apiExamples/resetState.html 
   ⁕ FILE:src=./../apiExamples/valueExtraction.html 
   ⁕ FILE:src=./../apiExamples/customErrorValidity.html 
-  ⁕ FILE:src=./../apiExamples/valueAlert.html 
   ⁕ FILE:src=./../apiExamples/loading.html 
   ⁕ FILE:src=./../apiExamples/inDialog.html 
+  ⁕ FILE:src=./../apiExamples/valueAlert.html 
   ⁕ CODE:src=./../apiExamples/basic.html 
   ⁕ CODE:src=./../apiExamples/value.html 
   ⁕ CODE:src=./../apiExamples/value.js 
@@ -221,16 +222,18 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/select
   ⁕ CODE:src=./../apiExamples/label.html 
   ⁕ CODE:src=./../apiExamples/labelWithPlaceholder.html 
   ⁕ CODE:src=./../apiExamples/helpText.html 
-  ⁕ CODE:src=./../apiExamples/valueExtraction.js 
+  ⁕ CODE:src=./../apiExamples/resetState.html 
+  ⁕ CODE:src=./../apiExamples/resetState.js 
   ⁕ CODE:src=./../apiExamples/valueExtraction.html 
+  ⁕ CODE:src=./../apiExamples/valueExtraction.js 
   ⁕ CODE:src=./../apiExamples/customErrorValidity.html 
   ⁕ CODE:src=./../apiExamples/customErrorValidity.js 
-  ⁕ CODE:src=./alertValue.js 
-  ⁕ CODE:src=./../apiExamples/valueAlert.html 
   ⁕ CODE:src=./../apiExamples/loading.js 
   ⁕ CODE:src=./../apiExamples/loading.html 
   ⁕ CODE:src=./../apiExamples/inDialog.html 
   ⁕ CODE:src=./../apiExamples/inDialog.js 
+  ⁕ CODE:src=./../apiExamples/valueAlert.html 
+  ⁕ CODE:src=./../apiExamples/valueAlert.js 
   ⁕ CODE:src=./../src/styles/tokens.scss 
 
 Docs processed successfully for select

package/components/select/demo/api.js

@@ -2,8 +2,10 @@ import { customErrorValidityExample } from "../apiExamples/customErrorValidity";
 import { setErrorExample } from "../apiExamples/errorApi";
 import { valueExample } from "../apiExamples/value";
 import { valueExtractionExample } from "../apiExamples/valueExtraction";
-import { inDialogExample } from '../apiExamples/inDialog.js';
-import { auroMenuLoadingExample } from "../apiExamples/loading.js";
+import { valueAlertExample } from "../apiExamples/valueAlert.js";
+import { inDialogExample } from '../apiExamples/inDialog';
+import { resetStateExample } from "../apiExamples/resetState";
+import { auroMenuLoadingExample } from "../apiExamples/loading";
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroSelect } from '../src/auro-select.js';
@@ -20,7 +22,9 @@ export function initExamples(initCount) {
     setErrorExample();
     valueExample();
     valueExtractionExample();
+    valueAlertExample();
     inDialogExample();
+    resetStateExample();
     auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {

package/components/select/demo/api.md

@@ -30,6 +30,12 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [validity](#validity)                      | `validity`                      | `String`  | "undefined"            | Specifies the `validityState` this element is in. |
 | [value](#value)                         | `value`                         | `String`  |                        | Value selected for the component.                |
 
+## Methods
+
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
+
 ## Events
 
 | Event                       | Type               | Description                                      |
@@ -497,6 +503,64 @@ Use the `helptext` slot to provide additional information back to your user abou
 
 ## Functional Examples
 
+### Reset State
+
+Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br/><br/>
+  <auro-select id="resetStateExample" required value="price">
+    <span slot="label">Name</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/resetState.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br/><br/>
+<auro-select id="resetStateExample" required value="price">
+  <span slot="label">Name</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-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Extract value
 
 The following example illustrates how a user may query the `element.value` or `element.optionSelected` for the current value or complete option object that is selected.
@@ -519,23 +583,6 @@ The following example illustrates how a user may query the `element.value` or `e
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.js) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.js -->
-
-```js
-export function valueExtractionExample() {
-  const valueExtractionExample = document.querySelector('#valueExtraction');
-  const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
-
-  valueExtractionBtn.addEventListener('click', () => {
-    console.warn('Value selected:', valueExtractionExample.value);
-    console.warn('Option selected:', valueExtractionExample.optionSelected);
-
-    alert(`Value selected: ${valueExtractionExample.value}`);
-  })
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.html -->
 
@@ -553,6 +600,23 @@ export function valueExtractionExample() {
 <auro-button id="valueExtractionBtn">Get current value</auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueExtraction.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/valueExtraction.js -->
+
+```js
+export function valueExtractionExample() {
+  const valueExtractionExample = document.querySelector('#valueExtraction');
+  const valueExtractionBtn = document.querySelector('#valueExtractionBtn');
+
+  valueExtractionBtn.addEventListener('click', () => {
+    console.warn('Value selected:', valueExtractionExample.value);
+    console.warn('Option selected:', valueExtractionExample.optionSelected);
+
+    alert(`Value selected: ${valueExtractionExample.value}`);
+  })
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Custom Validity with Error State
@@ -611,58 +675,7 @@ export function customErrorValidityExample(elem) {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### Watch for value changes
-
-The following example listens for the `selectedOption` event. Once triggered, `element.value` or `element.optionSelected` may be queried for the new value or complete option object.
-
-<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">
-    <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=./alertValue.js) -->
-<!-- The below code snippet is automatically added from ./alertValue.js -->
-
-```js
-export function valueAlert(elem) {
-  elem.addEventListener('selectedOption', () => {
-    console.warn('Select value changed to:', elem.value);
-    console.warn('Select optionSelected changed to:', elem.optionSelected);
-  })
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueAlert.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/valueAlert.html -->
-
-```html
-<auro-select id="valueAlert">
-  <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>
-
-#### Loading<a name="loading"></a>
+### Loading<a name="loading"></a>
 While content is loading, the menu can either remain empty or display a loading placeholder
 
 <div class="exampleWrapper">
@@ -755,7 +768,7 @@ The component can be in a dialog.
     </auro-dialog>
   </div>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inDialog.html) -->
@@ -797,6 +810,60 @@ export function inDialogExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Watch for value changes
+
+The following example listens for the `auroMenu-selectedOption` event. Once triggered, element.value or element.optionSelected may be queried for the new value or complete option object.
+
+<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">
+    <auro-menu id="valueAlertMenu">
+      <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/valueAlert.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/valueAlert.html -->
+
+```html
+<auro-select id="valueAlert">
+  <auro-menu id="valueAlertMenu">
+    <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-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueAlert.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/valueAlert.js -->
+
+```js
+export function valueAlertExample() {
+  const select = document.querySelector('#valueAlert');
+  const menu = document.querySelector('#valueAlertMenu');
+
+  menu.addEventListener('auroMenu-selectedOption', () => {
+    console.warn('Select value changed to:', select.value);
+    console.warn('Select optionSelected changed to:', select.optionSelected);
+  });
+}
+```
+<!-- 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).