@material/web 0.1.0-alpha.0

package/decorators/bound.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export function bound(target, propertyKey, methodDescriptor) {
+    const descriptor = methodDescriptor || {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+    };
+    const memoizedBoundValues = new WeakMap();
+    let get;
+    let set;
+    if (descriptor.get || descriptor.writable) {
+        get = function () {
+            const self = this; // Needed for closure conformance
+            if (descriptor.get) {
+                // Separate variables needed for closure conformance
+                const getter = descriptor.get;
+                const value = getter.call(self);
+                return value.bind(self);
+            }
+            if (!memoizedBoundValues.has(self)) {
+                const bound = (descriptor.value || self[propertyKey])?.bind(self);
+                memoizedBoundValues.set(self, bound);
+                return bound;
+            }
+            return memoizedBoundValues.get(self);
+        };
+    }
+    if (descriptor.set || descriptor.writable) {
+        set = function (value) {
+            const self = this; // Needed for closure conformance
+            value = value.bind(self);
+            if (descriptor.set) {
+                descriptor.set.call(self, value);
+            }
+            memoizedBoundValues.set(self, value);
+        };
+    }
+    return {
+        get,
+        set,
+        configurable: descriptor.configurable,
+        enumerable: descriptor.enumerable,
+    };
+}
+//# sourceMappingURL=bound.js.map

