@aurodesignsystem-dev/auro-formkit 0.0.0-pr1498.0 → 0.0.0-pr1499.1

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 && input.validationMessage.length > 0) {
+        if (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, '');
   }
 
   /**
@@ -10327,6 +10331,7 @@ class AuroInputUtilities {
     const maskOptions = this.getMaskOptions('date', normalizedFormat);
 
     if (!(valueObject instanceof Date) || Number.isNaN(valueObject.getTime()) || !maskOptions || typeof maskOptions.format !== 'function') {
+      console.debug('Invalid date object or mask options for formatting', { valueObject, maskOptions }); // eslint-disable-line no-console
       return undefined;
     }
 
@@ -11029,7 +11034,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get valueObject() {
-    return this._valueObject || this._computeDateObjectFallback(this.value);
+    return this._valueObject;
   }
 
   /**
@@ -11037,7 +11042,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get minObject() {
-    return this._minObject || this._computeDateObjectFallback(this.min);
+    return this._minObject;
   }
 
   /**
@@ -11045,31 +11050,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get 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);
+    return this._maxObject;
   }
 
   /**
@@ -11094,30 +11075,8 @@ 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() {
@@ -11138,8 +11097,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.hasAttribute('auro-input')) {
-      this.setAttribute('auro-input', '');
+    if (this.tagName.toLowerCase() !== 'auro-input') {
+      this.setAttribute('auro-input', true);
     }
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
@@ -11187,12 +11146,6 @@ 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,
@@ -11311,16 +11264,7 @@ class BaseInput extends AuroElement {
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
-        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) {
+        if (formattedValue) {
           this.inputElement.value = formattedValue;
         } else {
           this.inputElement.value = '';
@@ -11429,73 +11373,58 @@ class BaseInput extends AuroElement {
    * @returns {void}
    */
   configureAutoFormatting() {
-    // 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();
-      }
+    if (this.maskInstance) {
+      this.maskInstance.destroy();
+    }
 
-      // Pass new format to util
-      this.util.updateFormat(this.format);
+    // 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);
-        }
+    const maskOptions = this.util.getMaskOptions(this.type, this.format);
 
-        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;
-          }
-        });
+    if (this.inputElement && maskOptions.mask) {
 
-        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;
-          }
-        });
+      // 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.skipNextProgrammaticInputEvent = true;
+      this.inputElement.value = '';
+
+      this.maskInstance = IMask(this.inputElement, maskOptions);
+
+      this.maskInstance.on('accept', () => {
+        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', () => {
+        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;
     }
   }
 
@@ -11782,10 +11711,10 @@ class BaseInput extends AuroElement {
       },
       {
         name: 'Diners club',
-        regex: /^(?<num>30[0-5]|36|38)\d{0}/u,
+        regex: /^(?<num>36|38)\d{0}/u,
         formatLength: 16,
         errorMessage: CreditCardValidationMessage,
-        cardIcon: 'cc-dinersclub',
+        cardIcon: 'credit-card',
         maskFormat: "0000 000000 0000"
       },
       {
@@ -12195,7 +12124,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606100232';
+var formkitVersion = '202606101934';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -12533,10 +12462,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/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                                      |
-|-------------------------|------------------|-----------|-----------------------|-------------|--------------------------------------------------|
-| `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. |
+| 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. |
 
 ## Methods
 
-| 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. |
+| 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. |
 
 ## Events
 
@@ -40,8 +40,9 @@ 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: Element[] \| undefined; }>` |                                                  |
+| `auroMenu-optionsChange`      | `CustomEvent<{ options: any; }>`                 |                                                  |
 | `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. |
@@ -60,31 +61,34 @@ The `auro-menuoption` element provides users a way to define a menu option.
 
 ## Properties
 
-| 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`  |         |                                                  |
+| 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.      |
 
 ## Methods
 
-| Method             | Type                  |
-|--------------------|-----------------------|
-| `attachTo`         | `(): void`            |
-| `handleMenuChange` | `(): void`            |
-| `setSelected`      | `(value: any): void`  |
-| `updateActive`     | `(active: any): void` |
+| 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. |
 
 ## Events
 
 | Event                      | Type                | Description                                      |
 |----------------------------|---------------------|--------------------------------------------------|
-| `auroMenuOption-click`     | `CustomEvent<this>` | Notifies that this option has been clicked.      |
+| `auroMenuOption-click`     | `CustomEvent<this>` |                                                  |
 | `auroMenuOption-mouseover` | `CustomEvent<this>` | Notifies that this option has been hovered over. |
 
 ## Slots

package/components/menu/demo/customize.md

@@ -18,6 +18,7 @@
 <auro-anchorlink fluid href="#presetValue" class="level2 body-xs">Preset Value</auro-anchorlink>
 <auro-anchorlink fluid href="#presetValueMultiselect" class="level2 body-xs">Preset Value (Multi)</auro-anchorlink>
 <auro-anchorlink fluid href="#preselect" class="level2 body-xs">Pre-Selected</auro-anchorlink>
+<auro-anchorlink fluid href="#allowDeselect" class="level2 body-xs">Allow Deselect</auro-anchorlink>
 </auro-nav>
 </nav>
 <div class="mainContent">
@@ -603,6 +604,33 @@
 &lt;/auro-menu&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
+<auro-header level="3" id="allowDeselect">Allow Deselect</auro-header>
+<p>Use the <code>allowDeselect</code> attribute to allow users to click a selected option again to deselect it in single-select mode. In multi-select mode, deselection is always available regardless of this attribute.</p>
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/allow-deselect.html) -->
+<!-- The below content is automatically added from ./../apiExamples/allow-deselect.html -->
+<auro-menu allowDeselect>
+<auro-menuoption value="stops">Stops</auro-menuoption>
+<auro-menuoption value="price">Price</auro-menuoption>
+<auro-menuoption value="duration">Duration</auro-menuoption>
+<auro-menuoption value="departure">Departure</auro-menuoption>
+<auro-menuoption value="arrival">Arrival</auro-menuoption>
+</auro-menu>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+<span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/allow-deselect.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/allow-deselect.html -->
+<pre class="language-html"><code class="language-html">&lt;auro-menu allowDeselect&gt;
+  &lt;auro-menuoption value="stops"&gt;Stops&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="price"&gt;Price&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="duration"&gt;Duration&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="departure"&gt;Departure&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="arrival"&gt;Arrival&lt;/auro-menuoption&gt;
+&lt;/auro-menu&gt;</code></pre>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
 </section>
 </div>
 </div>