@aurodesignsystem-dev/auro-formkit 0.0.0-pr1462.0 → 0.0.0-pr1471.0

package/components/input/dist/index.js

@@ -6614,7 +6614,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605071937';
+var formkitVersion = '202605111744';
 
 // 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/input/dist/registered.js

@@ -6614,7 +6614,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202605071937';
+var formkitVersion = '202605111744';
 
 // 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/README.md

@@ -20,11 +20,9 @@ The following sections are editable by making changes to the following files:
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.
-
-A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.
-
-The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
+<p>The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.</p>
+<p>A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.</p>
+<p>The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.</p>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Menu Use Cases

package/components/menu/demo/api.html

@@ -19,7 +19,6 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
     <link rel="stylesheet" type="text/css" href="./styles.min.css" />
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
-    <script src="./api.min.js" data-demo-script="true" type="module"></script>
     <script type="module">
       import { renderPage } from './demo-support.min.js';
       await renderPage('./api.md');

package/components/menu/demo/api.md

@@ -25,7 +25,7 @@ The `auro-menu` element provides users a way to select from a list of 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`              | "undefined" | The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values. |
+| `value`                    | `value`                    |           | `string`              |             | The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values. |
 
 ## Methods
 

package/components/menu/demo/demo-support.min.js

@@ -53145,6 +53145,8 @@ function requireCore () {
 var coreExports = /*@__PURE__*/ requireCore();
 var HighlightJS = /*@__PURE__*/getDefaultExportFromCjs(coreExports);
 
+// https://nodejs.org/api/packages.html#packages_writing_dual_packages_while_avoiding_or_minimizing_hazards
+
 /**
  * @import {ElementContent, Element, RootData, Root} from 'hast'
  * @import {Emitter, HLJSOptions as HljsOptions, HighlightResult, LanguageFn} from 'highlight.js'

package/components/menu/demo/index.md

@@ -14,11 +14,9 @@
 <auro-header level="2" id="description">Description</auro-header>
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
-        The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.
-
-        A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.
-
-        The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
+<p>The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.</p>
+<p>A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.</p>
+<p>The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.</p>
 <!-- AURO-GENERATED-CONTENT:END -->
 </section>
 <section>

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

@@ -496,10 +496,13 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
+    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    this.stageUpdate();
+    if (this.selectedOptions.length < previousCount) {
+      this.stageUpdate();
+    }
   }
 
   /**
@@ -1039,8 +1042,6 @@ 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
@@ -2196,7 +2197,7 @@ class AuroMenuOption extends AuroElement {
    * @private
    */
   handleClick() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.menuService?.disabled) {
       this.dispatchClickEvent();
       this.selected = !this.selected;
     }

package/components/menu/demo/readme.md

@@ -20,11 +20,9 @@ The following sections are editable by making changes to the following files:
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.
-
-A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.
-
-The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
+<p>The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.</p>
+<p>A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.</p>
+<p>The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.</p>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Menu Use Cases

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

@@ -144,7 +144,6 @@ export class AuroMenu extends AuroElement {
      * @private
      */
     private size;
-    value: any;
     optionSelected: any;
     matchWord: any;
     noCheckmark: boolean;
@@ -211,6 +210,7 @@ export class AuroMenu extends AuroElement {
      */
     protected setInternalValue(value: string | Array<string>): void;
     internalUpdateInProgress: boolean | undefined;
+    value: any;
     /**
      * Handles changes from the menu service and updates component state.
      * @param {Object} event - The event object from the menu service.

package/components/menu/dist/index.js

@@ -443,10 +443,13 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
+    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    this.stageUpdate();
+    if (this.selectedOptions.length < previousCount) {
+      this.stageUpdate();
+    }
   }
 
   /**
@@ -1026,8 +1029,6 @@ 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
@@ -2170,7 +2171,7 @@ class AuroMenuOption extends AuroElement {
    * @private
    */
   handleClick() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.menuService?.disabled) {
       this.dispatchClickEvent();
       this.selected = !this.selected;
     }

package/components/menu/dist/registered.js

@@ -443,10 +443,13 @@ class MenuService {
     }
 
     const optionsSet = new Set(optionsToDeselect);
+    const previousCount = this.selectedOptions.length;
     this.selectedOptions = (this.selectedOptions || [])
       .filter(opt => !optionsSet.has(opt));
 
-    this.stageUpdate();
+    if (this.selectedOptions.length < previousCount) {
+      this.stageUpdate();
+    }
   }
 
   /**
@@ -973,8 +976,6 @@ 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
@@ -2117,7 +2118,7 @@ class AuroMenuOption extends AuroElement {
    * @private
    */
   handleClick() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.menuService?.disabled) {
       this.dispatchClickEvent();
       this.selected = !this.selected;
     }

package/components/radio/README.md

@@ -21,8 +21,6 @@ The following sections are editable by making changes to the following files:
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 <code>&lt;auro-radio&gt;</code> is a <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements" target="_blank">HTML custom element</auro-hyperlink> that is rendered as a small circle, which is filled or highlighted when selected. Only one <code>&lt;auro-radio&gt;</code> component in a given <code>&lt;auro-radio-group&gt;</code> can be selected at the same time.
-
-test
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Radio Use Cases

package/components/radio/demo/api.html

@@ -19,7 +19,6 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
     <link rel="stylesheet" type="text/css" href="./styles.min.css" />
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
-    <script src="./api.min.js" data-demo-script="true" type="module"></script>
     <script type="module">
       import { renderPage } from './demo-support.min.js';
       await renderPage('./api.md');

package/components/radio/demo/customize.html

@@ -48,6 +48,6 @@
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
 
-    <script src="./api.min.js" data-demo-script="true" type="module"></script>
+    <script src="./customize.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>

package/components/radio/demo/customize.js

@@ -0,0 +1,8 @@
+import { AuroRadio } from '../src/auro-radio.js';
+import { AuroRadioGroup } from '../src/auro-radio-group.js';
+
+AuroRadio.register();
+AuroRadioGroup.register();
+
+AuroRadio.register('custom-radio');
+AuroRadioGroup.register('custom-radio-group');