package/decorators/bound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bound.js","sourceRoot":"","sources":["bound.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAyCH,MAAM,UACN,KAAK,CACD,MAAS,EAAE,WAAc,EAAE,gBAA6C;IAE1E,MAAM,UAAU,GAA+B,gBAAgB,IAAI;QACjE,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,QAAQ,EAAE,IAAI;KACf,CAAC;IAEF,MAAM,mBAAmB,GAAG,IAAI,OAAO,EAAa,CAAC;IACrD,IAAI,GAAgD,CAAC;IACrD,IAAI,GAAgD,CAAC;IAErD,IAAI,UAAU,CAAC,GAAG,IAAI,UAAU,CAAC,QAAQ,EAAE;QACzC,GAAG,GAAG;YACJ,MAAM,IAAI,GAAG,IAAS,CAAC,CAAE,iCAAiC;YAC1D,IAAI,UAAU,CAAC,GAAG,EAAE;gBAClB,oDAAoD;gBACpD,MAAM,MAAM,GAAG,UAAU,CAAC,GAAG,CAAC;gBAC9B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAChC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACzB;YAED,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAClC,MAAM,KAAK,GACP,CAAC,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAM,CAAC,EAAE,IAAI,CAAC,IAAI,CAAM,CAAC;gBAClE,mBAAmB,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBACrC,OAAO,KAAK,CAAC;aACd;YAED,OAAO,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAE,CAAC;QACxC,CAAC,CAAC;KACH;IAED,IAAI,UAAU,CAAC,GAAG,IAAI,UAAU,CAAC,QAAQ,EAAE;QACzC,GAAG,GAAG,UAAkB,KAAQ;YAC9B,MAAM,IAAI,GAAG,IAAS,CAAC,CAAE,iCAAiC;YAC1D,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,UAAU,CAAC,GAAG,EAAE;gBAClB,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;aAClC;YAED,mBAAmB,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACvC,CAAC,CAAC;KACH;IAED,OAAO;QACL,GAAG;QACH,GAAG;QACH,YAAY,EAAE,UAAU,CAAC,YAAY;QACrC,UAAU,EAAE,UAAU,CAAC,UAAU;KAClC,CAAC;AACJ,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {FunctionKeys} from '@material/web/types/keys.js';\n\n/**\n * Binds a class's method to its instance.\n *\n * @example\n * class MyClass {\n *   \\@bound\n *   foo() { return this; }\n * }\n *\n * const instance = new MyClass();\n * const reference = instance.foo;\n * foo(); // MyClass\n *\n * @category Decorator\n * @ExportDecoratedItems\n */\nexport function bound<V extends Function>(\n    target: object, propertyKey: string|symbol,\n    methodDescriptor: TypedPropertyDescriptor<V>): TypedPropertyDescriptor<V>;\n/**\n * Binds a class's function property to its instance.\n *\n * @example\n * class MyClass {\n *   \\@bound\n *   foo = function(this: MyClass) { return this; }\n * }\n *\n * const instance = new MyClass();\n * const reference = instance.foo;\n * foo(); // MyClass\n *\n * @category Decorator\n * @ExportDecoratedItems\n */\nexport function bound<T extends object>(\n    target: T, propertyKey: FunctionKeys<T>): any;\nexport function\nbound<T extends object, K extends FunctionKeys<T>, V extends T[K]&Function>(\n    target: T, propertyKey: K, methodDescriptor?: TypedPropertyDescriptor<V>):\n    TypedPropertyDescriptor<V> {\n  const descriptor: TypedPropertyDescriptor<V> = methodDescriptor || {\n    configurable: true,\n    enumerable: true,\n    writable: true,\n  };\n\n  const memoizedBoundValues = new WeakMap<object, V>();\n  let get: TypedPropertyDescriptor<V>['get']|undefined;\n  let set: TypedPropertyDescriptor<V>['set']|undefined;\n\n  if (descriptor.get || descriptor.writable) {\n    get = function(this: T): V {\n      const self = this as T;  // Needed for closure conformance\n      if (descriptor.get) {\n        // Separate variables needed for closure conformance\n        const getter = descriptor.get;\n        const value = getter.call(self);\n        return value.bind(self);\n      }\n\n      if (!memoizedBoundValues.has(self)) {\n        const bound =\n            (descriptor.value || self[propertyKey] as V)?.bind(self) as V;\n        memoizedBoundValues.set(self, bound);\n        return bound;\n      }\n\n      return memoizedBoundValues.get(self)!;\n    };\n  }\n\n  if (descriptor.set || descriptor.writable) {\n    set = function(this: T, value: V) {\n      const self = this as T;  // Needed for closure conformance\n      value = value.bind(self);\n      if (descriptor.set) {\n        descriptor.set.call(self, value);\n      }\n\n      memoizedBoundValues.set(self, value);\n    };\n  }\n\n  return {\n    get,\n    set,\n    configurable: descriptor.configurable,\n    enumerable: descriptor.enumerable,\n  };\n}\n"]}

package/elevation/lib/_elevation-overlay-theme.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2021 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';
+
+$transparent-theme: (
+  overlay-opacity: 0,
+  surface-tint-layer-color: transparent,
+);
+
+@mixin theme-styles($theme) {
+  @include _overlay-color(map.get($theme, surface-tint-layer-color));
+  @include _overlay-opacity(map.get($theme, overlay-opacity));
+}
+
+@mixin _overlay-color($color) {
+  .md3-elevation-overlay {
+    background-color: $color;
+  }
+}
+
+@mixin _overlay-opacity($opacity) {
+  .md3-elevation-overlay {
+    opacity: $opacity;
+  }
+}

package/elevation/lib/_elevation-overlay.scss

@@ -0,0 +1,18 @@
+//
+// Copyright 2021 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() {
+  .md3-elevation-overlay {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: -2;
+  }
+}

package/elevation/lib/_elevation-theme.scss

@@ -0,0 +1,88 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use 'sass:meta';
+@use '@material/web/sass/theme';
+@use '@material/web/sass/var';
+@use './elevation-overlay-theme';
+
+@function resolve-theme(
+  $theme,
+  $resolver,
+  $shadow-color-token,
+  $elevation-tokens
+) {
+  @if $resolver == null {
+    @return $theme;
+  }
+
+  $shadow-color: map.get($theme, $shadow-color-token);
+
+  // Resolve the value for each state key.
+  @each $token in $elevation-tokens {
+    $value: map.get($theme, $token);
+    $elevation-theme: meta.call(
+      $resolver,
+      $elevation: $value,
+      $shadow-color: $shadow-color
+    );
+
+    @each $resolved-token, $resolved-value in $elevation-theme {
+      $theme: map.set($theme, #{$token}-#{$resolved-token}, $resolved-value);
+    }
+
+    // clean up unused elevation token
+    $theme: map.remove($theme, $token);
+  }
+
+  // clean up unused shadow color token
+  $theme: map.remove($theme, $shadow-color-token);
+
+  @return $theme;
+}
+
+/// Represents the configurable values of the elevation theme.
+$_flat-theme: map.merge(
+  elevation-overlay-theme.$transparent-theme,
+  (
+    shadow: none,
+  )
+);
+
+/// Applies the given theme styles.
+///
+/// @param {Map} $theme - @see $_flat-theme for accepted theme properties.
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme-styles(
+    $_flat-theme,
+    $theme,
+    $require-all: false
+  );
+
+  @include _box-shadow(map.get($theme, shadow));
+  @include elevation-overlay-theme.theme-styles($theme);
+}
+
+/// Sets the box shadow of the element.
+///
+/// @param {String} $box-shadow - The shadow to apply to the element.
+@mixin _box-shadow($box-shadow) {
+  @if var.is-var($box-shadow) {
+    // TODO(b/185188458): Set box-shadow directly once resolved
+    $fallback: var.deep-fallback($box-shadow);
+
+    // var(--<box-shadow-prop>, var(--elevation-box-shadow-for-gss))
+    $gss-custom-prop: var.deep-set-fallback(
+      $box-shadow,
+      var.create(elevation-box-shadow-for-gss)
+    );
+    #{var.create-name(elevation-box-shadow-for-gss)}: $fallback;
+
+    box-shadow: $gss-custom-prop;
+  } @else {
+    box-shadow: $box-shadow;
+  }
+}

package/elevation/lib/_surface.scss

@@ -0,0 +1,18 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// TODO(b/228217731): Remove MDC/MWC dependencies
+@use '@material/web/compat/theme/css';
+
+$duration: 280ms;
+$easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+@mixin root-static-styles() {
+  position: relative;
+  transition: border #{$duration} #{$easing}, box-shadow #{$duration} #{$easing};
+  // used for interacting with overlays
+  z-index: 0;
+  @include css.declaration(--mdc-ripple-z-index, -1);
+}

package/elevation/lib/elevation-overlay-styles.css.d.ts

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

package/elevation/lib/elevation-overlay-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 `.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}/*# sourceMappingURL=elevation-overlay-styles.css.map */
+`;
+//# sourceMappingURL=elevation-overlay-styles.css.js.map

package/elevation/lib/elevation-overlay-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation-overlay-styles.css.js","sourceRoot":"","sources":["elevation-overlay-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`.md3-elevation-overlay{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);z-index:-2}/*# sourceMappingURL=elevation-overlay-styles.css.map */\n`;\n "]}

package/elevation/lib/elevation-overlay-styles.scss

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@use './elevation-overlay';
+
+@include elevation-overlay.static-styles;

package/fab/_fab-extended.scss

@@ -0,0 +1,11 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/fab-extended-theme' show
+  primary-theme,
+  secondary-theme,
+  tertiary-theme,
+  branded-theme,
+  theme;

package/fab/_fab.scss

@@ -0,0 +1,20 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/fab-theme' show
+  primary-small-theme,
+  primary-theme,
+  primary-large-theme,
+  secondary-small-theme,
+  secondary-theme,
+  secondary-large-theme,
+  tertiary-small-theme,
+  tertiary-theme,
+  tertiary-large-theme,
+  surface-small-theme,
+  surface-large-theme,
+  branded-theme,
+  branded-large-theme,
+  theme;

package/fab/fab-extended.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/icon/icon.js';
+import { TemplateResult } from 'lit';
+import { FabExtended } from './lib/fab-extended.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-fab-extended': MdFabExtended;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFabExtended extends FabExtended {
+    static styles: import("lit").CSSResult[];
+    /** @soyTemplate */
+    protected renderIcon(icon: string): TemplateResult | string;
+}

package/fab/fab-extended.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles as overlayStyles } from '../elevation/lib/elevation-overlay-styles.css.js';
+import { FabExtended } from './lib/fab-extended.js';
+import { styles as extendedStyles } from './lib/fab-extended-styles.css.js';
+import { styles as sharedStyles } from './lib/fab-shared-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdFabExtended = class MdFabExtended extends FabExtended {
+    /** @soyTemplate */
+    renderIcon(icon) {
+        return icon ? html `<md-icon class="md3-fab__icon">${icon}</md-icon>` : '';
+    }
+};
+MdFabExtended.styles = [overlayStyles, sharedStyles, extendedStyles];
+MdFabExtended = __decorate([
+    customElement('md-fab-extended')
+], MdFabExtended);
+export { MdFabExtended };
+//# sourceMappingURL=fab-extended.js.map

