@aurodesignsystem-dev/auro-formkit 0.0.0-pr1492.5 → 0.0.0-pr1493.0

package/components/input/dist/registered.js

@@ -4490,7 +4490,7 @@ class AuroFormValidation {
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
-        if (input.validationMessage.length > 0) {
+        if (input && input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-combobox') && elem.errorMessage === '') {
@@ -10162,7 +10162,11 @@ class AuroInputUtilities {
             return part.value;
         }
       })
-      .join("");
+      .join("")
+      // Remove whitespace and leading/trailing special characters for IMask compatibility
+      // for example, ko-KR's format is `YYYY. MM. DD.` which causes issues with IMask if we don't remove the trailing period.
+      .replace(/\s/gu, '')
+      .replace(/^[^A-Z0-9]+|[^A-Z0-9]+$/gu, '');
   }
 
   /**
@@ -10318,27 +10322,16 @@ class AuroInputUtilities {
    * Converts a model value to a display value for the input element.
    * For full date formats, converts an ISO model value to the configured display format.
    * @private
-   * @param {string} value - The model value (ISO string for date types).
    * @param {Date|undefined} valueObject - Date object representation of value.
    * @param {string} format - The date format string.
-   * @returns {string}
+   * @returns {string | undefined}
    */
-  toFormattedValue(value, valueObject, format) {
-    if (!this.isFullDateFormat('date', format) || !value) {
-      return value;
-    }
-
-    if (!dateFormatter.isValidDate(value)) {
-      // For ISO-pattern strings that fail range validation (e.g. '2024-99-99'),
-      // return '' so inputElement stays empty and format-based validation is not triggered.
-      return (/^\d{4}-\d{2}-\d{2}$/u).test(value) ? '' : value;
-    }
-
+  toFormattedValue(valueObject, format) {
     const normalizedFormat = format.toLowerCase();
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
-      return value;
+      return undefined;
     }
 
     return maskOptions.format(valueObject);
@@ -11040,7 +11033,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get valueObject() {
-    return this._valueObject;
+    return this._valueObject || this._computeDateObjectFallback(this.value);
   }
 
   /**
@@ -11048,7 +11041,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get minObject() {
-    return this._minObject;
+    return this._minObject || this._computeDateObjectFallback(this.min);
   }
 
   /**
@@ -11056,7 +11049,31 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get maxObject() {
-    return this._maxObject;
+    return this._maxObject || this._computeDateObjectFallback(this.max);
+  }
+
+  /**
+   * Parses a date string into a Date object when the corresponding `_*Object`
+   * field hasn't been synced yet by `updated()`. Returns undefined when the
+   * input type/format isn't a full date or the string is not a valid date.
+   *
+   * Why this exists: a parent (datepicker) can call `inputN.validate()` from
+   * inside its own `updated()` before this input's `updated()` has run
+   * `syncDateValues()` — so `_valueObject`/`_maxObject` are still `undefined`
+   * and range checks would otherwise silently no-op (flipping the result to
+   * `valid` or `patternMismatch`).
+   * @private
+   * @param {string|undefined} dateStr - ISO date string from `value`/`min`/`max`.
+   * @returns {Date|undefined}
+   */
+  _computeDateObjectFallback(dateStr) {
+    if (!dateStr || !this.util || !this.util.isFullDateFormat(this.type, this.format)) {
+      return undefined;
+    }
+    if (!dateFormatter.isValidDate(dateStr)) {
+      return undefined;
+    }
+    return dateFormatter.stringToDateInstance(dateStr);
   }
 
   /**
@@ -11081,8 +11098,30 @@ class BaseInput extends AuroElement {
   connectedCallback() {
     super.connectedCallback();
 
+    // Mark for query selectors when registered under a versioned tag (e.g. inside
+    // a datepicker/combobox). Must run before parent components call validate() on
+    // their inner inputs — the validation framework matches via tag-or-attribute,
+    // and parents trigger validation during their own updated() cycle, which can
+    // precede this input's firstUpdated().
+    if (this.tagName.toLowerCase() !== 'auro-input' && !this.hasAttribute('auro-input')) {
+      this.setAttribute('auro-input', '');
+    }
+
     this.locale = this.domHandler.getLocale(this);
     notifyOnLangChange(this);
+
+    // Pre-compute lengthForType and date-object fields so a parent (e.g. datepicker)
+    // calling our validate() synchronously during its own updated() cycle sees
+    // populated values. Without this, range validation silently no-ops because
+    // `max.length === lengthForType` fails when lengthForType is still undefined.
+    // Rebuild util here (constructor seeded with en-US default) so configureDataForType's
+    // locale-derived format lookup uses the actual locale just resolved above.
+    this.util = new AuroInputUtilities({
+      locale: this.locale,
+      format: this.format
+    });
+    this.configureDataForType();
+    this.syncDateValues();
   }
 
   disconnectedCallback() {
@@ -11103,8 +11142,8 @@ class BaseInput extends AuroElement {
     }
 
     // add attribute for query selectors when auro-input is registered under a custom name
-    if (this.tagName.toLowerCase() !== 'auro-input') {
-      this.setAttribute('auro-input', true);
+    if (this.tagName.toLowerCase() !== 'auro-input' && !this.hasAttribute('auro-input')) {
+      this.setAttribute('auro-input', '');
     }
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
@@ -11152,6 +11191,12 @@ class BaseInput extends AuroElement {
             return;
           }
 
+          // While configureAutoFormatting is running, imask's internal updateControl
+          // writes el.value to align display with the masked value. A synthetic input
+          // event from that write would re-enter handleInput → processCreditCard mid-setup
+          // and clobber a Lit value that was just pushed by the parent combobox.
+          if (component._configuringMask) return;
+
           // If all guard clauses are passed, dispatch the event
           const inputEvent = new InputEvent('input', {
             bubbles: true,
@@ -11256,11 +11301,30 @@ class BaseInput extends AuroElement {
         this.hasValue = false;
       }
 
-      const formattedValue = this.type === 'date' ? this.util.toFormattedValue(this.value, this.valueObject, this.format) : this.value;
+      let formattedValue = this.value;
+      if (this.type === 'date') {
+        const formattedDate = this.util.toFormattedValue(this.valueObject, this.format);
+        if (!formattedDate) {
+          // if user entered unrecognized date format that cannot be parsed into a Date object,
+          // keep the raw value in the input so they can edit it instead of overwriting with an empty string
+          formattedValue = this.value;
+        } else {
+          formattedValue = formattedDate;
+        }
+      }
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
-        if (formattedValue) {
+        if (this.maskInstance && this.type === 'credit-card') {
+          // Route through the mask so its _value and el.value stay in lock-step
+          // (set value calls updateControl which writes el.value = displayValue).
+          // Writing el.value directly leaves the mask thinking displayValue is
+          // stale; _saveSelection on the next focus/click then warns. Scoped to
+          // credit-card so date's own formattedValue (raw ISO when calendar-invalid)
+          // isn't re-masked through the mm/dd/yyyy mask, which would truncate it
+          // and flip validity from patternMismatch to tooShort.
+          this.maskInstance.value = formattedValue || '';
+        } else if (formattedValue) {
           this.inputElement.value = formattedValue;
         } else {
           this.inputElement.value = '';
@@ -11369,58 +11433,73 @@ class BaseInput extends AuroElement {
    * @returns {void}
    */
   configureAutoFormatting() {
-    if (this.maskInstance) {
-      this.maskInstance.destroy();
-    }
-
-    // Pass new format to util
-    this.util.updateFormat(this.format);
-
-    const maskOptions = this.util.getMaskOptions(this.type, this.format);
-
-    if (this.inputElement && maskOptions.mask) {
-
-      // Stash and clear any existing value before IMask init.
-      // IMask's constructor processes the current input value which requires
-      // selection state — clearing first avoids that scenario entirely.
-      // When the format changes (e.g. locale switch) and we have a valid ISO
-      // model value, compute the display string for the NEW format instead of
-      // re-using the old display string, which may be invalid in the new mask.
-      let existingValue = this.inputElement.value;
-      if (
-        this.util.isFullDateFormat(this.type, this.format) &&
-        this.value &&
-        dateFormatter.isValidDate(this.value) &&
-        this.valueObject instanceof Date &&
-        !Number.isNaN(this.valueObject.getTime()) &&
-        typeof maskOptions.format === 'function'
-      ) {
-        existingValue = maskOptions.format(this.valueObject);
+    // Re-entrancy guard. The patched-setter's synthetic input event (suppressed
+    // by _configuringMask above) could otherwise trigger handleInput →
+    // processCreditCard → configureAutoFormatting before the outer call's
+    // set value has finished its alignCursor pass.
+    if (this._configuringMask) return;
+    this._configuringMask = true;
+    try {
+      if (this.maskInstance) {
+        this.maskInstance.destroy();
       }
 
-      this.skipNextProgrammaticInputEvent = true;
-      this.inputElement.value = '';
-
-      this.maskInstance = IMask(this.inputElement, maskOptions);
+      // Pass new format to util
+      this.util.updateFormat(this.format);
 
-      this.maskInstance.on('accept', () => {
-        this.value = this.util.toModelValue(this.maskInstance.value, this.format);
-        if (this.type === "date") {
-          this._rawMaskValue = this.maskInstance.value;
+      const maskOptions = this.util.getMaskOptions(this.type, this.format);
+
+      if (this.inputElement && maskOptions.mask) {
+
+        // Stash and clear any existing value before IMask init.
+        // IMask's constructor processes the current input value which requires
+        // selection state — clearing first avoids that scenario entirely.
+        // When the format changes (e.g. locale switch) and we have a valid ISO
+        // model value, compute the display string for the NEW format instead of
+        // re-using the old display string, which may be invalid in the new mask.
+        let existingValue = this.inputElement.value;
+        if (
+          this.util.isFullDateFormat(this.type, this.format) &&
+          this.value &&
+          dateFormatter.isValidDate(this.value) &&
+          this.valueObject instanceof Date &&
+          !Number.isNaN(this.valueObject.getTime()) &&
+          typeof maskOptions.format === 'function'
+        ) {
+          existingValue = maskOptions.format(this.valueObject);
         }
-      });
 
-      this.maskInstance.on('complete', () => {
-        this.value = this.util.toModelValue(this.maskInstance.value, this.format);
-        if (this.type === "date") {
-          this._rawMaskValue = this.maskInstance.value;
-        }
-      });
+        this.skipNextProgrammaticInputEvent = true;
+        this.inputElement.value = '';
+
+        this.maskInstance = IMask(this.inputElement, maskOptions);
+
+        this.maskInstance.on('accept', () => {
+          // Suppress propagation during configureAutoFormatting's own value-restoration
+          // (line below) — the mask emits 'accept' on every value-set, including ours,
+          // and we don't want to overwrite a value the parent just pushed.
+          if (this._configuringMask) return;
+          this.value = this.util.toModelValue(this.maskInstance.value, this.format);
+          if (this.type === "date") {
+            this._rawMaskValue = this.maskInstance.value;
+          }
+        });
 
-      // Restore the stashed value through IMask so it's properly masked
-      if (existingValue) {
-        this.maskInstance.value = existingValue;
+        this.maskInstance.on('complete', () => {
+          if (this._configuringMask) return;
+          this.value = this.util.toModelValue(this.maskInstance.value, this.format);
+          if (this.type === "date") {
+            this._rawMaskValue = this.maskInstance.value;
+          }
+        });
+
+        // Restore the stashed value through IMask so it's properly masked
+        if (existingValue) {
+          this.maskInstance.value = existingValue;
+        }
       }
+    } finally {
+      this._configuringMask = false;
     }
   }
 
@@ -11707,10 +11786,10 @@ class BaseInput extends AuroElement {
       },
       {
         name: 'Diners club',
-        regex: /^(?<num>36|38)\d{0}/u,
+        regex: /^(?<num>30[0-5]|36|38)\d{0}/u,
         formatLength: 16,
         errorMessage: CreditCardValidationMessage,
-        cardIcon: 'credit-card',
+        cardIcon: 'cc-dinersclub',
         maskFormat: "0000 000000 0000"
       },
       {
@@ -12120,7 +12199,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606031942';
+var formkitVersion = '202606181613';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12458,10 +12537,6 @@ class AuroInput extends BaseInput {
       return i18n(this.lang, this.type);
     }
 
-    if (this.type === 'date') {
-      return i18n(this.lang, this.dateFormatMap[this.format] || 'dateMMDDYYYY');
-    }
-
     return '';
   }
 

package/components/input/dist/utilities.d.ts

@@ -75,10 +75,9 @@ export class AuroInputUtilities {
      * Converts a model value to a display value for the input element.
      * For full date formats, converts an ISO model value to the configured display format.
      * @private
-     * @param {string} value - The model value (ISO string for date types).
      * @param {Date|undefined} valueObject - Date object representation of value.
      * @param {string} format - The date format string.
-     * @returns {string}
+     * @returns {string | undefined}
      */
     private toFormattedValue;
 }

package/components/menu/demo/api.md

@@ -7,32 +7,32 @@ The `auro-menu` element provides users a way to select from a list of options.
 
 ## Properties
 
-| Property                   | Attribute                  | Modifiers | Type                  | Default     | Description                                      |
-|----------------------------|----------------------------|-----------|-----------------------|-------------|--------------------------------------------------|
-| `allowDeselect`            | `allowDeselect`            |           | `boolean`             | false       | Allows deselecting an already selected option when clicked again in single-select mode. |
-| `currentLabel`             |                            | readonly  | `string`              |             |                                                  |
-| `disabled`                 | `disabled`                 |           | `boolean`             |             | When true, the entire menu and all options are disabled. |
-| `hasLoadingPlaceholder`    | `hasLoadingPlaceholder`    |           | `boolean`             |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
-| `index`                    |                            |           | `number`              |             |                                                  |
-| `items`                    |                            | readonly  | `HTMLElement[]`       |             |                                                  |
-| `loading`                  | `loading`                  |           | `boolean`             | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
-| `matchWord`                | `matchword`                |           | `string`              | "undefined" | Specifies a string used to highlight matched string parts in options. |
-| `multiSelect`              | `multiselect`              |           | `boolean`             | false       | When true, the selected option can be multiple options. |
-| `noCheckmark`              | `nocheckmark`              |           | `boolean`             | false       | When true, selected option will not show the checkmark. |
-| `optionActive`             | `optionactive`             |           | `object`              | "undefined" | Specifies the current active menuOption.         |
-| `optionSelected`           | `optionSelected`           |           | `object`              | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
-| `options`                  |                            | readonly  | `array`               |             | Available menu options.                          |
-| `selectAllMatchingOptions` | `selectAllMatchingOptions` |           | `boolean`             | false       | When true, selects all options that match the provided value/key when setting value and multiselect is enabled. |
-| `selectedOption`           |                            | readonly  | `HTMLElement \| null` |             | Gets the first selected option, or null if none. |
-| `selectedOptions`          |                            | readonly  | `HTMLElement[]`       |             | Gets the currently selected options.             |
-| `value`                    | `value`                    |           | `string`              |             | The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values. |
+| Property                | Attribute        | Modifiers | Type                  | Default     | Description                                      |
+|-------------------------|------------------|-----------|-----------------------|-------------|--------------------------------------------------|
+| `currentLabel`          |                  | readonly  | `string`              |             |                                                  |
+| `disabled`              | `disabled`       |           | `boolean`             |             | When true, the entire menu and all options are disabled. |
+| `hasLoadingPlaceholder` |                  | readonly  | `boolean`             |             | Getter for loading placeholder state.            |
+| `index`                 |                  |           | `number`              |             |                                                  |
+| `layout`                |                  |           | `string`              |             |                                                  |
+| `loading`               | `loading`        |           | `boolean`             | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
+| `matchWord`             | `matchword`      |           | `string`              | "undefined" | Specifies a string used to highlight matched string parts in options. |
+| `multiSelect`           | `multiselect`    |           | `boolean`             | false       | When true, the selected option can be multiple options. |
+| `noCheckmark`           | `nocheckmark`    |           | `boolean`             | false       | When true, selected option will not show the checkmark. |
+| `optionActive`          | `optionactive`   |           | `object`              | "undefined" | Specifies the current active menuOption.         |
+| `optionSelected`        | `optionSelected` |           | `object`              | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
+| `options`               |                  | readonly  | `HTMLElement[]`       |             |                                                  |
+| `selectedOption`        |                  | readonly  | `HTMLElement \| null` |             | Gets the first selected option, or null if none. |
+| `selectedOptions`       |                  | readonly  | `HTMLElement[]`       |             | Gets the currently selected options as an array. |
+| `value`                 | `value`          |           | `string`              | "undefined" | The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values. |
 
 ## Methods
 
-| Method               | Type                          | Description                                      |
-|----------------------|-------------------------------|--------------------------------------------------|
-| `reset`              | `(): void`                    | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
-| `updateActiveOption` | `(option: HTMLElement): void` | Updates the currently active option in the menu.<br /><br />**option**: The option to set as active. |
+| Method               | Type                                             | Description                                      |
+|----------------------|--------------------------------------------------|--------------------------------------------------|
+| `navigateOptions`    | `(direction: string): void`                      | Navigates through options using keyboard.<br /><br />**direction**: 'up' or 'down'. |
+| `reset`              | `(): void`                                       | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
+| `selectByValue`      | `(value: string \| string[] \| null \| undefined): void` | Selects options by value.<br /><br />**value**: The value(s) to select. |
+| `updateActiveOption` | `(indexOrOption: number \| HTMLElement): void`   | Updates the active option state and dispatches events.<br />Accepts either a numeric index or an HTMLElement option.<br /><br />**indexOrOption**: Index of the option or the option element to make active. |
 
 ## Events
 
@@ -40,9 +40,8 @@ The `auro-menu` element provides users a way to select from a list of options.
 |-------------------------------|--------------------------------------------------|--------------------------------------------------|
 | `auroMenu-activatedOption`    | `CustomEvent<Element>`                           | Notifies that a menuoption has been made `active`. |
 | `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
-| `auroMenu-deselectPrevented`  | `CustomEvent<{ values: HTMLElement[] }>`         | Notifies that deselection was prevented and includes the affected options in `detail.values`. |
 | `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
-| `auroMenu-optionsChange`      | `CustomEvent<{ options: any; }>`                 |                                                  |
+| `auroMenu-optionsChange`      | `CustomEvent<{ options: Element[] \| undefined; }>` |                                                  |
 | `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that an attempt to select a menuoption by matching a value has failed. |
 | `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
 | `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
@@ -61,34 +60,31 @@ The `auro-menuoption` element provides users a way to define a menu option.
 
 ## Properties
 
-| Property      | Attribute  | Modifiers | Type      | Default | Description                                      |
-|---------------|------------|-----------|-----------|---------|--------------------------------------------------|
-| `disabled`    | `disabled` |           | `boolean` | false   | When true, disables the menu option.             |
-| `iconTag`     |            |           |           |         |                                                  |
-| `isActive`    |            | readonly  | `boolean` |         | Returns whether the menu option is currently active and selectable.<br />An option is considered active if it is not hidden, not disabled, and not static. |
-| `key`         | `key`      |           | `string`  |         | Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used. |
-| `noMatch`     | `nomatch`  |           | `boolean` | false   | When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match. |
-| `selected`    | `selected` |           | `boolean` | false   | Specifies that an option is selected.            |
-| `tabIndex`    | `tabIndex` |           | `number`  |         | Specifies the tab index of the menu option.      |
-| `unsubscribe` |            |           | `number`  | null    |                                                  |
-| `value`       | `value`    |           | `string`  |         | Specifies the value to be sent to a server.      |
+| Property      | Attribute     | Modifiers | Type      | Default | Description                                      |
+|---------------|---------------|-----------|-----------|---------|--------------------------------------------------|
+| `disabled`    | `disabled`    |           | `boolean` | false   |                                                  |
+| `iconTag`     |               |           |           |         |                                                  |
+| `isActive`    |               | readonly  | `boolean` |         | Returns whether the menu option is currently active and selectable. |
+| `layout`      |               |           | `string`  |         |                                                  |
+| `noCheckmark` | `noCheckmark` |           | `boolean` | false   |                                                  |
+| `noMatch`     | `nomatch`     |           | `boolean` | false   | When true, marks this option as the "no matching results" placeholder shown by combobox<br />when the user's input does not match any available options. |
+| `selected`    | `selected`    |           | `boolean` | false   |                                                  |
+| `value`       | `value`       |           | `string`  |         |                                                  |
 
 ## Methods
 
-| Method                | Type                          | Description                                      |
-|-----------------------|-------------------------------|--------------------------------------------------|
-| `attachTo`            | `(service: Object): void`     | Attaches this menu option to a menu service and subscribes to its events.<br />This method enables the option to participate in menu selection and highlighting logic.<br /><br />**service**: The menu service instance to attach to. |
-| `bindEvents`          | `(): void`                    | Sets up event listeners for user interaction with the menu option.<br />This function enables click and mouse enter events to trigger selection and highlighting logic. |
-| `handleMenuChange`    | `(event: Object): void`       | Handles changes from the menu service and updates the option's state.<br />This function synchronizes the option's properties and selection/highlight state with menu events.<br /><br />**event**: The event object from the menu service. |
-| `setInternalSelected` | `(isSelected: boolean): void` | Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.<br />This function ensures the option's selection state is synchronized with menu logic and notifies listeners.<br /><br />**isSelected**: Whether the option should be marked as selected. |
-| `setSelected`         | `(isSelected: boolean): void` | Sets the selected state of the menu option.<br />This function updates whether the option is currently selected.<br /><br />**isSelected**: Whether the option should be marked as selected. |
-| `updateActive`        | `(isActive: boolean): void`   | Updates the active state and visual highlighting of the menu option.<br />This function toggles the option's active status and applies or removes the active CSS class.<br /><br />**isActive**: Whether the option should be marked as active. |
+| Method             | Type                  |
+|--------------------|-----------------------|
+| `attachTo`         | `(): void`            |
+| `handleMenuChange` | `(): void`            |
+| `setSelected`      | `(value: any): void`  |
+| `updateActive`     | `(active: any): void` |
 
 ## Events
 
 | Event                      | Type                | Description                                      |
 |----------------------------|---------------------|--------------------------------------------------|
-| `auroMenuOption-click`     | `CustomEvent<this>` |                                                  |
+| `auroMenuOption-click`     | `CustomEvent<this>` | Notifies that this option has been clicked.      |
 | `auroMenuOption-mouseover` | `CustomEvent<this>` | Notifies that this option has been hovered over. |
 
 ## Slots

package/components/menu/demo/css-only.html

@@ -0,0 +1,57 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/css-only.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-menu | CSS only</title>
+
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+
+    <!-- Legacy reference is still needed to support auro-menu'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 -->
+    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
+    <style>
+      table {
+        --ds-color-container-secondary-default: transparent;
+      }
+
+      tr:not(:last-of-type) {
+        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+      }
+    </style>
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.min.js';
+      await renderPage('./css-only.md');
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+  </body>
+</html>