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

package/components/counter/dist/index.js

@@ -1,7 +1,7 @@
 import { css, LitElement, html } from 'lit';
 import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 var tokens = css`:host(:not([ondark])){--ds-auro-counter-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-counter-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-counter-outline-color: transparent;--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15))}:host([ondark]){--ds-auro-counter-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-counter-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-counter-outline-color: transparent;--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-divider-color: var(--ds-basic-color-border-divider-inverse, rgba(255, 255, 255, 0.4))}`;
 
@@ -2234,13 +2234,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';
@@ -2971,13 +2982,13 @@ class AuroCounter extends LitElement {
             part="counterControl" 
             aria-labelledby="counter-label" 
             aria-describedby="counter-description" 
-            tabindex="${this.disabled ? '-1' : '0'}" 
-            role="spinbutton" 
-            aria-disabled="${this.disabled ? 'true' : 'false'}" 
+            aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}" 
             aria-valuemin="${this.min}" 
             aria-valuemax="${this.max}" 
             aria-valuenow="${this.value}"
             aria-valuetext="${this.value !== undefined ? this.value : this.min}"
+            role="spinbutton" 
+            tabindex="${this.disabled ? '-1' : '0'}" 
           >
             <auro-counter-button
               aria-hidden="true"
@@ -3012,7 +3023,7 @@ class AuroCounter extends LitElement {
   }
 }
 
-var counterGroupStyles = css`:host(:not([layout=classic])) .triggerContent{padding:0 var(--ds-size-50, 0.25rem) 0 var(--ds-size-150, 0.75rem)}:host([layout=snowflake]) [auro-dropdown] .mainContent{align-items:center}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}.mainContent{display:flex;width:100%;flex-direction:column;align-items:flex-start;justify-content:center}label{font-size:var(--ds-text-body-size-default, 1rem);line-height:20px}label.filled{font-size:var(--ds-text-body-size-xs, 0.75rem)}.accents ::slotted([slot=typeIcon]){margin-right:8px}.accents ::slotted(*):not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}slot[name=valueText]{font-size:var(--ds-text-body-size-default, 1rem);overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.counters{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.counters ::slotted(auro-counter:not(:first-of-type)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}[auro-helptext] [part=helpText]{display:flex;flex-direction:column}[auro-helptext] [part=helpText]>p{margin-block:0}`;
+var counterGroupStyles = css`:host(:not([layout=classic])) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout=snowflake]) [auro-dropdown] .mainContent{align-items:center}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}.mainContent{display:flex;overflow:hidden;width:100%;flex-direction:column;align-items:flex-start;justify-content:center}label{font-size:var(--ds-text-body-size-default, 1rem);line-height:20px}label.filled{font-size:var(--ds-text-body-size-xs, 0.75rem)}.accents ::slotted([slot=typeIcon]){margin-right:8px}.accents ::slotted(*):not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}slot[name=valueText]{font-size:var(--ds-text-body-size-default, 1rem);overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.counters{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.counters ::slotted(auro-counter:not(:first-of-type)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}[auro-helptext] [part=helpText]{display:flex;flex-direction:column}[auro-helptext] [part=helpText]>p{margin-block:0}`;
 
 var shapeSizeCss$1 = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
 
@@ -4702,7 +4713,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') {
@@ -4914,13 +4925,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() {
@@ -4945,7 +4956,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -4958,7 +4969,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -5041,7 +5052,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');
@@ -5052,7 +5067,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -5061,11 +5076,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
     });
@@ -5075,7 +5092,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -5102,7 +5119,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -5111,7 +5128,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -6499,6 +6516,9 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -6932,12 +6952,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();
     }
   }
 
@@ -6945,6 +6972,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

@@ -1,7 +1,7 @@
 import { css, LitElement, html } from 'lit';
 import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 var tokens = css`:host(:not([ondark])){--ds-auro-counter-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-counter-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-counter-outline-color: transparent;--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15))}:host([ondark]){--ds-auro-counter-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-counter-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-counter-outline-color: transparent;--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-divider-color: var(--ds-basic-color-border-divider-inverse, rgba(255, 255, 255, 0.4))}`;
 