package/fab/fab-extended.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-extended.js","sourceRoot":"","sources":["fab-extended.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,aAAa,EAAC,MAAM,kDAAkD,CAAC;AAEzF,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,gCAAgC,CAAC;AAQtE;;;;GAIG;AAEH,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,WAAW;IAG5C,mBAAmB;IACA,UAAU,CAAC,IAAY;QACxC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,CAAC;CACF,CAAA;AANiB,oBAAM,GAAG,CAAC,aAAa,EAAE,YAAY,EAAE,cAAc,CAAE,CAAA;AAD5D,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAOzB;SAPY,aAAa","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as overlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';\n\nimport {FabExtended} from './lib/fab-extended.js';\nimport {styles as extendedStyles} from './lib/fab-extended-styles.css.js';\nimport {styles as sharedStyles} from './lib/fab-shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab-extended': MdFabExtended;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab-extended')\nexport class MdFabExtended extends FabExtended {\n  static override styles = [overlayStyles, sharedStyles, extendedStyles];\n\n  /** @soyTemplate */\n  protected override renderIcon(icon: string): TemplateResult|string {\n    return icon ? html`<md-icon class=\"md3-fab__icon\">${icon}</md-icon>` : '';\n  }\n}\n"]}

package/fab/fab.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '@material/web/icon/icon.js';
+import { TemplateResult } from 'lit';
+import { Fab } from './lib/fab.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-fab': MdFab;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFab extends Fab {
+    static styles: import("lit").CSSResult[];
+    /** @soyTemplate */
+    protected renderIcon(icon: string): TemplateResult | string;
+}

