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

package/components/counter/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 596ms
+created dist in 817ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 328ms
+created ./demo/ in 266ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 278ms
+created ./demo/ in 282ms

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

@@ -373,13 +373,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 7.2s
+created dist in 7.5s
 
 ./demo/index.js → ./demo/...
 created ./demo/ in 3.5s
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 3.2s
+created ./demo/ in 3.3s
 
 > @auro-formkit/auro-datepicker@3.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component datepicker
@@ -443,6 +443,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/datepi
   ⁕ FILE:src=./../apiExamples/basicRange.html 
   ⁕ FILE:src=./../apiExamples/dateSlot.html 
   ⁕ FILE:src=./../apiExamples/popoverSlot.html 
+  ⁕ FILE:src=./../apiExamples/resetState.html 
   ⁕ FILE:src=./../apiExamples/dynamicSlot.html 
   ⁕ FILE:src=./../apiExamples/alertValue.html 
   ⁕ FILE:src=./../apiExamples/inDialog.html 
@@ -474,6 +475,8 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/datepi
   ⁕ CODE:src=./../apiExamples/basicRange.html 
   ⁕ CODE:src=./../apiExamples/dateSlot.html 
   ⁕ CODE:src=./../apiExamples/popoverSlot.html 
+  ⁕ CODE:src=./../apiExamples/resetState.html 
+  ⁕ CODE:src=./../apiExamples/resetState.js 
   ⁕ CODE:src=./../apiExamples/dynamicSlot.html 
   ⁕ CODE:src=./../apiExamples/dynamicSlot.js 
   ⁕ CODE:src=./../apiExamples/alertValue.html 

package/components/datepicker/demo/api.js

@@ -7,6 +7,7 @@ import { updateMaxDateExample } from './../apiExamples/updateMaxDate';
 import { updateMinDateExample } from './../apiExamples/updateMinDate';
 import { validityExample } from './../apiExamples/validity';
 import { inDialogExample } from '../apiExamples/inDialog.js';
+import { resetStateExample } from '../apiExamples/resetState.js';
 import '../src/index.js';
 
 export function initExamples(initCount) {
@@ -22,6 +23,7 @@ export function initExamples(initCount) {
     updateMinDateExample();
     validityExample();
     inDialogExample();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/datepicker/demo/api.md

@@ -31,7 +31,8 @@
 
 | Method  | Type                         | Description                                      |
 |---------|------------------------------|--------------------------------------------------|
-| [focus](#focus) | `(focusInput: string): void` | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
+| [focus](#focus) | `(focusInput: string): void` | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
+| [reset](#reset) | `(): void`                   | Resets component to initial state.               |
 
 ## Events
 
@@ -895,6 +896,50 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
 
 ## Functional Examples
 
+#### Reset State
+
+Use the `reset()` method to reset the `<auro-datepicker>`'s `value`, `valueEnd` 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-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
+  </auro-datepicker>
+  <!-- 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-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- 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>
+
 #### Dynamic Slot Content
 
 This example demonstrates data driven slot content for days in the calendar. In this example, the slot content is inserted into each `auro-calendar-cell` after the bib of the `auro-datepicker` is opened, simulating an API call on a dynamic data source.