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

package/components/checkbox/demo/api.md

@@ -70,7 +70,8 @@ Custom element for the purpose of allowing users to select one or more options o
 |-------------------------|--------------------|
 | `auroCheckbox-focusin`  | `CustomEvent<any>` |
 | `auroCheckbox-focusout` | `CustomEvent<any>` |
-| `auroCheckbox-input`    | `CustomEvent<any>` |
+| `auroCheckbox-input`    | `CustomEvent<any>` |
+| [input](#input)                 | `CustomEvent<any>` |
 
 ## CSS Shadow Parts
 

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

@@ -287,6 +287,13 @@ class AuroCheckbox extends i$2 {
   handleInput(event) {
     this.checked = event.target.checked;
 
+    this.dispatchEvent(new CustomEvent('input', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+
+    // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
       cancelable: false,
@@ -1042,13 +1049,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

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

@@ -279,6 +279,13 @@ class AuroCheckbox extends i$2 {
   handleInput(event) {
     this.checked = event.target.checked;
 
+    this.dispatchEvent(new CustomEvent('input', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+
+    // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
       cancelable: false,
@@ -1034,13 +1041,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/checkbox/dist/index.js

@@ -239,6 +239,13 @@ class AuroCheckbox extends LitElement {
   handleInput(event) {
     this.checked = event.target.checked;
 
+    this.dispatchEvent(new CustomEvent('input', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+
+    // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
       cancelable: false,
@@ -987,13 +994,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/checkbox/dist/registered.js

@@ -239,6 +239,13 @@ class AuroCheckbox extends LitElement {
   handleInput(event) {
     this.checked = event.target.checked;
 
+    this.dispatchEvent(new CustomEvent('input', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+
+    // Old event we need to deprecate
     this.dispatchEvent(new CustomEvent('auroCheckbox-input', {
       bubbles: true,
       cancelable: false,
@@ -987,13 +994,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/combobox/README.md

@@ -84,6 +84,8 @@ This configuration enables proper module resolution for the component's TypeScri
 
 ```html
 <auro-combobox>
+  <span slot="ariaLabel.close">Close combobox</span>
+  <span slot="ariaLabel.clear">Clear All</span>
   <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>

package/components/combobox/demo/api.md

@@ -39,9 +39,12 @@
 
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
+| [clear](#clear)    | `(): void`                             | Clears the current value of the combobox.        |
 | [focus](#focus)    | `(): void`                             | Focuses the combobox trigger input.              |
+| [hideBib](#hideBib)  | `(): void`                             | Hides the dropdown bib if its open.              |
 | [isValid](#isValid)  | `(): boolean`                          | Checks if the element is valid.                  |
 | [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
+| [showBib](#showBib)  | `(): void`                             | Shows the dropdown bib if there are options to show. |
 | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
@@ -56,6 +59,8 @@
 | Name                      | Description                                      |
 |---------------------------|--------------------------------------------------|
 |                           | Default slot for the menu content.               |
+| `ariaLabel.clear`         | Sets aria-label on clear button                  |
+| `ariaLabel.close`         | Sets aria-label on close button in fullscreen bib |
 | `bib.fullscreen.headline` | Defines the headline to display above menu-options |
 | [displayValue](#displayValue)            | Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts. |
 | [helpText](#helpText)                | Defines the content of the helpText.             |
@@ -71,6 +76,8 @@
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-combobox>
+    <span slot="ariaLabel.close">Close combobox</span>
+    <span slot="ariaLabel.clear">Clear All</span>
     <span slot="bib.fullscreen.headline">Bib Header</span>
     <span slot="label">Name</span>
     <auro-menu>
@@ -108,6 +115,8 @@
 
 ```html
 <auro-combobox>
+  <span slot="ariaLabel.close">Close combobox</span>
+  <span slot="ariaLabel.clear">Clear All</span>
   <span slot="bib.fullscreen.headline">Bib Header</span>
   <span slot="label">Name</span>
   <auro-menu>