@momentum-design/components 0.15.2 → 0.15.3

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

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValueMap } from 'lit';
-import { Component } from '../../models';
-import type { ButtonColor, ButtonType, ButtonVariant, PillButtonSize, IconButtonSize } from './button.types';
+import type { ButtonColor, ButtonVariant, PillButtonSize, IconButtonSize } from './button.types';
+import Buttonsimple from '../buttonsimple';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -33,31 +33,7 @@ import type { ButtonColor, ButtonType, ButtonVariant, PillButtonSize, IconButton
  *
  * @slot - Text label of the button.
  */
-declare class Button extends Component {
-    /**
-     * The button's active state indicates whether it is currently toggled on (active) or off (inactive).
-     * When the active state is true, the button is considered to be in an active state, meaning it is toggled on.
-     * Conversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.
-     * @default false
-     */
-    active: boolean;
-    /**
-     * Indicates whether the button is disabled.
-     * The button is currently disabled for user interaction; it is not focusable or clickable.
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Indicates whether the button is soft disabled.
-     * When set to `true`, the button appears visually disabled but still allows
-     * focus, click, and keyboard actions to be passed through.
-     *
-     * **Important:** When using soft disabled, consumers must ensure that
-     * the button behaves like a disabled button, allowing only focus and
-     * preventing any interactions (clicks or keyboard actions) from triggering unintended actions.
-     * @default false
-     */
-    softDisabled: boolean;
+declare class Button extends Buttonsimple {
     /**
      * The name of the icon to display as a prefix.
      * The icon is displayed on the left side of the button.
@@ -102,23 +78,10 @@ declare class Button extends Component {
      * @default button
      */
     role: string;
-    /**
-     * This property defines the type attribute for the button element.
-     * The type attribute specifies the behavior of the button when it is clicked.
-     * - **submit**: The button submits the form data to the server.
-     * - **reset**: The button resets the form data to its initial state.
-     * - **button**: The button does nothing when clicked.
-     * @default button
-     */
-    type: ButtonType;
     /** @internal */
     private typeInternal;
     /** @internal */
     private iconSize;
-    /**
-     * @internal
-     */
-    private prevTabindex;
     /**
      * @internal
      */
@@ -127,15 +90,7 @@ declare class Button extends Component {
      * @internal
      */
     private prevPostfixIcon?;
-    /** @internal */
-    static formAssociated: boolean;
-    /** @internal */
-    private internals;
-    /** @internal */
-    get form(): HTMLFormElement | null;
-    constructor();
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    private executeAction;
     /**
      * Modifies the icon name based on the active state.
      * If the button is active, the icon name is suffixed with '-filled'.
@@ -168,49 +123,6 @@ declare class Button extends Component {
      * @param color - The color to set.
      */
     private setColor;
-    /**
-     * Sets the aria-pressed attribute based on the active state.
-     *
-     * @param element - The target element.
-     * @param active - The active state.
-     */
-    private setAriaPressed;
-    /**
-     * Sets the soft-disabled attribute for the button.
-     * When soft-disabled, the button looks to be disabled but remains focusable and clickable.
-     * Also sets/removes aria-disabled attribute.
-     *
-     * @param element - The button element.
-     * @param softDisabled - The soft-disabled state.
-     */
-    private setSoftDisabled;
-    /**
-     * Sets the disabled attribute for the button.
-     * When disabled, the button is not focusable or clickable, and tabindex is set to -1.
-     * The previous tabindex is stored and restored when enabled.
-     * Also sets/removes aria-disabled attribute.
-     *
-     * @param element - The button element.
-     * @param disabled - The disabled state.
-     */
-    private setDisabled;
-    private triggerClickEvent;
-    /**
-     * Handles the keydown event on the button.
-     * If the key is 'Enter' or 'Space', the button is pressed.
-     * If the key is 'Enter', the button is pressed. The native HTML button works in the same way.
-     *
-     * @param event - The keyboard event.
-     */
-    private handleKeyDown;
-    /**
-     * Handles the keyup event on the button.
-     * If the key is 'Enter' or 'Space', the button is clicked.
-     * If the key is 'Space', the button is pressed. The native HTML button works in the same way.
-     *
-     * @param event - The keyboard event.
-     */
-    private handleKeyUp;
     /**
      * Infers the type of button based on the presence of slot and/or prefix and postfix icons.
      * @param slot - default slot of button

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

@@ -10,9 +10,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import styles from './button.styles';
-import { Component } from '../../models';
 import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './button.constants';
 import { getIconNameWithoutStyle, getIconSize } from './button.utils';
+import Buttonsimple from '../buttonsimple';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -45,37 +45,9 @@ import { getIconNameWithoutStyle, getIconSize } from './button.utils';
  *
  * @slot - Text label of the button.
  */
-class Button extends Component {
-    /** @internal */
-    get form() {
-        return this.internals.form;
-    }
+class Button extends Buttonsimple {
     constructor() {
-        super();
-        /**
-         * The button's active state indicates whether it is currently toggled on (active) or off (inactive).
-         * When the active state is true, the button is considered to be in an active state, meaning it is toggled on.
-         * Conversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.
-         * @default false
-         */
-        this.active = false;
-        /**
-         * Indicates whether the button is disabled.
-         * The button is currently disabled for user interaction; it is not focusable or clickable.
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Indicates whether the button is soft disabled.
-         * When set to `true`, the button appears visually disabled but still allows
-         * focus, click, and keyboard actions to be passed through.
-         *
-         * **Important:** When using soft disabled, consumers must ensure that
-         * the button behaves like a disabled button, allowing only focus and
-         * preventing any interactions (clicks or keyboard actions) from triggering unintended actions.
-         * @default false
-         */
-        this.softDisabled = false;
+        super(...arguments);
         /**
          * There are 3 variants of button: primary, secondary, tertiary. They are styled differently.
          * - **Primary**: Solid background color.
@@ -110,39 +82,14 @@ class Button extends Component {
          * @default button
          */
         this.role = 'button';
-        /**
-         * This property defines the type attribute for the button element.
-         * The type attribute specifies the behavior of the button when it is clicked.
-         * - **submit**: The button submits the form data to the server.
-         * - **reset**: The button resets the form data to its initial state.
-         * - **button**: The button does nothing when clicked.
-         * @default button
-         */
-        this.type = DEFAULTS.TYPE;
         /** @internal */
         this.typeInternal = DEFAULTS.TYPE_INTERNAL;
         /** @internal */
         this.iconSize = 1;
-        /**
-         * @internal
-         */
-        this.prevTabindex = 0;
-        this.addEventListener('click', this.executeAction.bind(this));
-        this.addEventListener('keydown', this.handleKeyDown.bind(this));
-        this.addEventListener('keyup', this.handleKeyUp.bind(this));
-        /** @internal */
-        this.internals = this.attachInternals();
     }
     update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.has('disabled')) {
-            this.setDisabled(this, this.disabled);
-        }
-        if (changedProperties.has('softDisabled')) {
-            this.setSoftDisabled(this, this.softDisabled);
-        }
         if (changedProperties.has('active')) {
-            this.setAriaPressed(this, this.active);
             this.modifyIconName(this.active);
         }
         if (changedProperties.has('size')) {
@@ -162,14 +109,6 @@ class Button extends Component {
             this.inferButtonType();
         }
     }
-    executeAction() {
-        if (this.type === 'submit' && this.internals.form) {
-            this.internals.form.requestSubmit();
-        }
-        if (this.type === 'reset' && this.internals.form) {
-            this.internals.form.reset();
-        }
-    }
     /**
      * Modifies the icon name based on the active state.
      * If the button is active, the icon name is suffixed with '-filled'.
@@ -238,95 +177,6 @@ class Button extends Component {
             this.setAttribute('color', color);
         }
     }
-    /**
-     * Sets the aria-pressed attribute based on the active state.
-     *
-     * @param element - The target element.
-     * @param active - The active state.
-     */
-    setAriaPressed(element, active) {
-        if (active) {
-            element.setAttribute('aria-pressed', 'true');
-        }
-        else {
-            element.setAttribute('aria-pressed', 'false');
-        }
-    }
-    /**
-     * Sets the soft-disabled attribute for the button.
-     * When soft-disabled, the button looks to be disabled but remains focusable and clickable.
-     * Also sets/removes aria-disabled attribute.
-     *
-     * @param element - The button element.
-     * @param softDisabled - The soft-disabled state.
-     */
-    setSoftDisabled(element, softDisabled) {
-        if (softDisabled) {
-            element.setAttribute('aria-disabled', 'true');
-        }
-        else {
-            element.setAttribute('aria-disabled', 'false');
-        }
-    }
-    /**
-     * Sets the disabled attribute for the button.
-     * When disabled, the button is not focusable or clickable, and tabindex is set to -1.
-     * The previous tabindex is stored and restored when enabled.
-     * Also sets/removes aria-disabled attribute.
-     *
-     * @param element - The button element.
-     * @param disabled - The disabled state.
-     */
-    setDisabled(element, disabled) {
-        if (disabled) {
-            element.setAttribute('aria-disabled', 'true');
-            this.prevTabindex = this.tabIndex;
-            this.tabIndex = -1;
-        }
-        else {
-            this.tabIndex = this.prevTabindex;
-            element.removeAttribute('aria-disabled');
-        }
-    }
-    triggerClickEvent() {
-        const clickEvent = new MouseEvent('click', {
-            bubbles: true,
-            cancelable: true,
-            view: window,
-        });
-        this.dispatchEvent(clickEvent);
-        this.executeAction();
-    }
-    /**
-     * Handles the keydown event on the button.
-     * If the key is 'Enter' or 'Space', the button is pressed.
-     * If the key is 'Enter', the button is pressed. The native HTML button works in the same way.
-     *
-     * @param event - The keyboard event.
-     */
-    handleKeyDown(event) {
-        if (['Enter', ' '].includes(event.key)) {
-            this.classList.add('pressed');
-            if (event.key === 'Enter') {
-                this.triggerClickEvent();
-            }
-        }
-    }
-    /**
-     * Handles the keyup event on the button.
-     * If the key is 'Enter' or 'Space', the button is clicked.
-     * If the key is 'Space', the button is pressed. The native HTML button works in the same way.
-     *
-     * @param event - The keyboard event.
-     */
-    handleKeyUp(event) {
-        if (['Enter', ' '].includes(event.key)) {
-            this.classList.remove('pressed');
-            if (event.key === ' ') {
-                this.triggerClickEvent();
-            }
-        }
-    }
     /**
      * Infers the type of button based on the presence of slot and/or prefix and postfix icons.
      * @param slot - default slot of button
@@ -347,9 +197,6 @@ class Button extends Component {
             this.setAttribute('data-btn-type', 'pill');
         }
     }
-    // Note: @click is attached to each of the children of the button.
-    // Adding click listener within the constructor will not work properly when button is disabled.
-    // https://discord.com/channels/1012791295170859069/1047015641225371718/threads/1309446072413720576
     render() {
         return html `
       ${this.prefixIcon ? html `
@@ -370,21 +217,7 @@ class Button extends Component {
     `;
     }
 }
-/** @internal */
-Button.formAssociated = true;
-Button.styles = [...Component.styles, ...styles];
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Button.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Button.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'soft-disabled' }),
-    __metadata("design:type", Object)
-], Button.prototype, "softDisabled", void 0);
+Button.styles = [...Buttonsimple.styles, ...styles];
 __decorate([
     property({ type: String, attribute: 'prefix-icon', reflect: true }),
     __metadata("design:type", String)
@@ -413,10 +246,6 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], Button.prototype, "role", void 0);
-__decorate([
-    property({ reflect: true }),
-    __metadata("design:type", String)
-], Button.prototype, "type", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)

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

@@ -1,3 +1,4 @@
+import { BUTTON_TYPE } from '../buttonsimple/buttonsimple.constants';
 declare const TAG_NAME: "mdc-button";
 declare const BUTTON_VARIANTS: {
     readonly PRIMARY: "primary";
@@ -31,11 +32,6 @@ declare const BUTTON_TYPE_INTERNAL: {
     readonly ICON: "icon";
     readonly PILL_WITH_ICON: "pill-with-icon";
 };
-declare const BUTTON_TYPE: {
-    readonly BUTTON: "button";
-    readonly SUBMIT: "submit";
-    readonly RESET: "reset";
-};
 declare const DEFAULTS: {
     VARIANT: "primary";
     SIZE: 32;

package/dist/components/button/button.constants.js

@@ -1,4 +1,5 @@
 import utils from '../../utils/tag-name';
+import { BUTTON_TYPE } from '../buttonsimple/buttonsimple.constants';
 const TAG_NAME = utils.constructTagName('button');
 const BUTTON_VARIANTS = {
     PRIMARY: 'primary',
@@ -29,11 +30,6 @@ const BUTTON_TYPE_INTERNAL = {
     ICON: 'icon',
     PILL_WITH_ICON: 'pill-with-icon',
 };
-const BUTTON_TYPE = {
-    BUTTON: 'button',
-    SUBMIT: 'submit',
-    RESET: 'reset',
-};
 const DEFAULTS = {
     VARIANT: BUTTON_VARIANTS.PRIMARY,
     SIZE: PILL_BUTTON_SIZES[32],

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

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

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

@@ -1,12 +1,10 @@
 import { css } from 'lit';
-import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
+const styles = css `
   :host {
-    cursor: pointer;
+    background-color: transparent;
     border-radius: 1.25rem;
     font-weight: var(--mds-font-apps-body-large-medium-font-weight);
     outline: none;
-    border: 0.0625rem solid transparent;
 
     --mdc-button-primary-color: var(--mds-color-theme-inverted-text-primary-normal);
     --mdc-button-primary-background-color: var(--mds-color-theme-button-primary-normal);
@@ -29,14 +27,6 @@ const styles = [hostFitContentStyles, css `
     --mdc-button-tertiary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
     --mdc-button-tertiary-disabled-color: var(--mds-color-theme-text-primary-disabled);
 
-    --mdc-button-height-size-64: 4rem;
-    --mdc-button-height-size-52: 3.25rem;
-    --mdc-button-height-size-40: 2.5rem;
-    --mdc-button-height-size-32: 2rem;
-    --mdc-button-height-size-28: 1.75rem;
-    --mdc-button-height-size-24: 1.5rem;
-    --mdc-button-height-size-20: 1.25rem;
-
     --mdc-button-line-height-size-40: var(--mds-font-lineheight-body-large);
     --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
     --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
@@ -108,42 +98,31 @@ const styles = [hostFitContentStyles, css `
     aspect-ratio: 1;
     padding: unset;
   }
-  :host([size="64"]){
-    height: var(--mdc-button-height-size-64);
-  }
-  :host([size="52"]){
-    height: var(--mdc-button-height-size-52);
-  }
   :host([size="40"]){
-    height: var(--mdc-button-height-size-40);
     font-size: var(--mds-font-size-body-large);
     line-height: var(--mdc-button-line-height-size-40);
     padding: 0 1rem;
     gap: 0.5rem;
   }
   :host([size="32"]){
-    height: var(--mdc-button-height-size-32);
     font-size: var(--mds-font-size-body-large);
     line-height: var(--mdc-button-line-height-size-32);
     padding: 0 0.75rem;
     gap: 0.375rem;
   }
   :host([size="28"]){
-    height: var(--mdc-button-height-size-28);
     font-size: var(--mds-font-size-body-midsize);
     line-height: var(--mdc-button-line-height-size-28);
     padding: 0 0.75rem;
     gap: 0.375rem;
   }
   :host([size="24"]){
-    height: var(--mdc-button-height-size-24);
     font-size: var(--mds-font-size-body-small);
     line-height: var(--mdc-button-line-height-size-24);
     padding: 0 0.625rem;
     gap: 0.25rem;
   }
   :host([size="20"]){
-    height: var(--mdc-button-height-size-20);
     padding: 0.0625rem;
   }
 
@@ -191,5 +170,5 @@ const styles = [hostFitContentStyles, css `
     --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
     --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
   }
-`, hostFocusRingStyles];
-export default styles;
+`;
+export default [styles];

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

@@ -1,9 +1,8 @@
 import type { ValueOf } from '../../utils/types';
-import { BUTTON_COLORS, BUTTON_TYPE, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './button.constants';
+import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './button.constants';
 type ButtonVariant = ValueOf<typeof BUTTON_VARIANTS>;
 type PillButtonSize = ValueOf<typeof PILL_BUTTON_SIZES>;
 type IconButtonSize = ValueOf<typeof ICON_BUTTON_SIZES>;
 type ButtonTypeInternal = ValueOf<typeof BUTTON_TYPE_INTERNAL>;
-type ButtonType = ValueOf<typeof BUTTON_TYPE>;
 type ButtonColor = ValueOf<typeof BUTTON_COLORS>;
-export { ButtonVariant, PillButtonSize, IconButtonSize, ButtonTypeInternal, ButtonType, ButtonColor, };
+export { ButtonVariant, PillButtonSize, IconButtonSize, ButtonTypeInternal, ButtonColor, };

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

@@ -0,0 +1,126 @@
+import { CSSResult, PropertyValueMap } from 'lit';
+import { Component } from '../../models';
+import { ButtonSize, ButtonType } from './buttonsimple.types';
+/**
+ * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
+ * It is used as an internal component and is not intended to be used directly by consumers.
+ * Consumers should use the `mdc-button` component instead.
+ *
+ * @tagname mdc-buttonsimple
+ *
+ */
+declare class Buttonsimple extends Component {
+    /**
+     * The button's active state indicates whether it is currently toggled on (active) or off (inactive).
+     * When the active state is true, the button is considered to be in an active state, meaning it is toggled on.
+     * Conversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.
+     * @default false
+     */
+    active: boolean;
+    /**
+     * Indicates whether the button is disabled.
+     * When the button is disabled for user interaction; it is not focusable or clickable.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Indicates whether the button is soft disabled.
+     * When set to `true`, the button appears visually disabled but still allows
+     * focus, click, and keyboard actions to be passed through.
+     *
+     * **Important:** When using soft disabled, consumers must ensure that
+     * the button behaves like a disabled button, allowing only focus and
+     * preventing any interactions (clicks or keyboard actions) from triggering unintended actions.
+     * @default false
+     */
+    softDisabled: boolean;
+    /**
+     * Button sizing is based on the button type.
+     * - **Pill button**: 40, 32, 28, 24.
+     * - **Icon button**: 64, 52, 40, 32, 28, 24.
+     * - Tertiary icon button cam also be 20.
+     * @default 32
+     */
+    size: ButtonSize;
+    /**
+     * The tabindex of the button.
+     * @default 0
+     */
+    tabIndex: number;
+    /**
+     * This property defines the ARIA role for the element. By default, it is set to 'button'.
+     * Consumers should override this role when:
+     * - The element is being used in a context where a different role is more appropriate.
+     * - Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.
+     * @default button
+     */
+    role: string;
+    /**
+     * This property defines the type attribute for the button element.
+     * The type attribute specifies the behavior of the button when it is clicked.
+     * - **submit**: The button submits the form data to the server.
+     * - **reset**: The button resets the form data to its initial state.
+     * - **button**: The button does nothing when clicked.
+     * @default button
+     */
+    type: ButtonType;
+    /**
+     * @internal
+     */
+    private prevTabindex;
+    /** @internal */
+    static formAssociated: boolean;
+    /** @internal */
+    private internals;
+    /** @internal */
+    get form(): HTMLFormElement | null;
+    constructor();
+    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private executeAction;
+    /**
+     * Sets the aria-pressed attribute based on the active state.
+     *
+     * @param element - The target element.
+     * @param active - The active state.
+     */
+    private setAriaPressed;
+    /**
+     * Sets the soft-disabled attribute for the button.
+     * When soft-disabled, the button looks to be disabled but remains focusable and clickable.
+     * Also sets/removes aria-disabled attribute.
+     *
+     * @param element - The button element.
+     * @param softDisabled - The soft-disabled state.
+     */
+    private setSoftDisabled;
+    /**
+     * Sets the disabled attribute for the button.
+     * When disabled, the button is not focusable or clickable, and tabindex is set to -1.
+     * The previous tabindex is stored and restored when enabled.
+     * Also sets/removes aria-disabled attribute.
+     *
+     * @param element - The button element.
+     * @param disabled - The disabled state.
+     */
+    private setDisabled;
+    private triggerClickEvent;
+    /**
+     * Handles the keydown event on the button.
+     * If the key is 'Enter' or 'Space', the button is pressed.
+     * If the key is 'Enter', the button is pressed. The native HTML button works in the same way.
+     *
+     * @param event - The keyboard event.
+     */
+    private handleKeyDown;
+    /**
+     * Handles the keyup event on the button.
+     * If the key is 'Enter' or 'Space', the button is clicked.
+     * If the key is 'Space', the button is pressed. The native HTML button works in the same way.
+     *
+     * @param event - The keyboard event.
+     */
+    private handleKeyUp;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Buttonsimple;