@momentum-design/components 0.117.1 → 0.117.3

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

@@ -8,17 +8,21 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, nothing } from 'lit';
-import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { ElementStore } from '../../utils/controllers/ElementStore';
 import { KEYS } from '../../utils/keys';
-import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { CaptureDestroyEventForChildElement } from '../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement';
+import { LIFE_CYCLE_EVENTS } from '../../utils/mixins/lifecycle/lifecycle.contants';
+import { ListNavigationMixin } from '../../utils/mixins/ListNavigationMixin';
 import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
 import { TAG_NAME as OPTION_TAG_NAME } from '../option/option.constants';
-import { POPOVER_PLACEMENT, DEFAULTS as POPOVER_DEFAULTS } from '../popover/popover.constants';
+import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { ARROW_ICON, LISTBOX_ID, TRIGGER_ID } from './select.constants';
 import styles from './select.styles';
@@ -29,6 +33,7 @@ import styles from './select.styles';
  * Every mdc-option should have a `value` attribute set to ensure proper form submission.
  *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
+ * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.
  *
  * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
  *
@@ -66,16 +71,22 @@ import styles from './select.styles';
  * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
  * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
  */
-class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * readonly attribute of the select field. If true, the select is read-only.
          * @default false
          */
         this.readonly = false;
         /**
-         * The placeholder text which will be shown on the text if provided.
+         * The placement of the popover within Select component.
+         * This defines the position of the popover relative to the select input field.
+         *
+         * Possible values:
+         *  - 'top-start'
+         *  - 'bottom-start'
+         * @default 'bottom-start'
          */
         this.placement = POPOVER_PLACEMENT.BOTTOM_START;
         /**
@@ -115,22 +126,141 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
         this.displayPopover = false;
         /** @internal */
         this.initialSelectedOption = null;
+        /** @internal */
+        this.itemsStore = new ElementStore(this, {
+            isValidItem: this.isValidItem,
+            onStoreUpdate: this.onStoreUpdate,
+        });
+        this.addEventListener(LIFE_CYCLE_EVENTS.MODIFIED, this.handleModifiedEvent);
     }
