@momentum-design/components 0.117.0 → 0.117.2

package/dist/components/option/option.component.js

@@ -11,6 +11,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { ROLE } from '../../utils/roles';
 import ListItem from '../listitem/listitem.component';
 import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
 import { TYPE } from '../text/text.constants';
@@ -55,7 +56,7 @@ class Option extends FormInternalsMixin(ListItem) {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.role = 'option';
+        this.role = ROLE.OPTION;
         this.variant = LISTITEM_VARIANTS.INSET_RECTANGLE;
         this.setAttribute('aria-selected', `${this.selected}`);
         this.setAttribute('aria-disabled', `${!!this.disabled}`);
@@ -80,9 +81,7 @@ class Option extends FormInternalsMixin(ListItem) {
         `
             : nothing;
         const trailingContent = this.selected
-            ? html `
-            <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon>
-        `
+            ? html ` <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon> `
             : nothing;
         return html `
       ${prefixIconContent}
@@ -90,9 +89,7 @@ class Option extends FormInternalsMixin(ListItem) {
         ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
         ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
       </div>
-      <div part="trailing">
-        ${trailingContent}
-      </div>
+      <div part="trailing">${trailingContent}</div>
     `;
     }
 }

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

@@ -3,8 +3,9 @@ import { CSSResult } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 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/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/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;
 /**
  * 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.
@@ -12,6 +13,7 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * 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.
  *
@@ -60,7 +62,13 @@ declare class Select extends Select_base implements AssociatedFormControl {
      */
     readonly: boolean;
     /**
-     * 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'
      */
     placement: Placement;
     /**
@@ -96,7 +104,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @default absolute
      * @see [Floating UI - strategy](https://floating-ui.com/docs/computePosition#strategy)
      */
-    strategy: 'absolute' | 'fixed';
+    strategy: PopoverStrategy;
     /**
      * The z-index of the popover within Select.
      *
@@ -111,8 +119,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      */
     backdropAppendTo?: string;
     /** @internal */
-    slottedListboxes: Array<HTMLElement>;
-    /** @internal */
     private visualCombobox;
     /** @internal */
     selectedOption?: Option | null;
@@ -120,10 +126,35 @@ declare class Select extends Select_base implements AssociatedFormControl {
     displayPopover: boolean;
     /** @internal */
     private initialSelectedOption;
-    private getAllValidOptions;
-    private getFirstValidOption;
-    private getLastValidOption;
+    /** @internal */
+    private itemsStore;
+    constructor();
+    connectedCallback(): void;
+    /** @internal */
+    get navItems(): Option[];
+    /**
+     * 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: string, oldValue: string | null, newValue: string | null): void;
+    /** @internal */
+    private onStoreUpdate;
+    /** @internal */
+    private isValidItem;
+    /** @internal */
     private getFirstSelectedOption;
+    /** @internal */
+    private getFirstOption;
+    /**
+     * Update the selected option when an option is modified.
+     *
+     * @internal
+     */
+    private handleModifiedEvent;
     /**
      * Handles the first updated lifecycle event.
      * If an option is selected, use that as the value.
@@ -131,15 +162,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      */
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
     updated(changedProperties: PropertyValues): void;
-    /**
-     * 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.
-     */
-    private modifyListBoxWrapper;
     /**
      * A private method which is called when an option is clicked.
      * It sets the selected option, removes selected from other options, updates the tabindex for all options,
@@ -157,13 +179,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @param option - The option element in DOM which gets selected.
      */
     private setSelectedOption;
-    /**
-     * 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.
-     */
-    private updateTabIndexForAllOptions;
     /**
      * Sets selected attribute on the selected option and removes it from all options
      * @param selectedOption - The option which gets selected
@@ -212,21 +227,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @param event - The keyboard event.
      */
     private handleKeydownCombobox;
-    /**
-     * 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.
-     */
-    private handlePopoverKeydown;
-    /**
-     * Focuses the given option and updates the tabindex for all options.
-     * @param option - The option to focus.
-     * @internal
-     */
-    private focusAndUpdateTabIndexes;
     /**
      * 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.
@@ -236,13 +236,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @internal
      */
     private handleNativeInputFocus;
-    /**
-     * 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(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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/toast/index.d.ts

@@ -2,7 +2,6 @@ import Toast from './toast.component';
 import '../icon';
 import '../text';
 import '../button';
-import '../linkbutton';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-toast']: Toast;

package/dist/components/toast/index.js

@@ -3,6 +3,5 @@ import { TAG_NAME } from './toast.constants';
 import '../icon';
 import '../text';
 import '../button';
-import '../linkbutton';
 Toast.register(TAG_NAME);
 export default Toast;

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

@@ -14,7 +14,6 @@ declare const Toast_base: import("../../utils/mixins/index.types").Constructor<i
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button
- * @dependency mdc-linkbutton
  *
  * @slot content-prefix - Slot for custom content before the icon (only for custom variant).
  * @slot toast-body-normal - Slot for the main body content of the toast.
@@ -47,6 +46,8 @@ declare class Toast extends Toast_base {
     /**
      * Type of toast
      * - Can be `custom`, `success`, `warning` or `error`.
+     *
+     * Note: When using the `custom` variant, provide your own icon via the `content-prefix` slot; otherwise, no icon will be shown.
      * @default 'custom'
      */
     variant: ToastVariant;