@momentum-design/components 0.129.19 → 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/components/formfieldwrapper/formfieldwrapper.component.d.ts

@@ -58,6 +58,7 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
     required: boolean;
     /**
      * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
+     * @default 'default'
      */
     helpTextType: ValidationType;
     /**
@@ -74,6 +75,10 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * @default 'top'
      */
     toggletipPlacement: PopoverPlacement;
+    /**
+     * The strategy of the toggletip that is displayed when the info icon is hovered.
+     * @default 'absolute'
+     */
     toggletipStrategy: PopoverStrategy;
     /**
      * Aria label for the info icon that is displayed next to the label when `toggletipText` is set.

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -70,6 +70,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         this.required = false;
         /**
          * The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.
+         * @default 'default'
          */
         this.helpTextType = DEFAULTS.VALIDATION;
         /**
@@ -77,6 +78,10 @@ class FormfieldWrapper extends DisabledMixin(Component) {
          * @default 'top'
          */
         this.toggletipPlacement = DEFAULTS.TOGGLETIP_PLACEMENT;
+        /**
+         * The strategy of the toggletip that is displayed when the info icon is hovered.
+         * @default 'absolute'
+         */
         this.toggletipStrategy = DEFAULTS.TOGGLETIP_STRATEGY;
         /**
          * Determines whether the form field is read-only.

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

@@ -1,4 +1,4 @@
-import { IconNames } from '../icon/icon.types';
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-formfieldwrapper";
 declare const VALIDATION: {
     readonly DEFAULT: "default";

package/dist/components/formfieldwrapper/formfieldwrapper.constants.js

@@ -1,4 +1,5 @@
 import utils from '../../utils/tag-name';
+import { POPOVER_PLACEMENT, STRATEGY } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 const TAG_NAME = utils.constructTagName('formfieldwrapper');
 const VALIDATION = {
@@ -14,8 +15,8 @@ const DEFAULTS = {
     HEADING_ID: 'heading-id',
     ICON_SIZE: 20,
     INFO_ICON: 'info-badge-filled',
-    TOGGLETIP_PLACEMENT: 'top',
-    TOGGLETIP_STRATEGY: 'absolute',
+    TOGGLETIP_PLACEMENT: POPOVER_PLACEMENT.TOP,
+    TOGGLETIP_STRATEGY: STRATEGY.ABSOLUTE,
 };
 const MDC_TEXT_OPTIONS = {
     TAGNAME: VALID_TEXT_TAGS.SPAN,

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

@@ -9,6 +9,7 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
  * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * Optional: Add `mdc-divider` after each option group (`mdc-optgroup`) to separate groups visually.
  *
  * Every mdc-option should have a `value` attribute set to ensure proper form submission.
  *
@@ -27,14 +28,13 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
- *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
  * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  *
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.

package/dist/components/select/select.component.js

@@ -30,6 +30,7 @@ import styles from './select.styles';
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
  * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.
+ * Optional: Add `mdc-divider` after each option group (`mdc-optgroup`) to separate groups visually.
  *
  * Every mdc-option should have a `value` attribute set to ensure proper form submission.
  *
@@ -48,14 +49,13 @@ import styles from './select.styles';
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
- *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
  * @event input - (React: onInput) This event is dispatched when the select is changed.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.
  * @event focus - (React: onFocus) This event is dispatched when the select receives focus.
  *
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
  * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.