@aurodesignsystem/auro-formkit 3.4.1-rc-602.2.1 → 3.5.0-rc-627.1

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

@@ -821,7 +821,20 @@ let AuroFormValidation$1 = class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -9383,7 +9396,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -9497,6 +9523,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -9687,13 +9716,6 @@ class BaseInput extends i$2 {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -9914,6 +9936,16 @@ class BaseInput extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -9945,6 +9977,7 @@ class BaseInput extends i$2 {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -11610,7 +11643,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${e(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${e(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -11620,7 +11653,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${o(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${o(this.definePattern())}"
@@ -11688,7 +11721,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor
@@ -12813,6 +12846,7 @@ class AuroCombobox extends i$2 {
 
       /**
        * Value selected for the dropdown menu.
+       * @type {Array|String<Array>}
        */
       value: {
         converter: arrayConverter$1,
@@ -13194,6 +13228,7 @@ class AuroCombobox extends i$2 {
       }
     });
 
+    // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
       this.errorMessage = evt.detail.message;
     });
@@ -13744,7 +13779,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
  * The auro-menu element provides users a way to select from a list of options.
- * @attr {Array<HTMLElement>|undefined} optionselected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
+ * @attr {Array<HTMLElement>|undefined} optionSelected - An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected.
  * @attr {object} optionactive - Specifies the current active menuOption.
  * @attr {string} matchword - Specifies a string used to highlight matched string parts in options.
  * @attr {boolean} disabled - When true, the entire menu and all options are disabled;

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

@@ -175,11 +175,9 @@ export class AuroCombobox extends LitElement {
         };
         /**
          * Value selected for the dropdown menu.
+         * @type {Array|String<Array>}
          */
-        value: {
-            converter: typeof arrayConverter;
-            hasChanged: typeof arrayOrUndefinedHasChanged;
-        };
+        value: any[] | string;
         /**
          * If declared, make bib.fullscreen.headline in HeadingDisplay.
          * Otherwise, Heading 600

package/components/combobox/dist/index.js

@@ -771,7 +771,20 @@ let AuroFormValidation$1 = class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -9301,7 +9314,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -9415,6 +9441,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -9605,13 +9634,6 @@ class BaseInput extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -9832,6 +9854,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -9863,6 +9895,7 @@ class BaseInput extends LitElement {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -11528,7 +11561,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${classMap(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -11538,7 +11571,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${ifDefined(this.definePattern())}"
@@ -11606,7 +11639,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor
@@ -12731,6 +12764,7 @@ class AuroCombobox extends LitElement {
 
       /**
        * Value selected for the dropdown menu.
+       * @type {Array|String<Array>}
        */
       value: {
         converter: arrayConverter,
@@ -13112,6 +13146,7 @@ class AuroCombobox extends LitElement {
       }
     });
 
+    // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
       this.errorMessage = evt.detail.message;
     });

package/components/combobox/dist/registered.js

@@ -771,7 +771,20 @@ let AuroFormValidation$1 = class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -9301,7 +9314,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -9415,6 +9441,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -9605,13 +9634,6 @@ class BaseInput extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -9832,6 +9854,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -9863,6 +9895,7 @@ class BaseInput extends LitElement {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -11528,7 +11561,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${classMap(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -11538,7 +11571,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${ifDefined(this.definePattern())}"
@@ -11606,7 +11639,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor
@@ -12731,6 +12764,7 @@ class AuroCombobox extends LitElement {
 
       /**
        * Value selected for the dropdown menu.
+       * @type {Array|String<Array>}
        */
       value: {
         converter: arrayConverter,
@@ -13112,6 +13146,7 @@ class AuroCombobox extends LitElement {
       }
     });
 
+    // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
       this.errorMessage = evt.detail.message;
     });

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

@@ -1619,7 +1619,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {

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

@@ -1619,7 +1619,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {

package/components/counter/dist/index.js

@@ -1572,7 +1572,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {

package/components/counter/dist/registered.js

@@ -1572,7 +1572,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {

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

@@ -1017,7 +1017,20 @@ let AuroFormValidation$1 = class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -20995,7 +21008,20 @@ class AuroFormValidation {
        * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
        */
 
-      let hasValue = elem.value && elem.value.length > 0;
+      let hasValue = false;
+
+      // Check string for having a value
+      if (typeof elem.value === "string") {
+        hasValue = elem.value && elem.value.length > 0;
+      }
+
+      // Check array value types for having a value
+      if (Array.isArray(elem.value)) {
+        hasValue = Boolean(
+          elem.value.length > 0 &&
+          elem.value.some((value) => typeof value === "string" && value.length > 0)
+        );
+      }
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
       if (this.auroInputElements?.length === 2) {
@@ -21109,6 +21135,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -21299,13 +21328,6 @@ class BaseInput extends i$2 {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -21526,6 +21548,16 @@ class BaseInput extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -21557,6 +21589,7 @@ class BaseInput extends i$2 {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -23222,7 +23255,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${e(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${e(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -23232,7 +23265,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${o(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${o(this.definePattern())}"
@@ -23300,7 +23333,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor