@momentum-design/components 0.16.2 → 0.16.4

package/dist/components/avatarbutton/avatarbutton.styles.js

@@ -7,5 +7,5 @@ const styles = [hostFitContentStyles, css `
     outline: none;
     border-radius: 0.25rem;
   }
-`, hostFocusRingStyles];
+`, ...hostFocusRingStyles()];
 export default styles;

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

@@ -65,11 +65,6 @@ declare class Button extends Buttonsimple {
      * @default default
      */
     color: ButtonColor;
-    /**
-     * 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:

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

@@ -69,11 +69,6 @@ class Button extends Buttonsimple {
          * @default default
          */
         this.color = DEFAULTS.COLOR;
-        /**
-         * The tabindex of the button.
-         * @default 0
-         */
-        this.tabIndex = 0;
         /**
          * This property defines the ARIA role for the element. By default, it is set to 'button'.
          * Consumers should override this role when:
@@ -238,10 +233,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], Button.prototype, "color", void 0);
-__decorate([
-    property({ type: Number, reflect: true }),
-    __metadata("design:type", Object)
-], Button.prototype, "tabIndex", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)

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

@@ -1,6 +1,7 @@
 import { CSSResult, PropertyValueMap } from 'lit';
 import { Component } from '../../models';
 import { ButtonSize, ButtonType } from './buttonsimple.types';
+declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
  * `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.
@@ -9,7 +10,7 @@ import { ButtonSize, ButtonType } from './buttonsimple.types';
  * @tagname mdc-buttonsimple
  *
  */
