@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/tabs/internal/tabs.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues } from 'lit';
+import { Tab, TabVariant } from './tab.js';
+/**
+ * @fires change Fired when the selected tab changes. The target's selected or
+ * selectedItem and previousSelected or previousSelectedItem provide information
+ * about the selection change. The change event is fired when a user interaction
+ * like a space/enter key or click cause a selection change. The tab selection
+ * based on these actions can be cancelled by calling preventDefault on the
+ * triggering `keydown` or `click` event.
+ *
+ * @example
+ * // perform an action if a tab is clicked
+ * tabs.addEventListener('change', (event: Event) => {
+ *   if (event.target.selected === 2)
+ *      takeAction();
+ *   }
+ * });
+ *
+ * // prevent a click from triggering tab selection under some condition
+ * tabs.addEventListener('click', (event: Event) => {
+ *   if (notReady)
+ *      event.preventDefault();
+ *   }
+ * });
+ *
+ */
+export declare class Tabs extends LitElement {
+    /** @nocollapse */
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /**
+     * Styling variant to display, 'primary' (default) or 'secondary'.
+     */
+    variant: TabVariant;
+    /**
+     * Whether or not the item is `disabled`.
+     */
+    disabled: boolean;
+    /**
+     * Index of the selected item.
+     */
+    selected: number;
+    /**
+     * Whether or not to select an item when focused.
+     */
+    selectOnFocus: boolean;
+    private previousSelected;
+    private readonly scrollMargin;
+    private readonly items;
+    private itemsDirty;
+    private readonly selectedAttribute;
+    /**
+     * The item currently selected.
+     */
+    get selectedItem(): Tab;
+    /**
+     * The item previously selected.
+     */
+    get previousSelectedItem(): Tab;
+    /**
+     * The item currently focused.
+     */
+    protected get focusedItem(): Tab;
+    constructor();
+    connectedCallback(): void;
+    private readonly handleKeydown;
+    private readonly handleKeyup;
+    private readonly handleFocusout;
+    private findFocusableItem;
+    private wasEventPrevented;
+    private dispatchInteraction;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): Promise<void>;
+    private updateFocusableItem;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleItemClick;
+    private handleSlotChange;
+    private itemsUpdateComplete;
+    private scrollItemIntoView;
+}

package/tabs/internal/tabs.js

