@aurodesignsystem/auro-formkit 3.4.1 → 3.5.0-rc-627.1.1

package/components/checkbox/README.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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@3.4.0/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/demo/api.md

@@ -53,7 +53,7 @@ Custom element for the purpose of allowing users to select one or more options o
 | [checked](#checked)  | `checked`  | `boolean` | false   | If set to true, the checkbox will be filled with a checkmark. |
 | [disabled](#disabled) | `disabled` | `boolean` | false   | If set to true, the checkbox will not be clickable. |
 | [error](#error)    | `error`    | `boolean` | false   | If set to true, the checkbox will be displayed with an error state. |
-| [id](#id)       | `id`       | `string`  |         | Sets the individual `id` per element.            |
+| [id](#id)       | `id`       | `string`  |         | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
 | [name](#name)     | `name`     | `string`  |         | Accepts any string and is used to identify related checkboxes when submitting form data. |
 | [onDark](#onDark)   | `onDark`   | `boolean` | false   | Sets onDark styles for component.                |
 | [value](#value)    | `value`    | `string`  |         | Sets the element's input value. Must be unique within an auro-checkbox-group element. |

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

@@ -136,6 +136,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 /**
  * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
@@ -202,11 +205,6 @@ class AuroCheckbox extends i$2 {
         reflect: true
       },
 
-      /**
-       * Sets the individual `id` per element.
-       */
-      id: { type: String },
-
       /**
        * Accepts any string and is used to identify related checkboxes when submitting form data.
        */
@@ -237,6 +235,16 @@ class AuroCheckbox extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -327,6 +335,8 @@ class AuroCheckbox extends i$2 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
 
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
+
     this.addEventListener('click', () => {
       this.handleFocusin();
     });
@@ -361,13 +371,13 @@ class AuroCheckbox extends i$2 {
           @input="${this.handleInput}"
           ?disabled="${this.disabled}"
           .checked="${this.checked}"
-          id="${o$1(this.id)}"
+          id="${this.inputId}"
           name="${o$1(this.name)}"
           type="checkbox"
           .value="${this.value}"
         />
 
-        <label for="${o$1(this.id)}" class="${e(labelClasses)}" part="checkbox-label">
+        <label for="${this.inputId}" class="${e(labelClasses)}" part="checkbox-label">
           ${this.checked ? this.generateIconHtml() : undefined}
           <slot></slot>
         </label>

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

@@ -128,6 +128,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 /**
  * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
@@ -194,11 +197,6 @@ class AuroCheckbox extends i$2 {
         reflect: true
       },
 
-      /**
-       * Sets the individual `id` per element.
-       */
-      id: { type: String },
-
       /**
        * Accepts any string and is used to identify related checkboxes when submitting form data.
        */
@@ -229,6 +227,16 @@ class AuroCheckbox extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -319,6 +327,8 @@ class AuroCheckbox extends i$2 {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
 
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
+
     this.addEventListener('click', () => {
       this.handleFocusin();
     });
@@ -353,13 +363,13 @@ class AuroCheckbox extends i$2 {
           @input="${this.handleInput}"
           ?disabled="${this.disabled}"
           .checked="${this.checked}"
-          id="${o$1(this.id)}"
+          id="${this.inputId}"
           name="${o$1(this.name)}"
           type="checkbox"
           .value="${this.value}"
         />
 
-        <label for="${o$1(this.id)}" class="${e(labelClasses)}" part="checkbox-label">
+        <label for="${this.inputId}" class="${e(labelClasses)}" part="checkbox-label">
           ${this.checked ? this.generateIconHtml() : undefined}
           <slot></slot>
         </label>

package/components/checkbox/demo/readme.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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@3.4.0/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -1,6 +1,9 @@
 /**
  * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
@@ -29,12 +32,6 @@ export class AuroCheckbox extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        /**
-         * Sets the individual `id` per element.
-         */
-        id: {
-            type: StringConstructor;
-        };
         /**
          * Accepts any string and is used to identify related checkboxes when submitting form data.
          */
@@ -61,6 +58,15 @@ export class AuroCheckbox extends LitElement {
          * @private
          */
         touched: boolean;
+        /**
+         * @private
+         * id for input node
+         */
+        inputId: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
     };
     /**
      * This will register this element with the browser.
@@ -117,6 +123,7 @@ export class AuroCheckbox extends LitElement {
      */
     reset(): void;
     firstUpdated(): void;
+    inputId: string;
     render(): import("lit-html").TemplateResult<1>;
 }
 import { LitElement } from "lit";

package/components/checkbox/dist/index.js

@@ -88,6 +88,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 /**
  * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
@@ -154,11 +157,6 @@ class AuroCheckbox extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the individual `id` per element.
-       */
-      id: { type: String },
-
       /**
        * Accepts any string and is used to identify related checkboxes when submitting form data.
        */
@@ -189,6 +187,16 @@ class AuroCheckbox extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -279,6 +287,8 @@ class AuroCheckbox extends LitElement {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
 
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
+
     this.addEventListener('click', () => {
       this.handleFocusin();
     });
@@ -313,13 +323,13 @@ class AuroCheckbox extends LitElement {
           @input="${this.handleInput}"
           ?disabled="${this.disabled}"
           .checked="${this.checked}"
-          id="${ifDefined(this.id)}"
+          id="${this.inputId}"
           name="${ifDefined(this.name)}"
           type="checkbox"
           .value="${this.value}"
         />
 
-        <label for="${ifDefined(this.id)}" class="${classMap(labelClasses)}" part="checkbox-label">
+        <label for="${this.inputId}" class="${classMap(labelClasses)}" part="checkbox-label">
           ${this.checked ? this.generateIconHtml() : undefined}
           <slot></slot>
         </label>

package/components/checkbox/dist/registered.js

@@ -88,6 +88,9 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
 /**
  * Custom element for the purpose of allowing users to select one or more options of a limited number of choices.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
@@ -154,11 +157,6 @@ class AuroCheckbox extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the individual `id` per element.
-       */
-      id: { type: String },
-
       /**
        * Accepts any string and is used to identify related checkboxes when submitting form data.
        */
@@ -189,6 +187,16 @@ class AuroCheckbox extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -279,6 +287,8 @@ class AuroCheckbox extends LitElement {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
 
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
+
     this.addEventListener('click', () => {
       this.handleFocusin();
     });
@@ -313,13 +323,13 @@ class AuroCheckbox extends LitElement {
           @input="${this.handleInput}"
           ?disabled="${this.disabled}"
           .checked="${this.checked}"
-          id="${ifDefined(this.id)}"
+          id="${this.inputId}"
           name="${ifDefined(this.name)}"
           type="checkbox"
           .value="${this.value}"
         />
 
-        <label for="${ifDefined(this.id)}" class="${classMap(labelClasses)}" part="checkbox-label">
+        <label for="${this.inputId}" class="${classMap(labelClasses)}" part="checkbox-label">
           ${this.checked ? this.generateIconHtml() : undefined}
           <slot></slot>
         </label>

package/components/combobox/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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@3.4.0/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/demo/api.md

@@ -5,31 +5,31 @@
 
 ## Properties
 
-| Property                        | Attribute                       | Type      | Default        | Description                                      |
-|---------------------------------|---------------------------------|-----------|----------------|--------------------------------------------------|
-| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean` |                | If declared, bib's position will be automatically calculated where to appear. |
-| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`  | "false"        | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [checkmark](#checkmark)                     | `checkmark`                     | `boolean` |                | When attribute is present auro-menu will apply checkmarks to selected options. |
-| [disabled](#disabled)                      | `disabled`                      | `boolean` |                | If set, disables the combobox.                   |
-| [error](#error)                         | `error`                         | `string`  |                | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`  | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| [inputmode](#inputmode)                     | `inputmode`                     | `string`  |                | Exposes inputmode attribute for input.           |
-| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
-| [noFilter](#noFilter)                      | `noFilter`                      | `boolean` |                | If set, combobox will not filter menuoptions based in input. |
-| [noFlip](#noFlip)                        | `noFlip`                        | `boolean` | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |                | If set, disables auto-validation on blur.        |
-| [offset](#offset)                        | `offset`                        | `number`  | "0"            | Gap between the trigger element and bib.         |
-| [onDark](#onDark)                        | `onDark`                        | `boolean` |                | If declared, onDark styles will be applied to the trigger. |
-| [optionSelected](#optionSelected)                | `optionSelected`                | `object`  |                | Specifies the current selected option.           |
-| [placement](#placement)                     | `placement`                     | `string`  | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
-| [required](#required)                      | `required`                      | `boolean` |                | Populates the `required` attribute on the input. 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`. |
-| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   | `boolean` |                | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
-| [type](#type)                          | `type`                          | `string`  |                | Applies the defined value as the type attribute on auro-input. |
-| [validity](#validity)                      | `validity`                      | `string`  |                | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         |           |                | Value selected for the dropdown menu.            |
+| Property                        | Attribute                       | Type                   | Default        | Description                                      |
+|---------------------------------|---------------------------------|------------------------|----------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean`              |                | If declared, bib's position will be automatically calculated where to appear. |
+| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`               | "false"        | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [checkmark](#checkmark)                     | `checkmark`                     | `boolean`              |                | When attribute is present auro-menu will apply checkmarks to selected options. |
+| [disabled](#disabled)                      | `disabled`                      | `boolean`              |                | If set, disables the combobox.                   |
+| [error](#error)                         | `error`                         | `string`               |                | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`               | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [inputmode](#inputmode)                     | `inputmode`                     | `string`               |                | Exposes inputmode attribute for input.           |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean`              |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [noFilter](#noFilter)                      | `noFilter`                      | `boolean`              |                | If set, combobox will not filter menuoptions based in input. |
+| [noFlip](#noFlip)                        | `noFlip`                        | `boolean`              | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`              |                | If set, disables auto-validation on blur.        |
+| [offset](#offset)                        | `offset`                        | `number`               | "0"            | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                        | `onDark`                        | `boolean`              |                | If declared, onDark styles will be applied to the trigger. |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `object`               |                | Specifies the current selected option.           |
+| [placement](#placement)                     | `placement`                     | `string`               | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
+| [required](#required)                      | `required`                      | `boolean`              |                | Populates the `required` attribute on the input. 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`. |
+| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   | `boolean`              |                | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
+| [type](#type)                          | `type`                          | `string`               |                | Applies the defined value as the type attribute on auro-input. |
+| [validity](#validity)                      | `validity`                      | `string`               |                | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `Array\|String<Array>` |                | Value selected for the dropdown menu.            |
 
 ## Methods
 

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

@@ -9665,6 +9665,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.
  *
@@ -9855,13 +9858,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,
@@ -10082,6 +10078,16 @@ class BaseInput extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -10113,6 +10119,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');
@@ -11778,7 +11785,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>
@@ -11788,7 +11795,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())}"
@@ -11856,7 +11863,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
@@ -12981,6 +12988,7 @@ class AuroCombobox extends i$2 {
 
       /**
        * Value selected for the dropdown menu.
+       * @type {Array|String<Array>}
        */
       value: {
         converter: arrayConverter$1,
@@ -13362,6 +13370,7 @@ class AuroCombobox extends i$2 {
       }
     });
 
+    // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
       this.errorMessage = evt.detail.message;
     });
@@ -13912,7 +13921,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/demo/index.min.js

@@ -9523,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.
  *
@@ -9713,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,
@@ -9940,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
       }
     };
   }
@@ -9971,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');
@@ -11636,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>
@@ -11646,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())}"
@@ -11714,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
@@ -12839,6 +12846,7 @@ class AuroCombobox extends i$2 {
 
       /**
        * Value selected for the dropdown menu.
+       * @type {Array|String<Array>}
        */
       value: {
         converter: arrayConverter$1,
@@ -13220,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;
     });
@@ -13770,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/demo/readme.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 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@3.4.0/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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