@aurodesignsystem-dev/auro-formkit 0.0.0-pr1504.0 → 0.0.0-pr1506.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 === '') {
@@ -11034,7 +11034,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get valueObject() {
-    return this._valueObject;
+    return this._valueObject || this._computeDateObjectFallback(this.value);
   }
 
   /**
@@ -11042,7 +11042,7 @@ class BaseInput extends AuroElement {
    * @returns {Date|undefined}
    */
   get minObject() {
-    return this._minObject;
+    return this._minObject || this._computeDateObjectFallback(this.min);
   }
 
   /**
@@ -11050,7 +11050,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);
   }
 
   /**
@@ -11075,8 +11099,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() {
@@ -11096,10 +11142,6 @@ class BaseInput extends AuroElement {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
 
-    // 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);
-    }
     this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     // use validity message override if declared when initializing the component
@@ -11146,6 +11188,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,
@@ -11264,7 +11312,16 @@ class BaseInput extends AuroElement {
 
       if (formattedValue !== this.inputElement.value) {
         this.skipNextProgrammaticInputEvent = true;
-        if (formattedValue) {
+        if (this.maskInstance && this.type !== 'date') {
+          // 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. Date is
+          // excluded because its formattedValue can be raw ISO when the calendar
+          // is invalid, and re-masking through mm/dd/yyyy 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 = '';
@@ -11373,58 +11430,82 @@ 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);
+    // _configuringMask gates two things: external re-entry into this method
+    // while setup is mid-flight (from property changes that call back here),
+    // and the accept/complete listeners below — both need to ignore the mask
+    // events fired by our own value-restore step.
+    if (this._configuringMask) return;
+    this._configuringMask = true;
+    try {
+      // Destroy any prior mask so IMask can attach fresh under the new format.
+      if (this.maskInstance) {
+        this.maskInstance.destroy();
       }
 
-      this.skipNextProgrammaticInputEvent = true;
-      this.inputElement.value = '';
-
-      this.maskInstance = IMask(this.inputElement, maskOptions);
+      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) {
+        // Capture the current display so it can be re-applied after IMask
+        // attaches. The restore at the bottom goes through maskInstance.value
+        // (not inputElement.value directly) so the mask's internal state and
+        // the input's displayed text stay in lock-step.
+        let existingValue = this.inputElement.value;
+
+        // Format-change case (e.g. locale switch): existingValue is the OLD
+        // mask's display string and may not parse under the new mask. When
+        // we have a valid date model, rebuild the display from valueObject
+        // (the canonical source) using the new mask's format function.
+        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;
-        }
-      });
+        // Clear before IMask attaches so the constructor seeds an empty
+        // internal value. Otherwise IMask reads the stale unmasked string
+        // and emits a spurious 'accept' before the restore below runs.
+        this.skipNextProgrammaticInputEvent = true;
+        this.inputElement.value = '';
+
+        this.maskInstance = IMask(this.inputElement, maskOptions);
+
+        // Mask fires 'accept' on every value change, including the restore
+        // step below. Skip events fired during configureAutoFormatting so
+        // we don't overwrite a value the parent just pushed.
+        this.maskInstance.on('accept', () => {
+          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;
+        // Mask fires 'complete' on the restore step below for any value that
+        // happens to be a complete match. Same setup-suppression as 'accept'.
+        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;
+          }
+        });
+
+        // Write existingValue through the mask (not the input directly) so
+        // the mask reformats it under the new rules and keeps its internal
+        // _value aligned with the input's displayed text.
+        if (existingValue) {
+          this.maskInstance.value = existingValue;
+        }
       }
+    } finally {
+      this._configuringMask = false;
     }
   }
 
@@ -11711,10 +11792,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"
       },
       {
@@ -12124,7 +12205,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202606141505';
+var formkitVersion = '202606190840';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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/customize.md

@@ -18,7 +18,6 @@
 <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">
@@ -604,33 +603,6 @@
 &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>