@momentum-design/components 0.117.1 → 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/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/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

@@ -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 & 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.
@@ -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>;
 }