package/fab/fab.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles as overlayStyles } from '../elevation/lib/elevation-overlay-styles.css.js';
+import { Fab } from './lib/fab.js';
+import { styles as sharedStyles } from './lib/fab-shared-styles.css.js';
+import { styles as fabStyles } from './lib/fab-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdFab = class MdFab extends Fab {
+    /** @soyTemplate */
+    renderIcon(icon) {
+        return icon ? html `<md-icon class="md3-fab__icon">${icon}</md-icon>` : '';
+    }
+};
+MdFab.styles = [overlayStyles, sharedStyles, fabStyles];
+MdFab = __decorate([
+    customElement('md-fab')
+], MdFab);
+export { MdFab };
+//# sourceMappingURL=fab.js.map

package/fab/fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,aAAa,EAAC,MAAM,kDAAkD,CAAC;AAEzF,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAC;AACjC,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAQ5D;;;;GAIG;AAEH,IAAa,KAAK,GAAlB,MAAa,KAAM,SAAQ,GAAG;IAG5B,mBAAmB;IACA,UAAU,CAAC,IAAY;QACxC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,CAAC;CACF,CAAA;AANiB,YAAM,GAAG,CAAC,aAAa,EAAE,YAAY,EAAE,SAAS,CAAE,CAAA;AADvD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAOjB;SAPY,KAAK","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/icon/icon.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as overlayStyles} from '../elevation/lib/elevation-overlay-styles.css.js';\n\nimport {Fab} from './lib/fab.js';\nimport {styles as sharedStyles} from './lib/fab-shared-styles.css.js';\nimport {styles as fabStyles} from './lib/fab-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab': MdFab;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab')\nexport class MdFab extends Fab {\n  static override styles = [overlayStyles, sharedStyles, fabStyles];\n\n  /** @soyTemplate */\n  protected override renderIcon(icon: string): TemplateResult|string {\n    return icon ? html`<md-icon class=\"md3-fab__icon\">${icon}</md-icon>` : '';\n  }\n}\n"]}