-declare class Buttonsimple extends Component {
+declare class Buttonsimple extends Buttonsimple_base {
     /**
      * 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.
@@ -17,12 +18,6 @@ declare class Buttonsimple extends Component {
      * @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
@@ -39,11 +34,6 @@ declare class Buttonsimple extends Component {
      * @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:

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -12,6 +12,8 @@ import { property } from 'lit/decorators.js';
 import styles from './buttonsimple.styles';
 import { Component } from '../../models';
 import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 /**
  * `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.
@@ -20,7 +22,7 @@ import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
  * @tagname mdc-buttonsimple
  *
  */
-class Buttonsimple extends Component {
+class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
     /** @internal */
     get form() {
         return this.internals.form;
@@ -34,12 +36,6 @@ class Buttonsimple extends Component {
          * @default false
          */
         this.active = false;
-        /**
-         * Indicates whether the button is disabled.
-         * When the button is 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
@@ -56,11 +52,6 @@ class Buttonsimple extends Component {
          * @default 32
          */
         this.size = DEFAULTS.SIZE;
-        /**
-         * The tabindex of the button.
-         * @default 0
-         */
-        this.tabIndex = 0;
         /**
          * This property defines the ARIA role for the element. By default, it is set to 'button'.
          * Consumers should override this role when:
@@ -210,10 +201,6 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], Buttonsimple.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Buttonsimple.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'soft-disabled' }),
     __metadata("design:type", Object)
@@ -222,10 +209,6 @@ __decorate([
     property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
 ], Buttonsimple.prototype, "size", void 0);
-__decorate([
-    property({ type: Number, reflect: true }),
-    __metadata("design:type", Object)
-], Buttonsimple.prototype, "tabIndex", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)

package/dist/components/buttonsimple/buttonsimple.styles.js

@@ -56,5 +56,5 @@ const styles = [hostFitContentStyles, css `
   :host([size="20"]){
     height: var(--mdc-button-height-size-20);
   }
-`, hostFocusRingStyles];
+`, ...hostFocusRingStyles()];
 export default styles;

package/dist/custom-elements.json

@@ -295,11 +295,12 @@
                 "text": "boolean"
               },
               "default": "undefined as unknown",
-              "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -447,12 +448,12 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "The tabindex of the button.",
+              "description": "This property specifies the tab order of the element.",
               "attribute": "tabIndex",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
@@ -687,16 +688,16 @@
               }
             },
             {
-              "name": "active",
+              "name": "tabIndex",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
-              "fieldName": "active",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
@@ -705,34 +706,34 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "name": "soft-disabled",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "fieldName": "softDisabled",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "tabIndex",
+              "name": "soft-disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "The tabindex of the button.",
-              "fieldName": "tabIndex",
+              "default": "false",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
@@ -1190,21 +1191,6 @@
               "default": "default",
               "attribute": "color"
             },
-            {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The tabindex of the button.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "role",
@@ -1294,16 +1280,17 @@
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "tabIndex",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
-              "attribute": "active",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
@@ -1313,8 +1300,23 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "attribute": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "components/buttonsimple/buttonsimple.component.js"
@@ -1533,52 +1535,52 @@
               "fieldName": "color"
             },
             {
-              "name": "tabIndex",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "'button'",
+              "fieldName": "role",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "The tabindex of the button.",
-              "fieldName": "tabIndex",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "'button'",
-              "fieldName": "role",
+              "name": "tabIndex",
               "type": {
-                "text": "string"
+                "text": "number"
               },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "name": "active",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
-              "fieldName": "active",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "name": "disabled",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
-              "fieldName": "disabled",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
@@ -1650,16 +1652,6 @@
               "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
               "attribute": "active"
             },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
-              "attribute": "disabled"
-            },
             {
               "kind": "field",
               "name": "softDisabled",
@@ -1681,17 +1673,6 @@
               "attribute": "size",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The tabindex of the button.",
-              "attribute": "tabIndex",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "role",
@@ -1816,6 +1797,36 @@
                 }
               ],
               "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way."
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
             }
           ],
           "attributes": [
@@ -1828,15 +1839,6 @@
               "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
               "fieldName": "active"
             },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether the button is disabled.\nWhen the button is disabled for user interaction; it is not focusable or clickable.",
-              "fieldName": "disabled"
-            },
             {
               "name": "soft-disabled",
               "type": {
@@ -1855,15 +1857,6 @@
               "default": "32",
               "fieldName": "size"
             },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The tabindex of the button.",
-              "fieldName": "tabIndex"
-            },
             {
               "name": "role",
               "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
@@ -1878,6 +1871,42 @@
               "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
               "default": "button",
               "fieldName": "type"
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
+            },
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
           ],
           "superclass": {
@@ -3022,8 +3051,8 @@
               "type": {
                 "text": "boolean"
               },
-              "privacy": "public",
               "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "attribute": "disabled",
               "reflects": true
             }
@@ -3035,6 +3064,7 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "fieldName": "disabled"
             }
           ],
@@ -3074,19 +3104,20 @@
               "type": {
                 "text": "number"
               },
-              "privacy": "public",
               "default": "0",
-              "attribute": "tabindex",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "tabindex",
+              "name": "tabIndex",
               "type": {
                 "text": "number"
               },
               "default": "0",
+              "description": "This property specifies the tab order of the element.",
               "fieldName": "tabIndex"
             }
           ],

package/dist/utils/mixins/DisabledMixin.js

@@ -12,6 +12,11 @@ export const DisabledMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
             super(...arguments);
+            /**
+             * Indicates whether the component is disabled.
+             * When the component is disabled for user interaction; it is not focusable or clickable.
+             * @default false
+             */
             this.disabled = false;
         }
     }

package/dist/utils/mixins/TabIndexMixin.js

@@ -12,11 +12,15 @@ export const TabIndexMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
             super(...arguments);
+            /**
+             * This property specifies the tab order of the element.
+             * @default 0
+             */
             this.tabIndex = 0;
         }
     }
     __decorate([
-        property({ reflect: true, type: Number, attribute: 'tabindex' }),
+        property({ reflect: true, type: Number }),
         __metadata("design:type", Object)
     ], InnerMixinClass.prototype, "tabIndex", void 0);
     // Cast return type to your mixin's interface intersected with the superClass type

package/dist/utils/styles/index.d.ts

@@ -1,3 +1,3 @@
 declare const hostFitContentStyles: import("lit").CSSResult;
-declare const hostFocusRingStyles: import("lit").CSSResult;
+declare const hostFocusRingStyles: (applyFocusRingOnClass?: boolean) => import("lit").CSSResult[];
 export { hostFitContentStyles, hostFocusRingStyles };