@material/web 0.1.0-alpha.0

package/radio/lib/single-selection-controller.js

@@ -0,0 +1,289 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Style preference for leading underscores.
+// tslint:disable:strip-private-property-underscore
+/**
+ * Unique symbol for marking roots
+ */
+const selectionController = Symbol('selection controller');
+/**
+ * Set of checkable elements with added metadata
+ */
+export class SingleSelectionSet {
+    constructor() {
+        this.selected = null;
+        this.ordered = null;
+        this.set = new Set();
+    }
+}
+/**
+ * Controller that provides behavior similar to a native `<input type="radio">`
+ * group.
+ *
+ * Behaviors:
+ *
+ * - Selection via key navigation (currently LTR is supported)
+ * - Deselection of other grouped, checkable controls upon selection
+ * - Grouping of checkable elements by name
+ *   - Defaults grouping scope to host shadow root
+ *   - Document-wide scoping enabled
+ * - Land focus only on checked element. Focuses leading element when none
+ *   checked.
+ *
+ * Intended Usage:
+ *
+ * ```ts
+ * class MyElement extends HTMLElement {
+ *   private selectionController: SingleSelectionController | null = null;
+ *   name = "";
+ *   global = false;
+ *
+ *   private _checked = false;
+ *   set checked(checked: boolean) {
+ *     const oldVal = this._checked;
+ *     if (checked === oldVal) return;
+ *
+ *     this._checked = checked;
+ *
+ *     if (this.selectionController) {
+ *       this.selectionController.update(this)
+ *     }
+ *   }
+ *
+ *   get checked() {
+ *     return this._checked;
+ *   }
+ *
+ *   connectedCallback() {
+ *     this.selectionController = SelectionController.getController(this);
+ *     this.selectionController.register(this);
+ *     this.selectionController.update(this);
+ *   }
+ *
+ *   disconnectedCallback() {
+ *     this.selectionController!.unregister(this);
+ *     this.selectionController = null;
+ *   }
+ * }
+ * ```
+ */
+export class SingleSelectionController {
+    constructor(element) {
+        this.sets = {};
+        this.focusedSet = null;
+        this.mouseIsDown = false;
+        element.addEventListener('keydown', (e) => {
+            this.keyDownHandler(e);
+        });
+        element.addEventListener('mousedown', () => {
+            this.mousedownHandler();
+        });
+        element.addEventListener('mouseup', () => {
+            this.mouseupHandler();
+        });
+    }
+    /**
+     * Get a controller for the given element. If no controller exists, one will
+     * be created. Defaults to getting the controller scoped to the element's root
+     * node shadow root unless `element.global` is true. Then, it will get a
+     * `window.document`-scoped controller.
+     *
+     * @param element Element from which to get / create a SelectionController. If
+     *     `element.global` is true, it gets a selection controller scoped to
+     *     `window.document`.
+     */
+    static getController(element) {
+        const useGlobal = !('global' in element) || ('global' in element && element.global);
+        const root = useGlobal ? document :
+            element.getRootNode();
+        let controller = root[selectionController];
+        if (controller === undefined) {
+            controller = new SingleSelectionController(root);
+            root[selectionController] = controller;
+        }
+        return controller;
+    }
+    keyDownHandler(e) {
+        const element = e.target;
+        if (!('checked' in element)) {
+            return;
+        }
+        if (!this.has(element)) {
+            return;
+        }
+        if (e.key == 'ArrowRight' || e.key == 'ArrowDown') {
+            this.selectNext(element);
+        }
+        else if (e.key == 'ArrowLeft' || e.key == 'ArrowUp') {
+            this.selectPrevious(element);
+        }
+    }
+    mousedownHandler() {
+        this.mouseIsDown = true;
+    }
+    mouseupHandler() {
+        this.mouseIsDown = false;
+    }
+    /**
+     * Whether or not the controller controls  the given element.
+     *
+     * @param element element to check
+     */
+    has(element) {
+        const set = this.getSet(element.name);
+        return set.set.has(element);
+    }
+    /**
+     * Selects and returns the controlled element previous to the given element in
+     * document position order. See
+     * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+     *
+     * @param element element relative from which preceding element is fetched
+     */
+    selectPrevious(element) {
+        const order = this.getOrdered(element);
+        const i = order.indexOf(element);
+        const previous = order[i - 1] || order[order.length - 1];
+        this.select(previous);
+        return previous;
+    }
+    /**
+     * Selects and returns the controlled element next to the given element in
+     * document position order. See
+     * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+     *
+     * @param element element relative from which following element is fetched
+     */
+    selectNext(element) {
+        const order = this.getOrdered(element);
+        const i = order.indexOf(element);
+        const next = order[i + 1] || order[0];
+        this.select(next);
+        return next;
+    }
+    select(element) {
+        element.click();
+    }
+    /**
+     * Focuses the selected element in the given element's selection set. User's
+     * mouse selection will override this focus.
+     *
+     * @param element Element from which selection set is derived and subsequently
+     *     focused.
+     * @deprecated update() method now handles focus management by setting
+     *     appropriate tabindex to form element.
+     */
+    focus(element) {
+        // Only manage focus state when using keyboard
+        if (this.mouseIsDown) {
+            return;
+        }
+        const set = this.getSet(element.name);
+        const currentFocusedSet = this.focusedSet;
+        this.focusedSet = set;
+        if (currentFocusedSet != set && set.selected && set.selected != element) {
+            set.selected.focus();
+        }
+    }
+    /**
+     * @return Returns true if atleast one radio is selected in the radio group.
+     */
+    isAnySelected(element) {
+        const set = this.getSet(element.name);
+        for (const e of set.set) {
+            if (e.checked) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Returns the elements in the given element's selection set in document
+     * position order.
+     * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+     *
+     * @param element Element from which selection set is derived and subsequently
+     *     ordered.
+     */
+    getOrdered(element) {
+        const set = this.getSet(element.name);
+        if (!set.ordered) {
+            set.ordered = Array.from(set.set);
+            set.ordered.sort((a, b) => a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING ?
+                1 :
+                0);
+        }
+        return set.ordered;
+    }
+    /**
+     * Gets the selection set of the given name and creates one if it does not yet
+     * exist.
+     *
+     * @param name Name of set
+     */
+    getSet(name) {
+        if (!this.sets[name]) {
+            this.sets[name] = new SingleSelectionSet();
+        }
+        return this.sets[name];
+    }
+    /**
+     * Register the element in the selection controller.
+     *
+     * @param element Element to register. Registers in set of `element.name`.
+     */
+    register(element) {
+        // TODO(b/168546148): Remove accessing 'name' via getAttribute() when new
+        // base class is created without single selection controller. Component
+        // maybe booted up after it is connected to DOM in which case properties
+        // (including `name`) are not updated yet.
+        const name = element.name || element.getAttribute('name') || '';
+        const set = this.getSet(name);
+        set.set.add(element);
+        set.ordered = null;
+    }
+    /**
+     * Unregister the element from selection controller.
+     *
+     * @param element Element to register. Registers in set of `element.name`.
+     */
+    unregister(element) {
+        const set = this.getSet(element.name);
+        set.set.delete(element);
+        set.ordered = null;
+        if (set.selected == element) {
+            set.selected = null;
+        }
+    }
+    /**
+     * Unselects other elements in element's set if element is checked. Noop
+     * otherwise.
+     *
+     * @param element Element from which to calculate selection controller update.
+     */
+    update(element) {
+        const set = this.getSet(element.name);
+        if (element.checked) {
+            for (const e of set.set) {
+                if (e == element) {
+                    continue;
+                }
+                e.checked = false;
+            }
+            set.selected = element;
+        }
+        // When tabbing through land focus on the checked radio in the group.
+        if (this.isAnySelected(element)) {
+            for (const e of set.set) {
+                if (e.formElementTabIndex === undefined) {
+                    break;
+                }
+                e.formElementTabIndex = e.checked ? 0 : -1;
+            }
+        }
+    }
+}
+//# sourceMappingURL=single-selection-controller.js.map

package/radio/lib/single-selection-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-selection-controller.js","sourceRoot":"","sources":["single-selection-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2020 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/**\n * Unique symbol for marking roots\n */\nconst selectionController = Symbol('selection controller');\n\n/**\n * Set of checkable elements with added metadata\n */\nexport class SingleSelectionSet {\n  selected: CheckableElement|null = null;\n  ordered: CheckableElement[]|null = null;\n  readonly set = new Set<CheckableElement>();\n}\n\n/**\n * Element that is checkable consumed by\n * `SingleSelectionController` and `SingleSelectionSet`\n */\nexport type CheckableElement = HTMLElement&{\n  name: string;\n  checked: boolean;\n  formElementTabIndex?: number;\n};\n\n/**\n * Controller that provides behavior similar to a native `<input type=\"radio\">`\n * group.\n *\n * Behaviors:\n *\n * - Selection via key navigation (currently LTR is supported)\n * - Deselection of other grouped, checkable controls upon selection\n * - Grouping of checkable elements by name\n *   - Defaults grouping scope to host shadow root\n *   - Document-wide scoping enabled\n * - Land focus only on checked element. Focuses leading element when none\n *   checked.\n *\n * Intended Usage:\n *\n * ```ts\n * class MyElement extends HTMLElement {\n *   private selectionController: SingleSelectionController | null = null;\n *   name = \"\";\n *   global = false;\n *\n *   private _checked = false;\n *   set checked(checked: boolean) {\n *     const oldVal = this._checked;\n *     if (checked === oldVal) return;\n *\n *     this._checked = checked;\n *\n *     if (this.selectionController) {\n *       this.selectionController.update(this)\n *     }\n *   }\n *\n *   get checked() {\n *     return this._checked;\n *   }\n *\n *   connectedCallback() {\n *     this.selectionController = SelectionController.getController(this);\n *     this.selectionController.register(this);\n *     this.selectionController.update(this);\n *   }\n *\n *   disconnectedCallback() {\n *     this.selectionController!.unregister(this);\n *     this.selectionController = null;\n *   }\n * }\n * ```\n */\nexport class SingleSelectionController {\n  private readonly sets: {[name: string]: SingleSelectionSet} = {};\n\n  private focusedSet: SingleSelectionSet|null = null;\n\n  private mouseIsDown = false;\n\n  /**\n   * Get a controller for the given element. If no controller exists, one will\n   * be created. Defaults to getting the controller scoped to the element's root\n   * node shadow root unless `element.global` is true. Then, it will get a\n   * `window.document`-scoped controller.\n   *\n   * @param element Element from which to get / create a SelectionController. If\n   *     `element.global` is true, it gets a selection controller scoped to\n   *     `window.document`.\n   */\n  static getController(element: HTMLElement|HTMLElement&{global: boolean}) {\n    const useGlobal =\n        !('global' in element) || ('global' in element && element.global);\n    const root = useGlobal ? document as Document &\n            {[selectionController]?: SingleSelectionController} :\n                             (element as Element).getRootNode() as Node &\n            {[selectionController]?: SingleSelectionController};\n    let controller = root[selectionController];\n    if (controller === undefined) {\n      controller = new SingleSelectionController(root);\n      root[selectionController] = controller;\n    }\n    return controller;\n  }\n\n  constructor(element: Node) {\n    element.addEventListener('keydown', (e: Event) => {\n      this.keyDownHandler(e as KeyboardEvent);\n    });\n    element.addEventListener('mousedown', () => {\n      this.mousedownHandler();\n    });\n    element.addEventListener('mouseup', () => {\n      this.mouseupHandler();\n    });\n  }\n\n  protected keyDownHandler(e: KeyboardEvent) {\n    const element = e.target as EventTarget | CheckableElement;\n    if (!('checked' in element)) {\n      return;\n    }\n    if (!this.has(element)) {\n      return;\n    }\n    if (e.key == 'ArrowRight' || e.key == 'ArrowDown') {\n      this.selectNext(element);\n    } else if (e.key == 'ArrowLeft' || e.key == 'ArrowUp') {\n      this.selectPrevious(element);\n    }\n  }\n\n  protected mousedownHandler() {\n    this.mouseIsDown = true;\n  }\n\n  protected mouseupHandler() {\n    this.mouseIsDown = false;\n  }\n\n  /**\n   * Whether or not the controller controls  the given element.\n   *\n   * @param element element to check\n   */\n  has(element: CheckableElement) {\n    const set = this.getSet(element.name);\n    return set.set.has(element);\n  }\n\n  /**\n   * Selects and returns the controlled element previous to the given element in\n   * document position order. See\n   * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).\n   *\n   * @param element element relative from which preceding element is fetched\n   */\n  selectPrevious(element: CheckableElement) {\n    const order = this.getOrdered(element);\n    const i = order.indexOf(element);\n    const previous = order[i - 1] || order[order.length - 1];\n    this.select(previous);\n\n    return previous;\n  }\n\n  /**\n   * Selects and returns the controlled element next to the given element in\n   * document position order. See\n   * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).\n   *\n   * @param element element relative from which following element is fetched\n   */\n  selectNext(element: CheckableElement) {\n    const order = this.getOrdered(element);\n    const i = order.indexOf(element);\n    const next = order[i + 1] || order[0];\n    this.select(next);\n\n    return next;\n  }\n\n  select(element: CheckableElement) {\n    element.click();\n  }\n\n  /**\n   * Focuses the selected element in the given element's selection set. User's\n   * mouse selection will override this focus.\n   *\n   * @param element Element from which selection set is derived and subsequently\n   *     focused.\n   * @deprecated update() method now handles focus management by setting\n   *     appropriate tabindex to form element.\n   */\n  focus(element: CheckableElement) {\n    // Only manage focus state when using keyboard\n    if (this.mouseIsDown) {\n      return;\n    }\n    const set = this.getSet(element.name);\n    const currentFocusedSet = this.focusedSet;\n    this.focusedSet = set;\n    if (currentFocusedSet != set && set.selected && set.selected != element) {\n      set.selected.focus();\n    }\n  }\n\n  /**\n   * @return Returns true if atleast one radio is selected in the radio group.\n   */\n  isAnySelected(element: CheckableElement): boolean {\n    const set = this.getSet(element.name);\n\n    for (const e of set.set) {\n      if (e.checked) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Returns the elements in the given element's selection set in document\n   * position order.\n   * [Node.compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).\n   *\n   * @param element Element from which selection set is derived and subsequently\n   *     ordered.\n   */\n  getOrdered(element: CheckableElement) {\n    const set = this.getSet(element.name);\n    if (!set.ordered) {\n      set.ordered = Array.from(set.set);\n      set.ordered.sort(\n          (a, b) =>\n              a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING ?\n              1 :\n              0);\n    }\n    return set.ordered;\n  }\n\n  /**\n   * Gets the selection set of the given name and creates one if it does not yet\n   * exist.\n   *\n   * @param name Name of set\n   */\n  getSet(name: string): SingleSelectionSet {\n    if (!this.sets[name]) {\n      this.sets[name] = new SingleSelectionSet();\n    }\n    return this.sets[name];\n  }\n\n  /**\n   * Register the element in the selection controller.\n   *\n   * @param element Element to register. Registers in set of `element.name`.\n   */\n  register(element: CheckableElement) {\n    // TODO(b/168546148): Remove accessing 'name' via getAttribute() when new\n    // base class is created without single selection controller. Component\n    // maybe booted up after it is connected to DOM in which case properties\n    // (including `name`) are not updated yet.\n    const name = element.name || element.getAttribute('name') || '';\n    const set = this.getSet(name);\n    set.set.add(element);\n    set.ordered = null;\n  }\n\n  /**\n   * Unregister the element from selection controller.\n   *\n   * @param element Element to register. Registers in set of `element.name`.\n   */\n  unregister(element: CheckableElement) {\n    const set = this.getSet(element.name);\n    set.set.delete(element);\n    set.ordered = null;\n    if (set.selected == element) {\n      set.selected = null;\n    }\n  }\n\n  /**\n   * Unselects other elements in element's set if element is checked. Noop\n   * otherwise.\n   *\n   * @param element Element from which to calculate selection controller update.\n   */\n  update(element: CheckableElement) {\n    const set = this.getSet(element.name);\n    if (element.checked) {\n      for (const e of set.set) {\n        if (e == element) {\n          continue;\n        }\n        e.checked = false;\n      }\n      set.selected = element;\n    }\n\n    // When tabbing through land focus on the checked radio in the group.\n    if (this.isAnySelected(element)) {\n      for (const e of set.set) {\n        if (e.formElementTabIndex === undefined) {\n          break;\n        }\n\n        e.formElementTabIndex = e.checked ? 0 : -1;\n      }\n    }\n  }\n}\n"]}

package/radio/radio.d.ts

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

package/radio/radio.js

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

package/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["radio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AAQjD,qBAAqB;AAErB,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,KAAK;CAEjC,CAAA;AADiB,cAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAEnB;SAFY,OAAO","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 {Radio} from './lib/radio.js';\nimport {styles} from './lib/radio-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-radio': MdRadio;\n  }\n}\n\n/** @soyCompatible */\n@customElement('md-radio')\nexport class MdRadio extends Radio {\n  static override styles = [styles];\n}\n"]}

package/ripple/_index.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './ripple-theme';

package/ripple/_ripple-theme.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/ripple-theme' show values, theme;

package/ripple/lib/_ripple-theme.scss

@@ -0,0 +1,98 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+
+@function values($exclude-hardcoded-values: false) {
+  $state-values: tokens.md-sys-state-values($exclude-hardcoded-values);
+  $default-shape: map.get(
+    tokens.md-sys-shape-values($exclude-hardcoded-values),
+    corner-none
+  );
+  $default-color: if($exclude-hardcoded-values, null, black);
+  // add missing tokens
+  $values: map.merge(
+    $state-values,
+    (
+      state-layer-shape: $default-shape,
+      focus-state-layer-color: $default-color,
+      hover-state-layer-color: $default-color,
+      pressed-state-layer-color: $default-color,
+      dragged-state-layer-color: $default-color,
+    )
+  );
+
+  @return $values;
+}
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme(values(), $theme);
+  $theme: theme.create-theme-vars($theme, ripple);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme-styles(values(), $theme, $require-all: false);
+
+  $theme: theme.create-theme-vars($theme, ripple);
+
+  @include _container-shape(map.get($theme, state-layer-shape));
+
+  &::before {
+    @include _hover-focus-color(map.get($theme, hover-state-layer-color));
+  }
+
+  &::after {
+    @include _press-color(map.get($theme, pressed-state-layer-color));
+  }
+
+  &.md3-ripple--hovered::before {
+    @include _ripple-opacity(map.get($theme, hover-state-layer-opacity));
+    @include _hover-focus-color(map.get($theme, hover-state-layer-color));
+  }
+
+  &.md3-ripple--focused::before {
+    @include _ripple-opacity(map.get($theme, focus-state-layer-opacity));
+    @include _hover-focus-color(map.get($theme, focus-state-layer-color));
+  }
+
+  &.md3-ripple--pressed::after {
+    @include _ripple-opacity(map.get($theme, pressed-state-layer-opacity));
+  }
+
+  &.md3-ripple--unbounded {
+    $unbounded: (
+      state-layer-shape: map.get(tokens.md-sys-shape-values(), corner-full),
+    );
+    $unbounded: theme.create-theme-vars($unbounded, ripple);
+    @include _container-shape(map.get($unbounded, state-layer-shape));
+  }
+}
+
+@mixin _container-shape($shape) {
+  border-radius: $shape;
+}
+
+@mixin _hover-focus-color($color) {
+  background-color: $color;
+}
+
+@mixin _ripple-opacity($opacity) {
+  opacity: $opacity;
+}
+
+@mixin _press-color($color) {
+  background: radial-gradient(
+    closest-side,
+    #{$color} max(calc(100% - 70px), 65%),
+    transparent 100%
+  );
+}

package/ripple/lib/_ripple.scss

@@ -0,0 +1,84 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  :host {
+    @include common;
+    @include host;
+  }
+
+  :host([disabled]) {
+    @include disabled;
+  }
+
+  .md3-ripple-surface {
+    @include common;
+    @include surface;
+  }
+
+  .md3-ripple--focused {
+    @include focused;
+  }
+
+  .md3-ripple--pressed {
+    @include pressed;
+  }
+}
+
+@mixin disabled() {
+  opacity: 0;
+}
+
+@mixin common() {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+@mixin host() {
+  display: flex;
+}
+
+@mixin surface() {
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &::before,
+  &::after {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+    content: '';
+  }
+
+  &::before {
+    transition: opacity 15ms linear, background-color 15ms linear;
+    inset: 0;
+  }
+
+  &::after {
+    // press ripple fade-out
+    transition: opacity 375ms linear;
+    transform-origin: center center;
+  }
+}
+
+@mixin focused() {
+  &::before {
+    transition-duration: 75ms;
+  }
+}
+
+@mixin pressed() {
+  &::after {
+    // press ripple fade-in
+    transition-duration: 105ms;
+  }
+}

package/ripple/lib/ripple-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/ripple/lib/ripple-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:flex}:host([disabled]){opacity:0}.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-ripple-surface::before,.md3-ripple-surface::after{position:absolute;opacity:0;pointer-events:none;z-index:-1;content:""}.md3-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--focused::before{transition-duration:75ms}.md3-ripple--pressed::after{transition-duration:105ms}.md3-ripple-surface{border-radius:var(--md-ripple-state-layer-shape, 0)}.md3-ripple-surface::before{background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-state-layer-color, black) max(100% - 70px, 65%), transparent 100%)}.md3-ripple-surface.md3-ripple--hovered::before{opacity:var(--md-ripple-hover-state-layer-opacity, 0.08);background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface.md3-ripple--focused::before{opacity:var(--md-ripple-focus-state-layer-opacity, 0.12);background-color:var(--md-ripple-focus-state-layer-color, black)}.md3-ripple-surface.md3-ripple--pressed::after{opacity:var(--md-ripple-pressed-state-layer-opacity, 0.12)}.md3-ripple-surface.md3-ripple--unbounded{border-radius:var(--md-ripple-state-layer-shape, 9999px)}/*# sourceMappingURL=ripple-styles.css.map */
+`;
+//# sourceMappingURL=ripple-styles.css.js.map

package/ripple/lib/ripple-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-styles.css.js","sourceRoot":"","sources":["ripple-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{position:absolute;inset:0;pointer-events:none;overflow:hidden;display:flex}:host([disabled]){opacity:0}.md3-ripple-surface{position:absolute;inset:0;pointer-events:none;overflow:hidden;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.md3-ripple-surface::before,.md3-ripple-surface::after{position:absolute;opacity:0;pointer-events:none;z-index:-1;content:\"\"}.md3-ripple-surface::before{transition:opacity 15ms linear,background-color 15ms linear;inset:0}.md3-ripple-surface::after{transition:opacity 375ms linear;transform-origin:center center}.md3-ripple--focused::before{transition-duration:75ms}.md3-ripple--pressed::after{transition-duration:105ms}.md3-ripple-surface{border-radius:var(--md-ripple-state-layer-shape, 0)}.md3-ripple-surface::before{background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-state-layer-color, black) max(100% - 70px, 65%), transparent 100%)}.md3-ripple-surface.md3-ripple--hovered::before{opacity:var(--md-ripple-hover-state-layer-opacity, 0.08);background-color:var(--md-ripple-hover-state-layer-color, black)}.md3-ripple-surface.md3-ripple--focused::before{opacity:var(--md-ripple-focus-state-layer-opacity, 0.12);background-color:var(--md-ripple-focus-state-layer-color, black)}.md3-ripple-surface.md3-ripple--pressed::after{opacity:var(--md-ripple-pressed-state-layer-opacity, 0.12)}.md3-ripple-surface.md3-ripple--unbounded{border-radius:var(--md-ripple-state-layer-shape, 9999px)}/*# sourceMappingURL=ripple-styles.css.map */\n`;\n "]}

package/ripple/lib/ripple-styles.scss

@@ -0,0 +1,16 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use './ripple';
+@use './ripple-theme';
+
+@include ripple.static-styles();
+
+.md3-ripple-surface {
+  @include ripple-theme.theme-styles(ripple-theme.values());
+}

package/ripple/lib/ripple.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export declare class Ripple extends LitElement {
+    mdRoot: HTMLElement;
+    unbounded: boolean;
+    disabled: boolean;
+    protected hovered: boolean;
+    protected focused: boolean;
+    protected pressed: boolean;
+    protected rippleSize: string;
+    protected rippleScale: string;
+    protected initialSize: number;
+    protected pressAnimationSignal: import("@material/web/motion/animation.js").AnimationSignal;
+    protected growAnimation: Animation | null;
+    protected delayedEndPressHandle: number | null;
+    /** @soyTemplate */
+    protected render(): TemplateResult;
+    /** @soyTemplate */
+    protected getRenderRippleClasses(): ClassInfo;
+    protected update(changedProps: PropertyValues<this>): void;
+    protected getDimensions(): DOMRect;
+    protected determineRippleSize(): void;
+    protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent): {
+        x: number;
+        y: number;
+    };
+    protected getTranslationCoordinates(positionEvent?: Event | null): {
+        startPoint: {
+            x: number;
+            y: number;
+        };
+        endPoint: {
+            x: number;
+            y: number;
+        };
+    };
+    protected startPressAnimation(positionEvent?: Event | null): void;
+    /**
+     * @deprecated Use beginHover
+     */
+    startHover(hoverEvent?: Event): void;
+    beginHover(hoverEvent?: Event): void;
+    endHover(): void;
+    /**
+     * @deprecated Use beginFocus
+     */
+    startFocus(): void;
+    beginFocus(): void;
+    endFocus(): void;
+    /**
+     * @deprecated Use beginPress
+     */
+    startPress(positionEvent?: Event | null): void;
+    beginPress(positionEvent?: Event | null): void;
+    endPress(): void;
+}