@momentum-design/components 0.133.4 → 0.133.6

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

@@ -7,8 +7,6 @@ import FormfieldGroup from '../formfieldgroup';
  *
  * @tagname mdc-radiogroup
  *
- * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text
- *
  */
 declare class RadioGroup extends FormfieldGroup {
     /**

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

@@ -11,6 +11,7 @@ import { property } from 'lit/decorators.js';
 import FormfieldGroup from '../formfieldgroup';
 import { TAG_NAME as RADIO_TAGNAME } from '../radio/radio.constants';
 import { TAG_NAME as CARD_RADIO_TAGNAME } from '../cardradio/cardradio.constants';
+const isRadio = new RegExp(`^(${RADIO_TAGNAME}|${CARD_RADIO_TAGNAME})$`, 'i');
 /**
  * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.
  * It can have a header text and a description. It enables users to select a single option from a set of options.
@@ -18,8 +19,6 @@ import { TAG_NAME as CARD_RADIO_TAGNAME } from '../cardradio/cardradio.constants
  *
  * @tagname mdc-radiogroup
  *
- * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text
- *
  */
 class RadioGroup extends FormfieldGroup {
     constructor() {
@@ -31,7 +30,6 @@ class RadioGroup extends FormfieldGroup {
          */
         this.name = '';
         // This is used to set the role of the component as `radiogroup`.
-        /** @internal */
         this.isRadio = true;
     }
     /**
@@ -39,11 +37,15 @@ class RadioGroup extends FormfieldGroup {
      * If the name is not set, it will be set to the name of the radio group.
      */
     firstUpdated() {
-        var _a, _b, _c, _d, _e;
-        (_e = (_d = (_c = (_b = Array.from(((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) || [])) === null || _b === void 0 ? void 0 : _b.flatMap(slot => slot.assignedElements({ flatten: true }))) === null || _c === void 0 ? void 0 : _c.filter(el => el.tagName.toLowerCase() === RADIO_TAGNAME || el.tagName.toLowerCase() === CARD_RADIO_TAGNAME)) === null || _d === void 0 ? void 0 : _d.filter(radio => !radio.hasAttribute('name'))) === null || _e === void 0 ? void 0 : _e.forEach(radio => {
-            radio.setAttribute('name', this.name);
-            if (this.required)
-                radio.setAttribute('required', this.required.toString());
+        var _a;
+        Array.from(((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) || [])
+            .flatMap(slot => slot.assignedElements({ flatten: true }))
+            .filter(el => isRadio.test(el.tagName))
+            .forEach(radio => {
+            if (!radio.hasAttribute('name')) {
+                radio.setAttribute('name', this.name);
+            }
+            radio.toggleAttribute('required', this.required);
         });
     }
 }

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

@@ -56,6 +56,9 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
+ *
+ * @slot prefix - The slot for the content before the text, typically used for the icon.
+ * @slot postfix - The slot for the content after the text, typically used for the badge or chip.
  */
 declare class Tab extends Tab_base {
     /**
@@ -106,6 +109,7 @@ declare class Tab extends Tab_base {
      * Dispatch the activechange event.
      *
      * @param active - The active state of the tab.
+     * @internal
      */
     private handleTabActiveChange;
     private getFilledIconName;

package/dist/components/tab/tab.component.js

@@ -72,6 +72,9 @@ import styles from './tab.styles';
  * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
+ *
+ * @slot prefix - The slot for the content before the text, typically used for the icon.
+ * @slot postfix - The slot for the content after the text, typically used for the badge or chip.
  */
 class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
     constructor() {
@@ -102,6 +105,7 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
          * Dispatch the activechange event.
          *
          * @param active - The active state of the tab.
+         * @internal
          */
         this.handleTabActiveChange = (active) => {
             const event = new CustomEvent('activechange', {
@@ -186,10 +190,7 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
               >`
             : nothing}
         </div>
-        <div part="trailing">
-          <slot name="badge"></slot>
-          <slot name="chip"></slot>
-        </div>
+        <slot name="postfix"></slot>
       </div>
       <div part="indicator"></div>
     `;

package/dist/components/tab/tab.styles.js

@@ -64,8 +64,7 @@ const styles = [
       display: none;
     }
 
-    :host::part(leading),
-    :host::part(trailing) {
+    :host::part(leading) {
       display: flex;
       align-items: center;
       gap: var(--mdc-tab-content-gap);