@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/focus/internal/_focus-ring.scss

@@ -0,0 +1,135 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-focus-ring-supported-tokens,
+    ('shape-start-start', 'shape-start-end', 'shape-end-end', 'shape-end-start')
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-focus-ring-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-focus-ring-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --md-focus-ring-#{$token}: #{$value};
+    }
+
+    // Support logical shape properties
+    --md-focus-ring-shape-start-start: var(--md-focus-ring-shape);
+    --md-focus-ring-shape-start-end: var(--md-focus-ring-shape);
+    --md-focus-ring-shape-end-end: var(--md-focus-ring-shape);
+    --md-focus-ring-shape-end-start: var(--md-focus-ring-shape);
+
+    animation-delay: 0s, calc(var(--md-focus-ring-duration) * 0.25);
+    animation-duration: calc(var(--md-focus-ring-duration) * 0.25),
+      calc(var(--md-focus-ring-duration) * 0.75);
+    animation-timing-function: map.get($_md-sys-motion, 'easing-emphasized');
+    box-sizing: border-box;
+    color: var(--md-focus-ring-color);
+    display: none;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  :host([visible]) {
+    display: flex;
+  }
+
+  :host(:not([inward])) {
+    animation-name: outward-grow, outward-shrink;
+    border-end-end-radius: calc(
+      var(--md-focus-ring-shape-end-end) + var(--md-focus-ring-outward-offset)
+    );
+    border-end-start-radius: calc(
+      var(--md-focus-ring-shape-end-start) + var(--md-focus-ring-outward-offset)
+    );
+    border-start-end-radius: calc(
+      var(--md-focus-ring-shape-start-end) + var(--md-focus-ring-outward-offset)
+    );
+    border-start-start-radius: calc(
+      var(--md-focus-ring-shape-start-start) +
+        var(--md-focus-ring-outward-offset)
+    );
+    inset: calc(-1 * (var(--md-focus-ring-outward-offset)));
+    outline: var(--md-focus-ring-width) solid currentColor;
+  }
+
+  :host([inward]) {
+    animation-name: inward-grow, inward-shrink;
+    border-end-end-radius: calc(
+      var(--md-focus-ring-shape-end-end) - var(--md-focus-ring-inward-offset)
+    );
+    border-end-start-radius: calc(
+      var(--md-focus-ring-shape-end-start) - var(--md-focus-ring-inward-offset)
+    );
+    border-start-end-radius: calc(
+      var(--md-focus-ring-shape-start-end) - var(--md-focus-ring-inward-offset)
+    );
+    border-start-start-radius: calc(
+      var(--md-focus-ring-shape-start-start) -
+        var(--md-focus-ring-inward-offset)
+    );
+    border: var(--md-focus-ring-width) solid currentColor;
+    inset: var(--md-focus-ring-inward-offset);
+  }
+
+  @keyframes outward-grow {
+    from {
+      outline-width: 0;
+    }
+    to {
+      outline-width: var(--md-focus-ring-active-width);
+    }
+  }
+
+  @keyframes outward-shrink {
+    from {
+      outline-width: var(--md-focus-ring-active-width);
+    }
+  }
+
+  @keyframes inward-grow {
+    from {
+      border-width: 0;
+    }
+    to {
+      border-width: var(--md-focus-ring-active-width);
+    }
+  }
+
+  @keyframes inward-shrink {
+    from {
+      border-width: var(--md-focus-ring-active-width);
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    :host {
+      animation: none;
+    }
+  }
+}