package/fab/harness.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+import { Fab } from './lib/fab.js';
+import { FabExtended } from './lib/fab-extended.js';
+/**
+ * Test harness for floating action buttons.
+ */
+export declare class FabHarness extends Harness<Fab | FabExtended> {
+    getInteractiveElement(): Promise<HTMLButtonElement>;
+}

package/fab/harness.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+/**
+ * Test harness for floating action buttons.
+ */
+export class FabHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('.md3-fab');
+    }
+}
+//# sourceMappingURL=harness.js.map

package/fab/harness.js.map

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

package/fab/lib/_fab-extended-theme.scss

@@ -0,0 +1,108 @@
+//
+// Copyright 2021 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/resolvers';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+@use './fab-shared-theme';
+
+$surface-theme: tokens.md-comp-extended-fab-surface-values();
+
+@mixin primary-theme() {
+  $primary-theme: tokens.md-comp-extended-fab-primary-values();
+  @include theme($primary-theme);
+}
+
+@mixin secondary-theme() {
+  $secondary-theme: tokens.md-comp-extended-fab-secondary-values();
+  @include theme($secondary-theme);
+}
+
+@mixin tertiary-theme() {
+  $tertiary-theme: tokens.md-comp-extended-fab-tertiary-values();
+  @include theme($tertiary-theme);
+}
+
+@mixin branded-theme() {
+  $branded-theme: tokens.md-comp-extended-fab-branded-values();
+  @include theme($branded-theme);
+}
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($surface-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, fab-extended);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme-styles($surface-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, fab-extended);
+
+  @include fab-shared-theme.theme-styles($theme);
+
+  height: map.get($theme, container-height);
+
+  @include _label-color(
+    (
+      default: map.get($theme, label-text-color),
+      focus: map.get($theme, focus-label-text-color),
+      hover: map.get($theme, hover-label-text-color),
+      pressed: map.get($theme, pressed-label-text-color),
+    )
+  );
+
+  @include _label-typography(
+    (
+      font: map.get($theme, label-text-font),
+      line-height: map.get($theme, label-text-line-height),
+      size: map.get($theme, label-text-size),
+      weight: map.get($theme, label-text-weight),
+      tracking: map.get($theme, label-text-tracking),
+    )
+  );
+}
+
+@function _resolve-theme($theme, $resolvers) {
+  @return fab-shared-theme.resolve-theme($theme, $resolvers);
+}
+
+@mixin _label-color($color-or-map) {
+  &:enabled {
+    @include _set-label-color(map.get($color-or-map, default));
+  }
+
+  &:hover {
+    @include _set-label-color(map.get($color-or-map, hover));
+  }
+
+  &:focus {
+    @include _set-label-color(map.get($color-or-map, focus));
+  }
+
+  &:active {
+    @include _set-label-color(map.get($color-or-map, pressed));
+  }
+}
+
+@mixin _set-label-color($color) {
+  .md3-fab__label {
+    color: $color;
+  }
+}
+
+@mixin _label-typography($typography-map) {
+  font-family: map.get($typography-map, font);
+  line-height: map.get($typography-map, line-height);
+  font-size: map.get($typography-map, size);
+  font-weight: map.get($typography-map, weight);
+  letter-spacing: map.get($typography-map, tracking);
+}

package/fab/lib/_fab-extended.scss

@@ -0,0 +1,39 @@
+//
+// 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() {
+  .md3-fab--extended {
+    @include root;
+
+    .md3-fab__label {
+      @include label;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .md3-fab--extended {
+      @include high-contrast-styles;
+    }
+  }
+}
+
+@mixin root() {
+  box-sizing: border-box;
+  padding-inline-start: 16px;
+  padding-inline-end: 20px;
+}
+
+@mixin label() {
+  padding-inline-start: 12px;
+}
+
+@mixin high-contrast-styles() {
+  // Adjust the padding-inline to account for the 1px border in HCM.
+  padding-inline-start: 15px;
+  padding-inline-end: 19px;
+}