@material/web 0.1.0-alpha.0

package/menusurface/lib/menu-surface.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { MDCMenuSurfaceAdapter } from './adapter.js';
+import { Corner as CornerEnum } from './constants.js';
+import { MDCMenuSurfaceFoundation } from './foundation.js';
+export declare type Corner = keyof typeof CornerEnum;
+export declare type AnchorableElement = HTMLElement & {
+    anchor: Element | null;
+};
+/**
+ * @fires opened
+ * @fires closed
+ */
+export declare abstract class MenuSurface extends LitElement {
+    protected mdcFoundation: MDCMenuSurfaceFoundation;
+    mdcRoot: HTMLDivElement;
+    slotElement: HTMLSlotElement | null;
+    absolute: boolean;
+    fullwidth: boolean;
+    fixed: boolean;
+    x: number | null;
+    y: number | null;
+    quick: boolean;
+    open: boolean;
+    stayOpenOnBodyClick: boolean;
+    skipRestoreFocus: boolean;
+    protected bitwiseCorner: CornerEnum;
+    protected previousFlipMenuHorizontally: boolean;
+    /**
+     * Whether to align the menu surface to the opposite side of the default
+     * alignment.
+     */
+    flipMenuHorizontally: boolean;
+    corner: Corner;
+    protected styleTop: string;
+    protected styleLeft: string;
+    protected styleRight: string;
+    protected styleBottom: string;
+    protected styleMaxHeight: string;
+    protected styleTransformOrigin: string;
+    anchor: HTMLElement | null;
+    protected previouslyFocused: HTMLElement | Element | null;
+    protected previousAnchor: HTMLElement | null;
+    protected onBodyClickBound: (evt: MouseEvent) => void;
+    render(): import("lit-html").TemplateResult<1>;
+    protected firstUpdated(): void;
+    createAdapter(): MDCMenuSurfaceAdapter;
+    protected onKeydown(evt: KeyboardEvent): void;
+    protected onBodyClick(evt: MouseEvent): void;
+    protected registerBodyClick(): void;
+    protected deregisterBodyClick(): void;
+    close(): void;
+    show(): void;
+}

package/menusurface/lib/menu-surface.js

