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

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

@@ -16064,7 +16064,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -16089,7 +16089,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -16102,7 +16102,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -16185,11 +16185,7 @@ class AuroFloatingUI {
     }
   }
 
-  /**
-   * Hides the floating UI element.
-   * @param {String} eventType - The event type that triggered the hiding action.
-   */
-  hideBib(eventType = "unknown") {
+  hideBib() {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -16200,7 +16196,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -16209,13 +16205,11 @@ 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(eventType) {
+  dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
-        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -16225,7 +16219,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -16261,7 +16255,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -17649,9 +17643,6 @@ class AuroDropdown extends AuroElement$4 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -18085,19 +18076,12 @@ class AuroDropdown extends AuroElement$4 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
-  }
 
-  /**
-   * 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();
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
     }
   }
 
@@ -18105,7 +18089,6 @@ class AuroDropdown extends AuroElement$4 {
 
     // 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.
@@ -24095,9 +24078,9 @@ class BaseInput extends AuroElement$2 {
         if (!this.shadowRoot.contains(this.getActiveElement())) {
           this.validation.validate(this);
         }
-      }
 
-      this.notifyValueChanged();
+        this.notifyValueChanged();
+      }
     }
 
     if (changedProperties.has('error')) {
@@ -27731,15 +27714,6 @@ class AuroDatePicker extends AuroElement$1 {
     this.layout = 'classic';
     this.shape = 'classic';
     this.size = 'lg';
-
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...i.shadowRootOptions,
-      delegatesFocus: true,
-    };
   }
 
   // This function is to define props used within the scope of this component
@@ -28477,7 +28451,6 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     this.hasFocus = true;
-    this.dropdown.show();
 
     // shadowroot active element is null if we focus the datepicker itself
     if (this.shadowRoot.activeElement === null) {
@@ -28821,8 +28794,7 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Simple formatter that ONLY WORKS FOR US DATES.
    * Returns formatted date like Apr 21 or Dec 25.
-   * @private
-   * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
+   * @param date
    * @return {string}
    */
   formatShortDate(date) {

package/components/datepicker/demo/readme.html

@@ -16,24 +16,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Demo | auro-datepicker</title>
-
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
-
-    <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
-
-    <!-- Design Token Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
-    <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-    
-    <!-- Demo Specific Styles -->
+    <title>Auro Web Component Generator | auro-datepicker custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-</head>
+  </head>
   <body class="auro-markdown">
     <main></main>
 

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

@@ -531,11 +531,10 @@ export class AuroDatePicker extends AuroElement {
     /**
      * Simple formatter that ONLY WORKS FOR US DATES.
      * Returns formatted date like Apr 21 or Dec 25.
-     * @private
-     * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
+     * @param date
      * @return {string}
      */
-    private formatShortDate;
+    formatShortDate(date: any): string;
     /**
      * Format and render the provided date value.
      * @private

package/components/datepicker/dist/index.js

@@ -16013,7 +16013,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -16038,7 +16038,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -16051,7 +16051,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -16134,11 +16134,7 @@ class AuroFloatingUI {
     }
   }
 
-  /**
-   * Hides the floating UI element.
-   * @param {String} eventType - The event type that triggered the hiding action.
-   */
-  hideBib(eventType = "unknown") {
+  hideBib() {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -16149,7 +16145,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -16158,13 +16154,11 @@ 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(eventType) {
+  dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
-        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -16174,7 +16168,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -16210,7 +16204,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -17598,9 +17592,6 @@ class AuroDropdown extends AuroElement$4 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -18034,19 +18025,12 @@ class AuroDropdown extends AuroElement$4 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
-  }
 
-  /**
-   * 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();
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
     }
   }
 
@@ -18054,7 +18038,6 @@ class AuroDropdown extends AuroElement$4 {
 
     // 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.
@@ -24031,9 +24014,9 @@ class BaseInput extends AuroElement$2 {
         if (!this.shadowRoot.contains(this.getActiveElement())) {
           this.validation.validate(this);
         }
-      }
 
-      this.notifyValueChanged();
+        this.notifyValueChanged();
+      }
     }
 
     if (changedProperties.has('error')) {
@@ -27667,15 +27650,6 @@ class AuroDatePicker extends AuroElement$1 {
     this.layout = 'classic';
     this.shape = 'classic';
     this.size = 'lg';
-
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
   }
 
   // This function is to define props used within the scope of this component
@@ -28413,7 +28387,6 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     this.hasFocus = true;
-    this.dropdown.show();
 
     // shadowroot active element is null if we focus the datepicker itself
     if (this.shadowRoot.activeElement === null) {
@@ -28757,8 +28730,7 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Simple formatter that ONLY WORKS FOR US DATES.
    * Returns formatted date like Apr 21 or Dec 25.
-   * @private
-   * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
+   * @param date
    * @return {string}
    */
   formatShortDate(date) {

package/components/datepicker/dist/registered.js

@@ -16013,7 +16013,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -16038,7 +16038,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -16051,7 +16051,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -16134,11 +16134,7 @@ class AuroFloatingUI {
     }
   }
 
-  /**
-   * Hides the floating UI element.
-   * @param {String} eventType - The event type that triggered the hiding action.
-   */
-  hideBib(eventType = "unknown") {
+  hideBib() {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -16149,7 +16145,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -16158,13 +16154,11 @@ 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(eventType) {
+  dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
-        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -16174,7 +16168,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -16210,7 +16204,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -17598,9 +17592,6 @@ class AuroDropdown extends AuroElement$4 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -18034,19 +18025,12 @@ class AuroDropdown extends AuroElement$4 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
-  }
 
-  /**
-   * 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();
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
     }
   }
 
@@ -18054,7 +18038,6 @@ class AuroDropdown extends AuroElement$4 {
 
     // 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.
@@ -24031,9 +24014,9 @@ class BaseInput extends AuroElement$2 {
         if (!this.shadowRoot.contains(this.getActiveElement())) {
           this.validation.validate(this);
         }
-      }
 
-      this.notifyValueChanged();
+        this.notifyValueChanged();
+      }
     }
 
     if (changedProperties.has('error')) {
@@ -27667,15 +27650,6 @@ class AuroDatePicker extends AuroElement$1 {
     this.layout = 'classic';
     this.shape = 'classic';
     this.size = 'lg';
-
-    /**
-     * @private
-     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
-     */
-    this.constructor.shadowRootOptions = {
-      ...LitElement.shadowRootOptions,
-      delegatesFocus: true,
-    };
   }
 
   // This function is to define props used within the scope of this component
@@ -28413,7 +28387,6 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     this.hasFocus = true;
-    this.dropdown.show();
 
     // shadowroot active element is null if we focus the datepicker itself
     if (this.shadowRoot.activeElement === null) {
@@ -28757,8 +28730,7 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Simple formatter that ONLY WORKS FOR US DATES.
    * Returns formatted date like Apr 21 or Dec 25.
-   * @private
-   * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
+   * @param date
    * @return {string}
    */
   formatShortDate(date) {

package/components/dropdown/demo/api.html

@@ -16,24 +16,18 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Auro Web Component Demo | auro-dropdown</title>
-
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
-
-    <!-- Legacy reference is still needed to support auro-dropdown's use of legacy token values at this time -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
-
-    <!-- Design Token Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
-    
-    <!-- Webcore Stylesheet Alaska Theme -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
-    
-    <!-- Demo Specific Styles -->
+    <title>Auro Web Component Generator | auro-dropdown custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-</head>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>