@@ -0,0 +1,307 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, isServer, LitElement } from 'lit';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
+// TODO(b/293506179): remove vertical logic
+const NAVIGATION_KEYS = new Map([
+    ['default', new Set(['Home', 'End'])],
+    ['horizontal', new Set(['ArrowLeft', 'ArrowRight'])],
+    ['vertical', new Set(['ArrowUp', 'ArrowDown'])]
+]);
+/**
+ * @fires change Fired when the selected tab changes. The target's selected or
+ * selectedItem and previousSelected or previousSelectedItem provide information
+ * about the selection change. The change event is fired when a user interaction
+ * like a space/enter key or click cause a selection change. The tab selection
+ * based on these actions can be cancelled by calling preventDefault on the
+ * triggering `keydown` or `click` event.
+ *
+ * @example
+ * // perform an action if a tab is clicked
+ * tabs.addEventListener('change', (event: Event) => {
+ *   if (event.target.selected === 2)
+ *      takeAction();
+ *   }
+ * });
+ *
+ * // prevent a click from triggering tab selection under some condition
+ * tabs.addEventListener('click', (event: Event) => {
+ *   if (notReady)
+ *      event.preventDefault();
+ *   }
+ * });
+ *
+ */
+export class Tabs extends LitElement {
+    /**
+     * The item currently selected.
+     */
+    get selectedItem() {
+        return this.items[this.selected];
+    }
+    /**
+     * The item previously selected.
+     */
+    get previousSelectedItem() {
+        return this.items[this.previousSelected];
+    }
+    /**
+     * The item currently focused.
+     */
+    get focusedItem() {
+        return this.items.find((el) => el.matches(':focus-within'));
+    }
+    constructor() {
+        super();
+        /**
+         * Styling variant to display, 'primary' (default) or 'secondary'.
+         */
+        this.variant = 'primary';
+        /**
+         * Whether or not the item is `disabled`.
+         */
+        this.disabled = false;
+        /**
+         * Index of the selected item.
+         */
+        this.selected = 0;
+        /**
+         * Whether or not to select an item when focused.
+         */
+        this.selectOnFocus = false;
+        this.previousSelected = -1;
+        this.scrollMargin = 48;
+        // this tracks if items have changed, which triggers rendering so they can
+        // be kept in sync
+        this.itemsDirty = false;
+        this.selectedAttribute = `selected`;
+        // focus item on keydown and optionally select it
+        this.handleKeydown = async (event) => {
+            const { key } = event;
+            const shouldHandleKey = NAVIGATION_KEYS.get('default').has(key) ||
+                NAVIGATION_KEYS.get('horizontal').has(key);
+            // await to after user may cancel event.
+            if (!shouldHandleKey || (await this.wasEventPrevented(event, true)) ||
+                this.disabled) {
+                return;
+            }
+            let indexToFocus = -1;
+            const focused = this.focusedItem ?? this.selectedItem;
+            const itemCount = this.items.length;
+            const isPrevKey = key === 'ArrowLeft' || key === 'ArrowUp';
+            if (key === 'Home') {
+                indexToFocus = 0;
+            }
+            else if (key === 'End') {
+                indexToFocus = itemCount - 1;
+            }
+            else {
+                const focusedIndex = this.items.indexOf(focused) || 0;
+                indexToFocus = focusedIndex + (isPrevKey ? -1 : 1);
+                indexToFocus =
+                    indexToFocus < 0 ? itemCount - 1 : indexToFocus % itemCount;
+            }
+            const itemToFocus = this.findFocusableItem(indexToFocus, key === 'End' || isPrevKey);
+            indexToFocus = this.items.indexOf(itemToFocus);
+            if (itemToFocus !== null && itemToFocus !== focused) {
+                this.updateFocusableItem(itemToFocus);
+                itemToFocus.focus();
+                if (this.selectOnFocus) {
+                    this.selected = indexToFocus;
+                    await this.dispatchInteraction();
+                }
+            }
+        };
+        // scroll to item on keyup.
+        this.handleKeyup = () => {
+            this.scrollItemIntoView(this.focusedItem ?? this.selectedItem);
+        };
+        // restore focus to selected item when blurring.
+        this.handleFocusout = async () => {
+            await this.updateComplete;
+            const nowFocused = this.getRootNode().activeElement;
+            if (this.items.indexOf(nowFocused) === -1) {
+                this.updateFocusableItem(this.selectedItem);
+            }
+        };
+        if (!isServer) {
+            this.addEventListener('keydown', this.handleKeydown);
+            this.addEventListener('keyup', this.handleKeyup);
+            this.addEventListener('focusout', this.handleFocusout);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'tablist');
+    }
+    findFocusableItem(i = -1, prev = false, tries = 0) {
+        const itemCount = this.items.length - 1;
+        while (this.items[i]?.disabled && tries <= itemCount) {
+            tries++;
+            i = (i + (prev ? -1 : 1));
+            if (i > itemCount) {
+                return this.findFocusableItem(0, false, tries);
+            }
+            else if (i < 0) {
+                return this.findFocusableItem(itemCount, true, tries);
+            }
+        }
+        return this.items[i] ?? null;
+    }
+    // Note, this is async to allow the event to bubble to user code, which
+    // may call `preventDefault`. If it does, avoid performing the tabs action
+    // which is selecting a new tab. Sometimes, the native event must be
+    // prevented to avoid, for example, scrolling. In this case, the event is
+    // patched to be able to detect if the user calls prevent default.
+    // Alternatively, the event could be stopped and re-dispatched synchroously,
+    // but this would be complicated since the event should be re-dispatched from
+    // the initial element to potentially trigger a native action (e.g. a history
+    // navigation via a tab label), and this could result in some listener hearing
+    // 2x events.
+    async wasEventPrevented(event, preventNativeDefault = false) {
+        if (preventNativeDefault) {
+            // prevent native default to stop, e.g. scrolling.
+            event.preventDefault();
+            // reset prevention to see if user is cancelling this action.
+            Object.defineProperties(event, {
+                'defaultPrevented': { value: false, writable: true, configurable: true },
+                'preventDefault': {
+                    // Type needed for closure conformance. Using the Event type results
+                    // in a type error.
+                    value() {
+                        this.defaultPrevented = true;
+                    },
+                    writable: true,
+                    configurable: true
+                }
+            });
+        }
+        // allow event to propagate to user code.
+        await new Promise(requestAnimationFrame);
+        return event.defaultPrevented;
+    }
+    async dispatchInteraction() {
+        // wait for items to render.
+        await new Promise(requestAnimationFrame);
+        const event = new Event('change', { bubbles: true });
+        this.dispatchEvent(event);
+    }
+    willUpdate(changed) {
+        if (changed.has('selected')) {
+            this.previousSelected = changed.get('selected') ?? -1;
+        }
+        if (this.itemsDirty) {
+            this.itemsDirty = false;
+            this.previousSelected = -1;
+        }
+    }
+    async updated(changed) {
+        const itemsOrVariantChanged = changed.has('itemsDirty') || changed.has('variant');
+        // sync state with items.
+        if (itemsOrVariantChanged || changed.has('disabled')) {
+            this.items.forEach((item, i) => {
+                item.selected = this.selected === i;
+                item.variant = this.variant;
+                item.disabled = this.disabled;
+            });
+        }
+        if (itemsOrVariantChanged || changed.has('selected')) {
+            if (this.previousSelectedItem !== this.selectedItem) {
+                this.previousSelectedItem?.removeAttribute(this.selectedAttribute);
+                this.selectedItem?.setAttribute(this.selectedAttribute, '');
+            }
+            if (this.selectedItem !== this.focusedItem) {
+                this.updateFocusableItem(this.selectedItem);
+            }
+            await this.scrollItemIntoView();
+        }
+    }
+    updateFocusableItem(focusableItem) {
+        for (const item of this.items) {
+            item.focusable = item === focusableItem;
+        }
+    }
+    render() {
+        return html `
+      <slot @slotchange=${this.handleSlotChange} @click=${this.handleItemClick}></slot>
+    `;
+    }
+    async handleItemClick(event) {
+        const { target } = event;
+        if (await this.wasEventPrevented(event)) {
+            return;
+        }
+        const item = target.closest(`${this.localName} > *`);
+        const i = this.items.indexOf(item);
+        if (i > -1 && this.selected !== i) {
+            this.selected = i;
+            this.updateFocusableItem(this.selectedItem);
+            // note, Safari will not focus the button here, but if focus is manually
+            // triggered, this can match focus-visible and show the focus-ring,
+            // so avoid the temptation to cal focus!
+            await this.dispatchInteraction();
+        }
+    }
+    handleSlotChange() {
+        this.itemsDirty = true;
+    }
+    async itemsUpdateComplete() {
+        for (const item of this.items) {
+            await item.updateComplete;
+        }
+        return true;
+    }
+    // ensures the given item is visible in view; defaults to the selected item
+    async scrollItemIntoView(item = this.selectedItem) {
+        if (!item) {
+            return;
+        }
+        // wait for items to render.
+        await this.itemsUpdateComplete();
+        // TODO(b/293506179): remove vertical logic
+        const isVertical = false;
+        const offset = isVertical ? item.offsetTop : item.offsetLeft;
+        const extent = isVertical ? item.offsetHeight : item.offsetWidth;
+        const scroll = isVertical ? this.scrollTop : this.scrollLeft;
+        const hostExtent = isVertical ? this.offsetHeight : this.offsetWidth;
+        const min = offset - this.scrollMargin;
+        const max = offset + extent - hostExtent + this.scrollMargin;
+        const to = Math.min(min, Math.max(max, scroll));
+        const behavior = 
+        // type annotation because `instant` is valid but not included in type.
+        this.focusedItem !== undefined ? 'smooth' : 'instant';
+        this.scrollTo({
+            behavior,
+            [isVertical ? 'left' : 'top']: 0,
+            [isVertical ? 'top' : 'left']: to
+        });
+    }
+}
+/** @nocollapse */
+Tabs.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true
+};
+__decorate([
+    property({ reflect: true })
+], Tabs.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tabs.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], Tabs.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'select-on-focus' })
+], Tabs.prototype, "selectOnFocus", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'md-tab', flatten: true })
+], Tabs.prototype, "items", void 0);
+__decorate([
+    state()
+], Tabs.prototype, "itemsDirty", void 0);
+//# sourceMappingURL=tabs.js.map

