@momentum-design/components 0.104.12 → 0.104.13

package/dist/components/checkbox/checkbox.component.js

@@ -170,7 +170,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         ?disabled="${this.disabled}"
       >
         <input
-          id="${this.id}"
+          id="${this.inputId}"
           type="checkbox"
           class="input"
           ?autofocus="${this.autofocus}"

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -41,9 +41,7 @@ class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
     }
     connectedCallback() {
         super.connectedCallback();
-        /** @internal */
         this.shouldRenderLabel = false;
-        this.id = '';
         this.disabled = undefined;
     }
     render() {

package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts

@@ -18,6 +18,12 @@ declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Co
  *
  */
 declare class FormfieldWrapper extends FormfieldWrapper_base {
+    /**
+    * Indicates the unique identifier for the native input element.
+    * Required for acccessibility.
+    * @internal
+    */
+    protected inputId: string;
     /**
      * The label of the input field. It is linked to the input field using the `for` attribute.
      */
@@ -28,11 +34,6 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * @default false
      */
     required: boolean;
-    /**
-     * The unique id of the input field. It is used to link the input field with the label.
-     * @default ''
-     */
-    id: string;
     /**
      * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
      */

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { v4 as uuidv4 } from 'uuid';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
@@ -33,17 +34,18 @@ import { getHelperIcon } from './formfieldwrapper.utils';
 class FormfieldWrapper extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
+        /**
+        * Indicates the unique identifier for the native input element.
+        * Required for acccessibility.
+        * @internal
+        */
+        this.inputId = `mdc-el-${uuidv4()}`;
         /**
          * The required attribute to indicate that the input field is required.
          * It is used to append a required indicator (*) to the label.
          * @default false
          */
         this.required = false;
-        /**
-         * The unique id of the input field. It is used to link the input field with the label.
-         * @default ''
-         */
-        this.id = '';
         /**
          * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
          */
@@ -66,7 +68,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
             return nothing;
         }
         return this.shouldRenderLabel
-            ? html `<label for="${this.id}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label">${this.label}</label>`
+            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label">${this.label}</label>`
             : html ` <mdc-text
           id="${DEFAULTS.HEADING_ID}"
           tagname="${MDC_TEXT_OPTIONS.TAGNAME}"
@@ -163,10 +165,6 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'required' }),
     __metadata("design:type", Object)
 ], FormfieldWrapper.prototype, "required", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], FormfieldWrapper.prototype, "id", void 0);
 __decorate([
     property({ reflect: true, attribute: 'help-text-type' }),
     __metadata("design:type", String)

package/dist/components/input/input.component.js

@@ -284,7 +284,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
       aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
       class="input"
       part="mdc-input"
-      id="${this.id}"
+      id="${this.inputId}"
       name="${this.name}"
       .value="${live(this.value)}"
       ?disabled="${this.disabled}"

package/dist/components/radio/radio.component.js

@@ -276,7 +276,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         ?readonly="${this.readonly}"
       >
         <input
-          id="${this.id}"
+          id="${this.inputId}"
           type="radio"
           role="${ROLE.RADIO}"
           ?autofocus="${this.autofocus}"

package/dist/components/select/select.component.js

@@ -534,7 +534,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           </div>
         </div>
         <input
-          id="${this.id}"
+          id="${this.inputId}"
           part="native-input"
           name="${this.name}"
           type="text"

package/dist/components/textarea/textarea.component.js

@@ -280,7 +280,7 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         <textarea
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           part="textarea"
-          id="${this.id}"
+          id="${this.inputId}"
           name="${this.name}"
           .value="${this.value}"
           ?disabled="${this.disabled}"

package/dist/components/toggle/toggle.component.js

@@ -188,7 +188,7 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         part="container"
       >
         <input
-          id="${this.id}"
+          id="${this.inputId}"
           type="checkbox"
           part="toggle-input"
           role="${ROLE.CHECKBOX}"