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

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

@@ -4903,6 +4903,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.
  *
@@ -5093,13 +5096,6 @@ class BaseInput extends i {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -5320,6 +5316,16 @@ class BaseInput extends i {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -5351,6 +5357,7 @@ class BaseInput extends i {
     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');
@@ -7016,7 +7023,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${e$2(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${e$2(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -7026,7 +7033,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${o$3(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${o$3(this.definePattern())}"
@@ -7094,7 +7101,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

package/components/input/demo/readme.md

@@ -99,7 +99,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-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/dist/base-input.d.ts

@@ -4,6 +4,9 @@
  * @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.
  *
@@ -101,12 +104,6 @@ export default class BaseInput extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        /**
-         * Sets the unique ID of the element.
-         */
-        id: {
-            type: StringConstructor;
-        };
         /** Exposes inputmode attribute for input.  */
         inputmode: {
             type: StringConstructor;
@@ -295,6 +292,15 @@ export default class BaseInput extends LitElement {
          * @private
          */
         touched: boolean;
+        /**
+         * @private
+         * id for input node
+         */
+        inputId: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
     };
     static get styles(): import("lit").CSSResult[];
     icon: boolean;
@@ -346,6 +352,7 @@ export default class BaseInput extends LitElement {
     };
     uniqueId: string;
     firstUpdated(): void;
+    inputId: string;
     inputElement: HTMLInputElement;
     labelElement: HTMLLabelElement;
     format: any;

package/components/input/dist/index.js

@@ -4827,6 +4827,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.
  *
@@ -5017,13 +5020,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,
@@ -5244,6 +5240,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -5275,6 +5281,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');
@@ -6940,7 +6947,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>
@@ -6950,7 +6957,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())}"
@@ -7018,7 +7025,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

package/components/input/dist/registered.js

@@ -4827,6 +4827,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.
  *
@@ -5017,13 +5020,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,
@@ -5244,6 +5240,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -5275,6 +5281,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');
@@ -6940,7 +6947,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>
@@ -6950,7 +6957,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())}"
@@ -7018,7 +7025,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

package/components/menu/README.md

@@ -110,7 +110,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-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/menu/demo/api.md

@@ -5,25 +5,19 @@
 
 The auro-menu element provides users a way to select from a list of options.
 
-## Attributes
-
-| Attribute        | Type                            | Description                                      |
-|------------------|---------------------------------|--------------------------------------------------|
-| [optionselected](#optionselected) | `Array<HTMLElement>\|undefined` | An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected. |
-
 ## Properties
 
-| Property                | Attribute        | Type                       | Default     | Description                                      |
-|-------------------------|------------------|----------------------------|-------------|--------------------------------------------------|
-| [disabled](#disabled)              | `disabled`       | `boolean`                  |             | When true, the entire menu and all options are disabled; |
-| [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `boolean`                  |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
-| [loading](#loading)               | `loading`        | `boolean`                  | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
-| [matchWord](#matchWord)             | `matchword`      | `string`                   | "undefined" | Specifies a string used to highlight matched string parts in options. |
-| [multiSelect](#multiSelect)           | `multiselect`    | `boolean`                  | false       | When true, the selected option can be multiple options. |
-| [noCheckmark](#noCheckmark)           | `nocheckmark`    | `boolean`                  | false       | When true, selected option will not show the checkmark. |
-| [optionActive](#optionActive)          | `optionactive`   | `object`                   | "undefined" | Specifies the current active menuOption.         |
-| [optionSelected](#optionSelected)        | `optionSelected` |                            | "undefined" |                                                  |
-| [value](#value)                 | `value`          | `Array<string>\|undefined` | "undefined" | Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value. |
+| Property                | Attribute        | Type                            | Default     | Description                                      |
+|-------------------------|------------------|---------------------------------|-------------|--------------------------------------------------|
+| [disabled](#disabled)              | `disabled`       | `boolean`                       |             | When true, the entire menu and all options are disabled; |
+| [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `boolean`                       |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
+| [loading](#loading)               | `loading`        | `boolean`                       | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
+| [matchWord](#matchWord)             | `matchword`      | `string`                        | "undefined" | Specifies a string used to highlight matched string parts in options. |
+| [multiSelect](#multiSelect)           | `multiselect`    | `boolean`                       | false       | When true, the selected option can be multiple options. |
+| [noCheckmark](#noCheckmark)           | `nocheckmark`    | `boolean`                       | false       | When true, selected option will not show the checkmark. |
+| [optionActive](#optionActive)          | `optionactive`   | `object`                        | "undefined" | Specifies the current active menuOption.         |
+| [optionSelected](#optionSelected)        | `optionSelected` | `Array<HTMLElement>\|undefined` | "undefined" | An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected. |
+| [value](#value)                 | `value`          | `Array<string>\|undefined`      | "undefined" | Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value. |
 
 ## Methods
 

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

@@ -280,7 +280,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/menu/demo/index.min.js

@@ -240,7 +240,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/menu/demo/readme.md

@@ -110,7 +110,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-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -1,6 +1,6 @@
 /**
  * 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/menu/dist/index.js

@@ -219,7 +219,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/menu/dist/registered.js

@@ -219,7 +219,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/radio/README.md

@@ -100,7 +100,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-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/demo/api.md

@@ -57,7 +57,7 @@
 | [checked](#checked)  | `checked`  | `Boolean` | false   | If set to true, the radio button will be filled. |
 | [disabled](#disabled) | `disabled` | `Boolean` | false   | If set to true, the radio button will be non-clickable. |
 | [error](#error)    | `error`    | `Boolean` | false   | If set to true, sets an error state on the radio button. |
-| [id](#id)       | `id`       | `string`  |         |                                                  |
+| [id](#id)       | `id`       | `string`  |         | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
 | [label](#label)    | `label`    | `string`  |         |                                                  |
 | [name](#name)     | `name`     | `string`  |         |                                                  |
 | [onDark](#onDark)   | `onDark`   | `Boolean` | false   | If set to true, the component will render with a dark theme. |

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

@@ -157,6 +157,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @attr {Boolean} error - If set to true, sets an error state on the radio button.
  * @attr {Boolean} onDark - If set to true, the component will render with a dark theme.
  * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
+ *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
@@ -212,7 +216,6 @@ class AuroRadio extends i$2 {
         type: Boolean,
         reflect: true
       },
-      id:       { type: String },
       label:    { type: String },
       name:     { type: String },
       value:    { type: String },
@@ -229,6 +232,16 @@ class AuroRadio extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -364,6 +377,8 @@ class AuroRadio extends i$2 {
 
     this.input = this.shadowRoot.querySelector('input');
 
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
+
     this.addEventListener('click', () => {
       this.input.click();
     });
@@ -390,14 +405,14 @@ class AuroRadio extends i$2 {
           aria-invalid="${this.invalid(this.error)}"
           aria-required="${this.isRequired(this.required)}"
           .checked="${this.checked}"
-          id="${o$1(this.id)}"
+          id="${this.inputId}"
           name="${o$1(this.name)}"
           type="radio"
           .value="${this.value}"
           tabIndex="-1"
         />
 
-        <label for="${o$1(this.id)}" class="${e(labelClasses)}">
+        <label for="${this.inputId}" class="${e(labelClasses)}">
           <slot>${this.label}</slot>
         </label>
 

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

@@ -132,6 +132,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @attr {Boolean} error - If set to true, sets an error state on the radio button.
  * @attr {Boolean} onDark - If set to true, the component will render with a dark theme.
  * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
+ *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
@@ -187,7 +191,6 @@ class AuroRadio extends i$2 {
         type: Boolean,
         reflect: true
       },
-      id:       { type: String },
       label:    { type: String },
       name:     { type: String },
       value:    { type: String },
@@ -204,6 +207,16 @@ class AuroRadio extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -339,6 +352,8 @@ class AuroRadio extends i$2 {
 
     this.input = this.shadowRoot.querySelector('input');
 
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
+
     this.addEventListener('click', () => {
       this.input.click();
     });
@@ -365,14 +380,14 @@ class AuroRadio extends i$2 {
           aria-invalid="${this.invalid(this.error)}"
           aria-required="${this.isRequired(this.required)}"
           .checked="${this.checked}"
-          id="${o$1(this.id)}"
+          id="${this.inputId}"
           name="${o$1(this.name)}"
           type="radio"
           .value="${this.value}"
           tabIndex="-1"
         />
 
-        <label for="${o$1(this.id)}" class="${e(labelClasses)}">
+        <label for="${this.inputId}" class="${e(labelClasses)}">
           <slot>${this.label}</slot>
         </label>
 

package/components/radio/demo/readme.md

@@ -100,7 +100,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-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -5,6 +5,10 @@
  * @attr {Boolean} error - If set to true, sets an error state on the radio button.
  * @attr {Boolean} onDark - If set to true, the component will render with a dark theme.
  * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
+ *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
@@ -33,9 +37,6 @@ export class AuroRadio extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        id: {
-            type: StringConstructor;
-        };
         label: {
             type: StringConstructor;
         };
@@ -58,6 +59,15 @@ export class AuroRadio extends LitElement {
             reflect: boolean;
             attribute: boolean;
         };
+        /**
+         * @private
+         * id for input node
+         */
+        inputId: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
     };
     /**
      * This will register this element with the browser.
@@ -128,6 +138,7 @@ export class AuroRadio extends LitElement {
     private isRequired;
     firstUpdated(): void;
     input: HTMLInputElement;
+    inputId: string;
     render(): import("lit-html").TemplateResult<1>;
 }
 import { LitElement } from "lit";

package/components/radio/dist/index.js

@@ -92,6 +92,10 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
  * @attr {Boolean} error - If set to true, sets an error state on the radio button.
  * @attr {Boolean} onDark - If set to true, the component will render with a dark theme.
  * @event toggleSelected - Notifies that the component has toggled the checked/selected state.
+ *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @event focusSelected - Notifies that the component has gained focus.
  * @event auroRadio-blur - Notifies that the component has lost focus.
  * @event resetRadio - Notifies that the component has reset the checked/selected state.
@@ -147,7 +151,6 @@ class AuroRadio extends LitElement {
         type: Boolean,
         reflect: true
       },
-      id:       { type: String },
       label:    { type: String },
       name:     { type: String },
       value:    { type: String },
@@ -164,6 +167,16 @@ class AuroRadio extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -299,6 +312,8 @@ class AuroRadio extends LitElement {
 
     this.input = this.shadowRoot.querySelector('input');
 
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
+
     this.addEventListener('click', () => {
       this.input.click();
     });
@@ -325,14 +340,14 @@ class AuroRadio extends LitElement {
           aria-invalid="${this.invalid(this.error)}"
           aria-required="${this.isRequired(this.required)}"
           .checked="${this.checked}"
-          id="${ifDefined(this.id)}"
+          id="${this.inputId}"
           name="${ifDefined(this.name)}"
           type="radio"
           .value="${this.value}"
           tabIndex="-1"
         />
 
-        <label for="${ifDefined(this.id)}" class="${classMap(labelClasses)}">
+        <label for="${this.inputId}" class="${classMap(labelClasses)}">
           <slot>${this.label}</slot>
         </label>