package/tabs/internal/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement, PropertyValues} from 'lit';\nimport {property, queryAssignedElements, state} from 'lit/decorators.js';\n\nimport {Tab, TabVariant} from './tab.js';\n\n// TODO(b/293506179): remove vertical logic\nconst NAVIGATION_KEYS = new Map([\n  ['default', new Set(['Home', 'End'])],\n  ['horizontal', new Set(['ArrowLeft', 'ArrowRight'])],\n  ['vertical', new Set(['ArrowUp', 'ArrowDown'])]\n]);\n\n/**\n * @fires change Fired when the selected tab changes. The target's selected or\n * selectedItem and previousSelected or previousSelectedItem provide information\n * about the selection change. The change event is fired when a user interaction\n * like a space/enter key or click cause a selection change. The tab selection\n * based on these actions can be cancelled by calling preventDefault on the\n * triggering `keydown` or `click` event.\n *\n * @example\n * // perform an action if a tab is clicked\n * tabs.addEventListener('change', (event: Event) => {\n *   if (event.target.selected === 2)\n *      takeAction();\n *   }\n * });\n *\n * // prevent a click from triggering tab selection under some condition\n * tabs.addEventListener('click', (event: Event) => {\n *   if (notReady)\n *      event.preventDefault();\n *   }\n * });\n *\n */\nexport class Tabs extends LitElement {\n  /** @nocollapse */\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  /**\n   * Styling variant to display, 'primary' (default) or 'secondary'.\n   */\n  @property({reflect: true}) variant: TabVariant = 'primary';\n\n  /**\n   * Whether or not the item is `disabled`.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Index of the selected item.\n   */\n  @property({type: Number}) selected = 0;\n\n  /**\n   * Whether or not to select an item when focused.\n   */\n  @property({type: Boolean, attribute: 'select-on-focus'})\n  selectOnFocus = false;\n\n  private previousSelected = -1;\n  private readonly scrollMargin = 48;\n\n  @queryAssignedElements({selector: 'md-tab', flatten: true})\n  private readonly items!: Tab[];\n\n  // this tracks if items have changed, which triggers rendering so they can\n  // be kept in sync\n  @state() private itemsDirty = false;\n\n  private readonly selectedAttribute = `selected`;\n\n  /**\n   * The item currently selected.\n   */\n  get selectedItem() {\n    return this.items[this.selected];\n  }\n\n  /**\n   * The item previously selected.\n   */\n  get previousSelectedItem() {\n    return this.items[this.previousSelected];\n  }\n\n  /**\n   * The item currently focused.\n   */\n  protected get focusedItem() {\n    return this.items.find((el: HTMLElement) => el.matches(':focus-within'));\n  }\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('keydown', this.handleKeydown);\n      this.addEventListener('keyup', this.handleKeyup);\n      this.addEventListener('focusout', this.handleFocusout);\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tablist');\n  }\n\n  // focus item on keydown and optionally select it\n  private readonly handleKeydown = async (event: KeyboardEvent) => {\n    const {key} = event;\n    const shouldHandleKey = NAVIGATION_KEYS.get('default')!.has(key) ||\n        NAVIGATION_KEYS.get('horizontal')!.has(key);\n    // await to after user may cancel event.\n    if (!shouldHandleKey || (await this.wasEventPrevented(event, true)) ||\n        this.disabled) {\n      return;\n    }\n    let indexToFocus = -1;\n    const focused = this.focusedItem ?? this.selectedItem;\n    const itemCount = this.items.length;\n    const isPrevKey = key === 'ArrowLeft' || key === 'ArrowUp';\n    if (key === 'Home') {\n      indexToFocus = 0;\n    } else if (key === 'End') {\n      indexToFocus = itemCount - 1;\n    } else {\n      const focusedIndex = this.items.indexOf(focused) || 0;\n      indexToFocus = focusedIndex + (isPrevKey ? -1 : 1);\n      indexToFocus =\n          indexToFocus < 0 ? itemCount - 1 : indexToFocus % itemCount;\n    }\n    const itemToFocus =\n        this.findFocusableItem(indexToFocus, key === 'End' || isPrevKey);\n    indexToFocus = this.items.indexOf(itemToFocus!);\n    if (itemToFocus !== null && itemToFocus !== focused) {\n      this.updateFocusableItem(itemToFocus);\n      itemToFocus.focus();\n      if (this.selectOnFocus) {\n        this.selected = indexToFocus;\n        await this.dispatchInteraction();\n      }\n    }\n  };\n\n  // scroll to item on keyup.\n  private readonly handleKeyup = () => {\n    this.scrollItemIntoView(this.focusedItem ?? this.selectedItem);\n  };\n\n  // restore focus to selected item when blurring.\n  private readonly handleFocusout = async () => {\n    await this.updateComplete;\n    const nowFocused =\n        (this.getRootNode() as unknown as DocumentOrShadowRoot).activeElement as\n        Tab;\n    if (this.items.indexOf(nowFocused) === -1) {\n      this.updateFocusableItem(this.selectedItem);\n    }\n  };\n\n  private findFocusableItem(i = -1, prev = false, tries = 0): Tab|null {\n    const itemCount = this.items.length - 1;\n    while (this.items[i]?.disabled && tries <= itemCount) {\n      tries++;\n      i = (i + (prev ? -1 : 1));\n      if (i > itemCount) {\n        return this.findFocusableItem(0, false, tries);\n      } else if (i < 0) {\n        return this.findFocusableItem(itemCount, true, tries);\n      }\n    }\n    return this.items[i] ?? null;\n  }\n\n  // Note, this is async to allow the event to bubble to user code, which\n  // may call `preventDefault`. If it does, avoid performing the tabs action\n  // which is selecting a new tab. Sometimes, the native event must be\n  // prevented to avoid, for example, scrolling. In this case, the event is\n  // patched to be able to detect if the user calls prevent default.\n  // Alternatively, the event could be stopped and re-dispatched synchroously,\n  // but this would be complicated since the event should be re-dispatched from\n  // the initial element to potentially trigger a native action (e.g. a history\n  // navigation via a tab label), and this could result in some listener hearing\n  // 2x events.\n  private async wasEventPrevented(event: Event, preventNativeDefault = false) {\n    if (preventNativeDefault) {\n      // prevent native default to stop, e.g. scrolling.\n      event.preventDefault();\n      // reset prevention to see if user is cancelling this action.\n      Object.defineProperties(event, {\n        'defaultPrevented': {value: false, writable: true, configurable: true},\n        'preventDefault': {\n          // Type needed for closure conformance. Using the Event type results\n          // in a type error.\n          value(this: {defaultPrevented: boolean}) {\n            this.defaultPrevented = true;\n          },\n          writable: true,\n          configurable: true\n        }\n      });\n    }\n    // allow event to propagate to user code.\n    await new Promise(requestAnimationFrame);\n    return event.defaultPrevented;\n  }\n\n  private async dispatchInteraction() {\n    // wait for items to render.\n    await new Promise(requestAnimationFrame);\n    const event = new Event('change', {bubbles: true});\n    this.dispatchEvent(event);\n  }\n\n  protected override willUpdate(changed: PropertyValues) {\n    if (changed.has('selected')) {\n      this.previousSelected = changed.get('selected') ?? -1;\n    }\n    if (this.itemsDirty) {\n      this.itemsDirty = false;\n      this.previousSelected = -1;\n    }\n  }\n\n  protected override async updated(changed: PropertyValues) {\n    const itemsOrVariantChanged =\n        changed.has('itemsDirty') || changed.has('variant');\n    // sync state with items.\n    if (itemsOrVariantChanged || changed.has('disabled')) {\n      this.items.forEach((item, i) => {\n        item.selected = this.selected === i;\n        item.variant = this.variant;\n        item.disabled = this.disabled;\n      });\n    }\n    if (itemsOrVariantChanged || changed.has('selected')) {\n      if (this.previousSelectedItem !== this.selectedItem) {\n        this.previousSelectedItem?.removeAttribute(this.selectedAttribute);\n        this.selectedItem?.setAttribute(this.selectedAttribute, '');\n      }\n      if (this.selectedItem !== this.focusedItem) {\n        this.updateFocusableItem(this.selectedItem);\n      }\n      await this.scrollItemIntoView();\n    }\n  }\n\n  private updateFocusableItem(focusableItem: HTMLElement|null) {\n    for (const item of this.items) {\n      item.focusable = item === focusableItem;\n    }\n  }\n\n  protected override render() {\n    return html`\n      <slot @slotchange=${this.handleSlotChange} @click=${\n        this.handleItemClick}></slot>\n    `;\n  }\n\n  private async handleItemClick(event: Event) {\n    const {target} = event;\n    if (await this.wasEventPrevented(event)) {\n      return;\n    }\n    const item = (target as Element).closest(`${this.localName} > *`) as Tab;\n    const i = this.items.indexOf(item);\n    if (i > -1 && this.selected !== i) {\n      this.selected = i;\n      this.updateFocusableItem(this.selectedItem);\n      // note, Safari will not focus the button here, but if focus is manually\n      // triggered, this can match focus-visible and show the focus-ring,\n      // so avoid the temptation to cal focus!\n      await this.dispatchInteraction();\n    }\n  }\n\n  private handleSlotChange() {\n    this.itemsDirty = true;\n  }\n\n  private async itemsUpdateComplete() {\n    for (const item of this.items) {\n      await item.updateComplete;\n    }\n    return true;\n  }\n\n  // ensures the given item is visible in view; defaults to the selected item\n  private async scrollItemIntoView(item = this.selectedItem) {\n    if (!item) {\n      return;\n    }\n    // wait for items to render.\n    await this.itemsUpdateComplete();\n    // TODO(b/293506179): remove vertical logic\n    const isVertical = false;\n    const offset = isVertical ? item.offsetTop : item.offsetLeft;\n    const extent = isVertical ? item.offsetHeight : item.offsetWidth;\n    const scroll = isVertical ? this.scrollTop : this.scrollLeft;\n    const hostExtent = isVertical ? this.offsetHeight : this.offsetWidth;\n    const min = offset - this.scrollMargin;\n    const max = offset + extent - hostExtent + this.scrollMargin;\n    const to = Math.min(min, Math.max(max, scroll));\n    const behavior =\n        // type annotation because `instant` is valid but not included in type.\n        this.focusedItem !== undefined ? 'smooth' : 'instant' as ScrollBehavior;\n    this.scrollTo({\n      behavior,\n      [isVertical ? 'left' : 'top']: 0,\n      [isVertical ? 'top' : 'left']: to\n    });\n  }\n}\n"]}

