@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

package/focus/lib/focus-ring.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,qBAAqB;AACrB,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QAC6B,YAAO,GAAG,KAAK,CAAC;IAc7C,CAAC;IAZC,mBAAmB;IACA,MAAM;QACvB,OAAO,IAAI,CAAA,+BACP,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,WAAW,CAAC;IACnD,CAAC;IAED,mBAAmB;IACT,gBAAgB;QACxB,OAAO;YACL,yBAAyB,EAAE,IAAI,CAAC,OAAO;SACxC,CAAC;IACJ,CAAC;CACF;AAd4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;0CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/** @soyCompatible */\nexport class FocusRing extends LitElement {\n  @property({type: Boolean}) visible = false;\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<span class=\"md3-focus-ring ${\n        classMap(this.getRenderClasses())}\"></span>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-focus-ring--visible': this.visible,\n    };\n  }\n}\n"]}
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;IAY7C,CAAC;IAVoB,MAAM;QACvB,OAAO,IAAI,CAAA,+BACP,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,WAAW,CAAC;IACnD,CAAC;IAES,gBAAgB;QACxB,OAAO;YACL,yBAAyB,EAAE,IAAI,CAAC,OAAO;SACxC,CAAC;IACJ,CAAC;CACF;AAZ4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;0CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/**\n * @summary An accessible, themable ring designed to be shown on\n * `:focus-visible`.\n *\n * @description\n * An accessible, themable ring designed to be shown on focus-visible.\n * Focus ring is designed to be controlled by the `strong-focus` module in the\n * same package.\n *\n * In most cases, `visible` should be set to\n * `shouldShowStrongFocus()` on `focus` and `pointerdown` (see `pointerPress()`\n * documentation in the `strong-focus` module), and `false` on `blur`.\n */\nexport class FocusRing extends LitElement {\n  /**\n   * Makes the focus ring visible.\n   */\n  @property({type: Boolean}) visible = false;\n\n  protected override render(): TemplateResult {\n    return html`<span class=\"md3-focus-ring ${\n        classMap(this.getRenderClasses())}\"></span>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-focus-ring--visible': this.visible,\n    };\n  }\n}\n"]}

package/focus/strong-focus.d.ts

@@ -27,6 +27,8 @@ export declare function shouldShowStrongFocus(): boolean;
  * Control if strong focus should always be shown on component focus
  *
  * Defaults to `false`
+ *
+ * @param force Forces strong focus on the page. Disables strong focus if false.
  */
 export declare function setForceStrongFocus(force: boolean): void;
 /**

package/focus/strong-focus.js

@@ -20,11 +20,11 @@ let focusObject = new FocusGlobal();
  * Set of keyboard event codes that correspond to keyboard navigation
  */
 const KEYBOARD_NAVIGATION_KEYS = new Set(['Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);
-const KEYDOWN_HANDLER = (e) => {
+function keydownHandler(e) {
     if (KEYBOARD_NAVIGATION_KEYS.has(e.key)) {
         focusObject.setVisible(true);
     }
-};
+}
 /**
  * Set up integration with alternate global focus tracking object
  *
@@ -36,10 +36,10 @@ const KEYDOWN_HANDLER = (e) => {
 export function setup(focusGlobal, enableKeydownHandler = false) {
     focusObject = focusGlobal;
     if (enableKeydownHandler) {
-        window.addEventListener('keydown', KEYDOWN_HANDLER);
+        window.addEventListener('keydown', keydownHandler);
     }
     else {
-        window.removeEventListener('keydown', KEYDOWN_HANDLER);
+        window.removeEventListener('keydown', keydownHandler);
     }
 }
 /**
@@ -61,6 +61,8 @@ export function shouldShowStrongFocus() {
  * Control if strong focus should always be shown on component focus
  *
  * Defaults to `false`
+ *
+ * @param force Forces strong focus on the page. Disables strong focus if false.
  */
 export function setForceStrongFocus(force) {
     alwaysStrong = force;

package/focus/strong-focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"strong-focus.js","sourceRoot":"","sources":["strong-focus.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,WAAW;IAAjB;QACE,YAAO,GAAG,KAAK,CAAC;IAIlB,CAAC;IAHC,UAAU,CAAC,OAAgB;QACzB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;CACF;AAED;;;GAGG;AACH,IAAI,WAAW,GAAgB,IAAI,WAAW,EAAE,CAAC;AAEjD;;GAEG;AACH,MAAM,wBAAwB,GAC1B,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AAExE,MAAM,eAAe,GAAG,CAAC,CAAgB,EAAE,EAAE;IAC3C,IAAI,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QACvC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;KAC9B;AACH,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,WAAwB,EAAE,oBAAoB,GAAG,KAAK;IAC1E,WAAW,GAAG,WAAW,CAAC;IAC1B,IAAI,oBAAoB,EAAE;QACxB,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;KACrD;SAAM;QACL,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;KACxD;AACH,CAAC;AAED;;;;GAIG;AACH,IAAI,YAAY,GAAG,KAAK,CAAC;AAEzB;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,YAAY,IAAI,WAAW,CAAC,OAAO,CAAC;AAC7C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAc;IAChD,YAAY,GAAG,KAAK,CAAC;AACvB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO,YAAY,CAAC;AACtB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY;IAC1B,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC;AAED,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\ninterface StrongFocus {\n  visible: boolean;\n  setVisible(visible: boolean): void;\n}\n\nclass FocusGlobal implements StrongFocus {\n  visible = false;\n  setVisible(visible: boolean) {\n    this.visible = visible;\n  }\n}\n\n/**\n * This object can be overwritten by the `setup()` function to use a different\n * focus coordination object.\n */\nlet focusObject: StrongFocus = new FocusGlobal();\n\n/**\n * Set of keyboard event codes that correspond to keyboard navigation\n */\nconst KEYBOARD_NAVIGATION_KEYS =\n    new Set(['Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);\n\nconst KEYDOWN_HANDLER = (e: KeyboardEvent) => {\n  if (KEYBOARD_NAVIGATION_KEYS.has(e.key)) {\n    focusObject.setVisible(true);\n  }\n};\n\n/**\n * Set up integration with alternate global focus tracking object\n *\n * @param focusGlobal A global focus object to coordinate between multiple\n *     systems\n * @param enableKeydownHandler Set to true to let StrongFocusService listen for\n *     keyboard navigation\n */\nexport function setup(focusGlobal: StrongFocus, enableKeydownHandler = false) {\n  focusObject = focusGlobal;\n  if (enableKeydownHandler) {\n    window.addEventListener('keydown', KEYDOWN_HANDLER);\n  } else {\n    window.removeEventListener('keydown', KEYDOWN_HANDLER);\n  }\n}\n\n/**\n * Setting for always showing strong focus\n *\n * Defaults to false, controlled by `setForceStrongFocus`\n */\nlet alwaysStrong = false;\n\n/**\n * Returns `true` if the component should show strong focus.\n *\n * By default, strong focus is shown only on keyboard navigation, and not on\n * pointer interaction.\n */\nexport function shouldShowStrongFocus() {\n  return alwaysStrong || focusObject.visible;\n}\n\n/**\n * Control if strong focus should always be shown on component focus\n *\n * Defaults to `false`\n */\nexport function setForceStrongFocus(force: boolean) {\n  alwaysStrong = force;\n}\n\n/**\n * If `true`, strong focus is always shown\n */\nexport function isStrongFocusForced() {\n  return alwaysStrong;\n}\n\n/**\n * Components should call this when a user interacts with a component with a\n * pointing device.\n *\n * By default, this will prevent the strong focus from being shown.\n */\nexport function pointerPress() {\n  focusObject.setVisible(false);\n}\n\nsetup(focusObject, true);"]}
+{"version":3,"file":"strong-focus.js","sourceRoot":"","sources":["strong-focus.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,WAAW;IAAjB;QACE,YAAO,GAAG,KAAK,CAAC;IAIlB,CAAC;IAHC,UAAU,CAAC,OAAgB;QACzB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;CACF;AAED;;;GAGG;AACH,IAAI,WAAW,GAAgB,IAAI,WAAW,EAAE,CAAC;AAEjD;;GAEG;AACH,MAAM,wBAAwB,GAC1B,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AAExE,SAAS,cAAc,CAAC,CAAgB;IACtC,IAAI,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QACvC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;KAC9B;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,WAAwB,EAAE,oBAAoB,GAAG,KAAK;IAC1E,WAAW,GAAG,WAAW,CAAC;IAC1B,IAAI,oBAAoB,EAAE;QACxB,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;KACpD;SAAM;QACL,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;KACvD;AACH,CAAC;AAED;;;;GAIG;AACH,IAAI,YAAY,GAAG,KAAK,CAAC;AAEzB;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,YAAY,IAAI,WAAW,CAAC,OAAO,CAAC;AAC7C,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAc;IAChD,YAAY,GAAG,KAAK,CAAC;AACvB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO,YAAY,CAAC;AACtB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY;IAC1B,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC;AAED,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\ninterface StrongFocus {\n  visible: boolean;\n  setVisible(visible: boolean): void;\n}\n\nclass FocusGlobal implements StrongFocus {\n  visible = false;\n  setVisible(visible: boolean) {\n    this.visible = visible;\n  }\n}\n\n/**\n * This object can be overwritten by the `setup()` function to use a different\n * focus coordination object.\n */\nlet focusObject: StrongFocus = new FocusGlobal();\n\n/**\n * Set of keyboard event codes that correspond to keyboard navigation\n */\nconst KEYBOARD_NAVIGATION_KEYS =\n    new Set(['Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);\n\nfunction keydownHandler(e: KeyboardEvent) {\n  if (KEYBOARD_NAVIGATION_KEYS.has(e.key)) {\n    focusObject.setVisible(true);\n  }\n}\n\n/**\n * Set up integration with alternate global focus tracking object\n *\n * @param focusGlobal A global focus object to coordinate between multiple\n *     systems\n * @param enableKeydownHandler Set to true to let StrongFocusService listen for\n *     keyboard navigation\n */\nexport function setup(focusGlobal: StrongFocus, enableKeydownHandler = false) {\n  focusObject = focusGlobal;\n  if (enableKeydownHandler) {\n    window.addEventListener('keydown', keydownHandler);\n  } else {\n    window.removeEventListener('keydown', keydownHandler);\n  }\n}\n\n/**\n * Setting for always showing strong focus\n *\n * Defaults to false, controlled by `setForceStrongFocus`\n */\nlet alwaysStrong = false;\n\n/**\n * Returns `true` if the component should show strong focus.\n *\n * By default, strong focus is shown only on keyboard navigation, and not on\n * pointer interaction.\n */\nexport function shouldShowStrongFocus() {\n  return alwaysStrong || focusObject.visible;\n}\n\n/**\n * Control if strong focus should always be shown on component focus\n *\n * Defaults to `false`\n *\n * @param force Forces strong focus on the page. Disables strong focus if false.\n */\nexport function setForceStrongFocus(force: boolean) {\n  alwaysStrong = force;\n}\n\n/**\n * If `true`, strong focus is always shown\n */\nexport function isStrongFocusForced() {\n  return alwaysStrong;\n}\n\n/**\n * Components should call this when a user interacts with a component with a\n * pointing device.\n *\n * By default, this will prevent the strong focus from being shown.\n */\nexport function pointerPress() {\n  focusObject.setVisible(false);\n}\n\nsetup(focusObject, true);"]}

package/icon/_icon.scss

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

package/icon/lib/_icon.scss

@@ -0,0 +1,54 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use '../../sass/theme';
+@use './md-comp-icon';
+
+$_custom-property-prefix: 'icon';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(md-comp-icon.values(), $tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: md-comp-icon.values();
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    display: inline-flex;
+    color: var(--_color);
+    font-family: var(--_font);
+    font-weight: var(--_weight);
+    font-style: normal;
+    font-size: var(--_size);
+    font-variation-settings: var(--_font-varation-settings);
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  span ::slotted(svg) {
+    fill: currentColor;
+    height: var(--_size);
+    width: var(--_size);
+  }
+}

package/icon/lib/_md-comp-icon.scss

@@ -0,0 +1,19 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@function values($exclude-hardcoded-values: false) {
+  $values: (
+    (
+      color: if($exclude-hardcoded-values, null, inherit),
+      // TODO(b/225384738): Change to 'Material Symbols Outlined'
+      font: if($exclude-hardcoded-values, null, 'Material Icons'),
+      font-variation-settings: if($exclude-hardcoded-values, null, inherit),
+      size: if($exclude-hardcoded-values, null, 24px),
+      weight: if($exclude-hardcoded-values, null, 400),
+    )
+  );
+
+  @return $values;
+}

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

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}/*# sourceMappingURL=icon-styles.css.map */
+export const styles = css `:host{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, "Material Icons");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-varation-settings);line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor;height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */
 `;
 //# sourceMappingURL=icon-styles.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"icon-styles.css.js","sourceRoot":"","sources":["icon-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{font-family:\"Material Icons\";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}/*# sourceMappingURL=icon-styles.css.map */\n`;\n "]}
+{"version":3,"file":"icon-styles.css.js","sourceRoot":"","sources":["icon-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{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, \"Material Icons\");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-varation-settings);line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor;height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */\n`;\n "]}

package/icon/lib/icon-styles.scss

@@ -3,23 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-:host {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
+@use './icon';
 
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-}
+@include icon.styles;

package/iconbutton/_filled-icon-button.scss

@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/filled-icon-button-theme' show
-  theme;
+@forward './lib/filled-icon-button' show theme;

package/iconbutton/_filled-tonal-icon-button.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/filled-tonal-icon-button' show theme;

package/iconbutton/_outlined-icon-button.scss

@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/outlined-icon-button-theme' show
-  theme;
+@forward './lib/outlined-icon-button' show theme;

package/iconbutton/_standard-icon-button.scss

@@ -3,5 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/standard-icon-button-theme' show
-  theme;
+@forward './lib/standard-icon-button' show theme;

package/iconbutton/filled-icon-button-toggle.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '@material/web/icon/icon.js';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { IconButtonToggle } from './lib/icon-button-toggle.js';
 declare global {
@@ -11,9 +10,22 @@ declare global {
         'md-filled-icon-button-toggle': MdFilledIconButtonToggle;
     }
 }
-/** @soyCompatible */
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap. This variant can toggle between icons.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 export declare class MdFilledIconButtonToggle extends IconButtonToggle {
     static styles: import("lit").CSSResult[];
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
 }

package/iconbutton/filled-icon-button-toggle.js

@@ -4,14 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './lib/filled-styles.css.js';
-import { styles as sharedStyles } from './lib/icon-button-styles.css.js';
 import { IconButtonToggle } from './lib/icon-button-toggle.js';
-/** @soyCompatible */
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap. This variant can toggle between icons.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 let MdFilledIconButtonToggle = class MdFilledIconButtonToggle extends IconButtonToggle {
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),

package/iconbutton/filled-icon-button-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-icon-button-toggle.js","sourceRoot":"","sources":["filled-icon-button-toggle.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAQ7D,qBAAqB;AAErB,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,gBAAgB;IAG5D,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,yBAAyB,EAAE,IAAI;YAC/B,gCAAgC,EAAE,IAAI;SACvC,CAAC;IACJ,CAAC;CACF,CAAA;AAViB,+BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,wBAAwB;IADpC,aAAa,CAAC,8BAA8B,CAAC;GACjC,wBAAwB,CAWpC;SAXY,wBAAwB","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 {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-styles.css.js';\nimport {styles as sharedStyles} from './lib/icon-button-styles.css.js';\nimport {IconButtonToggle} from './lib/icon-button-toggle.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-icon-button-toggle': MdFilledIconButtonToggle;\n  }\n}\n\n/** @soyCompatible */\n@customElement('md-filled-icon-button-toggle')\nexport class MdFilledIconButtonToggle extends IconButtonToggle {\n  static override styles = [sharedStyles, styles];\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled': true,\n      'md3-icon-button--toggle-filled': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"filled-icon-button-toggle.js","sourceRoot":"","sources":["filled-icon-button-toggle.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEH,IAAa,wBAAwB,GAArC,MAAa,wBAAyB,SAAQ,gBAAgB;IAGzC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,yBAAyB,EAAE,IAAI;YAC/B,gCAAgC,EAAE,IAAI;SACvC,CAAC;IACJ,CAAC;CACF,CAAA;AATiB,+BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,wBAAwB;IADpC,aAAa,CAAC,8BAA8B,CAAC;GACjC,wBAAwB,CAUpC;SAVY,wBAAwB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-styles.css.js';\nimport {IconButtonToggle} from './lib/icon-button-toggle.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-icon-button-toggle': MdFilledIconButtonToggle;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap. This variant can toggle between icons.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-icon-button-toggle')\nexport class MdFilledIconButtonToggle extends IconButtonToggle {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled': true,\n      'md3-icon-button--toggle-filled': true,\n    };\n  }\n}\n"]}

package/iconbutton/filled-icon-button.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '@material/web/icon/icon.js';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { IconButton } from './lib/icon-button.js';
 declare global {
@@ -11,9 +10,22 @@ declare global {
         'md-filled-icon-button': MdFilledIconButton;
     }
 }
-/** @soyCompatible */
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 export declare class MdFilledIconButton extends IconButton {
     static styles: import("lit").CSSResult[];
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
 }

package/iconbutton/filled-icon-button.js

@@ -4,14 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './lib/filled-styles.css.js';
 import { IconButton } from './lib/icon-button.js';
-import { styles as sharedStyles } from './lib/icon-button-styles.css.js';
-/** @soyCompatible */
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 let MdFilledIconButton = class MdFilledIconButton extends IconButton {
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),

package/iconbutton/filled-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-icon-button.js","sourceRoot":"","sources":["filled-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE,qBAAqB;AAErB,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,UAAU;IAGhD,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,yBAAyB,EAAE,IAAI;SAChC,CAAC;IACJ,CAAC;CACF,CAAA;AATiB,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAU9B;SAVY,kBAAkB","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 {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-styles.css.js';\nimport {IconButton} from './lib/icon-button.js';\nimport {styles as sharedStyles} from './lib/icon-button-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-icon-button': MdFilledIconButton;\n  }\n}\n\n/** @soyCompatible */\n@customElement('md-filled-icon-button')\nexport class MdFilledIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"filled-icon-button.js","sourceRoot":"","sources":["filled-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEH,IAAa,kBAAkB,GAA/B,MAAa,kBAAmB,SAAQ,UAAU;IAG7B,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,yBAAyB,EAAE,IAAI;SAChC,CAAC;IACJ,CAAC;CACF,CAAA;AARiB,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAS9B;SATY,kBAAkB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-styles.css.js';\nimport {IconButton} from './lib/icon-button.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-icon-button': MdFilledIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-icon-button')\nexport class MdFilledIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled': true,\n    };\n  }\n}\n"]}

