@aurodesignsystem-dev/auro-formkit 0.0.0-pr1271.10 → 0.0.0-pr1271.12

package/components/menu/demo/api.js

@@ -2,9 +2,9 @@
 
 import { auroMenuResetExample } from '../apiExamples/reset';
 import { auroMenuMatchWordExample } from '../apiExamples/match-word';
+import { initKeysExample } from '../apiExamples/keys';
 import { auroMenuLoadingExample } from '../apiExamples/loading';
 import { initSelectAllMatchingOptionsExample } from '../apiExamples/select-all-matching-options';
-// import { initKeysExample } from '../apiExamples/keys.js';
 import '../src/registered.js';
 
 export function initExamples(initCount) {
@@ -12,12 +12,11 @@ export function initExamples(initCount) {
 
   try {
     // javascript example function calls to be added here upon creation to test examples
-    auroMenuResetExample();
-    auroMenuMatchWordExample();
-    auroMenuCustomEventExample();
+    initKeysExample();
     auroMenuLoadingExample();
+    auroMenuMatchWordExample();
     initSelectAllMatchingOptionsExample();
-    // initKeysExample();
+    auroMenuResetExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/menu/demo/api.md

@@ -15,7 +15,6 @@ The `auro-menu` element provides users a way to select from a list of options.
 | [hasLoadingPlaceholder](#hasLoadingPlaceholder)    | `hasLoadingPlaceholder`    |           | `boolean`             |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
 | [index](#index)                    |                            |           | `number`              |             |                                                  |
 | [items](#items)                    |                            | readonly  | `HTMLElement[]`       |             |                                                  |
-| [layout](#layout)                   |                            |           | `string`              |             |                                                  |
 | [loading](#loading)                  | `loading`                  |           | `boolean`             | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
 | [matchWord](#matchWord)                | `matchword`                |           | `string`              | "undefined" | Specifies a string used to highlight matched string parts in options. |
 | [multiSelect](#multiSelect)              | `multiselect`              |           | `boolean`             | false       | When true, the selected option can be multiple options. |
@@ -66,7 +65,7 @@ The `auro-menuoption` element provides users a way to define a menu option.
 | [disabled](#disabled)    | `disabled` |           | `boolean` | false   | When true, disables the menu option.             |
 | [iconTag](#iconTag)     |            |           | `string`  |         |                                                  |
 | [isActive](#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. |
-| [layout](#layout)      |            |           | `string`  |         |                                                  |
+| [key](#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. |
 | [selected](#selected)    | `selected` |           | `boolean` | false   | Specifies that an option is selected.            |
 | [tabIndex](#tabIndex)    | `tabIndex` |           | `number`  |         | Specifies the tab index of the menu option.      |
 | [unsubscribe](#unsubscribe) |            |           |           | null    |                                                  |
@@ -259,6 +258,101 @@ The `auro-menuoption` element supports the placement of the `disabled` attribute
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Keys
+
+When setting the `value` property, matches are actually performed on the value of the `key` property of the `auro-menuoption` and not the `value` property. By default, the value of `key` is equal to the value of the `value` property. However, for advanced use cases, the `key` value can be overriden to allow for more specific matches.
+
+In the below example, there is a list of "popular" options at the top, with the same values repeated underneath. To allow more specific selections, we can add a `key` attribute to the top options to allow them to be more specifically selected, or to prevent them from interfering with matches on the lower options.
+
+In the below example, setting the value of the menu `'stops'` will select the bottom-most option with the value `'stops'`, and setting the value of menu to `'stops-top'` will select the top-most option with the value `'stops'` since the key now differs from the value. In either case, the resulting value of the menu will be `'stops'` because the resulting value of the menu is based on the `value` property and not the `key` property.
+
+Due to a limitation with Lit change detection to the `value` property, if multiple options with the same exist and one is selected, you must first clear the current value before attempting to select another option with the same value, even if the keys are unique. See code example below.
+
+_Note: Since the value passed to the `value` property when programmatically setting it is overwritten with the proper derived value once the menu has updated, note that it will take one lifecycle before the `value` property is updated to the value that represents the actual menu state._
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/keys.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/keys.html -->
+  <auro-button id="stopsTopButton">Call `menu.value = 'stops-top'`</auro-button>
+  <auro-button id="stopsButton">Call `menu.value = 'stops'`</auro-button>
+  <auro-menu id="keys-menu">
+    <auro-menuoption value="stops" key="stops-top">Stops</auro-menuoption>
+    <auro-menuoption value="price" key="price-top">Price</auro-menuoption>
+    <hr>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+  </auro-menu>
+  <p id="output" class="body-sm"></p>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/keys.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/keys.html -->
+
+```html
+<auro-button id="stopsTopButton">Call `menu.value = 'stops-top'`</auro-button>
+<auro-button id="stopsButton">Call `menu.value = 'stops'`</auro-button>
+<auro-menu id="keys-menu">
+  <auro-menuoption value="stops" key="stops-top">Stops</auro-menuoption>
+  <auro-menuoption value="price" key="price-top">Price</auro-menuoption>
+  <hr>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+</auro-menu>
+<p id="output" class="body-sm"></p>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/keys.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/keys.js -->
+
+```js
+export function initKeysExample() {
+  const menu = document.getElementById('keys-menu');
+  const stopsButton = document.getElementById('stopsButton');
+  const stopsTopButton = document.getElementById('stopsTopButton');
+  const output = document.getElementById('output');
+
+  const createConsoleEntry = (message) => {
+    const node = document.createElement('span');
+    node.innerHTML = message;
+    output.appendChild(node);
+    output.appendChild(document.createElement('br'));
+  };
+
+  const resetConsole = () => {
+    output.innerHTML = '';
+  };
+
+  const updateMenuValue = (value) => {
+    resetConsole();
+    createConsoleEntry(`Setting menu.value: <em>"${value}"</em>`);
+    menu.value = '';
+    menu.value = value;
+    createConsoleEntry(`menu.value before next lifecycle: <em>"${menu.value}"</em>`);
+    setTimeout(() => {
+      createConsoleEntry(`menu.value after lifecycle: <em>"${menu.value}"</em>`);
+    });
+  };
+
+  stopsButton.addEventListener('click', () => {
+    updateMenuValue('stops');
+  });
+
+  stopsTopButton.addEventListener('click', () => {
+    updateMenuValue('stops-top');
+  });
+};
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Loading
 
 While content is loading, the menu can either remain empty or display a loading placeholder
@@ -266,9 +360,7 @@ While content is loading, the menu can either remain empty or display a loading
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
   <!-- The below content is automatically added from ./../apiExamples/loading.html -->
-  <script>
-  </script>
-  <auro-button common id="loadingExampleToggleButton">Toggle Loading</auro-button>
+  <auro-button id="loadingExampleToggleButton">Toggle Loading</auro-button>
   <table id="loadingExampleTable">
     <thead>
       <tr>
@@ -328,9 +420,7 @@ While content is loading, the menu can either remain empty or display a loading
 <!-- The below code snippet is automatically added from ./../apiExamples/loading.html -->
 
 ```html
-<script>
-</script>
-<auro-button common id="loadingExampleToggleButton">Toggle Loading</auro-button>
+<auro-button id="loadingExampleToggleButton">Toggle Loading</auro-button>
 <table id="loadingExampleTable">
   <thead>
     <tr>

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

@@ -21,6 +21,43 @@ function auroMenuMatchWordExample() {
   matchWordInput.addEventListener('keyup', updateMatch);
 }
 
+function initKeysExample() {
+  const menu = document.getElementById('keys-menu');
+  const stopsButton = document.getElementById('stopsButton');
+  const stopsTopButton = document.getElementById('stopsTopButton');
+  const output = document.getElementById('output');
+
+  const createConsoleEntry = (message) => {
+    const node = document.createElement('span');
+    node.innerHTML = message;
+    output.appendChild(node);
+    output.appendChild(document.createElement('br'));
+  };
+
+  const resetConsole = () => {
+    output.innerHTML = '';
+  };
+
+  const updateMenuValue = (value) => {
+    resetConsole();
+    createConsoleEntry(`Setting menu.value: <em>"${value}"</em>`);
+    menu.value = '';
+    menu.value = value;
+    createConsoleEntry(`menu.value before next lifecycle: <em>"${menu.value}"</em>`);
+    setTimeout(() => {
+      createConsoleEntry(`menu.value after lifecycle: <em>"${menu.value}"</em>`);
+    });
+  };
+
+  stopsButton.addEventListener('click', () => {
+    updateMenuValue('stops');
+  });
+
+  stopsTopButton.addEventListener('click', () => {
+    updateMenuValue('stops-top');
+  });
+}
+
 function auroMenuLoadingExample() {
   document.querySelector("#loadingExampleToggleButton").addEventListener("click", () => {
     document.querySelectorAll("#loadingExampleTable auro-menu").forEach(menu => menu.toggleAttribute("loading"));
@@ -433,6 +470,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 
 /**
  * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
@@ -525,6 +563,13 @@ class AuroMenuOption extends AuroElement {
       /**
        * @private
        */
+      layout: {
+        type: 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.
+       */
       key: {
         type: String,
         reflect: true
@@ -1632,6 +1677,13 @@ class AuroMenu extends AuroElement {
         type: Boolean
       },
 
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
       /**
        * Indent level for submenus.
        * @private
@@ -2200,12 +2252,11 @@ function initExamples(initCount) {
 
   try {
     // javascript example function calls to be added here upon creation to test examples
-    auroMenuResetExample();
-    auroMenuMatchWordExample();
-    auroMenuCustomEventExample();
+    initKeysExample();
     auroMenuLoadingExample();
+    auroMenuMatchWordExample();
     initSelectAllMatchingOptionsExample();
-    // initKeysExample();
+    auroMenuResetExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/menu/demo/index.js

@@ -1,7 +1,5 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
-// import { initKeysExample } from '../apiExamples/keys.js';
-
 import { AuroMenu } from '../src/auro-menu.js';
 import { AuroMenuOption } from '../src/auro-menuoption.js';
 
@@ -15,7 +13,6 @@ export function initExamples(initCount) {
 
   try {
     // javascript example function calls to be added here upon creation to test examples
-    // initKeysExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

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

@@ -378,6 +378,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 
 /**
  * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
@@ -470,6 +471,13 @@ class AuroMenuOption extends AuroElement {
       /**
        * @private
        */
+      layout: {
+        type: 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.
+       */
       key: {
         type: String,
         reflect: true
@@ -1577,6 +1585,13 @@ class AuroMenu extends AuroElement {
         type: Boolean
       },
 
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
       /**
        * Indent level for submenus.
        * @private

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

@@ -34,6 +34,12 @@ export class AuroMenu extends AuroElement {
         hasLoadingPlaceholder: {
             type: BooleanConstructor;
         };
+        /**
+         * @private
+         */
+        layout: {
+            type: StringConstructor;
+        };
         /**
          * Indent level for submenus.
          * @private
@@ -118,11 +124,6 @@ export class AuroMenu extends AuroElement {
             reflect: boolean;
             attribute: string;
         };
-        layout: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
     };
     static get styles(): import("lit").CSSResult[];
     /**

package/components/menu/dist/auro-menuoption.d.ts

@@ -1,5 +1,6 @@
 /**
  * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
@@ -32,6 +33,12 @@ export class AuroMenuOption extends AuroElement {
         /**
          * @private
          */
+        layout: {
+            type: StringConstructor;
+        };
+        /**
+         * 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.
+         */
         key: {
             type: StringConstructor;
             reflect: boolean;
@@ -78,11 +85,6 @@ export class AuroMenuOption extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
-        layout: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
     };
     static get styles(): import("lit").CSSResult[];
     /**

package/components/menu/dist/index.js

@@ -352,6 +352,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 
 /**
  * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
@@ -444,6 +445,13 @@ class AuroMenuOption extends AuroElement {
       /**
        * @private
        */
+      layout: {
+        type: 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.
+       */
       key: {
         type: String,
         reflect: true
@@ -1551,6 +1559,13 @@ class AuroMenu extends AuroElement {
         type: Boolean
       },
 
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
       /**
        * Indent level for submenus.
        * @private

package/components/menu/dist/registered.js

@@ -299,6 +299,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 
 /**
  * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
@@ -391,6 +392,13 @@ class AuroMenuOption extends AuroElement {
       /**
        * @private
        */
+      layout: {
+        type: 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.
+       */
       key: {
         type: String,
         reflect: true
@@ -1498,6 +1506,13 @@ class AuroMenu extends AuroElement {
         type: Boolean
       },
 
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
       /**
        * Indent level for submenus.
        * @private

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

@@ -1645,7 +1645,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202601091731';
+var formkitVersion = '202601091820';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -1620,7 +1620,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202601091731';
+var formkitVersion = '202601091820';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/dist/index.js

@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202601091731';
+var formkitVersion = '202601091820';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

package/components/radio/dist/registered.js

@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202601091731';
+var formkitVersion = '202601091820';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.

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

@@ -4352,7 +4352,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202601091731';
+var formkitVersion$1 = '202601091820';
 
 class AuroElement extends i$3 {
   static get properties() {
@@ -5999,7 +5999,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202601091731';
+var formkitVersion = '202601091820';
 
 var styleCss$2 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
 
@@ -7487,6 +7487,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 
 /**
  * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
@@ -7579,6 +7580,13 @@ class AuroMenuOption extends AuroElement$1 {
       /**
        * @private
        */
+      layout: {
+        type: 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.
+       */
       key: {
         type: String,
         reflect: true
@@ -8686,6 +8694,13 @@ class AuroMenu extends AuroElement$1 {
         type: Boolean
       },
 
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
       /**
        * Indent level for submenus.
        * @private

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

@@ -4260,7 +4260,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202601091731';
+var formkitVersion$1 = '202601091820';
 
 class AuroElement extends i$3 {
   static get properties() {
@@ -5907,7 +5907,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202601091731';
+var formkitVersion = '202601091820';
 
 var styleCss$2 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
 
@@ -7395,6 +7395,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 
 /**
  * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
  *
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
  * @slot - Specifies text for an option, but is not the value.
@@ -7487,6 +7488,13 @@ class AuroMenuOption extends AuroElement$1 {
       /**
        * @private
        */
+      layout: {
+        type: 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.
+       */
       key: {
         type: String,
         reflect: true
@@ -8594,6 +8602,13 @@ class AuroMenu extends AuroElement$1 {
         type: Boolean
       },
 
+      /**
+       * @private
+       */
+      layout: {
+        type: String
+      },
+
       /**
        * Indent level for submenus.
        * @private