package/tabs/tab.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Tab } from './lib/tab.js';
-export { Variant } from './lib/tab.js';
+import { Tab } from './internal/tab.js';
+export { TabVariant } from './internal/tab.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-tab': MdTab;

package/tabs/tab.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Tab } from './lib/tab.js';
-import { styles } from './lib/tab-styles.css.js';
+import { Tab } from './internal/tab.js';
+import { styles } from './internal/tab-styles.css.js';
 // TODO(b/267336507): add docs
 /**
  * @summary Tab allow users to display a tab within a Tabs.

package/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAC;AACjC,OAAO,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAU/C,8BAA8B;AAC9B;;;GAGG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,GAAG;;AACZ,YAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAEjB;SAFY,KAAK","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Tab} from './lib/tab.js';\nimport {styles} from './lib/tab-styles.css.js';\n\nexport {Variant} from './lib/tab.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tab': MdTab;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tab allow users to display a tab within a Tabs.\n *\n */\n@customElement('md-tab')\nexport class MdTab extends Tab {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAC,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAC,MAAM,EAAC,MAAM,8BAA8B,CAAC;AAUpD,8BAA8B;AAC9B;;;GAGG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,GAAG;;AACZ,YAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAEjB;SAFY,KAAK","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Tab} from './internal/tab.js';\nimport {styles} from './internal/tab-styles.css.js';\n\nexport {TabVariant} from './internal/tab.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tab': MdTab;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tab allow users to display a tab within a Tabs.\n *\n */\n@customElement('md-tab')\nexport class MdTab extends Tab {\n  static override styles = [styles];\n}\n"]}