-    getAllValidOptions() {
-        var _a;
-        return Array.from(((_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${OPTION_TAG_NAME}:not([disabled])`)) || []);
+    connectedCallback() {
+        super.connectedCallback();
+        this.loop = 'false';
+        this.initialFocus = 0;
     }
-    getFirstValidOption() {
+    /** @internal */
+    get navItems() {
+        return this.itemsStore.items;
+    }
+    /**
+     * This function is called when the value attribute changes.
+     * It updates the selected option based on the value attribute.
+     *
+     * @param name - attribute name
+     * @param old - old value
+     * @param value - new value
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
         var _a;
-        return (_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelector(`${OPTION_TAG_NAME}:not([disabled])`);
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === 'value' &&
+            newValue !== '' &&
+            newValue !== oldValue &&
+            newValue !== ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) &&
+            this.navItems.length) {
+            const firstSelectedOption = this.getFirstSelectedOption();
+            const firstValidOption = this.getFirstOption();
+            const valueBasedOption = this.navItems.find(option => option.value === newValue);
+            let optionToSelect = null;
+            if (valueBasedOption) {
+                optionToSelect = valueBasedOption;
+            }
+            else if (this.placeholder) {
+                optionToSelect = null;
+            }
+            else if (firstValidOption) {
+                optionToSelect = firstValidOption;
+            }
+            else if (firstSelectedOption) {
+                optionToSelect = firstSelectedOption;
+            }
+            else {
+                return;
+            }
+            this.updateComplete
+                .then(() => {
+                this.setSelectedOption(optionToSelect);
+            })
+                .catch(error => {
+                if (this.onerror) {
+                    this.onerror(error);
+                }
+            });
+        }
     }
-    getLastValidOption() {
-        const options = this.getAllValidOptions();
-        return options.length > 0 ? options[options.length - 1] : null;
+    /** @internal */
+    onStoreUpdate(option, changeType, index) {
+        switch (changeType) {
+            case 'added':
+                option.setAttribute('tabindex', '-1');
+                break;
+            case 'removed': {
+                if (index === -1 || option.tabIndex !== 0) {
+                    return;
+                }
+                let newIndex = index + 1;
+                if (newIndex >= this.navItems.length) {
+                    newIndex = index - 1;
+                }
+                if (newIndex === -1) {
+                    this.displayPopover = false;
+                    this.handleNativeInputFocus();
+                    return;
+                }
+                this.resetTabIndexes(newIndex);
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    /** @internal */
+    isValidItem(item) {
+        return item.matches(`${OPTION_TAG_NAME}:not([disabled])`);
     }
+    /** @internal */
     getFirstSelectedOption() {
-        var _a;
-        return (_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelector(`${OPTION_TAG_NAME}[selected]:not([disabled])`);
+        return this.navItems.find(option => option.hasAttribute('selected'));
+    }
+    /** @internal */
+    getFirstOption() {
+        return this.navItems[0];
+    }
+    /**
+     * Update the selected option when an option is modified.
+     *
+     * @internal
+     */
+    handleModifiedEvent(event) {
+        const option = event.target;
+        const firstSelectedOption = this.getFirstSelectedOption();
+        switch (event.detail.change) {
+            case 'selected': {
+                // when selected, check if there is any other option is a selected option,
+                // first preference should always be given to the `selected` attribute.
+                // if there is no selected option, then reset it to placeholder or first option
+                if (firstSelectedOption) {
+                    this.setSelectedOption(firstSelectedOption);
+                }
+                else {
+                    this.setSelectedOption(option);
+                }
+                break;
+            }
+            case 'unselected': {
+                // when unselected, check if there is any other option is a selected option,
+                // if there is no selected option, then reset it to placeholder or first option
+                if (firstSelectedOption) {
+                    this.setSelectedOption(firstSelectedOption);
+                }
+                else {
+                    this.setSelectedOption(this.placeholder ? null : this.getFirstOption());
+                }
+                break;
+            }
+            default:
+                break;
+        }
     }
     /**
      * Handles the first updated lifecycle event.
@@ -139,7 +269,6 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
      */
     async firstUpdated(_changedProperties) {
         await this.updateComplete;
-        this.modifyListBoxWrapper();
         const firstSelectedOption = this.getFirstSelectedOption();
         if (firstSelectedOption) {
             this.initialSelectedOption = firstSelectedOption;
@@ -148,7 +277,7 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
             this.setSelectedOption(firstSelectedOption);
         }
         else if (!this.placeholder) {
-            const firstValidOption = this.getFirstValidOption();
+            const firstValidOption = this.getFirstOption();
             // We will show the first option as selected & fire
             // and event since the selected option changed
             this.setSelectedOption(firstValidOption);
@@ -178,26 +307,6 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
                 this.displayPopover = false;
             }
         }
-        if (changedProperties.has('dataAriaLabel')) {
-            this.modifyListBoxWrapper();
-        }
-    }
-    /**
-     * Modifies the listbox wrapper to ensure it has the correct attributes
-     * and IDs for accessibility.
-     *
-     * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,
-     * this an be removed and mdc-option can be used directly in the select component with a listbox in a different
-     * shadow root and aria-owns attribute to connect them.
-     */
-    modifyListBoxWrapper() {
-        const slottedListBox = this.slottedListboxes[0];
-        if (!slottedListBox) {
-            return;
-        }
-        slottedListBox.setAttribute('id', LISTBOX_ID);
-        slottedListBox.setAttribute('aria-label', this.dataAriaLabel || '');
-        slottedListBox.setAttribute('aria-labelledby', TRIGGER_ID);
     }
     /**
      * A private method which is called when an option is clicked.
@@ -227,10 +336,13 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
      */
     setSelectedOption(option) {
         var _a, _b, _c;
+        // if the options is already selected, return
+        if (option === this.selectedOption)
+            return;
         // set the attribute 'selected' on the option in HTML and remove it from others
         this.updateSelectedInChildOptions(option);
         // update the tabindex for all options
-        this.updateTabIndexForAllOptions(option);
+        this.resetTabIndexes(this.navItems.indexOf(option));
         // set the selected option in the component state
         this.selectedOption = option;
         // update all form related values
@@ -239,27 +351,13 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
         (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.setAttribute('value', this.value);
         this.setInputValidity();
     }
-    /**
-     * Updates the tabindex of all options.
-     * Sets the tabindex of the selected option to '0' and others to '-1'.
-     *
-     * @param option - The option which tabIndex should be set to 0.
-     */
-    updateTabIndexForAllOptions(option) {
-        const options = this.getAllValidOptions();
-        const optionToGetTabIndex0 = option || options[0];
-        options.forEach(option => {
-            option.setAttribute('tabindex', option === optionToGetTabIndex0 ? '0' : '-1');
-        });
-    }
     /**
      * Sets selected attribute on the selected option and removes it from all options
      * @param selectedOption - The option which gets selected
      */
     updateSelectedInChildOptions(selectedOption) {
         selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.setAttribute('selected', 'true');
-        const options = this.getAllValidOptions();
-        options.forEach(option => {
+        this.navItems.forEach(option => {
             if (option !== selectedOption) {
                 option.removeAttribute('selected');
             }
@@ -309,7 +407,7 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
     /** @internal */
     formStateRestoreCallback(state) {
         var _a;
-        const optionToRestoreTo = this.getAllValidOptions().find(option => option.value === state || option.label === state);
+        const optionToRestoreTo = this.navItems.find(option => option.value === state || option.label === state);
         if (((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== (optionToRestoreTo === null || optionToRestoreTo === void 0 ? void 0 : optionToRestoreTo.value)) {
             this.setSelectedOption(optionToRestoreTo || null);
             // fire events to notify the change in case of restore
@@ -376,21 +474,13 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
                 break;
             case KEYS.HOME: {
                 this.displayPopover = true;
-                const firstOption = this.getFirstValidOption();
-                if (firstOption) {
-                    firstOption === null || firstOption === void 0 ? void 0 : firstOption.focus();
-                    this.updateTabIndexForAllOptions(firstOption);
-                }
+                this.resetTabIndexAndSetFocus(0);
                 event.preventDefault();
                 break;
             }
             case KEYS.END: {
                 this.displayPopover = true;
-                const lastOption = this.getLastValidOption();
-                if (lastOption) {
-                    lastOption.focus();
-                    this.updateTabIndexForAllOptions(lastOption);
-                }
+                this.resetTabIndexAndSetFocus(this.navItems.length - 1);
                 event.preventDefault();
                 break;
             }
@@ -398,73 +488,6 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
                 break;
         }
     }
-    /**
-     * Handles the keydown event on the select element when the popover is open.
-     * The options are as follows:
-     * - HOME: Sets focus and tabindex on the first option.
-     * - END: Sets focus and tabindex on the last option.
-     * - ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options.
-     * @param event - The keyboard event.
-     */
-    handlePopoverKeydown(event) {
-        let optionToFocus = null;
-        switch (event.key) {
-            case KEYS.HOME: {
-                optionToFocus = this.getFirstValidOption();
-                break;
-            }
-            case KEYS.END: {
-                optionToFocus = this.getLastValidOption();
-                break;
-            }
-            case KEYS.ARROW_DOWN: {
-                const options = this.getAllValidOptions();
-                const currentIndex = options.findIndex(option => option === event.target);
-                const newIndex = Math.min(currentIndex + 1, options.length - 1);
-                optionToFocus = options[newIndex];
-                break;
-            }
-            case KEYS.ARROW_UP: {
-                const options = this.getAllValidOptions();
-                const currentIndex = options.findIndex(option => option === event.target);
-                const newIndex = Math.max(currentIndex - 1, 0);
-                optionToFocus = options[newIndex];
-                break;
-            }
-            case KEYS.PAGE_DOWN: {
-                const options = this.getAllValidOptions();
-                const currentIndex = options.findIndex(option => option === event.target);
-                const newIndex = Math.min(currentIndex + 10, options.length - 1);
-                optionToFocus = options[newIndex];
-                break;
-            }
-            case KEYS.PAGE_UP: {
-                const options = this.getAllValidOptions();
-                const currentIndex = options.findIndex(option => option === event.target);
-                const newIndex = Math.max(currentIndex - 10, 0);
-                optionToFocus = options[newIndex];
-                break;
-            }
-            default:
-                break;
-        }
-        if (optionToFocus) {
-            this.focusAndUpdateTabIndexes(optionToFocus);
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    /**
-     * Focuses the given option and updates the tabindex for all options.
-     * @param option - The option to focus.
-     * @internal
-     */
-    focusAndUpdateTabIndexes(option) {
-        if (option) {
-            option.focus();
-            this.updateTabIndexForAllOptions(option);
-        }
-    }
     /**
      * If the native input is focused, it will focus the visual combobox.
      * This is to ensure that the visual combobox is focused when the native input is focused.
@@ -476,25 +499,6 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
     handleNativeInputFocus() {
         this.visualCombobox.focus();
     }
-    /**
-     * Updates the state of the select component.
-     * This public method should be fired when the selected on the option components is updated from the outside.
-     * It ensures that the selected attribute is set correctly on the options
-     * and that the aria-selected attribute is updated accordingly.
-     */
-    updateState() {
-        var _a;
-        const newSelectedOption = this.getFirstSelectedOption();
-        if (!this.inputElement) {
-            return;
-        }
-        if (!newSelectedOption) {
-            this.setSelectedOption(this.placeholder ? null : this.getFirstValidOption());
-        }
-        else if (((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== newSelectedOption.value) {
-            this.setSelectedOption(newSelectedOption);
-        }
-    }
     render() {
         var _a, _b, _c, _d, _e, _f;
         return html `
@@ -558,7 +562,6 @@ class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
         <mdc-popover
           trigger="manual"
           triggerid="${TRIGGER_ID}"
-          @keydown="${this.handlePopoverKeydown}"
           interactive
           ?visible="${this.displayPopover}"
           role=""
@@ -621,10 +624,6 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'backdrop-append-to' }),
     __metadata("design:type", String)
 ], Select.prototype, "backdropAppendTo", void 0);
-__decorate([
-    queryAssignedElements({ selector: 'mdc-selectlistbox' }),
-    __metadata("design:type", Array)
-], Select.prototype, "slottedListboxes", void 0);
 __decorate([
     query(`[id="${TRIGGER_ID}"]`),
     __metadata("design:type", HTMLDivElement)

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;