@momentum-design/components 0.103.3 → 0.104.1

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

@@ -24,15 +24,19 @@ import Component from '../../components/button';
  * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.
  * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.
  * - **Icon button**: A button represented by just an icon without any text.
- * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.
+ * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ * @slot prefix - Content to be displayed before the text label.
+ * @slot postfix - Content to be displayed after the text label.
  *
  * @csspart button-text - Text label of the button, passed in default slot
+ * @csspart prefix - Content before the text label, passed in `prefix` slot
+ * @csspart postfix - Content after the text label, passed in `postfix` slot
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/button/index.js

@@ -26,15 +26,19 @@ import { TAG_NAME } from '../../components/button/button.constants';
  * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.
  * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.
  * - **Icon button**: A button represented by just an icon without any text.
- * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.
+ * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-button
  *
  * @slot - Text label of the button.
+ * @slot prefix - Content to be displayed before the text label.
+ * @slot postfix - Content to be displayed after the text label.
  *
  * @csspart button-text - Text label of the button, passed in default slot
+ * @csspart prefix - Content before the text label, passed in `prefix` slot
+ * @csspart postfix - Content after the text label, passed in `postfix` slot
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -12,10 +12,10 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
-export { default as Buttonsimple } from './buttonsimple';
-export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
+export { default as Card } from './card';
+export { default as Buttonsimple } from './buttonsimple';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
@@ -74,5 +74,5 @@ export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
-export { default as Typewriter } from './typewriter';
 export { default as VirtualizedList } from './virtualizedlist';
+export { default as Typewriter } from './typewriter';

package/dist/react/index.js

@@ -12,10 +12,10 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
-export { default as Buttonsimple } from './buttonsimple';
-export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
+export { default as Card } from './card';
+export { default as Buttonsimple } from './buttonsimple';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
@@ -74,5 +74,5 @@ export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
-export { default as Typewriter } from './typewriter';
 export { default as VirtualizedList } from './virtualizedlist';
+export { default as Typewriter } from './typewriter';

package/dist/utils/mixins/ButtonComponentMixin.js

@@ -74,13 +74,20 @@ export const ButtonComponentMixin = (superClass) => {
          * @param slot - default slot of button
          */
         inferButtonType() {
-            var _a, _b;
-            const slot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes().filter(node => { var _a; return node.nodeType !== Node.TEXT_NODE || ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
-            if (slot && (this.prefixIcon || this.postfixIcon)) {
+            var _a, _b, _c, _d, _e, _f;
+            // Check for text content in the default slot
+            const defaultSlot = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) === null || _b === void 0 ? void 0 : _b.assignedNodes().filter(node => { var _a; return node.nodeType !== Node.TEXT_NODE || ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
+            // Check for prefix content (either icon property or slot content)
+            const prefixSlot = (_d = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('slot[name="prefix"]')) === null || _d === void 0 ? void 0 : _d.assignedNodes().filter(node => { var _a; return node.nodeType !== Node.TEXT_NODE || ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
+            const hasPrefix = this.prefixIcon || (prefixSlot && prefixSlot > 0);
+            // Check for postfix content (either icon property or slot content)
+            const postfixSlot = (_f = (_e = this.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('slot[name="postfix"]')) === null || _f === void 0 ? void 0 : _f.assignedNodes().filter(node => { var _a; return node.nodeType !== Node.TEXT_NODE || ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
+            const hasPostfix = this.postfixIcon || (postfixSlot && postfixSlot > 0);
+            if (defaultSlot && (hasPrefix || hasPostfix)) {
                 this.typeInternal = BUTTON_TYPE_INTERNAL.PILL_WITH_ICON;
                 this.setAttribute('data-btn-type', 'pill-with-icon');
             }
-            else if (!slot && (this.prefixIcon || this.postfixIcon)) {
+            else if (!defaultSlot && (hasPrefix || hasPostfix)) {
                 this.typeInternal = BUTTON_TYPE_INTERNAL.ICON;
                 this.setAttribute('data-btn-type', 'icon');
             }

package/package.json

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