@momentum-design/components 0.117.2 → 0.117.4

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

@@ -5,7 +5,7 @@ import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import type Option from '../option/option.component';
 import type { PopoverStrategy } from '../popover/popover.types';
 import type { Placement } from './select.types';
-declare const Select_base: import("../../utils/mixins/index.types").Constructor<import("../../models/component/component.component").default & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models/component/component.component").default & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Select_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * 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.

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

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-select";
 declare const ARROW_ICON: {
-    readonly ARROW_UP: "arrow-up-bold";
-    readonly ARROW_DOWN: "arrow-down-bold";
+    readonly ARROW_UP: Extract<IconNames, "arrow-up-bold">;
+    readonly ARROW_DOWN: Extract<IconNames, "arrow-down-bold">;
 };
 declare const TRIGGER_ID = "select-base-triggerid";
 declare const LISTBOX_ID = "select-listbox";

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

@@ -1,11 +1,12 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-statictoggle";
 declare const TOGGLE_SIZE: {
     readonly DEFAULT: "default";
     readonly COMPACT: "compact";
 };
 declare const ICON_NAME: {
-    readonly CHECKED: "check-bold";
-    readonly UNCHECKED: "cancel-bold";
+    readonly CHECKED: Extract<IconNames, "check-bold">;
+    readonly UNCHECKED: Extract<IconNames, "cancel-bold">;
 };
 declare const ICON_SIZE_IN_REM: {
     readonly compact: 0.75;

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

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-stepperitem";
 declare const VARIANT: {
     readonly INLINE: "inline";
@@ -11,9 +12,9 @@ declare const STATUS: {
     readonly NOT_STARTED: "not-started";
 };
 declare const STATUS_ICON: {
-    readonly COMPLETED: "check-bold";
-    readonly ERROR: "error-legacy-badge-filled";
-    readonly PENCIL: "edit-bold";
+    readonly COMPLETED: Extract<IconNames, "check-bold">;
+    readonly ERROR: Extract<IconNames, "error-legacy-badge-filled">;
+    readonly PENCIL: Extract<IconNames, "edit-bold">;
 };
 declare const DEFAULT: {
     VARIANT: "inline";

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

@@ -2,7 +2,7 @@ import { CSSResult, nothing, PropertyValueMap } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { AutoCapitalizeType } from '../input/input.types';
 import type { WrapType, AutoCompleteType } from './textarea.types';
-declare const Textarea_base: import("../../utils/mixins/index.types").Constructor<import("../../models/component/component.component").default & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Textarea_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * mdc-textarea component, which is used to get the multi-line text input from the user.
  * It contains:

package/dist/components/textarea/textarea.styles.js

@@ -51,6 +51,7 @@ const styles = [
       border: none;
       outline: none;
       box-sizing: border-box;
+      width: 100%;
     }
 
     :host::part(textarea-container) {

package/dist/components/toast/toast.component.js

@@ -96,13 +96,16 @@ class Toast extends FooterMixin(Component) {
     }
     updateDetailedSlotPresence() {
         var _a, _b;
-        this.hasDetailedSlot = (_b = (_a = this.detailedElements) === null || _a === void 0 ? void 0 : _a.some((el) => { var _a; return (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })) !== null && _b !== void 0 ? _b : false;
+        this.hasDetailedSlot = (_b = (_a = this.detailedElements) === null || _a === void 0 ? void 0 : _a.some(el => { var _a; return (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })) !== null && _b !== void 0 ? _b : false;
     }
     updateFooterButtonsPresence() {
         var _a, _b, _c, _d;
-        this.hasFooterButtons = ((_b = (_a = this.footerButtonPrimary) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 ||
-            ((_d = (_c = this.footerButtonSecondary) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0 ||
-            this.shouldRenderToggleButton() ? 'has-footer-buttons' : '';
+        this.hasFooterButtons =
+            ((_b = (_a = this.footerButtonPrimary) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 ||
+                ((_d = (_c = this.footerButtonSecondary) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0 ||
+                this.shouldRenderToggleButton()
+                ? 'has-footer-buttons'
+                : '';
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
@@ -112,11 +115,7 @@ class Toast extends FooterMixin(Component) {
         if (!iconName)
             return nothing;
         return html `
-      <mdc-icon
-        name="${iconName}"
-        size="${DEFAULTS.PREFIX_ICON_SIZE}"
-        part="toast-prefix-icon"
-      ></mdc-icon>
+      <mdc-icon name="${iconName}" size="${DEFAULTS.PREFIX_ICON_SIZE}" part="toast-prefix-icon"></mdc-icon>
     `;
     }
     shouldRenderToggleButton() {
@@ -139,11 +138,7 @@ class Toast extends FooterMixin(Component) {
     renderHeader() {
         return this.headerText
             ? html `
-          <mdc-text
-            part="toast-header"
-            tagname="${this.headerTagName}"
-            type="${TYPE.BODY_LARGE_BOLD}"
-          >
+          <mdc-text part="toast-header" tagname="${this.headerTagName}" type="${TYPE.BODY_LARGE_BOLD}">
             ${this.headerText}
           </mdc-text>
         `
@@ -184,13 +179,13 @@ class Toast extends FooterMixin(Component) {
           </div>
         </div>
         <mdc-button
-            part="toast-close-btn"
-            prefix-icon="${DEFAULTS.CANCEL_ICON}"
-            variant="${DEFAULTS.TERTIARY_BUTTON}"
-            size="${DEFAULTS.CLOSE_ICON_SIZE}"
-            aria-label="${ifDefined(this.closeButtonAriaLabel)}"
-            @click="${this.closeToast}"
-          ></mdc-button>
+          part="toast-close-btn"
+          prefix-icon="${DEFAULTS.CANCEL_ICON}"
+          variant="${DEFAULTS.TERTIARY_BUTTON}"
+          size="${DEFAULTS.CLOSE_ICON_SIZE}"
+          aria-label="${ifDefined(this.closeButtonAriaLabel)}"
+          @click="${this.closeToast}"
+        ></mdc-button>
       </div>
       ${this.renderFooter()}
     `;

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

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-toast";
 declare const TOAST_VARIANT: {
     readonly CUSTOM: "custom";
@@ -6,15 +7,15 @@ declare const TOAST_VARIANT: {
     readonly ERROR: "error";
 };
 declare const VARIANT_ICON_NAMES: {
-    readonly SUCCESS_ICON_NAME: "check-circle-bold";
-    readonly WARNING_ICON_NAME: "warning-bold";
-    readonly ERROR_ICON_NAME: "error-legacy-bold";
+    readonly SUCCESS_ICON_NAME: Extract<IconNames, "check-circle-bold">;
+    readonly WARNING_ICON_NAME: Extract<IconNames, "warning-bold">;
+    readonly ERROR_ICON_NAME: Extract<IconNames, "error-legacy-bold">;
 };
 declare const DEFAULTS: {
     readonly HEADER_TAG_NAME: "h2";
-    readonly CANCEL_ICON: "cancel-bold";
-    readonly ARROW_UP_BOLD: "arrow-up-bold";
-    readonly ARROW_DOWN_BOLD: "arrow-down-bold";
+    readonly CANCEL_ICON: Extract<IconNames, "cancel-bold">;
+    readonly ARROW_UP_BOLD: Extract<IconNames, "arrow-up-bold">;
+    readonly ARROW_DOWN_BOLD: Extract<IconNames, "arrow-down-bold">;
     readonly PREFIX_ICON_SIZE: 1.5;
     readonly CLOSE_ICON_SIZE: 20;
     readonly BUTTON: "mdc-button";

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

@@ -2,7 +2,7 @@ import { CSSResult, PropertyValueMap } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { ToggleSize } from './toggle.types';
-declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../models/component/component.component").default & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * Toggle Component is an interactive control used to switch between two mutually exclusive options,
  * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections

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

@@ -1,11 +1,12 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-toggle";
 declare const TOGGLE_SIZE: {
     readonly DEFAULT: "default";
     readonly COMPACT: "compact";
 };
 declare const ICON_NAME: {
-    readonly CHECKED: "check-bold";
-    readonly UNCHECKED: "cancel-bold";
+    readonly CHECKED: Extract<IconNames, "check-bold">;
+    readonly UNCHECKED: Extract<IconNames, "cancel-bold">;
 };
 declare const ICON_SIZE_IN_REM: {
     compact: number;

package/dist/components/toggle/toggle.styles.js

@@ -59,6 +59,11 @@ const styles = [
       cursor: pointer;
     }
 
+    .mdc-label {
+      word-break: break-word;
+      white-space: normal;
+    }
+
     :host([disabled]) .mdc-label,
     :host([disabled])::part(toggle-input) {
       cursor: default;