@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.50 → 0.0.0-pr624.52

package/components/dropdown/dist/registered.js

@@ -3457,10 +3457,8 @@ class AuroElement extends LitElement {
 // See LICENSE in the project root for license information.
 
 
-/**
- * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
+/*
  * @slot - Default slot for the popover content.
- * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot trigger - Defines the content of the trigger.
  * @csspart trigger - The trigger content container.
@@ -3479,18 +3477,22 @@ class AuroDropdown extends AuroElement {
     this.matchWidth = false;
     this.noHideOnThisFocusLoss = false;
 
-    this.errorMessage = ''; // TODO - check with Doug if there is still more to do here
+    this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
 
     // Layout Config
-    this.layout = 'classic';
-    this.shape = 'classic';
-    this.size = 'xl';
+    this.layout = undefined;
+    this.shape = undefined;
+    this.size = undefined;
 
     this.parentBorder = false;
 
     this.privateDefaults();
   }
 
+  /**
+   * @private
+   * @returns {object} Class definition for the wrapper element.
+   */
   get commonWrapperClasses() {
     return {
       'trigger': true,
@@ -3510,12 +3512,8 @@ class AuroDropdown extends AuroElement {
     this.disabled = false;
     this.disableFocusTrap = false;
     this.error = false;
-    this.inset = false;
-    this.rounded = false;
     this.tabIndex = 0;
     this.noToggle = false;
-    this.a11yAutocomplete = 'none';
-    this.labeled = true;
     this.a11yRole = 'button';
     this.onDark = false;
     this.showTriggerBorders = true;
@@ -3637,26 +3635,27 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * If declared, applies a border around the trigger slot.
+       * If declared, the dropdown will only show by calling the API .show() public method.
+       * @default false
        */
-      simple: {
+      disableEventShow: {
         type: Boolean,
         reflect: true
       },
 
       /**
-       * If declared, the dropdown displays a chevron on the right.
-       * @attr {Boolean} chevron
+       * If declared, applies a border around the trigger slot.
        */
-      chevron: {
+      simple: {
         type: Boolean,
         reflect: true
       },
 
       /**
-       * If declared, the dropdown will be styled with the common theme.
+       * If declared, the dropdown displays a chevron on the right.
+       * @attr {Boolean} chevron
        */
-      common: {
+      chevron: {
         type: Boolean,
         reflect: true
       },
@@ -3670,7 +3669,7 @@ class AuroDropdown extends AuroElement {
       },
 
       /**
-       * If declare, the focus trap inside of bib will be turned off.
+       * If declared, the focus trap inside of bib will be turned off.
        */
       disableFocusTrap: {
         type: Boolean,
@@ -3717,22 +3716,6 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
-      /**
-       * Makes the trigger to be full width of its parent container.
-       */
-      fluid: {
-        type: Boolean,
-        reflect: true
-      },
-
-      /**
-       * If declared, will apply padding around trigger slot content.
-       */
-      inset: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * If true, the dropdown bib is displayed.
        */
@@ -3776,15 +3759,6 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
-      /**
-       * Defines if there is a label preset.
-       * @private
-       */
-      labeled: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * Defines if the trigger should size based on the parent element providing the border UI.
        * @private
@@ -3845,6 +3819,9 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
+      /**
+       *  If declared, and a function is set, that function will execute when the slot content is updated.
+       */
       onSlotChange: {
         type: Function,
         reflect: false
@@ -3859,14 +3836,6 @@ class AuroDropdown extends AuroElement {
         reflect: true
       },
 
-      /**
-       * If declared, will apply border-radius to trigger and default slots.
-       */
-      rounded: {
-        type: Boolean,
-        reflect: true
-      },
-
       /**
        * @private
        */
@@ -3881,14 +3850,6 @@ class AuroDropdown extends AuroElement {
         type: String || undefined,
         attribute: false,
         reflect: false
-      },
-
-      /**
-       * The value for the aria-autocomplete attribute of the trigger element.
-       */
-      a11yAutocomplete: {
-        type: String,
-        attribute: false,
       }
     };
   }
@@ -4336,10 +4297,7 @@ class AuroDropdown extends AuroElement {
           id="bib"
           shape="${this.shape}"
           ?data-show="${this.isPopoverVisible}"
-          ?isfullscreen="${this.isBibFullscreen}"
-          ?common="${this.common}"
-          ?rounded="${this.common || this.rounded}"
-          ?inset="${this.common || this.inset}">
+          ?isfullscreen="${this.isBibFullscreen}">
           <div class="slotContent">
             <slot @slotchange="${this.handleDefaultSlot}"></slot>
           </div>

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

@@ -4688,19 +4688,19 @@ class AuroFormValidation {
           {
             check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
             validity: 'tooShort',
-            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
           },
           {
             check: (e) => e.value?.length > e.maxLength,
             validity: 'tooLong',
-            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
           }
         ],
         pattern: [
           {
             check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
             validity: 'patternMismatch',
-            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
           }
         ]
       },
@@ -4895,10 +4895,10 @@ class AuroFormValidation {
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateElementAttributes(elem);
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
       }
     }

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

@@ -4613,19 +4613,19 @@ class AuroFormValidation {
           {
             check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
             validity: 'tooShort',
-            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
           },
           {
             check: (e) => e.value?.length > e.maxLength,
             validity: 'tooLong',
-            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
           }
         ],
         pattern: [
           {
             check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
             validity: 'patternMismatch',
-            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
           }
         ]
       },
@@ -4820,10 +4820,10 @@ class AuroFormValidation {
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateElementAttributes(elem);
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
       }
     }

package/components/input/dist/index.js

@@ -4537,19 +4537,19 @@ class AuroFormValidation {
           {
             check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
             validity: 'tooShort',
-            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
           },
           {
             check: (e) => e.value?.length > e.maxLength,
             validity: 'tooLong',
-            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
           }
         ],
         pattern: [
           {
             check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
             validity: 'patternMismatch',
-            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
           }
         ]
       },
@@ -4744,10 +4744,10 @@ class AuroFormValidation {
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateElementAttributes(elem);
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
       }
     }

package/components/input/dist/registered.js

@@ -4537,19 +4537,19 @@ class AuroFormValidation {
           {
             check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
             validity: 'tooShort',
-            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
           },
           {
             check: (e) => e.value?.length > e.maxLength,
             validity: 'tooLong',
-            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
           }
         ],
         pattern: [
           {
             check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
             validity: 'patternMismatch',
-            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+            message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
           }
         ]
       },
@@ -4744,10 +4744,10 @@ class AuroFormValidation {
       if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
         this.validateElementAttributes(elem);
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
         this.validateElementAttributes(elem);
       }
     }