package/iconbutton/filled-link-icon-button.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '@material/web/icon/icon.js';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { LinkIconButton } from './lib/link-icon-button.js';
 declare global {
@@ -11,9 +10,22 @@ declare global {
         'md-filled-link-icon-button': MdFilledLinkIconButton;
     }
 }
-/** @soyCompatible */
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap. This is a linkable variant.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 export declare class MdFilledLinkIconButton extends LinkIconButton {
     static styles: import("lit").CSSResult[];
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
 }

package/iconbutton/filled-link-icon-button.js

@@ -4,14 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './lib/filled-styles.css.js';
 import { LinkIconButton } from './lib/link-icon-button.js';
-import { styles as sharedStyles } from './lib/icon-button-styles.css.js';
-/** @soyCompatible */
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap. This is a linkable variant.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 let MdFilledLinkIconButton = class MdFilledLinkIconButton extends LinkIconButton {
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),

package/iconbutton/filled-link-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-link-icon-button.js","sourceRoot":"","sources":["filled-link-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE,qBAAqB;AAErB,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,cAAc;IAGxD,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,yBAAyB,EAAE,IAAI;SAChC,CAAC;IACJ,CAAC;CACF,CAAA;AATiB,6BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,sBAAsB;IADlC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,sBAAsB,CAUlC;SAVY,sBAAsB","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 {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-styles.css.js';\nimport {LinkIconButton} from './lib/link-icon-button.js';\nimport {styles as sharedStyles} from './lib/icon-button-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-link-icon-button': MdFilledLinkIconButton;\n  }\n}\n\n/** @soyCompatible */\n@customElement('md-filled-link-icon-button')\nexport class MdFilledLinkIconButton extends LinkIconButton {\n  static override styles = [sharedStyles, styles];\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"filled-link-icon-button.js","sourceRoot":"","sources":["filled-link-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEH,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,cAAc;IAGrC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,yBAAyB,EAAE,IAAI;SAChC,CAAC;IACJ,CAAC;CACF,CAAA;AARiB,6BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,sBAAsB;IADlC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,sBAAsB,CASlC;SATY,sBAAsB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-styles.css.js';\nimport {LinkIconButton} from './lib/link-icon-button.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-link-icon-button': MdFilledLinkIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap. This is a linkable variant.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-link-icon-button')\nexport class MdFilledLinkIconButton extends LinkIconButton {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled': true,\n    };\n  }\n}\n"]}