package/focus/internal/focus-ring-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{--md-focus-ring-active-width: 8px;--md-focus-ring-color: var(--md-sys-color-secondary, #625b71);--md-focus-ring-duration: 600ms;--md-focus-ring-inward-offset: 0px;--md-focus-ring-outward-offset: 2px;--md-focus-ring-shape: 9999px;--md-focus-ring-width: 3px;--md-focus-ring-shape-start-start: var(--md-focus-ring-shape);--md-focus-ring-shape-start-end: var(--md-focus-ring-shape);--md-focus-ring-shape-end-end: var(--md-focus-ring-shape);--md-focus-ring-shape-end-start: var(--md-focus-ring-shape);animation-delay:0s,calc(var(--md-focus-ring-duration)*.25);animation-duration:calc(var(--md-focus-ring-duration)*.25),calc(var(--md-focus-ring-duration)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color);display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end) + var(--md-focus-ring-outward-offset));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start) + var(--md-focus-ring-outward-offset));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end) + var(--md-focus-ring-outward-offset));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start) + var(--md-focus-ring-outward-offset));inset:calc(-1*(var(--md-focus-ring-outward-offset)));outline:var(--md-focus-ring-width) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end) - var(--md-focus-ring-inward-offset));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start) - var(--md-focus-ring-inward-offset));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end) - var(--md-focus-ring-inward-offset));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start) - var(--md-focus-ring-inward-offset));border:var(--md-focus-ring-width) solid currentColor;inset:var(--md-focus-ring-inward-offset)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width)}}@media(prefers-reduced-motion){:host{animation:none}}/*# sourceMappingURL=focus-ring-styles.css.map */
+`;
+//# sourceMappingURL=focus-ring-styles.css.js.map

package/focus/internal/focus-ring-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring-styles.css.js","sourceRoot":"","sources":["focus-ring-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{--md-focus-ring-active-width: 8px;--md-focus-ring-color: var(--md-sys-color-secondary, #625b71);--md-focus-ring-duration: 600ms;--md-focus-ring-inward-offset: 0px;--md-focus-ring-outward-offset: 2px;--md-focus-ring-shape: 9999px;--md-focus-ring-width: 3px;--md-focus-ring-shape-start-start: var(--md-focus-ring-shape);--md-focus-ring-shape-start-end: var(--md-focus-ring-shape);--md-focus-ring-shape-end-end: var(--md-focus-ring-shape);--md-focus-ring-shape-end-start: var(--md-focus-ring-shape);animation-delay:0s,calc(var(--md-focus-ring-duration)*.25);animation-duration:calc(var(--md-focus-ring-duration)*.25),calc(var(--md-focus-ring-duration)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color);display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end) + var(--md-focus-ring-outward-offset));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start) + var(--md-focus-ring-outward-offset));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end) + var(--md-focus-ring-outward-offset));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start) + var(--md-focus-ring-outward-offset));inset:calc(-1*(var(--md-focus-ring-outward-offset)));outline:var(--md-focus-ring-width) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end) - var(--md-focus-ring-inward-offset));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start) - var(--md-focus-ring-inward-offset));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end) - var(--md-focus-ring-inward-offset));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start) - var(--md-focus-ring-inward-offset));border:var(--md-focus-ring-width) solid currentColor;inset:var(--md-focus-ring-inward-offset)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width)}}@media(prefers-reduced-motion){:host{animation:none}}/*# sourceMappingURL=focus-ring-styles.css.map */\n`;\n "]}

package/focus/md-focus-ring.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FocusRing } from './internal/focus-ring.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-focus-ring': MdFocusRing;
+    }
+}
+/**
+ * TODO(b/267336424): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFocusRing extends FocusRing {
+    static styles: import("lit").CSSResult[];
+}

package/focus/md-focus-ring.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { FocusRing } from './internal/focus-ring.js';
+import { styles } from './internal/focus-ring-styles.css.js';
+/**
+ * TODO(b/267336424): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFocusRing = class MdFocusRing extends FocusRing {
+};
+MdFocusRing.styles = [styles];
+MdFocusRing = __decorate([
+    customElement('md-focus-ring')
+], MdFocusRing);
+export { MdFocusRing };
+//# sourceMappingURL=md-focus-ring.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"md-focus-ring.js","sourceRoot":"","sources":["md-focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,qCAAqC,CAAC;AAQ3D;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAEvB;SAFY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FocusRing} from './internal/focus-ring.js';\nimport {styles} from './internal/focus-ring-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-focus-ring': MdFocusRing;\n  }\n}\n\n/**\n * TODO(b/267336424): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-focus-ring')\nexport class MdFocusRing extends FocusRing {\n  static override styles = [styles];\n}\n"]}

package/icon/_icon.scss

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

package/icon/icon.d.ts

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

package/icon/icon.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Icon } from './lib/icon.js';
-import { styles } from './lib/icon-styles.css.js';
+import { Icon } from './internal/icon.js';
+import { styles } from './internal/icon-styles.css.js';
 /**
  * @final
  * @suppress {visibility}

package/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAQhD;;;GAGG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AAC9B,kBAAkB;AACF,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAFvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAGlB;SAHY,MAAM","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 {Icon} from './lib/icon.js';\nimport {styles} from './lib/icon-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon': MdIcon;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-icon')\nexport class MdIcon extends Icon {\n  /** @nocollapse */\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAQrD;;;GAGG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AAC9B,kBAAkB;AACF,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAFvB,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAGlB;SAHY,MAAM","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 {Icon} from './internal/icon.js';\nimport {styles} from './internal/icon-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-icon': MdIcon;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-icon')\nexport class MdIcon extends Icon {\n  /** @nocollapse */\n  static override styles = [styles];\n}\n"]}