package/components/menu/demo/api.md

@@ -20,7 +20,7 @@ The auro-menu element provides users a way to select from a list of options.
 | [optionSelected](#optionSelected)        | `optionSelected` | `HTMLElement\|Array<HTMLElement>` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
 | [shape](#shape)                 |                  | `string`                          | ""          |                                                  |
 | [size](#size)                  |                  | `string`                          | ""          |                                                  |
-| [value](#value)                 | `value`          | `String\|Array<string>`           | "undefined" | Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings. |
+| [value](#value)                 | `value`          | `string`                          | "undefined" | Value selected for the component.                |
 
 ## Methods
 

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

@@ -286,7 +286,6 @@ function dispatchMenuEvent(element, eventName, detail = null) {
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
- * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -399,9 +398,14 @@ class AuroMenu extends AuroElement$1 {
         reflect: true,
         attribute: 'multiselect'
       },
+
+      /**
+       * Value selected for the component.
+       */
       value: {
-        // Allow string, string[] arrays and undefined
-        type: Object
+        type: String,
+        reflect: true,
+        attribute: 'value'
       },
 
       /**
@@ -436,6 +440,25 @@ class AuroMenu extends AuroElement$1 {
     AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
   }
 
+  /**
+   * Formatted value based on `multiSelect` state.
+   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * @private
+   * @returns {String|Array<String>}
+   */
+  get formattedValue() {
+    if (this.multiSelect) {
+      if (!this.value) {
+        return undefined;
+      }
+      if (this.value.startsWith("[")) {
+        return JSON.parse(this.value);
+      }
+      return [this.value];
+    }
+    return this.value;
+  }
+
   // Lifecycle Methods
 
   connectedCallback() {
@@ -478,7 +501,7 @@ class AuroMenu extends AuroElement$1 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('multiSelect')) {
+    if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
       // Reset selection if multiSelect mode changes
       this.clearSelection();
     }
@@ -492,7 +515,7 @@ class AuroMenu extends AuroElement$1 {
       } else {
         if (this.multiSelect) {
           // In multiselect mode, this.value should be an array of strings
-          const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+          const valueArray = this.formattedValue;
           const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
 
           this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
@@ -659,14 +682,14 @@ class AuroMenu extends AuroElement$1 {
    */
   handleSelectState(option) {
     if (this.multiSelect) {
-      const currentValue = this.value || [];
+      const currentValue = this.formattedValue || [];
       const currentSelected = this.optionSelected || [];
 
       if (!currentValue.includes(option.value)) {
-        this.value = [
+        this.value = JSON.stringify([
           ...currentValue,
           option.value
-        ];
+        ]);
       }
       if (!currentSelected.includes(option)) {
         this.optionSelected = [
@@ -689,13 +712,15 @@ class AuroMenu extends AuroElement$1 {
    * @param {HTMLElement} option - The menuoption to be deselected.
    */
   handleDeselectState(option) {
-    if (this.multiSelect && Array.isArray(this.value)) {
+    if (this.multiSelect) {
       // Remove this option from array
-      this.value = this.value.filter((val) => val !== option.value);
+      const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
 
       // If array is empty after removal, set back to undefined
-      if (this.value.length === 0) {
+      if (newFormattedValue && newFormattedValue.length === 0) {
         this.value = undefined;
+      } else {
+        this.value = JSON.stringify(newFormattedValue);
       }
 
       this.optionSelected = this.optionSelected.filter((val) => val !== option);

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

@@ -246,7 +246,6 @@ function dispatchMenuEvent(element, eventName, detail = null) {
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
- * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -359,9 +358,14 @@ class AuroMenu extends AuroElement$1 {
         reflect: true,
         attribute: 'multiselect'
       },
+
+      /**
+       * Value selected for the component.
+       */
       value: {
-        // Allow string, string[] arrays and undefined
-        type: Object
+        type: String,
+        reflect: true,
+        attribute: 'value'
       },
 
       /**
@@ -396,6 +400,25 @@ class AuroMenu extends AuroElement$1 {
     AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
   }
 
+  /**
+   * Formatted value based on `multiSelect` state.
+   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * @private
+   * @returns {String|Array<String>}
+   */
+  get formattedValue() {
+    if (this.multiSelect) {
+      if (!this.value) {
+        return undefined;
+      }
+      if (this.value.startsWith("[")) {
+        return JSON.parse(this.value);
+      }
+      return [this.value];
+    }
+    return this.value;
+  }
+
   // Lifecycle Methods
 
   connectedCallback() {
@@ -438,7 +461,7 @@ class AuroMenu extends AuroElement$1 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('multiSelect')) {
+    if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
       // Reset selection if multiSelect mode changes
       this.clearSelection();
     }
@@ -452,7 +475,7 @@ class AuroMenu extends AuroElement$1 {
       } else {
         if (this.multiSelect) {
           // In multiselect mode, this.value should be an array of strings
-          const valueArray = Array.isArray(this.value) ? this.value : [this.value];
+          const valueArray = this.formattedValue;
           const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
 
           this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
@@ -619,14 +642,14 @@ class AuroMenu extends AuroElement$1 {
    */
   handleSelectState(option) {
     if (this.multiSelect) {
-      const currentValue = this.value || [];
+      const currentValue = this.formattedValue || [];
       const currentSelected = this.optionSelected || [];
 
       if (!currentValue.includes(option.value)) {
-        this.value = [
+        this.value = JSON.stringify([
           ...currentValue,
           option.value
-        ];
+        ]);
       }
       if (!currentSelected.includes(option)) {
         this.optionSelected = [
@@ -649,13 +672,15 @@ class AuroMenu extends AuroElement$1 {
    * @param {HTMLElement} option - The menuoption to be deselected.
    */
   handleDeselectState(option) {
-    if (this.multiSelect && Array.isArray(this.value)) {
+    if (this.multiSelect) {
       // Remove this option from array
-      this.value = this.value.filter((val) => val !== option.value);
+      const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
 
       // If array is empty after removal, set back to undefined
-      if (this.value.length === 0) {
+      if (newFormattedValue && newFormattedValue.length === 0) {
         this.value = undefined;
+      } else {
+        this.value = JSON.stringify(newFormattedValue);
       }
 
       this.optionSelected = this.optionSelected.filter((val) => val !== option);

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

@@ -7,7 +7,6 @@
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
- * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -50,8 +49,13 @@ export class AuroMenu extends AuroElement {
             reflect: boolean;
             attribute: string;
         };
+        /**
+         * Value selected for the component.
+         */
         value: {
-            type: ObjectConstructor;
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
         };
         /**
          * Indent level for submenus.
@@ -110,6 +114,13 @@ export class AuroMenu extends AuroElement {
      * @private
      */
     private handleSlotChange;
+    /**
+     * Formatted value based on `multiSelect` state.
+     * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+     * @private
+     * @returns {String|Array<String>}
+     */
+    private get formattedValue();
     firstUpdated(): void;
     loadingSlots: NodeListOf<Element>;
     /**