@momentum-design/components 0.133.6 → 0.133.8

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

@@ -67,13 +67,20 @@ class FormfieldGroup extends FormfieldWrapper {
         this.disabled = undefined;
         this.role = this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP;
         this.ariaDescription = (_a = this.helpText) !== null && _a !== void 0 ? _a : '';
-        this.ariaLabel = this.label || '';
+        // Add aria-label if not provided by the consumer, to make it accessible.
+        // It will use the label property for the aria-label if aria-label is not provided.
+        if (!this.hasAttribute('aria-label')) {
+            this.setAttribute('aria-label', this.label || '');
+        }
     }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('label') && !this.ariaLabel) {
             this.ariaLabel = this.label || '';
         }
+        if (changedProperties.has('helpText') && !this.ariaDescription) {
+            this.ariaDescription = this.helpText || '';
+        }
     }
     render() {
         return html `

package/dist/components/password/password.component.js

@@ -14,6 +14,7 @@ import { INPUT_TYPE } from '../input/input.constants';
 import { BUTTON_VARIANTS } from '../button/button.constants';
 import { DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { PASSWORD_VISIBILITY_ICONS } from './password.constants';
+import styles from './password.styles';
 /**
  * `mdc-password` is a component that allows users to input their password.
  *  It extends the `mdc-input` component and provides additional features specific to password fields.
@@ -129,7 +130,7 @@ class Password extends Input {
         return super.renderInputElement(inputType, hidePlaceholder);
     }
 }
-Password.styles = [...Input.styles];
+Password.styles = [...Input.styles, ...styles];
 __decorate([
     property({ type: String, attribute: 'show-button-aria-label', reflect: true }),
     __metadata("design:type", Object)

package/dist/components/password/password.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/password/password.styles.js

@@ -0,0 +1,9 @@
+import { css } from 'lit';
+const styles = [
+    css `
+    input::-ms-reveal {
+      display: none;
+    }
+  `,
+];
+export default styles;

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

@@ -16,6 +16,7 @@ declare class RadioGroup extends FormfieldGroup {
      */
     name: string;
     constructor();
+    connectedCallback(): void;
     /**
      * Using name property to group the radio buttons together.
      * If the name is not set, it will be set to the name of the radio group.

package/dist/components/radiogroup/radiogroup.component.js

@@ -32,6 +32,12 @@ class RadioGroup extends FormfieldGroup {
         // This is used to set the role of the component as `radiogroup`.
         this.isRadio = true;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        // toggletipPlacement and toggletipStrategy are set to undefined as they are not used by radiogroup.
+        this.toggletipPlacement = undefined;
+        this.toggletipStrategy = undefined;
+    }
     /**
      * Using name property to group the radio buttons together.
      * If the name is not set, it will be set to the name of the radio group.
@@ -51,7 +57,7 @@ class RadioGroup extends FormfieldGroup {
 }
 RadioGroup.styles = [...FormfieldGroup.styles];
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], RadioGroup.prototype, "name", void 0);
 export default RadioGroup;

package/dist/components/tablist/tablist.component.js

@@ -268,6 +268,9 @@ class TabList extends ListNavigationMixin(CaptureDestroyEventForChildElement(Key
         }
         const firstTab = getFirstTab(this.navItems);
         const lastTab = getLastTab(this.navItems);
+        if (!firstTab || !lastTab) {
+            return;
+        }
         const firstTabLeftEdgePosition = firstTab.getBoundingClientRect().left;
         const tabListLeftEdgePosition = (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().left;
         const lastTabRightEdgePosition = lastTab.getBoundingClientRect().right;

package/dist/custom-elements.json

@@ -37321,7 +37321,8 @@
               },
               "default": "''",
               "description": "Name of the radio group.\nThey are used to group elements in a form together.",
-              "attribute": "name"
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.133.6",
+  "version": "0.133.8",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"