package/icon/internal/_icon.scss

@@ -0,0 +1,60 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../internal/sass/theme';
+@use './md-comp-icon';
+// go/keep-sorted end
+
+$_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-variation-settings);
+    line-height: 1;
+    // Avoid displaying overflowing text if font ligatures have not loaded.
+    overflow: hidden;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+
+    /* 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;
+  }
+
+  ::slotted(svg) {
+    fill: currentColor;
+  }
+
+  ::slotted(*) {
+    height: var(--_size);
+    width: var(--_size);
+  }
+}

package/icon/internal/icon-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{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, "Material Symbols Outlined");--_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-variation-settings);line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */
+`;
+//# sourceMappingURL=icon-styles.css.js.map

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

@@ -0,0 +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{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, \"Material Symbols Outlined\");--_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-variation-settings);line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */\n`;\n "]}

package/icon/internal/icon.js

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { html, LitElement } from 'lit';
+/**
+ * TODO(b/265336902): add docs
+ */
+export class Icon extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+//# sourceMappingURL=icon.js.map

package/icon/internal/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["icon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAErC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IACf,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\n\n/**\n * TODO(b/265336902): add docs\n */\nexport class Icon extends LitElement {\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}

package/iconbutton/_filled-icon-button.scss

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

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

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

package/iconbutton/_outlined-icon-button.scss

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

package/iconbutton/_standard-icon-button.scss

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

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

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

package/iconbutton/filled-icon-button.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 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/shared-styles.css.js';
+import { styles } from './internal/filled-styles.css.js';
+import { IconButton } from './internal/icon-button.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary Icon buttons help people take supplementary actions with a single
  * tap.

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,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,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;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAG7B,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,QAAQ,EAAE,IAAI;YACd,eAAe,EAAE,IAAI,CAAC,MAAM;SAC7B,CAAC;IACJ,CAAC;;AARe,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;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 {customElement} from 'lit/decorators.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() {\n    return {\n      ...super.getRenderClasses(),\n      'filled': true,\n      'toggle-filled': this.toggle,\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;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;GAcG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAG7B,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,QAAQ,EAAE,IAAI;YACd,eAAe,EAAE,IAAI,CAAC,MAAM;SAC7B,CAAC;IACJ,CAAC;;AARe,yBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;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 {customElement} from 'lit/decorators.js';\n\nimport {styles} from './internal/filled-styles.css.js';\nimport {IconButton} from './internal/icon-button.js';\nimport {styles as sharedStyles} from './internal/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() {\n    return {\n      ...super.getRenderClasses(),\n      'filled': true,\n      'toggle-filled': this.toggle,\n    };\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { IconButton } from './lib/icon-button.js';
+import { IconButton } from './internal/icon-button.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-filled-tonal-icon-button': MdFilledTonalIconButton;

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

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 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/shared-styles.css.js';
+import { styles } from './internal/filled-tonal-styles.css.js';
+import { IconButton } from './internal/icon-button.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary Icon buttons help people take supplementary actions with a single
  * tap.

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,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,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;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAGlC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,cAAc,EAAE,IAAI;YACpB,qBAAqB,EAAE,IAAI,CAAC,MAAM;SACnC,CAAC;IACJ,CAAC;;AARe,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;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 {customElement} from 'lit/decorators.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() {\n    return {\n      ...super.getRenderClasses(),\n      'filled-tonal': true,\n      'toggle-filled-tonal': this.toggle,\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;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,uCAAuC,CAAC;AAC7D,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;;;;;;;;;;GAcG;AAEI,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAGlC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,cAAc,EAAE,IAAI;YACpB,qBAAqB,EAAE,IAAI,CAAC,MAAM;SACnC,CAAC;IACJ,CAAC;;AARe,8BAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;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 {customElement} from 'lit/decorators.js';\n\nimport {styles} from './internal/filled-tonal-styles.css.js';\nimport {IconButton} from './internal/icon-button.js';\nimport {styles as sharedStyles} from './internal/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() {\n    return {\n      ...super.getRenderClasses(),\n      'filled-tonal': true,\n      'toggle-filled-tonal': this.toggle,\n    };\n  }\n}\n"]}

package/iconbutton/harness.d.ts

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

package/iconbutton/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,OAAmB;IACrC,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YACrB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAE,CAAC;SACpD;QAED,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;IAC1D,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {IconButton} from './lib/icon-button.js';\n\n/**\n * Test harness for icon buttons.\n */\nexport class IconButtonHarness extends Harness<IconButton> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    if (this.element.href) {\n      return this.element.renderRoot.querySelector('a')!;\n    }\n\n    return this.element.renderRoot.querySelector('button')!;\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,OAAmB;IACrC,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YACrB,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAE,CAAC;SACpD;QAED,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;IAC1D,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {IconButton} from './internal/icon-button.js';\n\n/**\n * Test harness for icon buttons.\n */\nexport class IconButtonHarness extends Harness<IconButton> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    if (this.element.href) {\n      return this.element.renderRoot.querySelector('a')!;\n    }\n\n    return this.element.renderRoot.querySelector('button')!;\n  }\n}\n"]}

