@aurodesignsystem/auro-formkit 2.0.0-beta.10 → 2.0.0-beta.11

package/components/menu/src/index.js

@@ -6,3 +6,10 @@ AuroMenuOption.register();
 
 // Enable TypeScript support
 export { AuroMenu, AuroMenuOption };
+
+export {
+  arrayConverter,
+  arrayOrUndefinedHasChanged,
+  isOptionInteractive,
+  dispatchMenuEvent
+} from './auro-menu-utils.js';

package/components/radio/.turbo/turbo-build.log

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 820ms
+created dist in 549ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 657ms
+created ./demo/ in 726ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 459ms
+created ./demo/ in 474ms
 
 > @aurodesignsystem/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio

package/components/radio/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 752ms
+created dist in 862ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 505ms
+created ./demo/ in 566ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 503ms
+created ./demo/ in 613ms

package/components/radio/README.md

@@ -90,7 +90,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.9/dist/auro-radio__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.10/dist/auro-radio__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-radio use cases

package/components/select/.turbo/turbo-build.log

@@ -137,13 +137,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 671ms
+created dist in 639ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 592ms
+created ./demo/ in 696ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 429ms
+created ./demo/ in 475ms
 
 > @aurodesignsystem/auro-select@3.3.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component select
@@ -201,6 +201,7 @@ Web Component Analyzer analyzing 1 file...
   ⁕ FILE:src=./../apiExamples/required.html 
   ⁕ FILE:src=./../apiExamples/errorApi.html 
   ⁕ FILE:src=./../apiExamples/disabled.html 
+  ⁕ FILE:src=./../apiExamples/multiselect.html 
   ⁕ FILE:src=../apiExamples/flexMenuWidth.html 
   ⁕ FILE:src=./../apiExamples/label.html 
   ⁕ FILE:src=./../apiExamples/helpText.html 
@@ -216,6 +217,7 @@ Web Component Analyzer analyzing 1 file...
   ⁕ CODE:src=./../apiExamples/required.html 
   ⁕ CODE:src=./../apiExamples/errorApi.html 
   ⁕ CODE:src=./../apiExamples/disabled.html 
+  ⁕ CODE:src=./../apiExamples/multiselect.html 
   ⁕ CODE:src=../apiExamples/flexMenuWidth.html 
   ⁕ CODE:src=./../apiExamples/label.html 
   ⁕ CODE:src=./../apiExamples/helpText.html 

package/components/select/README.md

@@ -99,9 +99,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.9/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.9/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.9/dist/auro-select__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.10/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.10/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.10/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-select use cases

package/components/select/demo/api.md

@@ -19,15 +19,16 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | [disabled](#disabled)                      | `disabled`                      | `boolean` |             | When attribute is present, element shows disabled state. |
 | [error](#error)                         | `error`                         | `string`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean` |             | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
+| [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean` |             | Sets multi-select mode, allowing multiple options to be selected at once. |
 | [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean` |             | When true, checkmark on selected option will no longer be present. |
 | [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |             | If set, disables auto-validation on blur.        |
-| [optionSelected](#optionSelected)                | `optionSelected`                | `object`  | "undefined" | Specifies the current selected menuOption.       |
+| [optionSelected](#optionSelected)                | `optionSelected`                |           | "undefined" | Specifies the current selected menuOption.       |
 | [required](#required)                      | `required`                      | `boolean` |             | Populates the `required` attribute on the element. Used for client-side validation. |
 | [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`  |             | Sets a custom help text message to display for all validityStates. |
 | [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`  |             | Custom help text message to display when validity = `customError`. |
 | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`  |             | Custom help text message to display when validity = `valueMissing`. |
-| [validity](#validity)                      | `validity`                      | `string`  | "undefined" | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         | `string`  |             | Value selected for the component.                |
+| [validity](#validity)                      | `validity`                      | `string`  |             | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         |           | "undefined" | Value selected for the component.                |
 
 ## Methods
 
@@ -112,7 +113,7 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
   <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
   <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
   <br/><br/>
-  <auro-select id="valueExample" value="price">
+  <auro-select id="valueExample" value='["price"]'>
     <span slot="label">Name</span>
     <auro-menu>
       <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
@@ -134,7 +135,7 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
 <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
 <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
 <br/><br/>
-<auro-select id="valueExample" value="price">
+<auro-select id="valueExample" value='["price"]'>
   <span slot="label">Name</span>
   <auro-menu>
     <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
@@ -155,11 +156,11 @@ export function valueExample() {
   const valueExample = document.querySelector('#valueExample');
 
   document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'arrival';
+    valueExample.value = ['arrival'];
   });
 
   document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = 'flight course';
+    valueExample.value = ['flight course'];
   });
 }
 ```
@@ -296,6 +297,40 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### multiselect <a name="multiselect"></a>
+Sets multi-select mode, allowing multiple options to be selected at once.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiselect.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/multiselect.html -->
+  <auro-select multiselect>
+    <label slot="placeholder">Select one or more options</label>
+    <auro-menu>
+      <auro-menuoption value="1">Option 1</auro-menuoption>
+      <auro-menuoption value="2">Option 2</auro-menuoption>
+      <auro-menuoption value="3">Option 3</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiselect.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/multiselect.html -->
+
+```html
+<auro-select multiselect>
+  <label slot="placeholder">Select one or more options</label>
+  <auro-menu>
+    <auro-menuoption value="1">Option 1</auro-menuoption>
+    <auro-menuoption value="2">Option 2</auro-menuoption>
+    <auro-menuoption value="3">Option 3</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### flexMenuWidth <a name="flexMenuWidth"></a>
 Use the `flexMenuWidth` boolean attribute to toggle the width of the `<auro-select>` element to match the width of the bib content, rather than the width of the trigger.
 
@@ -439,7 +474,7 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
   <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
   <auro-button id="resetStateBtn">Reset</auro-button>
   <br/><br/>
-  <auro-select id="resetStateExample" required value="price">
+  <auro-select id="resetStateExample" value='["price"]'>
     <label slot="placeholder">Placeholder Text</label>
     <span slot="label">Name</span>
     <auro-menu>
@@ -461,7 +496,7 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
 ```html
 <auro-button id="resetStateBtn">Reset</auro-button>
 <br/><br/>
-<auro-select id="resetStateExample" required value="price">
+<auro-select id="resetStateExample" value='["price"]'>
   <label slot="placeholder">Placeholder Text</label>
   <span slot="label">Name</span>
   <auro-menu>
@@ -686,7 +721,7 @@ The component can be in a dialog.
     <auro-dialog id="select-dialog">
       <span slot="header">Select in Dialog</span>
       <div slot="content">
-        <auro-select id="valueExample" value="price">
+        <auro-select id="valueExample" value='["price"]'>
           <span slot="label">Name</span>
           <auro-menu>
             <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
@@ -713,7 +748,7 @@ The component can be in a dialog.
   <auro-dialog id="select-dialog">
     <span slot="header">Select in Dialog</span>
     <div slot="content">
-      <auro-select id="valueExample" value="price">
+      <auro-select id="valueExample" value='["price"]'>
         <span slot="label">Name</span>
         <auro-menu>
           <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>