@aurodesignsystem-dev/auro-formkit 0.0.0-pr802.0 → 0.0.0-pr805.0

package/components/bibtemplate/dist/index.js

@@ -1852,7 +1852,7 @@ class AuroBibtemplate extends LitElement {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
   }
 
   static get styles() {

package/components/bibtemplate/dist/registered.js

@@ -1852,7 +1852,7 @@ class AuroBibtemplate extends LitElement {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
   }
 
   static get styles() {

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,

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,

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,

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,

package/components/combobox/demo/api.md

@@ -41,8 +41,10 @@
 |------------|----------------------------------------|--------------------------------------------------|
 | [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

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

@@ -4573,6 +4573,7 @@ let AuroElement$4 = class AuroElement extends i$2 {
 // See LICENSE in the project root for license information.
 
 
+
 /*
  * @slot - Default slot for the popover content.
  * @slot helpText - Defines the content of the helpText.
@@ -5076,6 +5077,13 @@ class AuroDropdown extends AuroElement$4 {
 
     // 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
+      }));
+    });
   }
 
   /**
@@ -5148,64 +5156,6 @@ class AuroDropdown extends AuroElement$4 {
     this.hasFocus = false;
   }
 
-  /**
-   * Determines if the element or any children are focusable.
-   * @private
-   * @param {HTMLElement} element - Element to check.
-   * @returns {Boolean} - True if the element or any children are focusable.
-   */
-  containsFocusableElement(element) {
-    this.showTriggerBorders = true;
-
-    const nodes = [
-      element,
-      ...element.children
-    ];
-
-    const focusableElements = [
-      'a',
-      'auro-hyperlink',
-      'button',
-      'auro-button',
-      'input',
-      'auro-input',
-    ];
-
-    const focusableElementsThatNeedBorders = ['auro-input'];
-
-    const result = nodes.some((node) => {
-      const tagName = node.tagName.toLowerCase();
-
-      if (node.tabIndex > -1) {
-        return true;
-      }
-
-      if (focusableElements.includes(tagName)) {
-        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
-          return true;
-        }
-        if (!node.hasAttribute('disabled')) {
-          return true;
-        }
-      }
-
-      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
-        return true;
-      }
-
-      return false;
-    });
-
-    if (result) {
-      this.showTriggerBorders = !nodes.some((node) => {
-        const tagName = node.tagName.toLowerCase();
-        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
-      });
-    }
-
-    return result;
-  }
-
   /**
    * Creates and dispatches a duplicate focus event on the trigger element.
    * @private
@@ -5317,7 +5267,7 @@ class AuroDropdown extends AuroElement$4 {
       if (triggerContentNodes) {
 
         // See if any of them are focusable elements
-        this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
+        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
 
         // If any of them are focusable elements
         if (this.triggerContentFocusable) {
@@ -5389,7 +5339,7 @@ class AuroDropdown extends AuroElement$4 {
         <div
           id="trigger"
           class="${e(this.commonWrapperClasses)}" part="wrapper"
-          tabindex="${this.tabIndex}"
+          tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
@@ -15641,7 +15591,7 @@ class AuroBibtemplate extends i$2 {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
   }
 
   static get styles() {
@@ -16552,7 +16502,6 @@ class AuroCombobox extends AuroElement$1 {
 
   /**
    * Hides the dropdown bib if its open.
-   * @private
    * @returns {void}
    */
   hideBib() {
@@ -16563,7 +16512,6 @@ class AuroCombobox extends AuroElement$1 {
 
   /**
    * Shows the dropdown bib if there are options to show.
-   * @private
    * @returns {void}
    */
   showBib() {

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

@@ -4431,6 +4431,7 @@ let AuroElement$4 = class AuroElement extends i$2 {
 // See LICENSE in the project root for license information.
 
 
+
 /*
  * @slot - Default slot for the popover content.
  * @slot helpText - Defines the content of the helpText.
@@ -4934,6 +4935,13 @@ class AuroDropdown extends AuroElement$4 {
 
     // 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
+      }));
+    });
   }
 
   /**
@@ -5006,64 +5014,6 @@ class AuroDropdown extends AuroElement$4 {
     this.hasFocus = false;
   }
 
-  /**
-   * Determines if the element or any children are focusable.
-   * @private
-   * @param {HTMLElement} element - Element to check.
-   * @returns {Boolean} - True if the element or any children are focusable.
-   */
-  containsFocusableElement(element) {
-    this.showTriggerBorders = true;
-
-    const nodes = [
-      element,
-      ...element.children
-    ];
-
-    const focusableElements = [
-      'a',
-      'auro-hyperlink',
-      'button',
-      'auro-button',
-      'input',
-      'auro-input',
-    ];
-
-    const focusableElementsThatNeedBorders = ['auro-input'];
-
-    const result = nodes.some((node) => {
-      const tagName = node.tagName.toLowerCase();
-
-      if (node.tabIndex > -1) {
-        return true;
-      }
-
-      if (focusableElements.includes(tagName)) {
-        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
-          return true;
-        }
-        if (!node.hasAttribute('disabled')) {
-          return true;
-        }
-      }
-
-      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
-        return true;
-      }
-
-      return false;
-    });
-
-    if (result) {
-      this.showTriggerBorders = !nodes.some((node) => {
-        const tagName = node.tagName.toLowerCase();
-        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
-      });
-    }
-
-    return result;
-  }
-
   /**
    * Creates and dispatches a duplicate focus event on the trigger element.
    * @private
@@ -5175,7 +5125,7 @@ class AuroDropdown extends AuroElement$4 {
       if (triggerContentNodes) {
 
         // See if any of them are focusable elements
-        this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
+        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
 
         // If any of them are focusable elements
         if (this.triggerContentFocusable) {
@@ -5247,7 +5197,7 @@ class AuroDropdown extends AuroElement$4 {
         <div
           id="trigger"
           class="${e(this.commonWrapperClasses)}" part="wrapper"
-          tabindex="${this.tabIndex}"
+          tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
@@ -15499,7 +15449,7 @@ class AuroBibtemplate extends i$2 {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
   }
 
   static get styles() {
@@ -16410,7 +16360,6 @@ class AuroCombobox extends AuroElement$1 {
 
   /**
    * Hides the dropdown bib if its open.
-   * @private
    * @returns {void}
    */
   hideBib() {
@@ -16421,7 +16370,6 @@ class AuroCombobox extends AuroElement$1 {
 
   /**
    * Shows the dropdown bib if there are options to show.
-   * @private
    * @returns {void}
    */
   showBib() {

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

@@ -313,16 +313,14 @@ export class AuroCombobox extends AuroElement {
     options: any[] | NodeListOf<Element>;
     /**
      * Hides the dropdown bib if its open.
-     * @private
      * @returns {void}
      */
-    private hideBib;
+    hideBib(): void;
     /**
      * Shows the dropdown bib if there are options to show.
-     * @private
      * @returns {void}
      */
-    private showBib;
+    showBib(): void;
     /**
      * Binds all behavior needed to the dropdown after rendering.
      * @private

package/components/combobox/dist/index.js

@@ -4362,6 +4362,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
 // See LICENSE in the project root for license information.
 
 
+
 /*
  * @slot - Default slot for the popover content.
  * @slot helpText - Defines the content of the helpText.
@@ -4865,6 +4866,13 @@ class AuroDropdown extends AuroElement$4 {
 
     // 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
+      }));
+    });
   }
 
   /**
@@ -4937,64 +4945,6 @@ class AuroDropdown extends AuroElement$4 {
     this.hasFocus = false;
   }
 
-  /**
-   * Determines if the element or any children are focusable.
-   * @private
-   * @param {HTMLElement} element - Element to check.
-   * @returns {Boolean} - True if the element or any children are focusable.
-   */
-  containsFocusableElement(element) {
-    this.showTriggerBorders = true;
-
-    const nodes = [
-      element,
-      ...element.children
-    ];
-
-    const focusableElements = [
-      'a',
-      'auro-hyperlink',
-      'button',
-      'auro-button',
-      'input',
-      'auro-input',
-    ];
-
-    const focusableElementsThatNeedBorders = ['auro-input'];
-
-    const result = nodes.some((node) => {
-      const tagName = node.tagName.toLowerCase();
-
-      if (node.tabIndex > -1) {
-        return true;
-      }
-
-      if (focusableElements.includes(tagName)) {
-        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
-          return true;
-        }
-        if (!node.hasAttribute('disabled')) {
-          return true;
-        }
-      }
-
-      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
-        return true;
-      }
-
-      return false;
-    });
-
-    if (result) {
-      this.showTriggerBorders = !nodes.some((node) => {
-        const tagName = node.tagName.toLowerCase();
-        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
-      });
-    }
-
-    return result;
-  }
-
   /**
    * Creates and dispatches a duplicate focus event on the trigger element.
    * @private
@@ -5106,7 +5056,7 @@ class AuroDropdown extends AuroElement$4 {
       if (triggerContentNodes) {
 
         // See if any of them are focusable elements
-        this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
+        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
 
         // If any of them are focusable elements
         if (this.triggerContentFocusable) {
@@ -5178,7 +5128,7 @@ class AuroDropdown extends AuroElement$4 {
         <div
           id="trigger"
           class="${classMap(this.commonWrapperClasses)}" part="wrapper"
-          tabindex="${this.tabIndex}"
+          tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
@@ -15417,7 +15367,7 @@ class AuroBibtemplate extends LitElement {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
   }
 
   static get styles() {
@@ -16328,7 +16278,6 @@ class AuroCombobox extends AuroElement {
 
   /**
    * Hides the dropdown bib if its open.
-   * @private
    * @returns {void}
    */
   hideBib() {
@@ -16339,7 +16288,6 @@ class AuroCombobox extends AuroElement {
 
   /**
    * Shows the dropdown bib if there are options to show.
-   * @private
    * @returns {void}
    */
   showBib() {

package/components/combobox/dist/registered.js

@@ -4362,6 +4362,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
 // See LICENSE in the project root for license information.
 
 
+
 /*
  * @slot - Default slot for the popover content.
  * @slot helpText - Defines the content of the helpText.
@@ -4865,6 +4866,13 @@ class AuroDropdown extends AuroElement$4 {
 
     // 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
+      }));
+    });
   }
 
   /**
@@ -4937,64 +4945,6 @@ class AuroDropdown extends AuroElement$4 {
     this.hasFocus = false;
   }
 
-  /**
-   * Determines if the element or any children are focusable.
-   * @private
-   * @param {HTMLElement} element - Element to check.
-   * @returns {Boolean} - True if the element or any children are focusable.
-   */
-  containsFocusableElement(element) {
-    this.showTriggerBorders = true;
-
-    const nodes = [
-      element,
-      ...element.children
-    ];
-
-    const focusableElements = [
-      'a',
-      'auro-hyperlink',
-      'button',
-      'auro-button',
-      'input',
-      'auro-input',
-    ];
-
-    const focusableElementsThatNeedBorders = ['auro-input'];
-
-    const result = nodes.some((node) => {
-      const tagName = node.tagName.toLowerCase();
-
-      if (node.tabIndex > -1) {
-        return true;
-      }
-
-      if (focusableElements.includes(tagName)) {
-        if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
-          return true;
-        }
-        if (!node.hasAttribute('disabled')) {
-          return true;
-        }
-      }
-
-      if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
-        return true;
-      }
-
-      return false;
-    });
-
-    if (result) {
-      this.showTriggerBorders = !nodes.some((node) => {
-        const tagName = node.tagName.toLowerCase();
-        return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
-      });
-    }
-
-    return result;
-  }
-
   /**
    * Creates and dispatches a duplicate focus event on the trigger element.
    * @private
@@ -5106,7 +5056,7 @@ class AuroDropdown extends AuroElement$4 {
       if (triggerContentNodes) {
 
         // See if any of them are focusable elements
-        this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
+        this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
 
         // If any of them are focusable elements
         if (this.triggerContentFocusable) {
@@ -5178,7 +5128,7 @@ class AuroDropdown extends AuroElement$4 {
         <div
           id="trigger"
           class="${classMap(this.commonWrapperClasses)}" part="wrapper"
-          tabindex="${this.tabIndex}"
+          tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
           role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
           aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
           aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
@@ -15417,7 +15367,7 @@ class AuroBibtemplate extends LitElement {
     /**
      * @private
      */
-    this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
+    this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
   }
 
   static get styles() {
@@ -16328,7 +16278,6 @@ class AuroCombobox extends AuroElement {
 
   /**
    * Hides the dropdown bib if its open.
-   * @private
    * @returns {void}
    */
   hideBib() {
@@ -16339,7 +16288,6 @@ class AuroCombobox extends AuroElement {
 
   /**
    * Shows the dropdown bib if there are options to show.
-   * @private
    * @returns {void}
    */
   showBib() {

package/components/counter/demo/api.md

@@ -63,6 +63,8 @@
 
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
+| [hideBib](#hideBib)  | `(): void`                             | Hides the dropdown bib if its open.              |
+| [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