@@ -2234,13 +2234,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';
@@ -2971,13 +2982,13 @@ class AuroCounter extends LitElement {
             part="counterControl" 
             aria-labelledby="counter-label" 
             aria-describedby="counter-description" 
-            tabindex="${this.disabled ? '-1' : '0'}" 
-            role="spinbutton" 
-            aria-disabled="${this.disabled ? 'true' : 'false'}" 
+            aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}" 
             aria-valuemin="${this.min}" 
             aria-valuemax="${this.max}" 
             aria-valuenow="${this.value}"
             aria-valuetext="${this.value !== undefined ? this.value : this.min}"
+            role="spinbutton" 
+            tabindex="${this.disabled ? '-1' : '0'}" 
           >
             <auro-counter-button
               aria-hidden="true"
@@ -3012,7 +3023,7 @@ class AuroCounter extends LitElement {
   }
 }
 
-var counterGroupStyles = css`:host(:not([layout=classic])) .triggerContent{padding:0 var(--ds-size-50, 0.25rem) 0 var(--ds-size-150, 0.75rem)}:host([layout=snowflake]) [auro-dropdown] .mainContent{align-items:center}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}.mainContent{display:flex;width:100%;flex-direction:column;align-items:flex-start;justify-content:center}label{font-size:var(--ds-text-body-size-default, 1rem);line-height:20px}label.filled{font-size:var(--ds-text-body-size-xs, 0.75rem)}.accents ::slotted([slot=typeIcon]){margin-right:8px}.accents ::slotted(*):not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}slot[name=valueText]{font-size:var(--ds-text-body-size-default, 1rem);overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.counters{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.counters ::slotted(auro-counter:not(:first-of-type)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}[auro-helptext] [part=helpText]{display:flex;flex-direction:column}[auro-helptext] [part=helpText]>p{margin-block:0}`;
+var counterGroupStyles = css`:host(:not([layout=classic])) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout=snowflake]) [auro-dropdown] .mainContent{align-items:center}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}.mainContent{display:flex;overflow:hidden;width:100%;flex-direction:column;align-items:flex-start;justify-content:center}label{font-size:var(--ds-text-body-size-default, 1rem);line-height:20px}label.filled{font-size:var(--ds-text-body-size-xs, 0.75rem)}.accents ::slotted([slot=typeIcon]){margin-right:8px}.accents ::slotted(*):not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}slot[name=valueText]{font-size:var(--ds-text-body-size-default, 1rem);overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.counters{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.counters ::slotted(auro-counter:not(:first-of-type)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}[auro-helptext] [part=helpText]{display:flex;flex-direction:column}[auro-helptext] [part=helpText]>p{margin-block:0}`;
 
 var shapeSizeCss$1 = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
 
@@ -4702,7 +4713,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') {
@@ -4914,13 +4925,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() {
@@ -4945,7 +4956,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib();
+          this.hideBib("click");
         }
       }
     };
@@ -4958,7 +4969,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib();
+        this.hideBib("keydown");
       }
     };
 
@@ -5041,7 +5052,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');
@@ -5052,7 +5067,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle();
+        this.dispatchEventDropdownToggle(eventType);
       }
     }
     document.expandedAuroFloater = null;
@@ -5061,11 +5076,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
     });
@@ -5075,7 +5092,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib();
+      this.hideBib("click");
     } else {
       this.showBib();
     }
@@ -5102,7 +5119,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          } 
+          }
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -5111,7 +5128,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib();
+            this.hideBib("mouseleave");
           }
           break;
         case 'focus':
@@ -6499,6 +6516,9 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     this.privateDefaults();
   }
 
@@ -6932,12 +6952,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();
     }
   }
 
@@ -6945,6 +6972,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

@@ -50,12 +50,12 @@
 
 | Method                        | Type                                   | Description                                      |
 |-------------------------------|----------------------------------------|--------------------------------------------------|
+| [clear](#clear)                       | `(): void`                             | Clears the current value(s) of the datepicker.   |
 | [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. |
 | [renderHtmlActionClear](#renderHtmlActionClear)       | `(): TemplateResult`                   |                                                  |
 | [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`                             |                                                  |