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

package/dialog/internal/dialog.js

@@ -0,0 +1,338 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../divider/divider.js';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { redispatchEvent } from '../../internal/controller/events.js';
+import { DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION } from './animations.js';
+/**
+ * A dialog component.
+ *
+ * @fires open Dispatched when the dialog is opening before any animations.
+ * @fires opened Dispatched when the dialog has opened after any animations.
+ * @fires close Dispatched when the dialog is closing before any animations.
+ * @fires closed Dispatched when the dialog has closed after any animations.
+ * @fires cancel Dispatched when the dialog has been canceled by clicking on the
+ *     scrim or pressing Escape.
+ */
+export class Dialog extends LitElement {
+    /**
+     * Opens the dialog when set to `true` and closes it when set to `false`.
+     */
+    get open() {
+        return this.isOpen;
+    }
+    set open(open) {
+        if (open === this.isOpen) {
+            return;
+        }
+        this.isOpen = open;
+        if (open) {
+            this.setAttribute('open', '');
+            this.show();
+        }
+        else {
+            this.removeAttribute('open');
+            this.close();
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * Gets or sets the dialog's return value, usually to indicate which button
+         * a user pressed to close it.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
+         */
+        this.returnValue = '';
+        /**
+         * Gets the opening animation for a dialog. Set to a new function to customize
+         * the animation.
+         */
+        this.getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;
+        /**
+         * Gets the closing animation for a dialog. Set to a new function to customize
+         * the animation.
+         */
+        this.getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;
+        this.isOpen = false;
+        this.isAtScrollTop = false;
+        this.isAtScrollBottom = false;
+        this.nextClickIsFromContent = false;
+        // Dialogs should not be SSR'd while open, so we can just use runtime checks.
+        this.hasHeadline = false;
+        this.hasActions = false;
+        this.hasIcon = false;
+        if (!isServer) {
+            this.addEventListener('submit', this.handleSubmit);
+        }
+    }
+    /**
+     * Opens the dialog and fires a cancelable `open` event. After a dialog's
+     * animation, an `opened` event is fired.
+     *
+     * Add an `autocomplete` attribute to a child of the dialog that should
+     * receive focus after opening.
+     *
+     * @return A Promise that resolves after the animation is finished and the
+     *     `opened` event was fired.
+     */
+    async show() {
+        const { dialog, container } = this;
+        if (!dialog || !container || dialog.open) {
+            return;
+        }
+        const preventOpen = !this.dispatchEvent(new Event('open', { cancelable: true }));
+        if (preventOpen) {
+            this.open = false;
+            return;
+        }
+        // All Material dialogs are modal.
+        dialog.showModal();
+        this.open = true;
+        // Reset scroll position if re-opening a dialog with the same content.
+        if (this.scroller) {
+            this.scroller.scrollTop = 0;
+        }
+        // Native modal dialogs ignore autofocus and instead force focus to the
+        // first focusable child. Override this behavior if there is a child with
+        // an autofocus attribute.
+        this.querySelector('[autofocus]')?.focus();
+        await this.animateDialog(this.getOpenAnimation());
+        this.dispatchEvent(new Event('opened'));
+    }
+    /**
+     * Closes the dialog and fires a cancelable `close` event. After a dialog's
+     * animation, a `closed` event is fired.
+     *
+     * @param returnValue A return value usually indicating which button was used
+     *     to close a dialog. If a dialog is canceled by clicking the scrim or
+     *     pressing Escape, it will not change the return value after closing.
+     * @return A Promise that resolves after the animation is finished and the
+     *     `closed` event was fired.
+     */
+    async close(returnValue = this.returnValue) {
+        const { dialog, container } = this;
+        if (!dialog || !container || !dialog.open) {
+            return;
+        }
+        const prevReturnValue = this.returnValue;
+        this.returnValue = returnValue;
+        const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));
+        if (preventClose) {
+            this.returnValue = prevReturnValue;
+            return;
+        }
+        await this.animateDialog(this.getCloseAnimation());
+        dialog.close(returnValue);
+        this.open = false;
+        this.dispatchEvent(new Event('closed'));
+    }
+    render() {
+        const scrollable = this.open && !(this.isAtScrollTop && this.isAtScrollBottom);
+        const classes = {
+            'has-headline': this.hasHeadline,
+            'has-actions': this.hasActions,
+            'has-icon': this.hasIcon,
+            'scrollable': scrollable,
+            'show-top-divider': scrollable && !this.isAtScrollTop,
+            'show-bottom-divider': scrollable && !this.isAtScrollBottom,
+        };
+        const { ariaLabel } = this;
+        return html `
+      <div class="scrim"></div>
+      <dialog
+        class=${classMap(classes)}
+        aria-label=${ariaLabel || nothing}
+        aria-labelledby=${this.hasHeadline ? 'headline' : nothing}
+        role=${this.type === 'alert' ? 'alertdialog' : nothing}
+        @cancel=${this.handleCancel}
+        @click=${this.handleDialogClick}
+        .returnValue=${this.returnValue || nothing}
+      >
+        <div class="container"
+          @click=${this.handleContentClick}
+        >
+          <div class="headline">
+            <div class="icon" aria-hidden="true">
+              <slot name="icon" @slotchange=${this.handleIconChange}></slot>
+            </div>
+            <h2 id="headline" aria-hidden=${!this.hasHeadline || nothing}>
+              <slot name="headline"
+                  @slotchange=${this.handleHeadlineChange}></slot>
+            </h2>
+            <md-divider></md-divider>
+          </div>
+          <div class="scroller">
+            <div class="content">
+              <div class="top anchor"></div>
+              <slot name="content"></slot>
+              <div class="bottom anchor"></div>
+            </div>
+          </div>
+          <div class="actions">
+            <md-divider></md-divider>
+            <slot name="actions"
+              @slotchange=${this.handleActionsChange}></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
+    }
+    firstUpdated() {
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                this.handleAnchorIntersection(entry);
+            }
+        }, { root: this.scroller });
+        this.intersectionObserver.observe(this.topAnchor);
+        this.intersectionObserver.observe(this.bottomAnchor);
+    }
+    handleDialogClick() {
+        if (this.nextClickIsFromContent) {
+            // Avoid doing a layout calculation below if we know the click came from
+            // content.
+            this.nextClickIsFromContent = false;
+            return;
+        }
+        // Click originated on the backdrop. Native `<dialog>`s will not cancel,
+        // but Material dialogs do.
+        const preventDefault = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
+        if (preventDefault) {
+            return;
+        }
+        this.close();
+    }
+    handleContentClick() {
+        this.nextClickIsFromContent = true;
+    }
+    handleSubmit(event) {
+        const form = event.target;
+        const { submitter } = event;
+        if (form.method !== 'dialog' || !submitter) {
+            return;
+        }
+        // Close reason is the submitter's value attribute, or the dialog's
+        // `returnValue` if there is no attribute.
+        this.close(submitter.getAttribute('value') ?? this.returnValue);
+    }
+    handleCancel(event) {
+        if (event.target !== this.dialog) {
+            // Ignore any cancel events dispatched by content.
+            return;
+        }
+        const preventDefault = !redispatchEvent(this, event);
+        // We always prevent default on the original dialog event since we'll
+        // animate closing it before it actually closes.
+        event.preventDefault();
+        if (preventDefault) {
+            return;
+        }
+        this.close();
+    }
+    async animateDialog(animation) {
+        const { dialog, scrim, container, headline, content, actions } = this;
+        if (!dialog || !scrim || !container || !headline || !content || !actions) {
+            return;
+        }
+        const { container: containerAnimate, dialog: dialogAnimate, scrim: scrimAnimate, headline: headlineAnimate, content: contentAnimate, actions: actionsAnimate } = animation;
+        const elementAndAnimation = [
+            [dialog, dialogAnimate ?? []], [scrim, scrimAnimate ?? []],
+            [container, containerAnimate ?? []], [headline, headlineAnimate ?? []],
+            [content, contentAnimate ?? []], [actions, actionsAnimate ?? []]
+        ];
+        const animations = [];
+        for (const [element, animation] of elementAndAnimation) {
+            for (const animateArgs of animation) {
+                animations.push(element.animate(...animateArgs));
+            }
+        }
+        await Promise.all(animations.map(animation => animation.finished));
+    }
+    handleHeadlineChange(event) {
+        const slot = event.target;
+        this.hasHeadline = slot.assignedElements().length > 0;
+    }
+    handleActionsChange(event) {
+        const slot = event.target;
+        this.hasActions = slot.assignedElements().length > 0;
+    }
+    handleIconChange(event) {
+        const slot = event.target;
+        this.hasIcon = slot.assignedElements().length > 0;
+    }
+    handleAnchorIntersection(entry) {
+        const { target, isIntersecting } = entry;
+        if (target === this.topAnchor) {
+            this.isAtScrollTop = isIntersecting;
+        }
+        if (target === this.bottomAnchor) {
+            this.isAtScrollBottom = isIntersecting;
+        }
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(Dialog);
+})();
+Dialog.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true
+};
+__decorate([
+    property({ type: Boolean })
+], Dialog.prototype, "open", null);
+__decorate([
+    property({ attribute: false })
+], Dialog.prototype, "returnValue", void 0);
+__decorate([
+    property()
+], Dialog.prototype, "type", void 0);
+__decorate([
+    query('dialog')
+], Dialog.prototype, "dialog", void 0);
+__decorate([
+    query('.scrim')
+], Dialog.prototype, "scrim", void 0);
+__decorate([
+    query('.container')
+], Dialog.prototype, "container", void 0);
+__decorate([
+    query('.headline')
+], Dialog.prototype, "headline", void 0);
+__decorate([
+    query('.content')
+], Dialog.prototype, "content", void 0);
+__decorate([
+    query('.actions')
+], Dialog.prototype, "actions", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "isAtScrollTop", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "isAtScrollBottom", void 0);
+__decorate([
+    query('.scroller')
+], Dialog.prototype, "scroller", void 0);
+__decorate([
+    query('.top.anchor')
+], Dialog.prototype, "topAnchor", void 0);
+__decorate([
+    query('.bottom.anchor')
+], Dialog.prototype, "bottomAnchor", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasHeadline", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasActions", void 0);
+__decorate([
+    state()
+], Dialog.prototype, "hasIcon", void 0);
+//# sourceMappingURL=dialog.js.map

package/dialog/internal/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.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 '../../divider/divider.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\n\nimport {DIALOG_DEFAULT_CLOSE_ANIMATION, DIALOG_DEFAULT_OPEN_ANIMATION, DialogAnimation, DialogAnimationArgs} from './animations.js';\n\n/**\n * A dialog component.\n *\n * @fires open Dispatched when the dialog is opening before any animations.\n * @fires opened Dispatched when the dialog has opened after any animations.\n * @fires close Dispatched when the dialog is closing before any animations.\n * @fires closed Dispatched when the dialog has closed after any animations.\n * @fires cancel Dispatched when the dialog has been canceled by clicking on the\n *     scrim or pressing Escape.\n */\nexport class Dialog extends LitElement {\n  static {\n    requestUpdateOnAriaChange(Dialog);\n  }\n\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  /**\n   * Opens the dialog when set to `true` and closes it when set to `false`.\n   */\n  @property({type: Boolean})\n  get open() {\n    return this.isOpen;\n  }\n\n  set open(open: boolean) {\n    if (open === this.isOpen) {\n      return;\n    }\n\n    this.isOpen = open;\n    if (open) {\n      this.setAttribute('open', '');\n      this.show();\n    } else {\n      this.removeAttribute('open');\n      this.close();\n    }\n  }\n\n  /**\n   * Gets or sets the dialog's return value, usually to indicate which button\n   * a user pressed to close it.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue\n   */\n  @property({attribute: false}) returnValue = '';\n\n  /**\n   * The type of dialog for accessibility. Set this to `alert` to announce a\n   * dialog as an alert dialog.\n   */\n  @property() type?: 'alert';\n\n  /**\n   * Gets the opening animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION;\n\n  /**\n   * Gets the closing animation for a dialog. Set to a new function to customize\n   * the animation.\n   */\n  getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION;\n\n  private isOpen = false;\n  @query('dialog') private readonly dialog!: HTMLDialogElement|null;\n  @query('.scrim') private readonly scrim!: HTMLDialogElement|null;\n  @query('.container') private readonly container!: HTMLDialogElement|null;\n  @query('.headline') private readonly headline!: HTMLDialogElement|null;\n  @query('.content') private readonly content!: HTMLDialogElement|null;\n  @query('.actions') private readonly actions!: HTMLDialogElement|null;\n  @state() private isAtScrollTop = false;\n  @state() private isAtScrollBottom = false;\n  @query('.scroller') private readonly scroller!: HTMLElement|null;\n  @query('.top.anchor') private readonly topAnchor!: HTMLElement|null;\n  @query('.bottom.anchor') private readonly bottomAnchor!: HTMLElement|null;\n  private nextClickIsFromContent = false;\n  private intersectionObserver?: IntersectionObserver;\n  // Dialogs should not be SSR'd while open, so we can just use runtime checks.\n  @state() private hasHeadline = false;\n  @state() private hasActions = false;\n  @state() private hasIcon = false;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('submit', this.handleSubmit);\n    }\n  }\n\n  /**\n   * Opens the dialog and fires a cancelable `open` event. After a dialog's\n   * animation, an `opened` event is fired.\n   *\n   * Add an `autocomplete` attribute to a child of the dialog that should\n   * receive focus after opening.\n   *\n   * @return A Promise that resolves after the animation is finished and the\n   *     `opened` event was fired.\n   */\n  async show() {\n    const {dialog, container} = this;\n    if (!dialog || !container || dialog.open) {\n      return;\n    }\n\n    const preventOpen =\n        !this.dispatchEvent(new Event('open', {cancelable: true}));\n    if (preventOpen) {\n      this.open = false;\n      return;\n    }\n\n    // All Material dialogs are modal.\n    dialog.showModal();\n    this.open = true;\n    // Reset scroll position if re-opening a dialog with the same content.\n    if (this.scroller) {\n      this.scroller.scrollTop = 0;\n    }\n    // Native modal dialogs ignore autofocus and instead force focus to the\n    // first focusable child. Override this behavior if there is a child with\n    // an autofocus attribute.\n    this.querySelector<HTMLElement>('[autofocus]')?.focus();\n\n    await this.animateDialog(this.getOpenAnimation());\n    this.dispatchEvent(new Event('opened'));\n  }\n\n  /**\n   * Closes the dialog and fires a cancelable `close` event. After a dialog's\n   * animation, a `closed` event is fired.\n   *\n   * @param returnValue A return value usually indicating which button was used\n   *     to close a dialog. If a dialog is canceled by clicking the scrim or\n   *     pressing Escape, it will not change the return value after closing.\n   * @return A Promise that resolves after the animation is finished and the\n   *     `closed` event was fired.\n   */\n  async close(returnValue = this.returnValue) {\n    const {dialog, container} = this;\n    if (!dialog || !container || !dialog.open) {\n      return;\n    }\n\n    const prevReturnValue = this.returnValue;\n    this.returnValue = returnValue;\n    const preventClose =\n        !this.dispatchEvent(new Event('close', {cancelable: true}));\n    if (preventClose) {\n      this.returnValue = prevReturnValue;\n      return;\n    }\n\n    await this.animateDialog(this.getCloseAnimation());\n    dialog.close(returnValue);\n    this.open = false;\n    this.dispatchEvent(new Event('closed'));\n  }\n\n  protected override render() {\n    const scrollable =\n        this.open && !(this.isAtScrollTop && this.isAtScrollBottom);\n    const classes = {\n      'has-headline': this.hasHeadline,\n      'has-actions': this.hasActions,\n      'has-icon': this.hasIcon,\n      'scrollable': scrollable,\n      'show-top-divider': scrollable && !this.isAtScrollTop,\n      'show-bottom-divider': scrollable && !this.isAtScrollBottom,\n    };\n\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div class=\"scrim\"></div>\n      <dialog\n        class=${classMap(classes)}\n        aria-label=${ariaLabel || nothing}\n        aria-labelledby=${this.hasHeadline ? 'headline' : nothing}\n        role=${this.type === 'alert' ? 'alertdialog' : nothing}\n        @cancel=${this.handleCancel}\n        @click=${this.handleDialogClick}\n        .returnValue=${this.returnValue || nothing}\n      >\n        <div class=\"container\"\n          @click=${this.handleContentClick}\n        >\n          <div class=\"headline\">\n            <div class=\"icon\" aria-hidden=\"true\">\n              <slot name=\"icon\" @slotchange=${this.handleIconChange}></slot>\n            </div>\n            <h2 id=\"headline\" aria-hidden=${!this.hasHeadline || nothing}>\n              <slot name=\"headline\"\n                  @slotchange=${this.handleHeadlineChange}></slot>\n            </h2>\n            <md-divider></md-divider>\n          </div>\n          <div class=\"scroller\">\n            <div class=\"content\">\n              <div class=\"top anchor\"></div>\n              <slot name=\"content\"></slot>\n              <div class=\"bottom anchor\"></div>\n            </div>\n          </div>\n          <div class=\"actions\">\n            <md-divider></md-divider>\n            <slot name=\"actions\"\n              @slotchange=${this.handleActionsChange}></slot>\n          </div>\n        </div>\n      </dialog>\n    `;\n  }\n\n  protected override firstUpdated() {\n    this.intersectionObserver = new IntersectionObserver(entries => {\n      for (const entry of entries) {\n        this.handleAnchorIntersection(entry);\n      }\n    }, {root: this.scroller!});\n\n    this.intersectionObserver.observe(this.topAnchor!);\n    this.intersectionObserver.observe(this.bottomAnchor!);\n  }\n\n  private handleDialogClick() {\n    if (this.nextClickIsFromContent) {\n      // Avoid doing a layout calculation below if we know the click came from\n      // content.\n      this.nextClickIsFromContent = false;\n      return;\n    }\n\n    // Click originated on the backdrop. Native `<dialog>`s will not cancel,\n    // but Material dialogs do.\n    const preventDefault =\n        !this.dispatchEvent(new Event('cancel', {cancelable: true}));\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private handleContentClick() {\n    this.nextClickIsFromContent = true;\n  }\n\n  private handleSubmit(event: SubmitEvent) {\n    const form = event.target as HTMLFormElement;\n    const {submitter} = event;\n    if (form.method !== 'dialog' || !submitter) {\n      return;\n    }\n\n    // Close reason is the submitter's value attribute, or the dialog's\n    // `returnValue` if there is no attribute.\n    this.close(submitter.getAttribute('value') ?? this.returnValue);\n  }\n\n  private handleCancel(event: Event) {\n    if (event.target !== this.dialog) {\n      // Ignore any cancel events dispatched by content.\n      return;\n    }\n\n    const preventDefault = !redispatchEvent(this, event);\n    // We always prevent default on the original dialog event since we'll\n    // animate closing it before it actually closes.\n    event.preventDefault();\n    if (preventDefault) {\n      return;\n    }\n\n    this.close();\n  }\n\n  private async animateDialog(animation: DialogAnimation) {\n    const {dialog, scrim, container, headline, content, actions} = this;\n    if (!dialog || !scrim || !container || !headline || !content || !actions) {\n      return;\n    }\n\n    const {\n      container: containerAnimate,\n      dialog: dialogAnimate,\n      scrim: scrimAnimate,\n      headline: headlineAnimate,\n      content: contentAnimate,\n      actions: actionsAnimate\n    } = animation;\n\n    const elementAndAnimation: Array<[Element, DialogAnimationArgs[]]> = [\n      [dialog, dialogAnimate ?? []], [scrim, scrimAnimate ?? []],\n      [container, containerAnimate ?? []], [headline, headlineAnimate ?? []],\n      [content, contentAnimate ?? []], [actions, actionsAnimate ?? []]\n    ];\n\n    const animations: Animation[] = [];\n    for (const [element, animation] of elementAndAnimation) {\n      for (const animateArgs of animation) {\n        animations.push(element.animate(...animateArgs));\n      }\n    }\n\n    await Promise.all(animations.map(animation => animation.finished));\n  }\n\n  private handleHeadlineChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasHeadline = slot.assignedElements().length > 0;\n  }\n\n  private handleActionsChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasActions = slot.assignedElements().length > 0;\n  }\n\n  private handleIconChange(event: Event) {\n    const slot = event.target as HTMLSlotElement;\n    this.hasIcon = slot.assignedElements().length > 0;\n  }\n\n  private handleAnchorIntersection(entry: IntersectionObserverEntry) {\n    const {target, isIntersecting} = entry;\n    if (target === this.topAnchor) {\n      this.isAtScrollTop = isIntersecting;\n    }\n\n    if (target === this.bottomAnchor) {\n      this.isAtScrollBottom = isIntersecting;\n    }\n  }\n}\n"]}

package/divider/_divider.scss

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

package/divider/divider.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Divider } from './lib/divider.js';
+import { Divider } from './internal/divider.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-divider': MdDivider;

package/divider/divider.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Divider } from './lib/divider.js';
-import { styles } from './lib/divider-styles.css.js';
+import { Divider } from './internal/divider.js';
+import { styles } from './internal/divider-styles.css.js';
 /**
  * @summary A divider is a thin line that groups content in lists and
  * containers.

package/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAQnD;;;;;;;;;GASG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,OAAO;;AACpB,gBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAErB;SAFY,SAAS","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 {Divider} from './lib/divider.js';\nimport {styles} from './lib/divider-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-divider': MdDivider;\n  }\n}\n\n/**\n * @summary A divider is a thin line that groups content in lists and\n * containers.\n *\n * @description Dividers can reinforce tapability, such as when used to separate\n * list items or define tappable regions in an accordion.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-divider')\nexport class MdDivider extends Divider {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAQxD;;;;;;;;;GASG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,OAAO;;AACpB,gBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAErB;SAFY,SAAS","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 {Divider} from './internal/divider.js';\nimport {styles} from './internal/divider-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-divider': MdDivider;\n  }\n}\n\n/**\n * @summary A divider is a thin line that groups content in lists and\n * containers.\n *\n * @description Dividers can reinforce tapability, such as when used to separate\n * list items or define tappable regions in an accordion.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-divider')\nexport class MdDivider extends Divider {\n  static override styles = [styles];\n}\n"]}

package/elevation/_elevation.scss

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

package/elevation/elevation.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Elevation } from './lib/elevation.js';
+import { Elevation } from './internal/elevation.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-elevation': MdElevation;

package/elevation/elevation.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Elevation } from './lib/elevation.js';
-import { styles } from './lib/elevation-styles.css.js';
+import { Elevation } from './internal/elevation.js';
+import { styles } from './internal/elevation-styles.css.js';
 /**
  * The `<md-elevation>` custom element with default styles.
  *

package/elevation/elevation.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.js","sourceRoot":"","sources":["elevation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAQrD;;;;GAIG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAEvB;SAFY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Elevation} from './lib/elevation.js';\nimport {styles} from './lib/elevation-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevation': MdElevation;\n  }\n}\n\n/**\n * The `<md-elevation>` custom element with default styles.\n *\n * Elevation is the relative distance between two surfaces along the z-axis.\n */\n@customElement('md-elevation')\nexport class MdElevation extends Elevation {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"elevation.js","sourceRoot":"","sources":["elevation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AAQ1D;;;;GAIG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAEvB;SAFY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Elevation} from './internal/elevation.js';\nimport {styles} from './internal/elevation-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevation': MdElevation;\n  }\n}\n\n/**\n * The `<md-elevation>` custom element with default styles.\n *\n * Elevation is the relative distance between two surfaces along the z-axis.\n */\n@customElement('md-elevation')\nexport class MdElevation extends Elevation {\n  static override styles = [styles];\n}\n"]}

