@momentum-design/components 0.102.10 → 0.103.1

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

@@ -35,6 +35,8 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ *
+ * @csspart button-text - Text label of the button, passed in default slot
  */
 declare class Button extends Button_base {
     /**

package/dist/components/button/button.component.js

@@ -46,6 +46,8 @@ import { getIconNameWithoutStyle } from './button.utils';
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ *
+ * @csspart button-text - Text label of the button, passed in default slot
  */
 class Button extends ButtonComponentMixin(Buttonsimple) {
     constructor() {
@@ -129,7 +131,7 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
             length-unit="rem"
           ></mdc-icon>`
             : ''}
-      <slot @slotchange=${this.inferButtonType}></slot>
+      <slot @slotchange=${this.inferButtonType} part="button-text"></slot>
       ${this.postfixFilledIconName
             ? html ` <mdc-icon
             name="${this.postfixFilledIconName}"

package/dist/components/button/button.styles.js

@@ -236,8 +236,9 @@ const styles = css `
     --mdc-button-primary-disabled-color: var(--mds-color-theme-inverted-text-primary-disabled);
   }
 
-  :host([data-btn-type='pill']) ::slotted(mdc-text),
-  :host([data-btn-type='pill-with-icon']) ::slotted(mdc-text) {
+  :host([data-btn-type='pill'])::part(button-text),
+  :host([data-btn-type='pill-with-icon'])::part(button-text) {
+    display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/custom-elements.json

@@ -3247,6 +3247,12 @@
           "kind": "class",
           "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
           "name": "Button",
+          "cssParts": [
+            {
+              "description": "Text label of the button, passed in default slot",
+              "name": "button-text"
+            }
+          ],
           "slots": [
             {
               "description": "Text label of the button.",
@@ -3881,7 +3887,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-button",
-          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
+          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n */",
           "customElement": true,
           "events": [
             {

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

@@ -31,6 +31,8 @@ import Component from '../../components/button';
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ *
+ * @csspart button-text - Text label of the button, passed in default slot
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/button/index.js

@@ -33,6 +33,8 @@ import { TAG_NAME } from '../../components/button/button.constants';
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ *
+ * @csspart button-text - Text label of the button, passed in default slot
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

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