@momentum-design/components 0.96.0 → 0.96.2

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

@@ -1,5 +1,6 @@
 import type { PropertyValues } from 'lit';
 import { CSSResult } from 'lit';
+import type { RoleType } from '../../utils/roles';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import type { IconButtonSize, PillButtonSize } from './button.types';
 declare const Button_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ButtonComponentMixin").ButtonComponentMixinInterface> & typeof Buttonsimple;
@@ -59,7 +60,7 @@ declare class Button extends Button_base {
      * - Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.
      * @default button
      */
-    role: string;
+    role: RoleType;
     /**
      * @internal
      */

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

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ButtonComponentMixin } from '../../utils/mixins/ButtonComponentMixin';
+import { ROLE } from '../../utils/roles';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { DEFAULTS } from './button.constants';
 import styles from './button.styles';
@@ -72,7 +73,7 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
          * - Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.
          * @default button
          */
-        this.role = 'button';
+        this.role = ROLE.BUTTON;
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -150,7 +151,7 @@ __decorate([
 ], Button.prototype, "inverted", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Button.prototype, "role", void 0);
 __decorate([
     state(),

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

@@ -33,11 +33,11 @@ declare const BUTTON_TYPE_INTERNAL: {
     readonly PILL_WITH_ICON: "pill-with-icon";
 };
 declare const DEFAULTS: {
-    VARIANT: "primary";
-    SIZE: 32;
-    COLOR: "default";
-    TYPE_INTERNAL: "icon";
-    TYPE: "button";
-    INVERTED: boolean;
+    readonly VARIANT: "primary";
+    readonly SIZE: 32;
+    readonly COLOR: "default";
+    readonly TYPE_INTERNAL: "icon";
+    readonly TYPE: "button";
+    readonly INVERTED: false;
 };
 export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };

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

@@ -14,8 +14,8 @@ declare const BUTTON_GROUP_VARIANT: {
     readonly SECONDARY: "secondary";
 };
 declare const DEFAULTS: {
-    SIZE: 28;
-    VARIANT: "primary";
-    ORIENTATION: "horizontal";
+    readonly SIZE: 28;
+    readonly VARIANT: "primary";
+    readonly ORIENTATION: "horizontal";
 };
 export { TAG_NAME, DEFAULTS, BUTTON_GROUP_SIZE, BUTTON_GROUP_ORIENTATION, BUTTON_GROUP_VARIANT };

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

@@ -1,6 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
+import type { RoleType } from '../../utils/roles';
 import type { ButtonSize, ButtonType } from './buttonsimple.types';
 declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AutoFocusMixin").AutoFocusMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
@@ -48,7 +49,7 @@ declare class Buttonsimple extends Buttonsimple_base {
      * - Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.
      * @default button
      */
-    role: string;
+    role: RoleType;
     /**
      * This property defines the ARIA state key, which will be toggled when the
      * Button is set to `active`.

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

@@ -10,10 +10,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
+import { KEYS } from '../../utils/keys';
+import { AutoFocusMixin } from '../../utils/mixins/AutoFocusMixin';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
-import { AutoFocusMixin } from '../../utils/mixins/AutoFocusMixin';
-import { KEYS } from '../../utils/keys';
 import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
 import styles from './buttonsimple.styles';
 /**
@@ -230,7 +230,7 @@ __decorate([
 ], Buttonsimple.prototype, "size", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Buttonsimple.prototype, "role", void 0);
 __decorate([
     property({ type: String, reflect: true }),

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

@@ -21,9 +21,9 @@ declare const BUTTON_TYPE: {
     readonly RESET: "reset";
 };
 declare const DEFAULTS: {
-    SIZE: 32;
-    TYPE: "button";
-    ROLE: string;
-    ARIA_STATE_KEY: string;
+    readonly SIZE: 32;
+    readonly TYPE: "button";
+    readonly ROLE: "button";
+    readonly ARIA_STATE_KEY: "aria-pressed";
 };
 export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES };

package/dist/components/buttonsimple/buttonsimple.constants.js

@@ -1,4 +1,5 @@
 import utils from '../../utils/tag-name';
+import { ROLE } from '../../utils/roles';
 const TAG_NAME = utils.constructTagName('buttonsimple');
 const BUTTON_SIZES = {
     12: 12,
@@ -24,7 +25,7 @@ const BUTTON_TYPE = {
 const DEFAULTS = {
     SIZE: BUTTON_SIZES[32],
     TYPE: BUTTON_TYPE.BUTTON,
-    ROLE: 'button',
+    ROLE: ROLE.BUTTON,
     ARIA_STATE_KEY: 'aria-pressed',
 };
 export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES };

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

@@ -9,14 +9,14 @@ declare const ORIENTATIONS: {
     readonly VERTICAL: "vertical";
 };
 declare const DEFAULTS: {
-    VARIANT: "border";
-    ORIENTATION: "vertical";
-    TITLE_TYPE: "heading-small-bold";
-    SUBTITLE_TYPE: "body-midsize-medium";
-    TAGNAME: "span";
-    ICON_SIZE: number;
-    ICON_LENGTH_UNIT: string;
-    LINK: "mdc-link";
-    BUTTON: "mdc-button";
+    readonly VARIANT: "border";
+    readonly ORIENTATION: "vertical";
+    readonly TITLE_TYPE: "heading-small-bold";
+    readonly SUBTITLE_TYPE: "body-midsize-medium";
+    readonly TAGNAME: "span";
+    readonly ICON_SIZE: 1.5;
+    readonly ICON_LENGTH_UNIT: "rem";
+    readonly LINK: "mdc-link";
+    readonly BUTTON: "mdc-button";
 };
 export { TAG_NAME, DEFAULTS, VARIANTS, ORIENTATIONS };

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

@@ -8,8 +8,8 @@ declare const SELECTION_TYPE: {
     readonly CHECKBOX: "checkbox";
 };
 declare const DEFAULTS: {
-    SELECTION_TYPE: "check";
-    ICON_SIZE: number;
-    ICON_LENGTH_UNIT: string;
+    readonly SELECTION_TYPE: "check";
+    readonly ICON_SIZE: 1.5;
+    readonly ICON_LENGTH_UNIT: "rem";
 };
 export { TAG_NAME, DEFAULTS, SELECTION_TYPE, CHECK_MARK };

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

@@ -12,10 +12,10 @@ declare const COLOR: {
     readonly VIOLET: "violet";
 };
 declare const DEFAULTS: {
-    COLOR: "default";
-    TEXT_TYPE: "body-midsize-regular";
-    TAG_NAME: "span";
-    SIZE: 24;
-    ROLE: string;
+    readonly COLOR: "default";
+    readonly TEXT_TYPE: "body-midsize-regular";
+    readonly TAG_NAME: "span";
+    readonly SIZE: 24;
+    readonly ROLE: "button";
 };
 export { TAG_NAME, COLOR, DEFAULTS };

package/dist/components/chip/chip.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';
@@ -19,6 +20,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 { TAG_NAME, COLOR, DEFAULTS };

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

@@ -1,9 +1,9 @@
 declare const TAG_NAME: "mdc-coachmark";
 declare const DEFAULTS: {
-    COLOR: "contrast";
-    TRIGGER: "manual";
-    ARROW: boolean;
-    CLOSE_BUTTON: boolean;
-    DISABLE_ARIA_EXPANDED: boolean;
+    readonly COLOR: "contrast";
+    readonly TRIGGER: "manual";
+    readonly ARROW: true;
+    readonly CLOSE_BUTTON: true;
+    readonly DISABLE_ARIA_EXPANDED: true;
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -1,6 +1,6 @@
 declare const TAG_NAME: "mdc-filterchip";
 declare const DEFAULTS: {
-    ICON_NAME: "check-bold";
-    COLOR: "default";
+    readonly ICON_NAME: "check-bold";
+    readonly COLOR: "default";
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -15,8 +15,8 @@ declare const DEFAULTS: {
     readonly TOGGLETIP_PLACEMENT: "top";
 };
 declare const MDC_TEXT_OPTIONS: {
-    TAGNAME: "span";
-    TYPE: "body-midsize-regular";
-    HEADER_TYPE: "body-midsize-bold";
+    readonly TAGNAME: "span";
+    readonly TYPE: "body-midsize-regular";
+    readonly HEADER_TYPE: "body-midsize-bold";
 };
 export { TAG_NAME, VALIDATION, DEFAULTS, MDC_TEXT_OPTIONS };

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

@@ -21,15 +21,15 @@ declare const PREFIX_TEXT_OPTIONS: {
     VALIDATION: "error";
 };
 declare const DEFAULTS: {
-    VALIDATION: "default";
-    ICON_SIZE_VALUE: number;
-    ICON_SIZE_UNIT: string;
-    CLEAR_BUTTON_ICON: "cancel-bold";
-    CLEAR_BUTTON_VARIANT: "tertiary";
-    CLEAR_BUTTON_SIZE: 20;
-    PREFIX_TEXT_TYPE: "body-midsize-regular";
-    PREFIX_TEXT_TAG: "span";
-    AUTO_COMPLETE: "off";
-    INPUT_TYPE: "text";
+    readonly VALIDATION: "default";
+    readonly ICON_SIZE_VALUE: 1;
+    readonly ICON_SIZE_UNIT: "rem";
+    readonly CLEAR_BUTTON_ICON: "cancel-bold";
+    readonly CLEAR_BUTTON_VARIANT: "tertiary";
+    readonly CLEAR_BUTTON_SIZE: 20;
+    readonly PREFIX_TEXT_TYPE: "body-midsize-regular";
+    readonly PREFIX_TEXT_TAG: "span";
+    readonly AUTO_COMPLETE: "off";
+    readonly INPUT_TYPE: "text";
 };
 export { TAG_NAME, PREFIX_TEXT_OPTIONS, AUTO_CAPITALIZE, AUTO_COMPLETE, INPUT_TYPE, DEFAULTS };

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

@@ -1,7 +1,7 @@
 declare const TAG_NAME: "mdc-inputchip";
 declare const DEFAULTS: {
-    TEXT_TYPE: "body-midsize-regular";
-    TAG_NAME: "span";
-    CLOSE_ICON: "cancel-bold";
+    readonly TEXT_TYPE: "body-midsize-regular";
+    readonly TAG_NAME: "span";
+    readonly CLOSE_ICON: "cancel-bold";
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -10,6 +10,6 @@ declare const LINK_ICON_SIZES: {
     readonly SMALL: 0.75;
 };
 declare const DEFAULTS: {
-    LINK_SIZE: "large";
+    readonly LINK_SIZE: "large";
 };
 export { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES, TAG_NAME };

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

@@ -5,9 +5,9 @@ declare const LINKBUTTON_SIZES: {
     readonly 16: 16;
 };
 declare const DEFAULTS: {
-    SIZE: 16;
-    ROLE: "button";
-    INLINE: boolean;
-    INVERTED: boolean;
+    readonly SIZE: 16;
+    readonly ROLE: "button";
+    readonly INLINE: false;
+    readonly INVERTED: false;
 };
 export { TAG_NAME, LINKBUTTON_SIZES, DEFAULTS };

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

@@ -1,6 +1,6 @@
 declare const TAG_NAME: "mdc-linksimple";
 declare const DEFAULTS: {
-    INLINE: boolean;
-    INVERTED: boolean;
+    readonly INLINE: false;
+    readonly INVERTED: false;
 };
 export { DEFAULTS, TAG_NAME };

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

@@ -1,5 +1,5 @@
 declare const TAG_NAME: "mdc-menubar";
 declare const DEFAULTS: {
-    ORIENTATION: string;
+    readonly ORIENTATION: "vertical";
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -1,6 +1,6 @@
 declare const TAG_NAME: "mdc-menupopover";
 declare const DEFAULTS: {
-    PLACEMENT: "bottom-start";
-    ORIENTATION: string;
+    readonly PLACEMENT: "bottom-start";
+    readonly ORIENTATION: "vertical";
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -1,8 +1,8 @@
 declare const TAG_NAME: "mdc-searchfield";
 declare const DEFAULTS: {
-    TYPE: "search";
-    ICON: "search-bold";
-    CLOSE_BTN: boolean;
-    INPUT_CHIP_TAG: "mdc-inputchip";
+    readonly TYPE: "search";
+    readonly ICON: "search-bold";
+    readonly CLOSE_BTN: true;
+    readonly INPUT_CHIP_TAG: "mdc-inputchip";
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -6,6 +6,6 @@ declare const SKELETON_VARIANTS: {
     readonly ROUNDED: "rounded";
 };
 declare const DEFAULTS: {
-    VARIANT: "rectangular";
+    readonly VARIANT: "rectangular";
 };
 export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS };

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

@@ -42,7 +42,7 @@ declare class Spinner extends Component {
      * The spinner color can be inverted by setting the inverted attribute to true.
      * @default false
      */
-    inverted: boolean;
+    inverted: false;
     /**
      * Size of the spinner.
      * Acceptable values include:

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

@@ -9,8 +9,8 @@ declare const SPINNER_VARIANT: {
     readonly BUTTON: "button";
 };
 declare const DEFAULTS: {
-    VARIANT: "standalone";
-    SIZE: "midsize";
-    INVERTED: boolean;
+    readonly VARIANT: "standalone";
+    readonly SIZE: "midsize";
+    readonly INVERTED: false;
 };
 export { TAG_NAME, SPINNER_SIZES, SPINNER_VARIANT, DEFAULTS };

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

@@ -12,6 +12,6 @@ declare const ICON_SIZE_IN_REM: {
     readonly default: 1.25;
 };
 declare const DEFAULTS: {
-    SIZE: "default";
+    readonly SIZE: "default";
 };
 export { TAG_NAME, ICON_SIZE_IN_REM, DEFAULTS, TOGGLE_SIZE, ICON_NAME };

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

@@ -66,12 +66,12 @@ declare class Textarea extends Textarea_base {
      * The rows attribute specifies the visible number of lines in a text area.
      * @default 5
      */
-    rows: number;
+    rows: 5;
     /**
      * The cols attribute specifies the visible number of lines in a text area.
      * @default 40
      */
-    cols: number;
+    cols: 40;
     /**
      * The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.
      * @default 'soft'

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

@@ -8,9 +8,9 @@ declare const AUTO_COMPLETE: {
     readonly ON: "on";
 };
 declare const DEFAULTS: {
-    CHARACTER_COUNTER_TYPE: "body-midsize-regular";
-    ROWS: number;
-    COLS: number;
-    WRAP: "soft";
+    readonly CHARACTER_COUNTER_TYPE: "body-midsize-regular";
+    readonly ROWS: 5;
+    readonly COLS: 40;
+    readonly WRAP: "soft";
 };
 export { TAG_NAME, WRAP, AUTO_COMPLETE, DEFAULTS };

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

@@ -1,10 +1,10 @@
 declare const TAG_NAME: "mdc-toggletip";
 declare const DEFAULTS: {
-    CLOSE_BUTTON: boolean;
-    CLOSE_BUTTON_ARIA_LABEL: string;
-    OFFSET: number;
-    PLACEMENT: "top";
-    CLICK: "click";
-    SHOW_ARROW: boolean;
+    readonly CLOSE_BUTTON: true;
+    readonly CLOSE_BUTTON_ARIA_LABEL: "Close";
+    readonly OFFSET: 4;
+    readonly PLACEMENT: "top";
+    readonly CLICK: "click";
+    readonly SHOW_ARROW: true;
 };
 export { DEFAULTS, TAG_NAME };

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

@@ -5,11 +5,11 @@ declare const TOOLTIP_TYPES: {
     NONE: string;
 };
 declare const DEFAULTS: {
-    BACKDROP: boolean;
-    DELAY: string;
-    OFFSET: number;
-    PLACEMENT: "top";
-    SHOW_ARROW: boolean;
-    TOOLTIP_TYPE: string;
+    readonly BACKDROP: false;
+    readonly DELAY: "0,0";
+    readonly OFFSET: 4;
+    readonly PLACEMENT: "top";
+    readonly SHOW_ARROW: true;
+    readonly TOOLTIP_TYPE: string;
 };
 export { DEFAULTS, TAG_NAME, TOOLTIP_TYPES };

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

@@ -1,9 +1,9 @@
 declare const TAG_NAME: "mdc-virtualizedlist";
 declare const VIRTUALIZED_WRAPPER_TAG_NAME: "mdc-virtualizedwrapper";
 declare const DEFAULTS: {
-    VIRTUALIZER_PROPS: {
-        count: number;
-        estimateSize: () => number;
+    readonly VIRTUALIZER_PROPS: {
+        readonly count: 0;
+        readonly estimateSize: () => number;
     };
 };
 export { TAG_NAME, DEFAULTS, VIRTUALIZED_WRAPPER_TAG_NAME };