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

package/components/datepicker/dist/styles/classic/style-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/dropdown/demo/api.md

@@ -35,13 +35,12 @@
 
 ## Methods
 
-| Method                 | Type                 | Description                                      |
-|------------------------|----------------------|--------------------------------------------------|
-| [exposeCssParts](#exposeCssParts)       | `(): void`           | Exposes CSS parts for styling from parent components. |
-| [focus](#focus)                | `(): void`           | When bib is open, focus on the first element inside of bib.<br />If not, trigger element will get focus. |
-| [handleDropdownToggle](#handleDropdownToggle) | `(event: any): void` |                                                  |
-| [hide](#hide)                 | `(): void`           | Public method to hide the dropdown.              |
-| [show](#show)                 | `(): void`           | Public method to show the dropdown.              |
+| Method           | Type       | Description                                      |
+|------------------|------------|--------------------------------------------------|
+| [exposeCssParts](#exposeCssParts) | `(): void` | Exposes CSS parts for styling from parent components. |
+| [focus](#focus)          | `(): void` | When bib is open, focus on the first element inside of bib.<br />If not, trigger element will get focus. |
+| [hide](#hide)           | `(): void` | Public method to hide the dropdown.              |
+| [show](#show)           | `(): void` | Public method to show the dropdown.              |
 
 ## Events
 
@@ -49,7 +48,7 @@
 |-----------------------------|--------------------------------------|--------------------------------------------------|
 | `auroDropdown-idAdded`      | `Object<key  : 'id', value: string>` |                                                  |
 | `auroDropdown-toggled`      |                                      | Notifies that the visibility of the dropdown bib has changed. |
-| `auroDropdown-triggerClick` |                                      | Notifies that the trigger has been clicked.      |
+| `auroDropdown-triggerClick` | `CustomEvent<any>`                   | Notifies that the trigger has been clicked.      |
 
 ## Slots
 

package/components/dropdown/demo/api.min.js

@@ -4002,6 +4002,11 @@ class AuroDropdown extends AuroElement {
     }
   }
 
+  /**
+   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
+   * @private
+   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
+   */
   handleDropdownToggle(event) {
     this.updateFocusTrap();
     this.isPopoverVisible = event.detail.expanded;
@@ -4033,6 +4038,13 @@ class AuroDropdown extends AuroElement {
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
+
+    this.trigger.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
+        bubbles: true,
+        composed: true
+      }));
+    });
   }
 
   /**

package/components/dropdown/demo/index.min.js

@@ -3977,6 +3977,11 @@ class AuroDropdown extends AuroElement {
     }
   }
 
+  /**
+   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
+   * @private
+   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
+   */
   handleDropdownToggle(event) {
     this.updateFocusTrap();
     this.isPopoverVisible = event.detail.expanded;
@@ -4008,6 +4013,13 @@ class AuroDropdown extends AuroElement {
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
+
+    this.trigger.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
+        bubbles: true,
+        composed: true
+      }));
+    });
   }
 
   /**

package/components/dropdown/dist/auro-dropdown.d.ts

@@ -220,7 +220,12 @@ export class AuroDropdown extends AuroElement {
     shape: any;
     size: any;
     parentBorder: boolean;
-    handleDropdownToggle(event: any): void;
+    /**
+     * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
+     * @private
+     * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
+     */
+    private handleDropdownToggle;
     /**
      * @private
      * @returns {object} Class definition for the wrapper element.

package/components/dropdown/dist/index.js

@@ -3930,6 +3930,11 @@ class AuroDropdown extends AuroElement {
     }
   }
 
+  /**
+   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
+   * @private
+   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
+   */
   handleDropdownToggle(event) {
     this.updateFocusTrap();
     this.isPopoverVisible = event.detail.expanded;
@@ -3961,6 +3966,13 @@ class AuroDropdown extends AuroElement {
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
+
+    this.trigger.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
+        bubbles: true,
+        composed: true
+      }));
+    });
   }
 
   /**

package/components/dropdown/dist/registered.js

@@ -3930,6 +3930,11 @@ class AuroDropdown extends AuroElement {
     }
   }
 
+  /**
+   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
+   * @private
+   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
+   */
   handleDropdownToggle(event) {
     this.updateFocusTrap();
     this.isPopoverVisible = event.detail.expanded;
@@ -3961,6 +3966,13 @@ class AuroDropdown extends AuroElement {
 
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
+
+    this.trigger.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
+        bubbles: true,
+        composed: true
+      }));
+    });
   }
 
   /**

package/components/input/README.md

@@ -83,6 +83,7 @@ This configuration enables proper module resolution for the component's TypeScri
 
 ```html
 <auro-input>
+  <span slot="ariaLabel.clear">Clear All</span>
   <span slot="label">Label</span>
   <span slot="helpText">Help Text</span>
 </auro-input>

package/components/input/demo/api.md

@@ -60,8 +60,9 @@ Generate unique names for dependency components.
 
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
+| [clear](#clear)    | `(): void`                             | Clears the input value.                          |
 | [focus](#focus)    | `(): void`                             | Function to set element focus.                   |
-| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [reset](#reset)    | `(): void`                             | Resets component to initial state, including resetting the touched state and validity. |
 | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
@@ -74,12 +75,15 @@ Generate unique names for dependency components.
 
 ## Slots
 
-| Name            | Description                                      |
-|-----------------|--------------------------------------------------|
-| [displayValue](#displayValue)  | Allows custom HTML content to display in place of the value when the input is not focused. |
-| [helpText](#helpText)      | Sets the help text displayed below the input.    |
-| [label](#label)         | Sets the label text for the input.               |
-| [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
+| Name                      | Description                                      |
+|---------------------------|--------------------------------------------------|
+| `ariaLabel.clear`         | Sets aria-label on clear button for screenreader to read |
+| `ariaLabel.password.hide` | Sets aria-label on password button to toggle off showing password |
+| `ariaLabel.password.show` | Sets aria-label on password button to toggle on showing password |
+| [displayValue](#displayValue)            | Allows custom HTML content to display in place of the value when the input is not focused. |
+| [helpText](#helpText)                | Sets the help text displayed below the input.    |
+| [label](#label)                   | Sets the label text for the input.               |
+| [optionalLabel](#optionalLabel)           | Allows overriding the optional display text "(optional)", which appears next to the label. |
 
 ## CSS Shadow Parts
 
@@ -115,6 +119,7 @@ The default component supports the basic input `type="text"` structure. The `(op
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-input>
+    <span slot="ariaLabel.clear">Clear All</span>
     <span slot="label">Label</span>
     <span slot="helpText">Help Text</span>
   </auro-input>
@@ -136,6 +141,7 @@ The default component supports the basic input `type="text"` structure. The `(op
 
 ```html
 <auro-input>
+  <span slot="ariaLabel.clear">Clear All</span>
   <span slot="label">Label</span>
   <span slot="helpText">Help Text</span>
 </auro-input>
@@ -895,6 +901,9 @@ Default help text will be added to the input `type="password"` if custom help te
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/password.html) -->
   <!-- The below content is automatically added from ../apiExamples/password.html -->
   <auro-input type="password" required>
+    <span slot="ariaLabel.clear">Clear All</span>
+    <span slot="ariaLabel.password.show">Show</span>
+    <span slot="ariaLabel.password.hide">Hide</span>
     <span slot="label">Password</span>
     <span slot="helpText">Please enter a secure password.</span>
   </auro-input>