@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.1

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

@@ -1322,13 +1322,10 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
-    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    if (this.selectedOptions.length < previousCount) {
-      this.stageUpdate();
-    }
+    this.stageUpdate();
   }
 
   /**
@@ -1748,6 +1745,8 @@ class AuroMenu extends AuroElement {
      */
     this.size = "sm";
 
+    // Value of the selected options
+    this.value = undefined;
     // Currently selected option
     this.optionSelected = undefined;
     // String used for highlighting/filtering

package/components/menu/demo/index.md

@@ -1,7 +1,7 @@
 <!--
- THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
- ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
- ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
+THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
 # Menu
@@ -29,44 +29,42 @@ The `<auro-menu>` element should be used in situations where users may:
 ### Basic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/preselect.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/preselect.html -->
-  <auro-menu>
-    <auro-menuoption value="new tab">New tab</auro-menuoption>
-    <auro-menuoption value="new window" selected>New window</auro-menuoption>
-    <auro-menuoption value="open file">Open file</auro-menuoption>
-    <auro-menuoption value="open location">Open location</auro-menuoption>
-    <hr>
-    <auro-menuoption value="close window">Close window</auro-menuoption>
-    <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
-    <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
-    <hr>
-    <auro-menuoption value="share" disabled>Share</auro-menuoption>
-    <hr>
-    <auro-menuoption value="print">Print</auro-menuoption>
-  </auro-menu>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/preselect.html) -->
+<!-- The below content is automatically added from ./../apiExamples/preselect.html -->
+<auro-menu>
+<auro-menuoption value="new tab">New tab</auro-menuoption>
+<auro-menuoption value="new window" selected>New window</auro-menuoption>
+<auro-menuoption value="open file">Open file</auro-menuoption>
+<auro-menuoption value="open location">Open location</auro-menuoption>
+<hr>
+<auro-menuoption value="close window">Close window</auro-menuoption>
+<auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
+<auro-menuoption value="save page as...">Save page as...</auro-menuoption>
+<hr>
+<auro-menuoption value="share" disabled>Share</auro-menuoption>
+<hr>
+<auro-menuoption value="print">Print</auro-menuoption>
+</auro-menu>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/preselect.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/preselect.html -->
 