package/tabs/tabs.d.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import './tab.js';
-import { Tabs } from './lib/tabs.js';
-export { Variant, MdTab } from './tab.js';
+import { Tabs } from './internal/tabs.js';
+export { MdTab, TabVariant } from './tab.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-tabs': MdTabs;

package/tabs/tabs.js

@@ -6,8 +6,8 @@
 import { __decorate } from "tslib";
 import './tab.js';
 import { customElement } from 'lit/decorators.js';
-import { Tabs } from './lib/tabs.js';
-import { styles } from './lib/tabs-styles.css.js';
+import { Tabs } from './internal/tabs.js';
+import { styles } from './internal/tabs-styles.css.js';
 export { MdTab } from './tab.js';
 // TODO(b/267336507): add docs
 /**

package/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,UAAU,CAAC;AAElB,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAEhD,OAAO,EAAU,KAAK,EAAC,MAAM,UAAU,CAAC;AAQxC,8BAA8B;AAC9B;;;GAGG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './tab.js';\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Tabs} from './lib/tabs.js';\nimport {styles} from './lib/tabs-styles.css.js';\n\nexport {Variant, MdTab} from './tab.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tabs': MdTabs;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tabs displays a list of selectable tabs.\n *\n */\n@customElement('md-tabs')\nexport class MdTabs extends Tabs {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,UAAU,CAAC;AAElB,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAa,MAAM,UAAU,CAAC;AAQ3C,8BAA8B;AAC9B;;;GAGG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport './tab.js';\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Tabs} from './internal/tabs.js';\nimport {styles} from './internal/tabs-styles.css.js';\n\nexport {MdTab, TabVariant} from './tab.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tabs': MdTabs;\n  }\n}\n\n// TODO(b/267336507): add docs\n/**\n * @summary Tabs displays a list of selectable tabs.\n *\n */\n@customElement('md-tabs')\nexport class MdTabs extends Tabs {\n  static override styles = [styles];\n}\n"]}

