@momentum-design/components 0.105.2 → 0.105.4

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

@@ -3,7 +3,7 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { RoleType } from '../../utils/roles';
 import type { ButtonSize, ButtonType } from './buttonsimple.types';
-declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/AutoFocusMixin").AutoFocusMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
  * It is used as an internal component and is not intended to be used directly by consumers.

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -11,7 +11,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { KEYS } from '../../utils/keys';
-import { AutoFocusMixin } from '../../utils/mixins/AutoFocusMixin';
+import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
@@ -28,7 +28,7 @@ import styles from './buttonsimple.styles';
  *
  * @tagname mdc-buttonsimple
  */
-class Buttonsimple extends AutoFocusMixin(TabIndexMixin(DisabledMixin(Component))) {
+class Buttonsimple extends AutoFocusOnMountMixin(TabIndexMixin(DisabledMixin(Component))) {
     /** @internal */
     get form() {
         return this.internals.form;

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

@@ -1,7 +1,7 @@
-import { CSSResult, PropertyValues } from 'lit';
+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("../../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/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;
 /**
  * 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.
@@ -49,6 +49,7 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      */
     autofocus: boolean;
     connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Updates the form value to reflect the current state of the checkbox.
      * If checked, the value is set to either the user-provided value or 'on' if no value is provided.

package/dist/components/checkbox/checkbox.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 { KEYS } from '../../utils/keys';
+import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
@@ -41,7 +42,7 @@ import styles from './checkbox.styles';
  * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
  * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.
  */
-class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
+class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
         super(...arguments);
         /**
@@ -75,6 +76,15 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         // Checkbox does not contain helpTextType property.
         this.helpTextType = undefined;
     }
+    firstUpdated(_changedProperties) {
+        // set the element to auto focus if autoFocusOnMount is set to true
+        // before running the super method, so that the AutoFocusOnMountMixin can use it
+        // to focus the correct element
+        if (this.inputElement && this.autoFocusOnMount) {
+            this.elementToAutoFocus = this.inputElement;
+        }
+        super.firstUpdated(_changedProperties);
+    }
     /**
      * Updates the form value to reflect the current state of the checkbox.
      * If checked, the value is set to either the user-provided value or 'on' if no value is provided.
@@ -173,7 +183,6 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
           id="${this.inputId}"
           type="checkbox"
           class="input"
-          ?autofocus="${this.autofocus}"
           name="${ifDefined(this.name)}"
           value="${ifDefined(this.value)}"
           ?required="${this.required}"

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

@@ -1,9 +1,9 @@
-import { CSSResult, nothing } from 'lit';
+import { CSSResult, nothing, PropertyValueMap } from 'lit';
 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("../../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/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;
 /**
  * mdc-input is a component that allows users to input text.
  *  It contains:
@@ -89,11 +89,6 @@ declare class Input extends Input_base implements AssociatedFormControl {
      * @default 'off'
      */
     autocomplete: AutoCompleteType;
-    /**
-     * If true, the input field is focused when the component is rendered.
-     * @default false
-     */
-    autofocus: boolean;
     /**
      * Specifies the name of the directionality of text for submission purposes (e.g., "rtl" for right-to-left).
      */
@@ -120,6 +115,7 @@ declare class Input extends Input_base implements AssociatedFormControl {
      */
     clearAriaLabel: string;
     connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /** @internal */
     formResetCallback(): void;
     /** @internal */

package/dist/components/input/input.component.js

@@ -16,6 +16,7 @@ import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwra
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { KEYS } from '../../utils/keys';
+import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { AUTO_CAPITALIZE, AUTO_COMPLETE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
 import styles from './input.styles';
 /**
@@ -61,7 +62,7 @@ import styles from './input.styles';
  * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
  *
  */
-class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
+class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
         super(...arguments);
         /**
@@ -87,11 +88,6 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          * @default 'off'
          */
         this.autocomplete = AUTO_COMPLETE.OFF;
-        /**
-         * If true, the input field is focused when the component is rendered.
-         * @default false
-         */
-        this.autofocus = false;
         /**
          * Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.
          * @default ''
@@ -113,6 +109,15 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             }
         });
     }
+    firstUpdated(_changedProperties) {
+        // set the element to auto focus if autoFocusOnMount is set to true
+        // before running the super method, so that the AutoFocusOnMountMixin can use it
+        // to focus the correct element
+        if (this.inputElement && this.autoFocusOnMount) {
+            this.elementToAutoFocus = this.inputElement;
+        }
+        super.firstUpdated(_changedProperties);
+    }
     /** @internal */
     formResetCallback() {
         this.value = '';
@@ -298,7 +303,6 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
       maxlength=${ifDefined(this.maxlength)}
       autocapitalize=${this.autocapitalize}
       autocomplete=${this.autocomplete}
-      ?autofocus="${this.autofocus}"
       dirname=${ifDefined(this.dirname)}
       pattern=${ifDefined(this.pattern)}
       list=${ifDefined(this.list)}
@@ -360,10 +364,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], Input.prototype, "autocomplete", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], Input.prototype, "autofocus", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

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

@@ -1,7 +1,7 @@
-import { CSSResult, PropertyValues } from 'lit';
+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("../../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/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;
 /**
  * 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.
@@ -42,14 +42,8 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      * @default false
      */
     readonly: boolean;
-    /**
-     * Automatically focus on the element when the page loads.
-     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-     * @default false
-     */
-    autofocus: boolean;
     connectedCallback(): void;
-    firstUpdated(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Returns all radios within the same group (name).
      */

package/dist/components/radio/radio.component.js

@@ -17,6 +17,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ROLE } from '../../utils/roles';
 import { KEYS } from '../../utils/keys';
+import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import styles from './radio.styles';
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
@@ -45,7 +46,7 @@ import styles from './radio.styles';
  * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled
  *
  */
-class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
+class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
         super(...arguments);
         /**
@@ -60,12 +61,6 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          * @default false
          */
         this.readonly = false;
-        /**
-         * Automatically focus on the element when the page loads.
-         * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-         * @default false
-         */
-        this.autofocus = false;
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
@@ -77,8 +72,15 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         // Radio does not contain helpTextType property.
         this.helpTextType = undefined;
     }
-    firstUpdated() {
+    firstUpdated(_changedProperties) {
         this.updateTabIndex();
+        // set the element to auto focus if autoFocusOnMount is set to true
+        // before running the super method, so that the AutoFocusOnMountMixin can use it
+        // to focus the correct element
+        if (this.inputElement && this.autoFocusOnMount) {
+            this.elementToAutoFocus = this.inputElement;
+        }
+        super.firstUpdated(_changedProperties);
     }
     /**
      * Returns all radios within the same group (name).
@@ -307,8 +309,4 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Radio.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], Radio.prototype, "autofocus", void 0);
 export default Radio;

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

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import { CSSResult, PropertyValueMap } from 'lit';
 import Input from '../input/input.component';
 /**
  * `mdc-searchfield` component is used as an input field for search functionality.
@@ -45,7 +45,7 @@ declare class Searchfield extends Input {
      * Eventually, this logic has to be omitted and achieved using CSS instead.
      * @override
      */
-    firstUpdated(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     clearInputText(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/searchfield/searchfield.component.js

@@ -85,13 +85,14 @@ class Searchfield extends Input {
      * Eventually, this logic has to be omitted and achieved using CSS instead.
      * @override
      */
-    firstUpdated() {
+    firstUpdated(_changedProperties) {
         this.inputElement.onfocus = () => {
             this.isInputFocused = true;
         };
         this.inputElement.onblur = () => {
             this.isInputFocused = false;
         };
+        super.firstUpdated(_changedProperties);
     }
     clearInputText() {
         var _a;

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

@@ -1,10 +1,10 @@
-import type { PropertyValues } from 'lit';
+import type { PropertyValueMap, PropertyValues } from 'lit';
 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 { Placement } from './select.types';
-declare const Select_base: 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/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.
@@ -129,7 +129,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * If an option is selected, use that as the value.
      * If not, use the placeholder if it exists, otherwise use the first option.
      */
-    firstUpdated(): Promise<void>;
+    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

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

@@ -12,6 +12,7 @@ import { property, query, queryAssignedElements, state } from 'lit/decorators.js
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { KEYS } from '../../utils/keys';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
@@ -65,7 +66,7 @@ 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 FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
+class Select extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
         super(...arguments);
         /**
@@ -136,7 +137,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * If an option is selected, use that as the value.
      * If not, use the placeholder if it exists, otherwise use the first option.
      */
-    async firstUpdated() {
+    async firstUpdated(_changedProperties) {
         await this.updateComplete;
         this.modifyListBoxWrapper();
         const firstSelectedOption = this.getFirstSelectedOption();
@@ -158,6 +159,13 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             // then we call the native validity
             this.setInputValidity();
         }
+        // set the element to auto focus if autoFocusOnMount is set to true
+        // before running the super method, so that the AutoFocusOnMountMixin can use it
+        // to focus the correct element
+        if (this.inputElement && this.autoFocusOnMount) {
+            this.elementToAutoFocus = this.inputElement;
+        }
+        super.firstUpdated(_changedProperties);
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -538,7 +546,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           part="native-input"
           name="${this.name}"
           type="text"
-          ?autofocus="${this.autofocus}"
           ?disabled=${this.disabled}
           ?required=${this.required}
           ?readonly=${this.readonly}

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("../../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/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;
 /**
  * mdc-textarea component, which is used to get the multi-line text input from the user.
  * It contains:
@@ -87,11 +87,6 @@ declare class Textarea extends Textarea_base {
      * @default 'off'
      */
     autocomplete: AutoCompleteType;
-    /**
-     * If true, the textarea field is focused when the component is rendered.
-     * @default false
-     */
-    autofocus: boolean;
     /**
      * Specifies the name of the directionality of text for submission purposes (e.g., "rtl" for right-to-left).
      */
@@ -116,6 +111,7 @@ declare class Textarea extends Textarea_base {
     private characterLimitExceedingFired;
     protected get textarea(): HTMLTextAreaElement;
     connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private setTextareaValidity;
     /** @internal */
     formResetCallback(): void;

package/dist/components/textarea/textarea.component.js

@@ -15,6 +15,7 @@ import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/
 import { AUTO_CAPITALIZE } from '../input/input.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { AUTO_COMPLETE, WRAP, DEFAULTS } from './textarea.constants';
 import styles from './textarea.styles';
 /**
@@ -66,7 +67,7 @@ import styles from './textarea.styles';
  * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
  * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
  */
-class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
+class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
         super(...arguments);
         /**
@@ -99,11 +100,6 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
          * @default 'off'
          */
         this.autocomplete = AUTO_COMPLETE.OFF;
-        /**
-         * If true, the textarea field is focused when the component is rendered.
-         * @default false
-         */
-        this.autofocus = false;
         this.characterLimitExceedingFired = false;
     }
     get textarea() {
@@ -128,6 +124,15 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
             }
         });
     }
+    firstUpdated(_changedProperties) {
+        // set the element to auto focus if autoFocusOnMount is set to true
+        // before running the super method, so that the AutoFocusOnMountMixin can use it
+        // to focus the correct element
+        if (this.inputElement && this.autoFocusOnMount) {
+            this.elementToAutoFocus = this.inputElement;
+        }
+        super.firstUpdated(_changedProperties);
+    }
     setTextareaValidity() {
         if (this.required && this.validationMessage && this.value === '') {
             this.textarea.setCustomValidity(this.validationMessage);
@@ -290,7 +295,6 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
           rows=${ifDefined(this.rows)}
           cols=${ifDefined(this.cols)}
           wrap=${ifDefined(this.wrap)}
-          ?autofocus="${this.autofocus}"
           autocapitalize=${this.autocapitalize}
           autocomplete=${this.autocomplete}
           minlength=${ifDefined(this.minlength)}
@@ -335,10 +339,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], Textarea.prototype, "autocomplete", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], Textarea.prototype, "autofocus", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

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("../../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/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;
 /**
  * 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
@@ -51,13 +51,8 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
      * @default default
      */
     size: ToggleSize;
-    /**
-     * Automatically focus on the element when the page loads.
-     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-     * @default false
-     */
-    autofocus: boolean;
     connectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /** @internal
      * Resets the checkbox to its initial state.
      * The checked property is set to false.

package/dist/components/toggle/toggle.component.js

@@ -11,6 +11,7 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { KEYS } from '../../utils/keys';
+import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { ROLE } from '../../utils/roles';
@@ -53,7 +54,7 @@ import styles from './toggle.styles';
  * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state
  * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
  */
-class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
+class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
         super(...arguments);
         /**
@@ -68,18 +69,21 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          * @default default
          */
         this.size = DEFAULTS.SIZE;
-        /**
-         * Automatically focus on the element when the page loads.
-         * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-         * @default false
-         */
-        this.autofocus = false;
     }
     connectedCallback() {
         super.connectedCallback();
         // Toggle does not contain helpTextType property.
         this.helpTextType = undefined;
     }
+    firstUpdated(_changedProperties) {
+        // set the element to auto focus if autoFocusOnMount is set to true
+        // before running the super method, so that the AutoFocusOnMountMixin can use it
+        // to focus the correct element
+        if (this.inputElement && this.autoFocusOnMount) {
+            this.elementToAutoFocus = this.inputElement;
+        }
+        super.firstUpdated(_changedProperties);
+    }
     /** @internal
      * Resets the checkbox to its initial state.
      * The checked property is set to false.
@@ -192,7 +196,6 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           type="checkbox"
           part="toggle-input"
           role="${ROLE.CHECKBOX}"
-          ?autofocus="${this.autofocus}"
           ?required="${this.required}"
           name="${ifDefined(this.name)}"
           value="${ifDefined(this.value)}"
@@ -219,8 +222,4 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Toggle.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], Toggle.prototype, "autofocus", void 0);
 export default Toggle;

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

@@ -13,18 +13,11 @@ import { SetListDataProps, VirtualizerProps } from './virtualizedlist.types';
  *
  * @tagname mdc-virtualizedlist
  *
- * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
  *
  * @slot - Client side List with nested list items.
  */
 declare class VirtualizedList extends Component {
-    /**
-     * Callback that gets called when user scrolls inside of list. This gives access to the scroll container element
-     * as well via the event. Particularly useful for
-     * handling logic related when the user scrolls to the top or bottom of a list.
-     * @default undefined
-     */
-    onscroll: ((this: GlobalEventHandlers, ev: Event) => void) | null;
     /**
      * Object that sets and updates the virtualizer with any relevant props.
      * There are two required object props in order to get virtualization to work properly.
@@ -85,6 +78,10 @@ declare class VirtualizedList extends Component {
      * @returns The template result containing the list wrapper.
      */
     private getVirtualizedListWrapper;
+    /**
+     * Refires the scroll event from the internal scroll container to the host element
+     */
+    private handleScroll;
     render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/virtualizedlist/virtualizedlist.component.js

@@ -24,7 +24,7 @@ import { DEFAULTS } from './virtualizedlist.constants';
  *
  * @tagname mdc-virtualizedlist
  *
- * @event onscroll - (React: onScroll) Event that gets called when user scrolls inside of list.
+ * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.
  *
  * @slot - Client side List with nested list items.
  */
@@ -125,17 +125,20 @@ class VirtualizedList extends Component {
       <slot></slot>
     </div>`;
     }
+    /**
+     * Refires the scroll event from the internal scroll container to the host element
+     */
+    handleScroll(event) {
+        const EventConstructor = event.constructor;
+        this.dispatchEvent(new EventConstructor(event.type, event));
+    }
     render() {
-        return html `<div ${ref(this.scrollElementRef)} part="scroll" @scroll=${this.onscroll && this.onscroll}>
+        return html `<div ${ref(this.scrollElementRef)} part="scroll" @scroll=${this.handleScroll}>
       ${this.virtualizerController ? this.getVirtualizedListWrapper(this.virtualizerController) : html ``}
-    </div> `;
+    </div>`;
     }
 }
 VirtualizedList.styles = [...Component.styles, ...styles];
-__decorate([
-    property({ type: Function, attribute: 'onscroll' }),
-    __metadata("design:type", Object)
-], VirtualizedList.prototype, "onscroll", void 0);
 __decorate([
     property({ type: Object, attribute: 'virtualizerprops' }),
     __metadata("design:type", Object)

package/dist/components/virtualizedlist/virtualizedlist.helper.test.js

@@ -53,7 +53,7 @@ class VirtualizedWrapper extends Component {
         return html `
       <div style="height: 500px; width: 500px;">
         <mdc-virtualizedlist
-          .onscroll=${this.onscroll}
+          @scroll=${this.onscroll}
           .virtualizerProps=${this.virtualizerProps}
           .setlistdata=${this.setListData}
           >${this.list}</mdc-virtualizedlist