@momentum-design/components 0.133.5 → 0.133.7

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/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);

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

@@ -45458,6 +45458,24 @@
               "name": "text"
             }
           ],
+          "slots": [
+            {
+              "description": "The slot for the content before the text, typically used for the icon.",
+              "name": "prefix"
+            },
+            {
+              "description": "The slot for the content after the text, typically used for the badge or chip.",
+              "name": "postfix"
+            },
+            {
+              "description": "Text label of the button.",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -45586,18 +45604,6 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "handleTabActiveChange",
-              "privacy": "private",
-              "description": "Dispatch the activechange event.",
-              "parameters": [
-                {
-                  "description": "The active state of the tab.",
-                  "name": "active"
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "iconName",
@@ -46098,18 +46104,8 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-tab",
-          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n * @csspart container - The container of the tab.\n * @csspart regular-icon - The icon of the tab, if inactive.\n * @csspart filled-icon - The icon of the tab, if active.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "Text label of the button.",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ]
+          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n * @csspart container - The container of the tab.\n * @csspart regular-icon - The icon of the tab, if inactive.\n * @csspart filled-icon - The icon of the tab, if active.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n *\n * @slot prefix - The slot for the content before the text, typically used for the icon.\n * @slot postfix - The slot for the content after the text, typically used for the badge or chip.\n */",
+          "customElement": true
         }
       ],
       "exports": [

package/dist/react/tab/index.d.ts

@@ -56,6 +56,9 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onActiveChange: EventName<Events["onActiveChangeEvent"]>;

package/dist/react/tab/index.js

@@ -56,6 +56,9 @@ import { TAG_NAME } from '../../components/tab/tab.constants';
  * @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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

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