package/textfield/_filled-text-field.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/filled-text-field' show theme;
+@forward './internal/filled-text-field' show theme;

package/textfield/_outlined-text-field.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/outlined-text-field' show theme;
+@forward './internal/outlined-text-field' show theme;

package/textfield/filled-text-field.d.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import '../field/filled-field.js';
-import { FilledTextField } from './lib/filled-text-field.js';
-export { TextFieldType } from './lib/text-field.js';
+import { FilledTextField } from './internal/filled-text-field.js';
+export { TextFieldType } from './internal/text-field.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-filled-text-field': MdFilledTextField;

package/textfield/filled-text-field.js

@@ -7,10 +7,10 @@ import { __decorate } from "tslib";
 import '../field/filled-field.js';
 import { customElement } from 'lit/decorators.js';
 import { literal } from 'lit/static-html.js';
-import { styles as filledForcedColorsStyles } from './lib/filled-forced-colors-styles.css.js';
-import { styles as filledStyles } from './lib/filled-styles.css.js';
-import { FilledTextField } from './lib/filled-text-field.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { styles as filledForcedColorsStyles } from './internal/filled-forced-colors-styles.css.js';
+import { styles as filledStyles } from './internal/filled-styles.css.js';
+import { FilledTextField } from './internal/filled-text-field.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * TODO(b/228525797): Add docs
  * @final

package/textfield/filled-text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,eAAe,EAAC,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAUlE;;;;GAIG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IAA/C;;QAIuB,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;;AAJiB,wBAAM,GAClB,CAAC,YAAY,EAAE,YAAY,EAAE,wBAAwB,CAAC,CAAC;AAFhD,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAK7B;SALY,iBAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledForcedColorsStyles} from './lib/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {FilledTextField} from './lib/filled-text-field.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\nexport {TextFieldType} from './lib/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n  static override styles =\n      [sharedStyles, filledStyles, filledForcedColorsStyles];\n\n  protected override readonly fieldTag = literal`md-filled-field`;\n}\n"]}
+{"version":3,"file":"filled-text-field.js","sourceRoot":"","sources":["filled-text-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,+CAA+C,CAAC;AACjG,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,eAAe,EAAC,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAUvE;;;;GAIG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,eAAe;IAA/C;;QAIuB,aAAQ,GAAG,OAAO,CAAA,iBAAiB,CAAC;IAClE,CAAC;;AAJiB,wBAAM,GAClB,CAAC,YAAY,EAAE,YAAY,EAAE,wBAAwB,CAAC,CAAC;AAFhD,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAK7B;SALY,iBAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../field/filled-field.js';\n\nimport {customElement} from 'lit/decorators.js';\nimport {literal} from 'lit/static-html.js';\n\nimport {styles as filledForcedColorsStyles} from './internal/filled-forced-colors-styles.css.js';\nimport {styles as filledStyles} from './internal/filled-styles.css.js';\nimport {FilledTextField} from './internal/filled-text-field.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {TextFieldType} from './internal/text-field.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-text-field': MdFilledTextField;\n  }\n}\n\n/**\n * TODO(b/228525797): Add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-text-field')\nexport class MdFilledTextField extends FilledTextField {\n  static override styles =\n      [sharedStyles, filledStyles, filledForcedColorsStyles];\n\n  protected override readonly fieldTag = literal`md-filled-field`;\n}\n"]}

