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

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

@@ -3020,7 +3020,6 @@ 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}"
@@ -4967,7 +4966,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -4992,7 +4991,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -5005,7 +5004,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -5088,11 +5087,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');
@@ -5103,7 +5098,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -5112,13 +5107,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
     });
@@ -5128,7 +5121,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -5164,7 +5157,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -6552,9 +6545,6 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -6988,19 +6978,12 @@ class AuroDropdown extends AuroElement$3 {
     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();
+      }
     }
   }
 
@@ -7008,7 +6991,6 @@ 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/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-counter</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-counter'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-counter 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/counter/dist/index.js

@@ -2973,7 +2973,6 @@ 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}"
@@ -4920,7 +4919,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -4945,7 +4944,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -4958,7 +4957,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -5041,11 +5040,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');
@@ -5056,7 +5051,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -5065,13 +5060,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
     });
@@ -5081,7 +5074,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -5117,7 +5110,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -6505,9 +6498,6 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -6941,19 +6931,12 @@ class AuroDropdown extends AuroElement$3 {
     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();
+      }
     }
   }
 
@@ -6961,7 +6944,6 @@ 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,7 +2973,6 @@ 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}"
@@ -4920,7 +4919,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -4945,7 +4944,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -4958,7 +4957,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -5041,11 +5040,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');
@@ -5056,7 +5051,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -5065,13 +5060,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
     });
@@ -5081,7 +5074,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -5117,7 +5110,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -6505,9 +6498,6 @@ class AuroDropdown extends AuroElement$3 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -6941,19 +6931,12 @@ class AuroDropdown extends AuroElement$3 {
     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();
+      }
     }
   }
 
@@ -6961,7 +6944,6 @@ 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.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-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>
+    <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>
 

package/components/datepicker/demo/api.md

@@ -51,6 +51,7 @@
 | Method                        | Type                                   | Description                                      |
 |-------------------------------|----------------------------------------|--------------------------------------------------|
 | [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. |
+| [formatShortDate](#formatShortDate)             | `(date: any): string`                  | Simple formatter that ONLY WORKS FOR US DATES.<br />Returns formatted date like Apr 21 or Dec 25.<br /><br />**date**: undefined |
 | [renderHtmlActionClear](#renderHtmlActionClear)       | `(): TemplateResult`                   |                                                  |
 | [renderHtmlIconCalendar](#renderHtmlIconCalendar)      | `(): TemplateResult`                   |                                                  |
 | [renderHtmlIconError](#renderHtmlIconError)         | `(): TemplateResult`                   |                                                  |

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

@@ -16323,7 +16323,7 @@ class AuroFloatingUI {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -16348,7 +16348,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -16361,7 +16361,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -16444,11 +16444,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');
@@ -16459,7 +16455,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -16468,13 +16464,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
     });
@@ -16484,7 +16478,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -16520,7 +16514,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -17908,9 +17902,6 @@ class AuroDropdown extends AuroElement$4 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -18344,19 +18335,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();
+      }
     }
   }
 
@@ -18364,7 +18348,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.
@@ -24354,9 +24337,9 @@ class BaseInput extends AuroElement$2 {
         if (!this.shadowRoot.contains(this.getActiveElement())) {
           this.validation.validate(this);
         }
-      }
 
-      this.notifyValueChanged();
+        this.notifyValueChanged();
+      }
     }
 
     if (changedProperties.has('error')) {
@@ -27990,15 +27973,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
@@ -28736,7 +28710,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) {
@@ -29080,8 +29053,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/index.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-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>
+    <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>