@@ -0,0 +1,386 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+// Style preference for leading underscores.
+// tslint:disable:strip-private-property-underscore
+// TODO(b/239222919): remove compat dependencies
+import { observer } from '@material/web/compat/base/observer.js';
+import { deepActiveElementPath, doesElementContainFocus } from '@material/web/compat/base/utils.js';
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { Corner as CornerEnum } from './constants.js';
+import { MDCMenuSurfaceFoundation } from './foundation.js';
+// tslint:disable:no-bitwise
+// required for closure compiler
+const stringToCorner = {
+    'TOP_LEFT': CornerEnum.TOP_LEFT,
+    'TOP_RIGHT': CornerEnum.TOP_RIGHT,
+    'BOTTOM_LEFT': CornerEnum.BOTTOM_LEFT,
+    'BOTTOM_RIGHT': CornerEnum.BOTTOM_RIGHT,
+    'TOP_START': CornerEnum.TOP_START,
+    'TOP_END': CornerEnum.TOP_END,
+    'BOTTOM_START': CornerEnum.BOTTOM_START,
+    'BOTTOM_END': CornerEnum.BOTTOM_END,
+};
+/**
+ * @fires opened
+ * @fires closed
+ */
+export class MenuSurface extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.absolute = false;
+        this.fullwidth = false;
+        this.fixed = false;
+        this.x = null;
+        this.y = null;
+        // must be defined before open or else race condition in foundation occurs.
+        this.quick = false;
+        this.open = false;
+        this.stayOpenOnBodyClick = false;
+        this.skipRestoreFocus = false;
+        this.bitwiseCorner = CornerEnum.TOP_START;
+        this.previousFlipMenuHorizontally = false;
+        /**
+         * Whether to align the menu surface to the opposite side of the default
+         * alignment.
+         */
+        this.flipMenuHorizontally = false;
+        this.corner = 'BOTTOM_START';
+        this.styleTop = '';
+        this.styleLeft = '';
+        this.styleRight = '';
+        this.styleBottom = '';
+        this.styleMaxHeight = '';
+        this.styleTransformOrigin = '';
+        this.anchor = null;
+        this.previouslyFocused = null;
+        this.previousAnchor = null;
+        this.onBodyClickBound = () => undefined;
+    }
+    render() {
+        const classes = {
+            'md3-menu-surface--fixed': this.fixed,
+            'md3-menu-surface--fullwidth': this.fullwidth,
+        };
+        const styles = {
+            'top': this.styleTop,
+            'left': this.styleLeft,
+            'right': this.styleRight,
+            'bottom': this.styleBottom,
+            'max-height': this.styleMaxHeight,
+            'transform-origin': this.styleTransformOrigin,
+        };
+        return html `
+      <div
+          class="md3-menu-surface ${classMap(classes)}"
+          style="${styleMap(styles)}"
+          @keydown=${this.onKeydown}
+          @opened=${this.registerBodyClick}
+          @closed=${this.deregisterBodyClick}>
+        <slot></slot>
+      </div>`;
+    }
+    firstUpdated() {
+        if (this.mdcFoundation !== undefined) {
+            this.mdcFoundation.destroy();
+        }
+        this.mdcFoundation = new MDCMenuSurfaceFoundation(this.createAdapter());
+        this.mdcFoundation.init();
+    }
+    createAdapter() {
+        return {
+            addClass: (className) => {
+                this.mdcRoot.classList.add(className);
+            },
+            removeClass: (className) => {
+                this.mdcRoot.classList.remove(className);
+            },
+            hasClass: (className) => this.mdcRoot.classList.contains(className),
+            hasAnchor: () => {
+                return !!this.anchor;
+            },
+            notifyClose: () => {
+                const init = { bubbles: true, composed: true };
+                const ev = new CustomEvent('closed', init);
+                this.open = false;
+                this.mdcRoot.dispatchEvent(ev);
+            },
+            notifyClosing: () => {
+                const init = { bubbles: true, composed: true };
+                const ev = new CustomEvent('closing', init);
+                this.mdcRoot.dispatchEvent(ev);
+            },
+            notifyOpen: () => {
+                const init = { bubbles: true, composed: true };
+                const ev = new CustomEvent('opened', init);
+                this.open = true;
+                this.mdcRoot.dispatchEvent(ev);
+            },
+            notifyOpening: () => {
+                const init = { bubbles: true, composed: true };
+                const ev = new CustomEvent('opening', init);
+                this.mdcRoot.dispatchEvent(ev);
+            },
+            isElementInContainer: () => false,
+            isRtl: () => {
+                if (this.mdcRoot) {
+                    return getComputedStyle(this.mdcRoot).direction === 'rtl';
+                }
+                return false;
+            },
+            setTransformOrigin: (origin) => {
+                const root = this.mdcRoot;
+                if (!root) {
+                    return;
+                }
+                this.styleTransformOrigin = origin;
+            },
+            isFocused: () => {
+                return doesElementContainFocus(this);
+            },
+            saveFocus: () => {
+                const activeElementPath = deepActiveElementPath();
+                const pathLength = activeElementPath.length;
+                if (!pathLength) {
+                    this.previouslyFocused = null;
+                }
+                this.previouslyFocused = activeElementPath[pathLength - 1];
+            },
+            restoreFocus: () => {
+                if (!this.previouslyFocused) {
+                    return;
+                }
+                if ('focus' in this.previouslyFocused) {
+                    this.previouslyFocused.focus();
+                }
+            },
+            getInnerDimensions: () => {
+                const mdcRoot = this.mdcRoot;
+                if (!mdcRoot) {
+                    return { width: 0, height: 0 };
+                }
+                return { width: mdcRoot.offsetWidth, height: mdcRoot.offsetHeight };
+            },
+            getAnchorDimensions: () => {
+                const anchorElement = this.anchor;
+                return anchorElement ? anchorElement.getBoundingClientRect() : null;
+            },
+            getBodyDimensions: () => {
+                return {
+                    width: document.body.clientWidth,
+                    height: document.body.clientHeight,
+                };
+            },
+            getWindowDimensions: () => {
+                return {
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                };
+            },
+            getWindowScroll: () => {
+                return {
+                    x: window.pageXOffset,
+                    y: window.pageYOffset,
+                };
+            },
+            setPosition: (position) => {
+                const mdcRoot = this.mdcRoot;
+                if (!mdcRoot) {
+                    return;
+                }
+                this.styleLeft = 'left' in position ? `${position.left}px` : '';
+                this.styleRight = 'right' in position ? `${position.right}px` : '';
+                this.styleTop = 'top' in position ? `${position.top}px` : '';
+                this.styleBottom = 'bottom' in position ? `${position.bottom}px` : '';
+            },
+            setMaxHeight: async (height) => {
+                const mdcRoot = this.mdcRoot;
+                if (!mdcRoot) {
+                    return;
+                }
+                // must set both for IE support as IE will not set a var
+                this.styleMaxHeight = height;
+                await this.updateComplete;
+                this.styleMaxHeight = `var(--md3-menu-max-height, ${height})`;
+            },
+        };
+    }
+    onKeydown(evt) {
+        if (this.mdcFoundation) {
+            this.mdcFoundation.handleKeydown(evt);
+        }
+    }
+    onBodyClick(evt) {
+        if (this.stayOpenOnBodyClick) {
+            return;
+        }
+        const path = evt.composedPath();
+        if (path.indexOf(this) === -1) {
+            this.close();
+        }
+    }
+    registerBodyClick() {
+        this.onBodyClickBound = this.onBodyClick.bind(this);
+        // capture otherwise listener closes menu after quick menu opens
+        document.body.addEventListener('click', this.onBodyClickBound, { passive: true, capture: true });
+    }
+    deregisterBodyClick() {
+        document.body.removeEventListener('click', this.onBodyClickBound, { capture: true });
+    }
+    close() {
+        this.open = false;
+    }
+    show() {
+        this.open = true;
+    }
+}
+__decorate([
+    query('.md3-menu-surface'),
+    __metadata("design:type", HTMLDivElement)
+], MenuSurface.prototype, "mdcRoot", void 0);
+__decorate([
+    query('slot'),
+    __metadata("design:type", HTMLSlotElement)
+], MenuSurface.prototype, "slotElement", void 0);
+__decorate([
+    property({ type: Boolean }),
+    observer(function (isAbsolute) {
+        if (this.mdcFoundation && !this.fixed) {
+            this.mdcFoundation.setIsHoisted(isAbsolute);
+        }
+    }),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "absolute", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "fullwidth", void 0);
+__decorate([
+    property({ type: Boolean }),
+    observer(function (isFixed) {
+        if (this.mdcFoundation && !this.absolute) {
+            this.mdcFoundation.setFixedPosition(isFixed);
+        }
+    }),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "fixed", void 0);
+__decorate([
+    property({ type: Number }),
+    observer(function (value) {
+        if (this.mdcFoundation && this.y !== null && value !== null) {
+            this.mdcFoundation.setAbsolutePosition(value, this.y);
+            this.mdcFoundation.setAnchorMargin({ left: value, top: this.y, right: -value, bottom: this.y });
+        }
+    }),
+    __metadata("design:type", Number)
+], MenuSurface.prototype, "x", void 0);
+__decorate([
+    property({ type: Number }),
+    observer(function (value) {
+        if (this.mdcFoundation && this.x !== null && value !== null) {
+            this.mdcFoundation.setAbsolutePosition(this.x, value);
+            this.mdcFoundation.setAnchorMargin({ left: this.x, top: value, right: -this.x, bottom: value });
+        }
+    }),
+    __metadata("design:type", Number)
+], MenuSurface.prototype, "y", void 0);
+__decorate([
+    property({ type: Boolean }),
+    observer(function (value) {
+        if (this.mdcFoundation) {
+            this.mdcFoundation.setQuickOpen(value);
+        }
+    }),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "quick", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    observer(function (isOpen, wasOpen) {
+        if (this.mdcFoundation) {
+            if (isOpen) {
+                this.mdcFoundation.open();
+                // wasOpen helps with first render (when it is `undefined`) perf
+            }
+            else if (wasOpen !== undefined) {
+                this.mdcFoundation.close(this.skipRestoreFocus);
+            }
+        }
+    }),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "stayOpenOnBodyClick", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "skipRestoreFocus", void 0);
+__decorate([
+    state(),
+    observer(function (value) {
+        if (this.mdcFoundation) {
+            if (value) {
+                this.mdcFoundation.setAnchorCorner(value);
+            }
+            else {
+                this.mdcFoundation.setAnchorCorner(value);
+            }
+        }
+    }),
+    __metadata("design:type", Number)
+], MenuSurface.prototype, "bitwiseCorner", void 0);
+__decorate([
+    observer(function (flipMenuHorizontally) {
+        if (!this.mdcFoundation)
+            return;
+        if (this.previousFlipMenuHorizontally !== flipMenuHorizontally) {
+            this.mdcFoundation.flipCornerHorizontally();
+        }
+        this.previousFlipMenuHorizontally = flipMenuHorizontally;
+    }),
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "flipMenuHorizontally", void 0);
+__decorate([
+    property({ type: String }),
+    observer(function (value) {
+        if (this.mdcFoundation) {
+            if (value) {
+                this.bitwiseCorner = stringToCorner[value];
+            }
+        }
+    }),
+    __metadata("design:type", String)
+], MenuSurface.prototype, "corner", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "styleTop", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "styleLeft", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "styleRight", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "styleBottom", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "styleMaxHeight", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], MenuSurface.prototype, "styleTransformOrigin", void 0);
+//# sourceMappingURL=menu-surface.js.map

package/menusurface/lib/menu-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-surface.js","sourceRoot":"","sources":["menu-surface.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\n// TODO(b/239222919): remove compat dependencies\nimport {observer} from '@material/web/compat/base/observer.js';\nimport {deepActiveElementPath, doesElementContainFocus} from '@material/web/compat/base/utils.js';\nimport {html, LitElement} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {MDCMenuSurfaceAdapter} from './adapter.js';\nimport {Corner as CornerEnum} from './constants.js';\nimport {MDCMenuSurfaceFoundation} from './foundation.js';\n\nexport type Corner = keyof typeof CornerEnum;\nexport type AnchorableElement = HTMLElement&{anchor: Element | null};\n\n// tslint:disable:no-bitwise\n\n// required for closure compiler\nconst stringToCorner = {\n  'TOP_LEFT': CornerEnum.TOP_LEFT,\n  'TOP_RIGHT': CornerEnum.TOP_RIGHT,\n  'BOTTOM_LEFT': CornerEnum.BOTTOM_LEFT,\n  'BOTTOM_RIGHT': CornerEnum.BOTTOM_RIGHT,\n  'TOP_START': CornerEnum.TOP_START,\n  'TOP_END': CornerEnum.TOP_END,\n  'BOTTOM_START': CornerEnum.BOTTOM_START,\n  'BOTTOM_END': CornerEnum.BOTTOM_END,\n};\n\n/**\n * @fires opened\n * @fires closed\n */\nexport abstract class MenuSurface extends LitElement {\n  protected mdcFoundation!: MDCMenuSurfaceFoundation;\n\n  @query('.md3-menu-surface') mdcRoot!: HTMLDivElement;\n\n  @query('slot') slotElement!: HTMLSlotElement|null;\n\n  @property({type: Boolean})\n  @observer(function(this: MenuSurface, isAbsolute: boolean) {\n    if (this.mdcFoundation && !this.fixed) {\n      this.mdcFoundation.setIsHoisted(isAbsolute);\n    }\n  })\n  absolute = false;\n\n  @property({type: Boolean}) fullwidth = false;\n\n  @property({type: Boolean})\n  @observer(function(this: MenuSurface, isFixed: boolean) {\n    if (this.mdcFoundation && !this.absolute) {\n      this.mdcFoundation.setFixedPosition(isFixed);\n    }\n  })\n  fixed = false;\n\n  @property({type: Number})\n  @observer(function(this: MenuSurface, value: number|null) {\n    if (this.mdcFoundation && this.y !== null && value !== null) {\n      this.mdcFoundation.setAbsolutePosition(value, this.y);\n      this.mdcFoundation.setAnchorMargin(\n          {left: value, top: this.y, right: -value, bottom: this.y});\n    }\n  })\n  x: number|null = null;\n\n  @property({type: Number})\n  @observer(function(this: MenuSurface, value: number|null) {\n    if (this.mdcFoundation && this.x !== null && value !== null) {\n      this.mdcFoundation.setAbsolutePosition(this.x, value);\n      this.mdcFoundation.setAnchorMargin(\n          {left: this.x, top: value, right: -this.x, bottom: value});\n    }\n  })\n  y: number|null = null;\n\n  // must be defined before open or else race condition in foundation occurs.\n  @property({type: Boolean})\n  @observer(function(this: MenuSurface, value: boolean) {\n    if (this.mdcFoundation) {\n      this.mdcFoundation.setQuickOpen(value);\n    }\n  })\n  quick = false;\n\n  @property({type: Boolean, reflect: true})\n  @observer(function(this: MenuSurface, isOpen: boolean, wasOpen: boolean) {\n    if (this.mdcFoundation) {\n      if (isOpen) {\n        this.mdcFoundation.open();\n        // wasOpen helps with first render (when it is `undefined`) perf\n      } else if (wasOpen !== undefined) {\n        this.mdcFoundation.close(this.skipRestoreFocus);\n      }\n    }\n  })\n  open = false;\n\n  @property({type: Boolean}) stayOpenOnBodyClick = false;\n\n  @property({type: Boolean}) skipRestoreFocus = false;\n\n  @state()\n  @observer(function(this: MenuSurface, value: CornerEnum) {\n    if (this.mdcFoundation) {\n      if (value) {\n        this.mdcFoundation.setAnchorCorner(value);\n      } else {\n        this.mdcFoundation.setAnchorCorner(value);\n      }\n    }\n  })\n  protected bitwiseCorner: CornerEnum = CornerEnum.TOP_START;\n\n  protected previousFlipMenuHorizontally = false;\n\n  /**\n   * Whether to align the menu surface to the opposite side of the default\n   * alignment.\n   */\n  @observer(function(this: MenuSurface, flipMenuHorizontally: boolean) {\n    if (!this.mdcFoundation) return;\n\n    if (this.previousFlipMenuHorizontally !== flipMenuHorizontally) {\n      this.mdcFoundation.flipCornerHorizontally();\n    }\n    this.previousFlipMenuHorizontally = flipMenuHorizontally;\n  })\n  @property({type: Boolean})\n  flipMenuHorizontally = false;\n\n  @property({type: String})\n  @observer(function(this: MenuSurface, value: Corner) {\n    if (this.mdcFoundation) {\n      if (value) {\n        this.bitwiseCorner = stringToCorner[value];\n      }\n    }\n  })\n  corner: Corner = 'BOTTOM_START';\n\n  @state() protected styleTop = '';\n  @state() protected styleLeft = '';\n  @state() protected styleRight = '';\n  @state() protected styleBottom = '';\n  @state() protected styleMaxHeight = '';\n  @state() protected styleTransformOrigin = '';\n\n  anchor: HTMLElement|null = null;\n\n  protected previouslyFocused: HTMLElement|Element|null = null;\n  protected previousAnchor: HTMLElement|null = null;\n  protected onBodyClickBound: (evt: MouseEvent) => void = () => undefined;\n\n  override render() {\n    const classes = {\n      'md3-menu-surface--fixed': this.fixed,\n      'md3-menu-surface--fullwidth': this.fullwidth,\n    };\n\n    const styles = {\n      'top': this.styleTop,\n      'left': this.styleLeft,\n      'right': this.styleRight,\n      'bottom': this.styleBottom,\n      'max-height': this.styleMaxHeight,\n      'transform-origin': this.styleTransformOrigin,\n    };\n\n    return html`\n      <div\n          class=\"md3-menu-surface ${classMap(classes)}\"\n          style=\"${styleMap(styles)}\"\n          @keydown=${this.onKeydown}\n          @opened=${this.registerBodyClick}\n          @closed=${this.deregisterBodyClick}>\n        <slot></slot>\n      </div>`;\n  }\n\n  protected override firstUpdated() {\n    if (this.mdcFoundation !== undefined) {\n      this.mdcFoundation.destroy();\n    }\n\n    this.mdcFoundation = new MDCMenuSurfaceFoundation(this.createAdapter());\n    this.mdcFoundation.init();\n  }\n\n  createAdapter(): MDCMenuSurfaceAdapter {\n    return {\n      addClass: (className: string) => {\n        this.mdcRoot.classList.add(className);\n      },\n      removeClass: (className: string) => {\n        this.mdcRoot.classList.remove(className);\n      },\n      hasClass: (className: string) =>\n          this.mdcRoot.classList.contains(className),\n      hasAnchor: () => {\n        return !!this.anchor;\n      },\n      notifyClose: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('closed', init);\n        this.open = false;\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      notifyClosing: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('closing', init);\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      notifyOpen: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('opened', init);\n        this.open = true;\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      notifyOpening: () => {\n        const init: CustomEventInit = {bubbles: true, composed: true};\n        const ev = new CustomEvent('opening', init);\n        this.mdcRoot.dispatchEvent(ev);\n      },\n      isElementInContainer: () => false,\n      isRtl: () => {\n        if (this.mdcRoot) {\n          return getComputedStyle(this.mdcRoot).direction === 'rtl';\n        }\n\n        return false;\n      },\n      setTransformOrigin: (origin) => {\n        const root = this.mdcRoot;\n        if (!root) {\n          return;\n        }\n\n        this.styleTransformOrigin = origin;\n      },\n      isFocused: () => {\n        return doesElementContainFocus(this);\n      },\n      saveFocus: () => {\n        const activeElementPath = deepActiveElementPath();\n        const pathLength = activeElementPath.length;\n\n        if (!pathLength) {\n          this.previouslyFocused = null;\n        }\n\n        this.previouslyFocused = activeElementPath[pathLength - 1];\n      },\n      restoreFocus: () => {\n        if (!this.previouslyFocused) {\n          return;\n        }\n\n        if ('focus' in this.previouslyFocused) {\n          this.previouslyFocused.focus();\n        }\n      },\n      getInnerDimensions: () => {\n        const mdcRoot = this.mdcRoot;\n\n        if (!mdcRoot) {\n          return {width: 0, height: 0};\n        }\n\n        return {width: mdcRoot.offsetWidth, height: mdcRoot.offsetHeight};\n      },\n      getAnchorDimensions: () => {\n        const anchorElement = this.anchor;\n\n        return anchorElement ? anchorElement.getBoundingClientRect() : null;\n      },\n      getBodyDimensions: () => {\n        return {\n          width: document.body.clientWidth,\n          height: document.body.clientHeight,\n        };\n      },\n      getWindowDimensions: () => {\n        return {\n          width: window.innerWidth,\n          height: window.innerHeight,\n        };\n      },\n      getWindowScroll: () => {\n        return {\n          x: window.pageXOffset,\n          y: window.pageYOffset,\n        };\n      },\n      setPosition: (position) => {\n        const mdcRoot = this.mdcRoot;\n\n        if (!mdcRoot) {\n          return;\n        }\n\n        this.styleLeft = 'left' in position ? `${position.left}px` : '';\n        this.styleRight = 'right' in position ? `${position.right}px` : '';\n        this.styleTop = 'top' in position ? `${position.top}px` : '';\n        this.styleBottom = 'bottom' in position ? `${position.bottom}px` : '';\n      },\n      setMaxHeight: async (height) => {\n        const mdcRoot = this.mdcRoot;\n\n        if (!mdcRoot) {\n          return;\n        }\n\n        // must set both for IE support as IE will not set a var\n        this.styleMaxHeight = height;\n        await this.updateComplete;\n        this.styleMaxHeight = `var(--md3-menu-max-height, ${height})`;\n      },\n    };\n  }\n\n  protected onKeydown(evt: KeyboardEvent) {\n    if (this.mdcFoundation) {\n      this.mdcFoundation.handleKeydown(evt);\n    }\n  }\n\n  protected onBodyClick(evt: MouseEvent) {\n    if (this.stayOpenOnBodyClick) {\n      return;\n    }\n    const path = evt.composedPath();\n    if (path.indexOf(this) === -1) {\n      this.close();\n    }\n  }\n\n  protected registerBodyClick() {\n    this.onBodyClickBound = this.onBodyClick.bind(this);\n    // capture otherwise listener closes menu after quick menu opens\n    document.body.addEventListener(\n        'click', this.onBodyClickBound, {passive: true, capture: true});\n  }\n\n  protected deregisterBodyClick() {\n    document.body.removeEventListener(\n        'click', this.onBodyClickBound, {capture: true});\n  }\n\n  close() {\n    this.open = false;\n  }\n\n  show() {\n    this.open = true;\n  }\n}\n"]}

package/menusurface/lib/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export interface MDCMenuDimensions {
+    width: number;
+    height: number;
+}
+export interface MDCMenuDistance {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface MDCMenuPoint {
+    x: number;
+    y: number;
+}

package/menusurface/lib/types.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/menusurface/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nexport interface MDCMenuDimensions {\n  width: number;\n  height: number;\n}\n\nexport interface MDCMenuDistance {\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\n\nexport interface MDCMenuPoint {\n  x: number;\n  y: number;\n}\n"]}

package/menusurface/menu-surface.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { MenuSurface } from './lib/menu-surface.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-menu-surface': MdMenuSurface;
+    }
+}
+export declare class MdMenuSurface extends MenuSurface {
+    static styles: import("lit").CSSResult[];
+}

package/menusurface/menu-surface.js

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { MenuSurface } from './lib/menu-surface.js';
+import { styles } from './lib/menu-surface-styles.css.js';
+let MdMenuSurface = class MdMenuSurface extends MenuSurface {
+};
+MdMenuSurface.styles = [styles];
+MdMenuSurface = __decorate([
+    customElement('md-menu-surface')
+], MdMenuSurface);
+export { MdMenuSurface };
+//# sourceMappingURL=menu-surface.js.map

package/menusurface/menu-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-surface.js","sourceRoot":"","sources":["menu-surface.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AASxD,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,WAAW;CAE7C,CAAA;AADiB,oBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAEzB;SAFY,aAAa","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 {MenuSurface} from './lib/menu-surface.js';\nimport {styles} from './lib/menu-surface-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-surface': MdMenuSurface;\n  }\n}\n\n@customElement('md-menu-surface')\nexport class MdMenuSurface extends MenuSurface {\n  static override styles = [styles];\n}\n"]}

package/motion/_animation.scss

@@ -0,0 +1,33 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+$standard-easing: cubic-bezier(0.4, 0, 0.2, 1);
+$acceleration-easing: cubic-bezier(0.4, 0, 1, 1);
+$deceleration-easing: cubic-bezier(0, 0, 0.2, 1);
+$sharp-easing: cubic-bezier(0.4, 0, 0.6, 1);
+
+@function standard($name, $duration, $delay: null) {
+  @return _animation($name, $duration, $standard-easing, $delay);
+}
+
+@function acceleration($name, $duration, $delay: null) {
+  @return _animation($name, $duration, $acceleration-easing, $delay);
+}
+
+@function deceleration($name, $duration, $delay: null) {
+  @return _animation($name, $duration, $deceleration-easing, $delay);
+}
+
+@function sharp($name, $duration, $delay: null) {
+  @return _animation($name, $duration, $sharp-easing, $delay);
+}
+
+@function _animation($name, $duration, $easing, $delay) {
+  @if $delay {
+    @return $name $duration $easing $delay;
+  }
+
+  @return $name $duration $easing;
+}

package/motion/animation.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Easing functions to use for web animations.
+ *
+ * TODO(b/241113345): replace with tokens
+ */
+export declare enum Easing {
+    STANDARD = "cubic-bezier(0.2, 0, 0, 1)"
+}
+/**
+ * A signal that is used for abortable tasks.
+ */
+export interface AnimationSignal {
+    /**
+     * Starts the abortable task. Any previous tasks started with this instance
+     * will be aborted.
+     *
+     * @return An `AbortSignal` for the current task.
+     */
+    start(): AbortSignal;
+    /**
+     * Complete the current task.
+     */
+    finish(): void;
+}
+/**
+ * Creates an `AnimationSignal` that can be used to cancel a previous task.
+ *
+ * @example
+ * class MyClass {
+ *   private labelAnimationSignal = createAnimationSignal();
+ *
+ *   private async animateLabel() {
+ *     // Start of the task. Previous tasks will be canceled.
+ *     const signal = this.labelAnimationSignal.start();
+ *
+ *     // Do async work...
+ *     if (signal.aborted) {
+ *       // Use AbortSignal to check if a request was made to abort after some
+ *       // asynchronous work.
+ *       return;
+ *     }
+ *
+ *     const animation = this.animate(...);
+ *     // Add event listeners to be notified when the task should be canceled.
+ *     signal.addEventListener('abort', () => {
+ *       animation.cancel();
+ *     });
+ *
+ *     animation.addEventListener('finish', () => {
+ *       // Tell the signal that the current task is finished.
+ *       this.labelAnimationSignal.finish();
+ *     });
+ *   }
+ * }
+ *
+ * @return An `AnimationSignal`.
+ */
+export declare function createAnimationSignal(): AnimationSignal;