package/textfield/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { TextField } from './lib/text-field.js';
+import { TextField } from './internal/text-field.js';
 /**
  * Test harness for text field elements.
  */
@@ -44,8 +44,8 @@ export declare class TextFieldHarness extends Harness<TextField> {
     reset(): Promise<void>;
     blur(): Promise<void>;
     protected simulatePointerFocus(input: HTMLElement): void;
-    protected simulateInput(element: HTMLInputElement, charactersToAppend: string, init?: InputEventInit): void;
-    protected simulateDeletion(element: HTMLInputElement, beginIndex?: number, endIndex?: number, init?: InputEventInit): void;
-    protected simulateChangeIfNeeded(element: HTMLInputElement): void;
-    protected getInteractiveElement(): Promise<HTMLInputElement>;
+    protected simulateInput(element: HTMLInputElement | HTMLTextAreaElement, charactersToAppend: string, init?: InputEventInit): void;
+    protected simulateDeletion(element: HTMLInputElement | HTMLTextAreaElement, beginIndex?: number, endIndex?: number, init?: InputEventInit): void;
+    protected simulateChangeIfNeeded(element: HTMLInputElement | HTMLTextAreaElement): void;
+    protected getInteractiveElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;
 }

package/textfield/harness.js

@@ -84,6 +84,8 @@ export class TextFieldHarness extends Harness {
         if (!init) {
             init = {
                 inputType: 'insertText',
+                composed: true,
+                bubbles: true,
                 isComposing: false,
                 data: charactersToAppend,
             };
@@ -97,6 +99,8 @@ export class TextFieldHarness extends Harness {
         if (!init) {
             init = {
                 inputType: 'deleteContentBackward',
+                composed: true,
+                bubbles: true,
                 isComposing: false,
                 data: deletedCharacters,
             };
@@ -112,7 +116,7 @@ export class TextFieldHarness extends Harness {
     }
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('input');
+        return this.element.renderRoot.querySelector('.input');
     }
 }
 //# sourceMappingURL=harness.js.map

package/textfield/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {TextField} from './lib/text-field.js';\n\n/**\n * Test harness for text field elements.\n */\nexport class TextFieldHarness extends Harness<TextField> {\n  /** Used to track whether or not a change event should be dispatched. */\n  private valueBeforeChange = '';\n\n  /**\n   * Simulates a user typing a value one character at a time. This will fire\n   * multiple input events.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.inputValue('value'); // input events\n   * await harness.blur(); // change event\n   *\n   * @param value The value to simulating typing.\n   */\n  async inputValue(value: string) {\n    for (const char of value) {\n      this.simulateKeypress(await this.getInteractiveElement(), char);\n      this.simulateInput(await this.getInteractiveElement(), char);\n    }\n  }\n\n  /**\n   * Simulates a user deleting part of a value with the backspace key.\n   * By default, the entire value is deleted. This will fire a single input\n   * event.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.deleteValue(); // input event\n   * await harness.blur(); // change event\n   *\n   * @param beginIndex The starting index of the value to delete.\n   * @param endIndex The ending index of the value to delete.\n   */\n  async deleteValue(beginIndex?: number, endIndex?: number) {\n    this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');\n    this.simulateDeletion(\n        await this.getInteractiveElement(), beginIndex, endIndex);\n  }\n\n  override async reset() {\n    this.element.reset();\n    this.valueBeforeChange = this.element.value;\n    await super.reset();\n  }\n\n  override async blur() {\n    await super.blur();\n    this.simulateChangeIfNeeded(await this.getInteractiveElement());\n  }\n\n  protected override simulatePointerFocus(input: HTMLElement) {\n    const textField = this.element;\n    if (textField.disabled) {\n      return;\n    }\n\n    this.valueBeforeChange = textField.value;\n    super.simulatePointerFocus(input);\n\n    const prevFocus = input.focus;\n    if (prevFocus === HTMLElement.prototype.focus) {\n      // Swap to a no-op if nobody is spying on this method so that we don't\n      // generate side-effects when we actually call focus().\n      input.focus = () => {};\n    }\n\n    // Call focus() as a side-effect since delegatesFocus won't be triggered\n    // with this simulation. Replace input.focus() with a no-op if needed to\n    // avoid actually calling focus.\n    textField.focus();\n    input.focus = prevFocus;\n  }\n\n  protected simulateInput(\n      element: HTMLInputElement, charactersToAppend: string,\n      init?: InputEventInit) {\n    element.value += charactersToAppend;\n    if (!init) {\n      init = {\n        inputType: 'insertText',\n        isComposing: false,\n        data: charactersToAppend,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateDeletion(\n      element: HTMLInputElement, beginIndex?: number, endIndex?: number,\n      init?: InputEventInit) {\n    const deletedCharacters = element.value.slice(beginIndex, endIndex);\n    element.value = element.value.substring(0, beginIndex ?? 0) +\n        element.value.substring(endIndex ?? element.value.length);\n    if (!init) {\n      init = {\n        inputType: 'deleteContentBackward',\n        isComposing: false,\n        data: deletedCharacters,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateChangeIfNeeded(element: HTMLInputElement) {\n    if (this.valueBeforeChange === element.value) {\n      return;\n    }\n\n    this.valueBeforeChange = element.value;\n    element.dispatchEvent(new Event('change'));\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('input')!;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {TextField} from './internal/text-field.js';\n\n/**\n * Test harness for text field elements.\n */\nexport class TextFieldHarness extends Harness<TextField> {\n  /** Used to track whether or not a change event should be dispatched. */\n  private valueBeforeChange = '';\n\n  /**\n   * Simulates a user typing a value one character at a time. This will fire\n   * multiple input events.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.inputValue('value'); // input events\n   * await harness.blur(); // change event\n   *\n   * @param value The value to simulating typing.\n   */\n  async inputValue(value: string) {\n    for (const char of value) {\n      this.simulateKeypress(await this.getInteractiveElement(), char);\n      this.simulateInput(await this.getInteractiveElement(), char);\n    }\n  }\n\n  /**\n   * Simulates a user deleting part of a value with the backspace key.\n   * By default, the entire value is deleted. This will fire a single input\n   * event.\n   *\n   * Use focus/blur to ensure change events are fired.\n   *\n   * @example\n   * await harness.focusWithKeyboard();\n   * await harness.deleteValue(); // input event\n   * await harness.blur(); // change event\n   *\n   * @param beginIndex The starting index of the value to delete.\n   * @param endIndex The ending index of the value to delete.\n   */\n  async deleteValue(beginIndex?: number, endIndex?: number) {\n    this.simulateKeypress(await this.getInteractiveElement(), 'Backspace');\n    this.simulateDeletion(\n        await this.getInteractiveElement(), beginIndex, endIndex);\n  }\n\n  override async reset() {\n    this.element.reset();\n    this.valueBeforeChange = this.element.value;\n    await super.reset();\n  }\n\n  override async blur() {\n    await super.blur();\n    this.simulateChangeIfNeeded(await this.getInteractiveElement());\n  }\n\n  protected override simulatePointerFocus(input: HTMLElement) {\n    const textField = this.element;\n    if (textField.disabled) {\n      return;\n    }\n\n    this.valueBeforeChange = textField.value;\n    super.simulatePointerFocus(input);\n\n    const prevFocus = input.focus;\n    if (prevFocus === HTMLElement.prototype.focus) {\n      // Swap to a no-op if nobody is spying on this method so that we don't\n      // generate side-effects when we actually call focus().\n      input.focus = () => {};\n    }\n\n    // Call focus() as a side-effect since delegatesFocus won't be triggered\n    // with this simulation. Replace input.focus() with a no-op if needed to\n    // avoid actually calling focus.\n    textField.focus();\n    input.focus = prevFocus;\n  }\n\n  protected simulateInput(\n      element: HTMLInputElement|HTMLTextAreaElement, charactersToAppend: string,\n      init?: InputEventInit) {\n    element.value += charactersToAppend;\n    if (!init) {\n      init = {\n        inputType: 'insertText',\n        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: charactersToAppend,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateDeletion(\n      element: HTMLInputElement|HTMLTextAreaElement, beginIndex?: number,\n      endIndex?: number, init?: InputEventInit) {\n    const deletedCharacters = element.value.slice(beginIndex, endIndex);\n    element.value = element.value.substring(0, beginIndex ?? 0) +\n        element.value.substring(endIndex ?? element.value.length);\n    if (!init) {\n      init = {\n        inputType: 'deleteContentBackward',\n        composed: true,\n        bubbles: true,\n        isComposing: false,\n        data: deletedCharacters,\n      };\n    }\n\n    element.dispatchEvent(new InputEvent('input', init));\n  }\n\n  protected simulateChangeIfNeeded(element: HTMLInputElement|\n                                   HTMLTextAreaElement) {\n    if (this.valueBeforeChange === element.value) {\n      return;\n    }\n\n    this.valueBeforeChange = element.value;\n    element.dispatchEvent(new Event('change'));\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.input') as HTMLInputElement |\n        HTMLTextAreaElement;\n  }\n}\n"]}