-```html
-<auro-menu>
-  <auro-menuoption value="new tab">New tab</auro-menuoption>
-  <auro-menuoption value="new window" selected>New window</auro-menuoption>
-  <auro-menuoption value="open file">Open file</auro-menuoption>
-  <auro-menuoption value="open location">Open location</auro-menuoption>
-  <hr>
-  <auro-menuoption value="close window">Close window</auro-menuoption>
-  <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
-  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
-  <hr>
-  <auro-menuoption value="share" disabled>Share</auro-menuoption>
-  <hr>
-  <auro-menuoption value="print">Print</auro-menuoption>
-</auro-menu>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-menu&gt;
+  &lt;auro-menuoption value="new tab"&gt;New tab&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="new window" selected&gt;New window&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="open file"&gt;Open file&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="open location"&gt;Open location&lt;/auro-menuoption&gt;
+  &lt;hr&gt;
+  &lt;auro-menuoption value="close window"&gt;Close window&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="close tab" disabled&gt;Close tab&lt;/auro-menuoption&gt;
+  &lt;auro-menuoption value="save page as..."&gt;Save page as...&lt;/auro-menuoption&gt;
+  &lt;hr&gt;
+  &lt;auro-menuoption value="share" disabled&gt;Share&lt;/auro-menuoption&gt;
+  &lt;hr&gt;
+  &lt;auro-menuoption value="print"&gt;Print&lt;/auro-menuoption&gt;
+&lt;/auro-menu&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

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

@@ -1230,13 +1230,10 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
-    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    if (this.selectedOptions.length < previousCount) {
-      this.stageUpdate();
-    }
+    this.stageUpdate();
   }
 
   /**
@@ -1656,6 +1653,8 @@ class AuroMenu extends AuroElement {
      */
     this.size = "sm";
 
+    // Value of the selected options
+    this.value = undefined;
     // Currently selected option
     this.optionSelected = undefined;
     // String used for highlighting/filtering

package/components/menu/demo/keyboard-behavior.md

@@ -0,0 +1,18 @@
+<auro-header level="1" id="overview">Menu - Keyboard Behavior</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
+<p>The <code>&lt;auro-menu&gt;</code> component does not participate in the <code>tabindex</code> sequence directly. Keyboard navigation is managed by the parent component (e.g., <code>&lt;auro-select&gt;</code>, <code>&lt;auro-combobox&gt;</code>) through their keyboard strategy classes.</p>
+<auro-header level="2" id="keyEvents">Key Events</auro-header>
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyEvents.md) -->
+<!-- The below content is automatically added from ./../docs/partials/keyEvents.md -->
+<!-- auro-menu does not implement direct keyboard event handling. -->
+<!-- Keyboard navigation is delegated to parent components (auro-select, auro-combobox) via their keyboard strategy files. -->
+<div class="note">
+<p><strong>Note:</strong> The <code>&lt;auro-menu&gt;</code> component does not handle keyboard events directly. Keyboard navigation is managed by the parent component (e.g., <code>&lt;auro-select&gt;</code>, <code>&lt;auro-combobox&gt;</code>) through their keyboard strategy classes, which call menu methods such as <code>navigateOptions()</code>, <code>makeSelection()</code>, and <code>updateActiveOption()</code>.</p>
+</div>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+</div>
+</div>

package/components/menu/demo/readme.md

@@ -48,9 +48,7 @@ The `<auro-menu>` element should be used in situations where users may:
 
 #### NPM Installation
 
-```shell
-$ npm i @aurodesignsystem/auro-formkit
-```
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
@@ -59,13 +57,11 @@ $ npm i @aurodesignsystem/auro-formkit
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
-```json
-{
+<pre class="language-json"><code class="language-json">{
     "compilerOptions": {
         "moduleResolution": "bundler"
     }
-}
-```
+}</code></pre>
 
 This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -76,9 +72,7 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-menu/+esm"></script>
-```
+<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-menu/+esm"&gt;&lt;/script&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Formkit Development
@@ -92,9 +86,7 @@ Running the `dev` command will open a `localhost` development server for all com
 
 To only develop a single component, use the `--filter` flag:
 
-```shell
-npx turbo dev --filter=@aurodesignsystem/auro-input
-```
+<pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
 <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
@@ -109,37 +101,33 @@ However, if you need to load multiple versions of the same component on a single
 
 You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
-```js
-// Import the class only
+<pre class="language-js"><code class="language-js">// Import the class only
 import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
-
+​
 // Register with a custom name if desired
 AuroMenu.register('custom-menu');
-AuroMenuOption.register('custom-menu-option');
-```
+AuroMenuOption.register('custom-menu-option');</code></pre>
 
 This will create a new custom element `<custom-menu>` and `<custom-menu-option>` that behaves exactly like `<auro-menu>` and `<auro-menu-option>`, allowing both to coexist on the same page without interfering with each other.
 
 <div class="exampleWrapper exampleWrapper--flex">
-  <custom-menu>
-    <custom-menuoption value="stops">Stops</custom-menuoption>
-    <custom-menuoption value="price">Price</custom-menuoption>
-    <custom-menuoption value="duration">Duration</custom-menuoption>
-    <custom-menuoption value="departure">Departure</custom-menuoption>
-    <custom-menuoption value="arrival">Arrival</custom-menuoption>
-  </custom-menu>
+<custom-menu>
+<custom-menuoption value="stops">Stops</custom-menuoption>
+<custom-menuoption value="price">Price</custom-menuoption>
+<custom-menuoption value="duration">Duration</custom-menuoption>
+<custom-menuoption value="departure">Departure</custom-menuoption>
+<custom-menuoption value="arrival">Arrival</custom-menuoption>
+</custom-menu>
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 
-```html
-  <custom-menu>
-    <custom-menuoption value="stops">Stops</custom-menuoption>
-    <custom-menuoption value="price">Price</custom-menuoption>
-    <custom-menuoption value="duration">Duration</custom-menuoption>
-    <custom-menuoption value="departure">Departure</custom-menuoption>
-    <custom-menuoption value="arrival">Arrival</custom-menuoption>
-  </custom-menu>
-```
+<pre class="language-html"><code class="language-html">&lt;custom-menu&gt;
+  &lt;custom-menuoption value="stops"&gt;Stops&lt;/custom-menuoption&gt;
+  &lt;custom-menuoption value="price"&gt;Price&lt;/custom-menuoption&gt;
+  &lt;custom-menuoption value="duration"&gt;Duration&lt;/custom-menuoption&gt;
+  &lt;custom-menuoption value="departure"&gt;Departure&lt;/custom-menuoption&gt;
+  &lt;custom-menuoption value="arrival"&gt;Arrival&lt;/custom-menuoption&gt;
+&lt;/custom-menu&gt;</code></pre>
 </auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

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

@@ -31,4 +31,4 @@ export function isOptionInteractive(option: HTMLElement): boolean;
  * @param {string} eventName - Name of the event to dispatch.
  * @param {Object} [detail] - Optional detail object to include with the event.
  */
-export function dispatchMenuEvent(element: HTMLElement, eventName: string, detail?: any): void;
+export function dispatchMenuEvent(element: HTMLElement, eventName: string, detail?: Object): void;

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

@@ -45,7 +45,7 @@ export class MenuService {
      * @returns {string|string[]|undefined}
      */
     get currentKeys(): string | string[] | undefined;
-    host: AuroMenu;
+    host: any;
     size: any;
     shape: any;
     noCheckmark: any;
@@ -59,7 +59,7 @@ export class MenuService {
     _subscribers: any[];
     internalUpdateInProgress: boolean;
     selectedOptions: any[];
-    _pendingValue: string | number | (string | number)[];
+    _pendingValue: string | number | (string | number)[] | null;
     _pendingRetryScheduled: boolean;
     _pendingRetryCount: number;
     /**
@@ -87,7 +87,7 @@ export class MenuService {
      * Sets multiple properties on the instance.
      * @param {Object} properties - Key-value pairs of properties to set.
      */
-    setProperties(properties: any): void;
+    setProperties(properties: Object): void;
     /**
      * MENU OPTION HIGHLIGHTING
      */

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

@@ -144,6 +144,7 @@ export class AuroMenu extends AuroElement {
      * @private
      */
     private size;
+    value: any;
     optionSelected: any;
     matchWord: any;
     noCheckmark: boolean;
@@ -195,7 +196,7 @@ export class AuroMenu extends AuroElement {
      * @protected
      */
     protected provideContext(): void;
-    rootMenu: boolean;
+    rootMenu: boolean | undefined;
     menuService: any;
     _contextProvider: any;
     /**
@@ -209,14 +210,13 @@ export class AuroMenu extends AuroElement {
      * @protected
      */
     protected setInternalValue(value: string | Array<string>): void;
-    internalUpdateInProgress: boolean;
-    value: any;
+    internalUpdateInProgress: boolean | undefined;
     /**
      * Handles changes from the menu service and updates component state.
      * @param {Object} event - The event object from the menu service.
      * @protected
      */
-    protected handleMenuChange(event: any): void;
+    protected handleMenuChange(event: Object): void;
     _index: any;
     options: any;
     /**
@@ -230,7 +230,7 @@ export class AuroMenu extends AuroElement {
      */
     get selectedOption(): HTMLElement | null;
     firstUpdated(): void;
-    loadingSlots: NodeListOf<Element>;
+    loadingSlots: NodeListOf<Element> | undefined;
     updated(changedProperties: any): void;
     /**
      * Sets an attribute that matches the default tag name if the tag name is not the default.

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

@@ -119,15 +119,15 @@ export class AuroMenuOption extends AuroElement {
      * @private
      */
     private runtimeUtils;
-    menuService: any;
+    menuService: Object | null;
     unsubscribe: any;
     /**
      * Handles changes from the menu service and updates the option's state.
      * This function synchronizes the option's properties and selection/highlight state with menu events.
      * @param {Object} event - The event object from the menu service.
      */
-    handleMenuChange(event: any): void;
-    _contextConsumer: ContextConsumer<import("@lit/context").Context<"menu-context", any>, this>;
+    handleMenuChange(event: Object): void;
+    _contextConsumer: ContextConsumer<import("@lit/context").Context<"menu-context", any>, this> | undefined;
     key: any;
     firstUpdated(): void;
     updated(changedProperties: any): void;
@@ -141,15 +141,15 @@ export class AuroMenuOption extends AuroElement {
      * This method enables the option to participate in menu selection and highlighting logic.
      * @param {Object} service - The menu service instance to attach to.
      */
-    attachTo(service: any): void;
-    active: boolean;
+    attachTo(service: Object): void;
+    active: boolean | undefined;
     /**
      * Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
      * This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
      * @param {boolean} isSelected - Whether the option should be marked as selected.
      */
     setInternalSelected(isSelected: boolean): void;
-    internalUpdateInProgress: boolean;
+    internalUpdateInProgress: boolean | undefined;
     /**
      * Sets the selected state of the menu option.
      * This function updates whether the option is currently selected.

package/components/menu/dist/index.js

@@ -1204,13 +1204,10 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
-    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    if (this.selectedOptions.length < previousCount) {
-      this.stageUpdate();
-    }
+    this.stageUpdate();
   }
 
   /**
@@ -1630,6 +1627,8 @@ class AuroMenu extends AuroElement {
      */
     this.size = "sm";
 
+    // Value of the selected options
+    this.value = undefined;
     // Currently selected option
     this.optionSelected = undefined;
     // String used for highlighting/filtering

package/components/menu/dist/registered.js

@@ -1151,13 +1151,10 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
-    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    if (this.selectedOptions.length < previousCount) {
-      this.stageUpdate();
-    }
+    this.stageUpdate();
   }
 
   /**
@@ -1577,6 +1574,8 @@ class AuroMenu extends AuroElement {
      */
     this.size = "sm";
 
+    // Value of the selected options
+    this.value = undefined;
     // Currently selected option
     this.optionSelected = undefined;
     // String used for highlighting/filtering