package/iconbutton/filled-tonal-icon-button-toggle.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '@material/web/icon/icon.js';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { IconButtonToggle } from './lib/icon-button-toggle.js';
 declare global {
@@ -11,9 +10,22 @@ declare global {
         'md-filled-tonal-icon-button-toggle': MdFilledTonalIconButtonToggle;
     }
 }
-/** @soyCompatible */
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap. This variant can toggle between icons.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 export declare class MdFilledTonalIconButtonToggle extends IconButtonToggle {
     static styles: import("lit").CSSResult[];
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
 }

package/iconbutton/filled-tonal-icon-button-toggle.js

@@ -4,14 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './lib/filled-tonal-styles.css.js';
-import { styles as sharedStyles } from './lib/icon-button-styles.css.js';
 import { IconButtonToggle } from './lib/icon-button-toggle.js';
-/** @soyCompatible */
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap. This variant can toggle between icons.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 let MdFilledTonalIconButtonToggle = class MdFilledTonalIconButtonToggle extends IconButtonToggle {
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),

package/iconbutton/filled-tonal-icon-button-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-tonal-icon-button-toggle.js","sourceRoot":"","sources":["filled-tonal-icon-button-toggle.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAQ7D,qBAAqB;AAErB,IAAa,6BAA6B,GAA1C,MAAa,6BAA8B,SAAQ,gBAAgB;IAGjE,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,+BAA+B,EAAE,IAAI;YACrC,sCAAsC,EAAE,IAAI;SAC7C,CAAC;IACJ,CAAC;CACF,CAAA;AAViB,oCAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,6BAA6B;IADzC,aAAa,CAAC,oCAAoC,CAAC;GACvC,6BAA6B,CAWzC;SAXY,6BAA6B","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 {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-tonal-styles.css.js';\nimport {styles as sharedStyles} from './lib/icon-button-styles.css.js';\nimport {IconButtonToggle} from './lib/icon-button-toggle.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-icon-button-toggle': MdFilledTonalIconButtonToggle;\n  }\n}\n\n/** @soyCompatible */\n@customElement('md-filled-tonal-icon-button-toggle')\nexport class MdFilledTonalIconButtonToggle extends IconButtonToggle {\n  static override styles = [sharedStyles, styles];\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled-tonal': true,\n      'md3-icon-button--toggle-filled-tonal': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"filled-tonal-icon-button-toggle.js","sourceRoot":"","sources":["filled-tonal-icon-button-toggle.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEH,IAAa,6BAA6B,GAA1C,MAAa,6BAA8B,SAAQ,gBAAgB;IAG9C,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,+BAA+B,EAAE,IAAI;YACrC,sCAAsC,EAAE,IAAI;SAC7C,CAAC;IACJ,CAAC;CACF,CAAA;AATiB,oCAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,6BAA6B;IADzC,aAAa,CAAC,oCAAoC,CAAC;GACvC,6BAA6B,CAUzC;SAVY,6BAA6B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-tonal-styles.css.js';\nimport {IconButtonToggle} from './lib/icon-button-toggle.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-icon-button-toggle': MdFilledTonalIconButtonToggle;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap. This variant can toggle between icons.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-tonal-icon-button-toggle')\nexport class MdFilledTonalIconButtonToggle extends IconButtonToggle {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled-tonal': true,\n      'md3-icon-button--toggle-filled-tonal': true,\n    };\n  }\n}\n"]}

