@momentum-design/components 0.129.20 → 0.129.21

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

@@ -6,7 +6,7 @@ declare const AlertChip_base: import("../../utils/mixins/index.types").Construct
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
  * - It supports a leading icon along with label.
- * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ * - It supports 5 variants of alerts - error, informational, neutral, success and warning.
  *
  * This component is built by extending Buttonsimple.
  *
@@ -23,18 +23,18 @@ declare const AlertChip_base: import("../../utils/mixins/index.types").Construct
  * @csspart icon - The alert icon
  * @csspart label - The text label of the alertchip
  *
- * @event click - (React: onClick) This event is dispatched when the chip is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
- * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
+ * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.
+ * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.
  */
 declare class AlertChip extends AlertChip_base {
     /**
      * The variant of the alertchip. It supports 5 variants
      * - neutral
-     * - warning
      * - error
      * - success
+     * - warning
      * - informational
      *
      * @default neutral
@@ -46,7 +46,7 @@ declare class AlertChip extends AlertChip_base {
      * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
      * including empty spaces to split words.
      */
-    label: string;
+    label?: string;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/alertchip/alertchip.component.js

@@ -19,7 +19,7 @@ import { getAlertIcon } from './alertchip.utils';
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
  * - It supports a leading icon along with label.
- * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ * - It supports 5 variants of alerts - error, informational, neutral, success and warning.
  *
  * This component is built by extending Buttonsimple.
  *
@@ -36,10 +36,10 @@ import { getAlertIcon } from './alertchip.utils';
  * @csspart icon - The alert icon
  * @csspart label - The text label of the alertchip
  *
- * @event click - (React: onClick) This event is dispatched when the chip is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
- * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
+ * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.
+ * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.
  */
 class AlertChip extends IconNameMixin(Buttonsimple) {
     constructor() {
@@ -47,21 +47,14 @@ class AlertChip extends IconNameMixin(Buttonsimple) {
         /**
          * The variant of the alertchip. It supports 5 variants
          * - neutral
-         * - warning
          * - error
          * - success
+         * - warning
          * - informational
          *
          * @default neutral
          */
         this.variant = DEFAULTS.VARIANT;
-        /**
-         * The visible label text of the alertchip.
-         *
-         * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
-         * including empty spaces to split words.
-         */
-        this.label = '';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -89,6 +82,6 @@ __decorate([
 ], AlertChip.prototype, "variant", void 0);
 __decorate([
     property({ type: String }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], AlertChip.prototype, "label", void 0);
 export default AlertChip;

package/dist/components/alertchip/alertchip.constants.js

@@ -1,3 +1,4 @@
+import { ROLE } from '../../utils/roles';
 import utils from '../../utils/tag-name';
 import { BUTTON_SIZES } from '../buttonsimple/buttonsimple.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
@@ -14,6 +15,6 @@ const DEFAULTS = {
     TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
     TAG_NAME: VALID_TEXT_TAGS.SPAN,
     SIZE: BUTTON_SIZES[24],
-    ROLE: 'button',
+    ROLE: ROLE.BUTTON,
 };
 export { DEFAULTS, TAG_NAME, VARIANTS };

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

@@ -3,7 +3,7 @@ import type { IconNames } from '../icon/icon.types';
 import type AlertChip from './alertchip.component';
 import { VARIANTS } from './alertchip.constants';
 type VariantType = ValueOf<typeof VARIANTS>;
-type IconListType = Extract<IconNames, 'error-legacy-badge-filled' | 'warning-badge-filled' | 'check-circle-badge-filled' | 'dnd-presence-badge-filled' | 'info-badge-filled'>;
+type IconListType = Extract<IconNames, 'error-legacy-badge-filled' | 'info-badge-filled' | 'dnd-presence-badge-filled' | 'check-circle-badge-filled' | 'warning-badge-filled'>;
 interface Events {
     onClickEvent: OverrideEventTarget<MouseEvent, AlertChip>;
     onKeyDownEvent: OverrideEventTarget<KeyboardEvent, AlertChip>;

package/dist/components/alertchip/alertchip.utils.js

@@ -2,10 +2,10 @@ import { VARIANTS } from './alertchip.constants';
 const getAlertIcon = (type) => {
     const alertIcon = {
         [VARIANTS.ERROR]: 'error-legacy-badge-filled',
-        [VARIANTS.WARNING]: 'warning-badge-filled',
-        [VARIANTS.SUCCESS]: 'check-circle-badge-filled',
         [VARIANTS.INFORMATIONAL]: 'info-badge-filled',
         [VARIANTS.NEUTRAL]: 'dnd-presence-badge-filled',
+        [VARIANTS.SUCCESS]: 'check-circle-badge-filled',
+        [VARIANTS.WARNING]: 'warning-badge-filled',
     };
     return alertIcon[type];
 };

package/dist/custom-elements.json

@@ -153,8 +153,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "components/accordionbutton/accordionbutton.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -412,8 +412,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
@@ -1010,7 +1010,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
+          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - error, informational, neutral, success and warning.\n\nThis component is built by extending Buttonsimple.",
           "name": "AlertChip",
           "cssProperties": [
             {
@@ -1207,9 +1207,8 @@
               "kind": "field",
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
               "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
               "attribute": "label"
             },
@@ -1411,7 +1410,7 @@
               "type": {
                 "text": "VariantType"
               },
-              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
+              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- error\n- success\n- warning\n- informational",
               "default": "neutral",
               "attribute": "variant",
               "reflects": true
@@ -1419,7 +1418,7 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the chip is clicked.",
+              "description": "(React: onClick) This event is dispatched when the alertchip is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -1428,7 +1427,7 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the chip.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.",
               "name": "keydown",
               "reactName": "onKeyDown",
               "inheritedFrom": {
@@ -1437,7 +1436,7 @@
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the chip.",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the alertchip.",
               "name": "keyup",
               "reactName": "onKeyUp",
               "inheritedFrom": {
@@ -1446,7 +1445,7 @@
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the chip receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the alertchip receives focus.",
               "name": "focus",
               "reactName": "onFocus",
               "inheritedFrom": {
@@ -1461,16 +1460,15 @@
               "type": {
                 "text": "VariantType"
               },
-              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
+              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- error\n- success\n- warning\n- informational",
               "default": "neutral",
               "fieldName": "variant"
             },
             {
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
               "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
               "fieldName": "label"
             },
@@ -1639,7 +1637,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-alertchip",
-          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n *\n * @event click - (React: onClick) This event is dispatched when the chip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.\n * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.\n */",
+          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - error, informational, neutral, success and warning.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n *\n * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.\n * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.\n */",
           "customElement": true,
           "slots": [
             {

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

@@ -5,7 +5,7 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
  * - It supports a leading icon along with label.
- * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ * - It supports 5 variants of alerts - error, informational, neutral, success and warning.
  *
  * This component is built by extending Buttonsimple.
  *
@@ -22,10 +22,10 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @csspart icon - The alert icon
  * @csspart label - The text label of the alertchip
  *
- * @event click - (React: onClick) This event is dispatched when the chip is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
- * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
+ * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.
+ * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<EventsInherited["onClickEvent"]>;

package/dist/react/alertchip/index.js

@@ -6,7 +6,7 @@ import { TAG_NAME } from '../../components/alertchip/alertchip.constants';
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
  * - It supports a leading icon along with label.
- * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ * - It supports 5 variants of alerts - error, informational, neutral, success and warning.
  *
  * This component is built by extending Buttonsimple.
  *
@@ -23,10 +23,10 @@ import { TAG_NAME } from '../../components/alertchip/alertchip.constants';
  * @csspart icon - The alert icon
  * @csspart label - The text label of the alertchip
  *
- * @event click - (React: onClick) This event is dispatched when the chip is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
- * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
+ * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.
+ * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

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