package/fab/_fab.scss

@@ -3,5 +3,5 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/fab-branded' as branded-* show branded-theme;
-@forward './lib/fab' show theme;
+@forward './internal/fab-branded' as branded-* show branded-theme;
+@forward './internal/fab' show theme;

package/fab/branded-fab.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Fab, Variant } from './lib/fab.js';
-export { FabSize } from './lib/shared.js';
+import { Fab, FabVariant } from './internal/fab.js';
+export { FabSize } from './internal/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-branded-fab': MdBrandedFab;
@@ -42,7 +42,7 @@ export declare class MdBrandedFab extends Fab {
     /**
      * Branded FABs have no variants
      */
-    variant: Variant;
+    variant: FabVariant;
     getRenderClasses(): {
         primary: boolean;
         secondary: boolean;

package/fab/branded-fab.js

@@ -5,10 +5,10 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Fab } from './lib/fab.js';
-import { styles } from './lib/fab-branded-styles.css.js';
-import { styles as forcedColors } from './lib/forced-colors-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { Fab } from './internal/fab.js';
+import { styles } from './internal/fab-branded-styles.css.js';
+import { styles as forcedColors } from './internal/forced-colors-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary Floating action buttons (FABs) help people take primary actions.
  * They’re used to represent the most important action on a screen, such as

package/fab/branded-fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"branded-fab.js","sourceRoot":"","sources":["branded-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAU,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAUlE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,GAAG;IAM1B,gBAAgB;QACvB,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC;;AACe,mBAAM,GAClB,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAhB9B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAiBxB;SAjBY,YAAY","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 {Fab, Variant} from './lib/fab.js';\nimport {styles} from './lib/fab-branded-styles.css.js';\nimport {styles as forcedColors} from './lib/forced-colors-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\nexport {FabSize} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-branded-fab': MdBrandedFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small. Branded\n * FABs are used to specifically call attention to branded logo icons.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-branded-fab')\nexport class MdBrandedFab extends Fab {\n  /**\n   * Branded FABs have no variants\n   */\n  override variant!: Variant;\n\n  override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'primary': false,\n      'secondary': false,\n      'tertiary': false,\n      'small': false,\n    };\n  }\n  static override styles =\n      [sharedStyles, styles, forcedColors];\n}\n"]}
+{"version":3,"file":"branded-fab.js","sourceRoot":"","sources":["branded-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAa,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAUvE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,GAAG;IAM1B,gBAAgB;QACvB,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC;;AACe,mBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAfnD,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAgBxB;SAhBY,YAAY","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 {Fab, FabVariant} from './internal/fab.js';\nimport {styles} from './internal/fab-branded-styles.css.js';\nimport {styles as forcedColors} from './internal/forced-colors-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {FabSize} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-branded-fab': MdBrandedFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small. Branded\n * FABs are used to specifically call attention to branded logo icons.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-branded-fab')\nexport class MdBrandedFab extends Fab {\n  /**\n   * Branded FABs have no variants\n   */\n  override variant!: FabVariant;\n\n  override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'primary': false,\n      'secondary': false,\n      'tertiary': false,\n      'small': false,\n    };\n  }\n  static override styles = [sharedStyles, styles, forcedColors];\n}\n"]}