package/iconbutton/internal/_shared.scss

@@ -0,0 +1,106 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// This file contains common static styles that are shared across icon button
+// variants.
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../focus/focus-ring';
+@use '../../icon/icon';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin styles() {
+  :host {
+    display: inline-flex;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    height: var(--_container-size);
+    width: var(--_container-size);
+    justify-content: center;
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape-start-start': var(--_container-shape-start-start),
+        'shape-start-end': var(--_container-shape-start-end),
+        'shape-end-end': var(--_container-shape-end-end),
+        'shape-end-start': var(--_container-shape-end-start),
+      )
+    );
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  .icon-button {
+    align-items: center;
+    background: none;
+    border: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    outline: none;
+    position: relative;
+    text-decoration: none;
+    user-select: none;
+    z-index: 0;
+    flex: 1;
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+  }
+
+  .icon {
+    height: var(--_icon-size);
+    width: var(--_icon-size);
+
+    @include icon.theme(
+      (
+        size: var(--_icon-size),
+        weight: inherit,
+      )
+    );
+  }
+
+  md-ripple {
+    z-index: -1; // Place behind content
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+  }
+
+  .flip-icon .icon {
+    transform: scaleX(-1);
+  }
+
+  .icon {
+    display: inline-flex;
+  }
+
+  .link {
+    height: 100%;
+    outline: none;
+    position: absolute;
+    width: 100%;
+  }
+
+  .touch {
+    position: absolute;
+    top: 50%;
+    height: 48px;
+    left: 50%;
+    width: 48px;
+    transform: translate(-50%, -50%);
+  }
+}