@momentum-design/components 0.117.2 → 0.117.3

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

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-accordionbutton";
 declare const ICON_NAME: {
-    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 VARIANT: {
     readonly DEFAULT: "default";

package/dist/components/animation/animation.component.js

@@ -96,7 +96,7 @@ class Animation extends Component {
         }
         if (this.containerRef.value) {
             this.lottieInstance = lottie.loadAnimation({
-                container: this.containerRef.value,
+                container: this.containerRef.value, // the dom element that will contain the animation
                 renderer: 'svg',
                 loop: this.getLoopValue(),
                 autoplay: this.autoplay,

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

@@ -113,7 +113,7 @@ declare class Badge extends Badge_base {
      */
     private getBadgeContentBasedOnType;
     update(changedProperties: PropertyValues): void;
-    render(): TemplateResult<1 | 2 | 3>;
+    render(): TemplateResult;
     static styles: Array<CSSResult>;
 }
 export default Badge;

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

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-cardcheckbox";
 declare const CHECK_MARK: {
-    readonly DEFAULT: "check-circle-bold";
-    readonly CHECKED: "check-circle-filled";
+    readonly DEFAULT: Extract<IconNames, "check-circle-bold">;
+    readonly CHECKED: Extract<IconNames, "check-circle-filled">;
 };
 declare const SELECTION_TYPE: {
     readonly CHECK: "check";

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-declare const Checkbox_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 Checkbox_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;
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selections in lists.

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

@@ -1,6 +1,7 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-checkbox";
 declare const ICON_NAME: {
-    readonly CHECKED: "check-bold";
-    readonly INDETERMINATE: "minus-bold";
+    readonly CHECKED: Extract<IconNames, "check-bold">;
+    readonly INDETERMINATE: Extract<IconNames, "minus-bold">;
 };
 export { TAG_NAME, ICON_NAME };

package/dist/components/checkbox/checkbox.styles.js

@@ -73,6 +73,11 @@ const styles = [
       flex-direction: column;
       gap: 0.25rem;
     }
+
+    .mdc-label {
+      word-break: break-word;
+      white-space: normal;
+    }
   `,
     ...hostFocusRingStyles(true),
 ];

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

@@ -4,7 +4,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 './combobox.types';
-declare const Combobox_base: 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 Combobox_base: 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 Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.
  * Users can type text to filter the options and select their desired choice.

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

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-combobox";
 declare const ICON_NAME: {
-    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 AUTOCOMPLETE_LIST = "list";
 declare const LISTBOX_ID = "combobox-listbox-id";

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

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-dialog";
 declare const DIALOG_VARIANT: {
     readonly DEFAULT: "default";
@@ -10,7 +11,7 @@ declare const DEFAULTS: {
     readonly SIZE: "small";
     readonly HEADER_TAG_NAME: "h2";
     readonly DESCRIPTION_TAG_NAME: "p";
-    readonly CANCEL_ICON: "cancel-bold";
+    readonly CANCEL_ICON: Extract<IconNames, "cancel-bold">;
     readonly VARIANT: "default";
     readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly FOCUS_TRAP: true;

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

@@ -1,6 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
+import { ColorType } from '../chip/chip.types';
 declare const TAG_NAME: "mdc-filterchip";
 declare const DEFAULTS: {
-    readonly ICON_NAME: "check-bold";
-    readonly COLOR: "default";
+    readonly ICON_NAME: Extract<IconNames, "check-bold">;
+    readonly COLOR: Extract<ColorType, "default">;
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -129,6 +129,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
               size="${DEFAULTS.ICON_SIZE}"
               variant="${BUTTON_VARIANTS.TERTIARY}"
               aria-label="${ifDefined(this.infoIconAriaLabel)}"
+              ?disabled="${this.disabled}"
               id="info-icon-id"
             ></mdc-button>
             <mdc-toggletip

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

@@ -1,3 +1,4 @@
+import { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-formfieldwrapper";
 declare const VALIDATION: {
     readonly DEFAULT: "default";
@@ -11,7 +12,7 @@ declare const DEFAULTS: {
     readonly HELPER_TEXT_ID: "helper-text-id";
     readonly HEADING_ID: "heading-id";
     readonly ICON_SIZE: 20;
-    readonly INFO_ICON: "info-badge-filled";
+    readonly INFO_ICON: Extract<IconNames, "info-badge-filled">;
     readonly TOGGLETIP_PLACEMENT: "top";
 };
 declare const MDC_TEXT_OPTIONS: {

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -49,6 +49,10 @@ const styles = [
       color: var(--mds-color-theme-text-secondary-normal);
     }
 
+    :host::part(info-icon-btn) {
+      align-self: flex-start;
+    }
+
     :host([help-text-type='error']) .mdc-help-text {
       color: var(--mds-color-theme-text-error-normal);
     }

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

@@ -1,3 +1,3 @@
 import type { HelperIconsList, ValidationType } from './formfieldwrapper.types';
-declare const getHelperIcon: (type: ValidationType) => HelperIconsList | '';
+declare const getHelperIcon: (type: ValidationType) => HelperIconsList | "";
 export { getHelperIcon };

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

@@ -3,7 +3,7 @@ import FormfieldWrapper from '../formfieldwrapper';
 import type { IconNames } from '../icon/icon.types';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import type { AutoCapitalizeType, AutoCompleteType, InputType } from './input.types';
-declare const Input_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 Input_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-input is a component that allows users to input text.
  *  It contains:

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

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-input";
 declare const AUTO_CAPITALIZE: {
     readonly OFF: "off";
@@ -24,7 +25,7 @@ declare const DEFAULTS: {
     readonly VALIDATION: "default";
     readonly ICON_SIZE_VALUE: 1;
     readonly ICON_SIZE_UNIT: "rem";
-    readonly CLEAR_BUTTON_ICON: "cancel-bold";
+    readonly CLEAR_BUTTON_ICON: Extract<IconNames, "cancel-bold">;
     readonly CLEAR_BUTTON_VARIANT: "tertiary";
     readonly CLEAR_BUTTON_SIZE: 20;
     readonly PREFIX_TEXT_TYPE: "body-midsize-regular";

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

@@ -1,7 +1,8 @@
+import { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-inputchip";
 declare const DEFAULTS: {
     readonly TEXT_TYPE: "body-midsize-regular";
     readonly TAG_NAME: "span";
-    readonly CLOSE_ICON: "cancel-bold";
+    readonly CLOSE_ICON: Extract<IconNames, "cancel-bold">;
 };
 export { TAG_NAME, DEFAULTS };

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

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-menuitem";
 declare const ARROW_ICONS: {
-    readonly LEFT: "arrow-left-bold";
-    readonly RIGHT: "arrow-right-bold";
+    readonly LEFT: Extract<IconNames, "arrow-left-bold">;
+    readonly RIGHT: Extract<IconNames, "arrow-right-bold">;
 };
 declare const ARROW_DIRECTIONS: {
     readonly POSITIVE: "positive";

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

@@ -1,10 +1,11 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-navmenuitem";
 declare const ALLOWED_BADGE_TYPES: {
     readonly DOT: "dot";
     readonly COUNTER: "counter";
 };
 declare const ICON_NAME: {
-    readonly RIGHT_ARROW: "arrow-right-bold";
+    readonly RIGHT_ARROW: Extract<IconNames, "arrow-right-bold">;
 };
 declare const DEFAULTS: {
     readonly MAX_COUNTER: 99;

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

@@ -1,5 +1,6 @@
+import { IconNames } from '../icon/icon.types';
 export declare const PASSWORD_VISIBILITY_ICONS: {
-    readonly HIDE_BOLD: "hide-bold";
-    readonly SHOW_BOLD: "show-bold";
+    readonly HIDE_BOLD: Extract<IconNames, "hide-bold">;
+    readonly SHOW_BOLD: Extract<IconNames, "show-bold">;
 };
 export declare const TAG_NAME: "mdc-password";

package/dist/components/presence/presence.utils.d.ts

@@ -1,3 +1,3 @@
 import type { PresenceSize, PresenceType } from './presence.types';
-export declare const getIconValue: (type: PresenceType) => "active-presence-small-filled" | "away-calling-presence-filled" | "busy-presence-bold" | "camera-filled" | "dnd-presence-badge-filled" | "generic-device-video-badge-filled" | "handset-filled" | "meetings-presence-badge-filled" | "pause-badge-filled" | "phone-badge-filled" | "pto-presence-filled" | "quiet-hours-presence-filled" | "recents-presence-badge-filled" | "share-screen-badge-filled";
+export declare const getIconValue: (type: PresenceType) => "dnd-presence-badge-filled" | "recents-presence-badge-filled" | "away-calling-presence-filled" | "busy-presence-bold" | "camera-filled" | "handset-filled" | "generic-device-video-badge-filled" | "phone-badge-filled" | "pause-badge-filled" | "pto-presence-filled" | "share-screen-badge-filled" | "quiet-hours-presence-filled" | "meetings-presence-badge-filled" | "active-presence-small-filled";
 export declare const getPresenceIconSize: (size: PresenceSize) => number;

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

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-progressspinner";
 declare const DEFAULTS: {
     readonly RADIUS: 20;
@@ -9,7 +10,7 @@ declare const DEFAULTS: {
     readonly ICON_LENGTH_UNIT: "em";
 };
 declare const ICON_NAME: {
-    readonly CHECK_CIRCLE_BOLD: "check-circle-bold";
-    readonly ERROR_LEGACY_FILLED: "error-legacy-filled";
+    readonly CHECK_CIRCLE_BOLD: Extract<IconNames, "check-circle-bold">;
+    readonly ERROR_LEGACY_FILLED: Extract<IconNames, "error-legacy-filled">;
 };
 export { TAG_NAME, DEFAULTS, ICON_NAME };

package/dist/components/progressspinner/progressspinner.constants.js

@@ -3,8 +3,8 @@ const TAG_NAME = utils.constructTagName('progressspinner');
 const DEFAULTS = {
     RADIUS: 20,
     CIRCUMFERENCE: 2 * Math.PI * 20,
-    STROKE_WIDTH: 4,
-    GAP_SIZE: 7.5,
+    STROKE_WIDTH: 4, // Default stroke width or border width
+    GAP_SIZE: 7.5, // Gap size between the spinner and the track
     ERROR_ICON_SIZE: 2,
     SUCCESS_ICON_SIZE: 3,
     ICON_LENGTH_UNIT: 'em',

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
-declare const Radio_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 Radio_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;
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selection in lists.

package/dist/components/radio/radio.styles.js

@@ -61,6 +61,8 @@ const styles = [
 
     .mdc-label {
       cursor: pointer;
+      word-break: break-word;
+      white-space: normal;
     }
 
     :host([disabled]) .mdc-radio__label-text,
@@ -83,6 +85,7 @@ const styles = [
       flex-direction: column;
       justify-content: center;
       gap: 0.25rem;
+      flex: 1;
     }
     :host::part(required-indicator) {
       display: none;

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

@@ -1,7 +1,8 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-searchfield";
 declare const DEFAULTS: {
     readonly TYPE: "search";
-    readonly ICON: "search-bold";
+    readonly ICON: Extract<IconNames, "search-bold">;
     readonly CLOSE_BTN: true;
     readonly INPUT_CHIP_TAG: "mdc-inputchip";
 };

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;