package/iconbutton/filled-tonal-icon-button.d.ts

@@ -3,7 +3,6 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '@material/web/icon/icon.js';
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { IconButton } from './lib/icon-button.js';
 declare global {
@@ -11,9 +10,22 @@ declare global {
         'md-filled-tonal-icon-button': MdFilledTonalIconButton;
     }
 }
-/** @soyCompatible */
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 export declare class MdFilledTonalIconButton extends IconButton {
     static styles: import("lit").CSSResult[];
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
 }

package/iconbutton/filled-tonal-icon-button.js

@@ -4,14 +4,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '@material/web/icon/icon.js';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './lib/filled-tonal-styles.css.js';
 import { IconButton } from './lib/icon-button.js';
-import { styles as sharedStyles } from './lib/icon-button-styles.css.js';
-/** @soyCompatible */
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @summary Icon buttons help people take supplementary actions with a single
+ * tap.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence.
+ *
+ * __Rationale:__ The most compact and unobtrusive type of button, icon buttons
+ * are used for optional supplementary actions such as "Bookmark" or "Star."
+ *
+ * __Example usages:__
+ * - Add to Favorites
+ * - Print
+ */
 let MdFilledTonalIconButton = class MdFilledTonalIconButton extends IconButton {
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),

package/iconbutton/filled-tonal-icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-tonal-icon-button.js","sourceRoot":"","sources":["filled-tonal-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE,qBAAqB;AAErB,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,UAAU;IAGrD,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,+BAA+B,EAAE,IAAI;SACtC,CAAC;IACJ,CAAC;CACF,CAAA;AATiB,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CAUnC;SAVY,uBAAuB","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 {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-tonal-styles.css.js';\nimport {IconButton} from './lib/icon-button.js';\nimport {styles as sharedStyles} from './lib/icon-button-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-icon-button': MdFilledTonalIconButton;\n  }\n}\n\n/** @soyCompatible */\n@customElement('md-filled-tonal-icon-button')\nexport class MdFilledTonalIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled-tonal': true,\n    };\n  }\n}\n"]}
+{"version":3,"file":"filled-tonal-icon-button.js","sourceRoot":"","sources":["filled-tonal-icon-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;GAcG;AAEH,IAAa,uBAAuB,GAApC,MAAa,uBAAwB,SAAQ,UAAU;IAGlC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,+BAA+B,EAAE,IAAI;SACtC,CAAC;IACJ,CAAC;CACF,CAAA;AARiB,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAE,CAAA;AADrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CASnC;SATY,uBAAuB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {styles} from './lib/filled-tonal-styles.css.js';\nimport {IconButton} from './lib/icon-button.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-icon-button': MdFilledTonalIconButton;\n  }\n}\n\n/**\n * @summary Icon buttons help people take supplementary actions with a single\n * tap.\n *\n * @description\n * __Emphasis:__ Low emphasis – For optional or supplementary actions with the\n * least amount of prominence.\n *\n * __Rationale:__ The most compact and unobtrusive type of button, icon buttons\n * are used for optional supplementary actions such as \"Bookmark\" or \"Star.\"\n *\n * __Example usages:__\n * - Add to Favorites\n * - Print\n */\n@customElement('md-filled-tonal-icon-button')\nexport class MdFilledTonalIconButton extends IconButton {\n  static override styles = [sharedStyles, styles];\n\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-icon-button--filled-tonal': true,\n    };\n  }\n}\n"]}