@aurodesignsystem-dev/auro-formkit 0.0.0-pr776.1 → 0.0.0-pr783.1

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

@@ -3020,6 +3020,7 @@ class AuroCounter extends i$2 {
             aria-describedby="counter-description" 
             tabindex="${this.disabled ? '-1' : '0'}" 
             role="spinbutton" 
+            aria-disabled="${this.disabled ? 'true' : 'false'}" 
             aria-valuemin="${this.min}" 
             aria-valuemax="${this.max}" 
             aria-valuenow="${this.value}"
@@ -4748,7 +4749,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -4960,13 +4961,13 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -4991,7 +4992,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -5004,7 +5005,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -5087,7 +5088,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -5098,7 +5103,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -5107,11 +5112,13 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
+   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -5121,7 +5128,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -5148,7 +5155,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -5157,7 +5164,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -6545,6 +6552,9 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -6978,12 +6988,19 @@ class AuroDropdown extends AuroElement$3 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+  }
 
-    if (changedProperties.has('isPopoverVisible')) {
-      this.updateFocusTrap();
-      if (!this.isPopoverVisible && this.hasFocus) {
-        this.trigger.focus();
-      }
+  /**
+   * 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;
+    const eventType = event.detail.eventType || "unknown";
+    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
+      this.trigger.focus();
     }
   }
 
@@ -6991,6 +7008,7 @@ class AuroDropdown extends AuroElement$3 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.

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

@@ -3020,6 +3020,7 @@ class AuroCounter extends i$2 {
             aria-describedby="counter-description" 
             tabindex="${this.disabled ? '-1' : '0'}" 
             role="spinbutton" 
+            aria-disabled="${this.disabled ? 'true' : 'false'}" 
             aria-valuemin="${this.min}" 
             aria-valuemax="${this.max}" 
             aria-valuenow="${this.value}"
@@ -4748,7 +4749,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -4960,13 +4961,13 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -4991,7 +4992,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -5004,7 +5005,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -5087,7 +5088,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -5098,7 +5103,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -5107,11 +5112,13 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
+   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -5121,7 +5128,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -5148,7 +5155,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -5157,7 +5164,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -6545,6 +6552,9 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -6978,12 +6988,19 @@ class AuroDropdown extends AuroElement$3 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+  }
 
-    if (changedProperties.has('isPopoverVisible')) {
-      this.updateFocusTrap();
-      if (!this.isPopoverVisible && this.hasFocus) {
-        this.trigger.focus();
-      }
+  /**
+   * 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;
+    const eventType = event.detail.eventType || "unknown";
+    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
+      this.trigger.focus();
     }
   }
 
@@ -6991,6 +7008,7 @@ class AuroDropdown extends AuroElement$3 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.

package/components/counter/dist/index.js

@@ -2973,6 +2973,7 @@ class AuroCounter extends LitElement {
             aria-describedby="counter-description" 
             tabindex="${this.disabled ? '-1' : '0'}" 
             role="spinbutton" 
+            aria-disabled="${this.disabled ? 'true' : 'false'}" 
             aria-valuemin="${this.min}" 
             aria-valuemax="${this.max}" 
             aria-valuenow="${this.value}"
@@ -4701,7 +4702,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -4913,13 +4914,13 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -4944,7 +4945,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -4957,7 +4958,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -5040,7 +5041,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -5051,7 +5056,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -5060,11 +5065,13 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
+   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -5074,7 +5081,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -5101,7 +5108,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -5110,7 +5117,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -6498,6 +6505,9 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -6931,12 +6941,19 @@ class AuroDropdown extends AuroElement$3 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+  }
 
-    if (changedProperties.has('isPopoverVisible')) {
-      this.updateFocusTrap();
-      if (!this.isPopoverVisible && this.hasFocus) {
-        this.trigger.focus();
-      }
+  /**
+   * 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;
+    const eventType = event.detail.eventType || "unknown";
+    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
+      this.trigger.focus();
     }
   }
 
@@ -6944,6 +6961,7 @@ class AuroDropdown extends AuroElement$3 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.

package/components/counter/dist/registered.js

@@ -2973,6 +2973,7 @@ class AuroCounter extends LitElement {
             aria-describedby="counter-description" 
             tabindex="${this.disabled ? '-1' : '0'}" 
             role="spinbutton" 
+            aria-disabled="${this.disabled ? 'true' : 'false'}" 
             aria-valuemin="${this.min}" 
             aria-valuemax="${this.max}" 
             aria-valuenow="${this.value}"
@@ -4701,7 +4702,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer) {
+    if (this.element.bibSizer && this.element.matchWidth) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -4913,13 +4914,13 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-    
+
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
 
-    this.hideBib();
+    this.hideBib("keydown");
   }
 
   setupHideHandlers() {
@@ -4944,7 +4945,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -4957,7 +4958,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -5040,7 +5041,11 @@ class AuroFloatingUI {
     }
   }
 
-  hideBib() {
+  /**
+   * Hides the floating UI element.
+   * @param {String} eventType - The event type that triggered the hiding action.
+   */
+  hideBib(eventType = "unknown") {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -5051,7 +5056,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -5060,11 +5065,13 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
+   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle() {
+  dispatchEventDropdownToggle(eventType) {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
+        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -5074,7 +5081,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -5101,7 +5108,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -5110,7 +5117,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -6498,6 +6505,9 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -6931,12 +6941,19 @@ class AuroDropdown extends AuroElement$3 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
+  }
 
-    if (changedProperties.has('isPopoverVisible')) {
-      this.updateFocusTrap();
-      if (!this.isPopoverVisible && this.hasFocus) {
-        this.trigger.focus();
-      }
+  /**
+   * 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;
+    const eventType = event.detail.eventType || "unknown";
+    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
+      this.trigger.focus();
     }
   }
 
@@ -6944,6 +6961,7 @@ class AuroDropdown extends AuroElement$3 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
+    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.

package/components/datepicker/demo/api.md

@@ -55,7 +55,6 @@
 | [renderHtmlIconCalendar](#renderHtmlIconCalendar)      | `(): TemplateResult`                   |                                                  |
 | [renderHtmlIconError](#renderHtmlIconError)         | `(): TemplateResult`                   |                                                  |
 | [renderHtmlInputs](#renderHtmlInputs)            | `(): TemplateResult`                   |                                                  |
-| [renderLayoutFromAttributes](#renderLayoutFromAttributes)  | `(): TemplateResult`                   |                                                  |
 | [reset](#reset)                       | `(): void`                             | Resets component to initial state.               |
 | [resetLayoutClasses](#resetLayoutClasses)          | `(): void`                             |                                                  |
 | [resetShapeClasses](#resetShapeClasses)           | `(): void`                             |                                                  |