package/fab/fab.d.ts

@@ -3,9 +3,9 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Fab } from './lib/fab.js';
-export { Variant } from './lib/fab.js';
-export { FabSize } from './lib/shared.js';
+import { Fab } from './internal/fab.js';
+export { FabVariant } from './internal/fab.js';
+export { FabSize } from './internal/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-fab': MdFab;

package/fab/fab.js

@@ -5,10 +5,10 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Fab } from './lib/fab.js';
-import { styles } from './lib/fab-styles.css.js';
-import { styles as forcedColors } from './lib/forced-colors-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { Fab } from './internal/fab.js';
+import { styles } from './internal/fab-styles.css.js';
+import { styles as forcedColors } from './internal/forced-colors-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary Floating action buttons (FABs) help people take primary actions.
  * They’re used to represent the most important action on a screen, such as

package/fab/fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.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;AAC/C,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAWlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,GAAG;;AACZ,YAAM,GAClB,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAF9B,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAGjB;SAHY,KAAK","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab} from './lib/fab.js';\nimport {styles} from './lib/fab-styles.css.js';\nimport {styles as forcedColors} from './lib/forced-colors-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\nexport {Variant} from './lib/fab.js';\nexport {FabSize} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab': MdFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab')\nexport class MdFab extends Fab {\n  static override styles =\n      [sharedStyles, styles, forcedColors];\n}\n"]}
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.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;AACpD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAWvE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,GAAG;;AACZ,YAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AADnD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAEjB;SAFY,KAAK","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab} from './internal/fab.js';\nimport {styles} from './internal/fab-styles.css.js';\nimport {styles as forcedColors} from './internal/forced-colors-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {FabVariant} from './internal/fab.js';\nexport {FabSize} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab': MdFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab')\nexport class MdFab extends Fab {\n  static override styles = [sharedStyles, styles, forcedColors];\n}\n"]}

package/fab/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Fab } from './lib/fab.js';
+import { Fab } from './internal/fab.js';
 /**
  * Test harness for floating action buttons.
  */

package/fab/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAC9B,CAAC;IACxB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Fab} from './lib/fab.js';\n\n/**\n * Test harness for floating action buttons.\n */\nexport class FabHarness extends Harness<Fab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.fab') as\n        HTMLButtonElement;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAC9B,CAAC;IACxB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Fab} from './internal/fab.js';\n\n/**\n * Test harness for floating action buttons.\n */\nexport class FabHarness extends Harness<Fab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.fab') as\n        HTMLButtonElement;\n  }\n}\n"]}