@material/web 0.1.0-alpha.0

package/iconbutton/lib/_outlined-icon-button-theme.scss

@@ -0,0 +1,187 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/color';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+@use './icon-button-theme';
+@use '@material/web/ripple/ripple-theme';
+
+$_custom-property-prefix: 'outlined-icon-button';
+
+// TODO(b/233323674): Remove when missing tokens have been added.
+$_missing-light-theme-tokens: (
+  disabled-selected-container-color:
+    map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
+  disabled-selected-container-opacity: 0.12,
+);
+// TODO(b/233323674): Remove when missing tokens have been added.
+$_missing-dark-theme-tokens: (
+  disabled-selected-container-color:
+    map.get(tokens.md-sys-color-values-dark-dynamic(), on-surface),
+  disabled-selected-container-opacity: 0.12,
+);
+$light-theme: map.merge(
+  tokens.md-comp-outlined-icon-button-values(),
+  $_missing-light-theme-tokens
+);
+$dark-theme: map.merge(
+  tokens.md-comp-outlined-icon-button-values(
+    (
+      md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
+    ),
+    $exclude-hardcoded-values: true
+  ),
+  $_missing-dark-theme-tokens
+);
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: icon-button-theme.flatten-disabled-colors(
+    $theme,
+    $variant: 'outlined'
+  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: icon-button-theme.flatten-disabled-colors(
+    $theme,
+    $variant: 'outlined'
+  );
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include icon-button-theme.state-layer-size(
+    map.get($theme, 'container-size')
+  );
+  @include icon-button-theme.state-layer-shape(
+    map.get($theme, 'container-shape')
+  );
+  @include icon-button-theme.icon-size(map.get($theme, 'icon-size'));
+
+  // Unselected icon button toggle.
+  &:not(.md3-icon-button--on) {
+    @include icon-button-theme.icon-color(
+      (
+        default: map.get($theme, 'unselected-icon-color'),
+        disabled: map.get($theme, 'disabled-icon-color'),
+        focus: map.get($theme, 'unselected-focus-icon-color'),
+        hover: map.get($theme, 'unselected-hover-icon-color'),
+        pressed: map.get($theme, 'unselected-pressed-icon-color'),
+      )
+    );
+
+    @include _outline-color(
+      (
+        default: map.get($theme, 'unselected-outline-color'),
+        disabled: map.get($theme, 'disabled-outline-color'),
+      )
+    );
+    @include _outline-width(map.get($theme, 'unselected-outline-width'));
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color:
+          map.get($theme, 'unselected-focus-state-layer-color'),
+        focus-state-layer-opacity: map.get($theme, 'focus-state-layer-opacity'),
+        hover-state-layer-color:
+          map.get($theme, 'unselected-hover-state-layer-color'),
+        hover-state-layer-opacity: map.get($theme, 'hover-state-layer-opacity'),
+        pressed-state-layer-color:
+          map.get($theme, 'unselected-pressed-state-layer-color'),
+        pressed-state-layer-opacity:
+          map.get($theme, 'pressed-state-layer-opacity'),
+      )
+    );
+  }
+
+  // Selected icon button toggle.
+  &.md3-icon-button--on {
+    @include icon-button-theme.icon-color(
+      (
+        default: map.get($theme, 'selected-icon-color'),
+        disabled: map.get($theme, 'disabled-icon-color'),
+        focus: map.get($theme, 'selected-focus-icon-color'),
+        hover: map.get($theme, 'selected-hover-icon-color'),
+        pressed: map.get($theme, 'selected-pressed-icon-color'),
+      )
+    );
+
+    @include icon-button-theme.container-color(
+      (
+        default: map.get($theme, 'selected-container-color'),
+        disabled: map.get($theme, 'disabled-selected-container-color'),
+      )
+    );
+
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color:
+          map.get($theme, 'selected-focus-state-layer-color'),
+        focus-state-layer-opacity: map.get($theme, 'focus-state-layer-opacity'),
+        hover-state-layer-color:
+          map.get($theme, 'selected-hover-state-layer-color'),
+        hover-state-layer-opacity: map.get($theme, 'hover-state-layer-opacity'),
+        pressed-state-layer-color:
+          map.get($theme, 'selected-pressed-state-layer-color'),
+        pressed-state-layer-opacity:
+          map.get($theme, 'pressed-state-layer-opacity'),
+      )
+    );
+  }
+
+  @media (forced-colors: active) {
+    // Selected button in HCM has an outline.
+    &.md3-icon-button--on {
+      @include _outline-color(
+        (
+          default: map.get($theme, 'unselected-outline-color'),
+          disabled: map.get($theme, 'disabled-outline-color'),
+        )
+      );
+      @include _outline-width(map.get($theme, 'unselected-outline-width'));
+    }
+  }
+}
+
+///
+/// Sets the outline color to the given color.
+/// @param {map} $color-map - The desired icon color, specified as a map of
+///     colors with states {default, disabled} as keys.
+///
+@mixin _outline-color($color-map) {
+  &::before {
+    @include _set-outline-color(map.get($color-map, 'default'));
+  }
+
+  &:disabled::before {
+    @include _set-outline-color(map.get($color-map, 'disabled'));
+  }
+}
+
+///
+/// Sets the outline color to the provided color value.
+/// @param {Color} $color - The desired background color.
+///
+@mixin _set-outline-color($color) {
+  border-color: $color;
+}
+
+///
+/// Sets the outline width to the given width.
+///
+@mixin _outline-width($width) {
+  &::before {
+    border-width: $width;
+  }
+}

package/iconbutton/lib/_outlined-icon-button.scss

@@ -0,0 +1,30 @@
+//
+// 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-icon-button--outlined {
+    background-color: transparent;
+  }
+
+  .md3-icon-button--outlined::before {
+    block-size: 100%;
+    border-style: solid;
+    border-radius: inherit;
+    box-sizing: border-box;
+    content: '';
+    inline-size: 100%;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  // Selected toggle buttons have no outline.
+  .md3-icon-button--outlined.md3-icon-button--on::before {
+    border-width: 0;
+  }
+}

package/iconbutton/lib/_standard-icon-button-theme.scss

@@ -0,0 +1,107 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+
+@use '@material/web/ripple/ripple-theme';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+
+@use './icon-button-theme';
+
+$_custom-property-prefix: 'icon-button';
+
+$light-theme: tokens.md-comp-icon-button-values();
+$dark-theme: tokens.md-comp-icon-button-values(
+  (
+    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
+  ),
+  $exclude-hardcoded-values: true
+);
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: icon-button-theme.flatten-disabled-colors($theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme-styles(
+    $light-theme,
+    $theme,
+    $require-all: false
+  );
+  $theme: icon-button-theme.flatten-disabled-colors($theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include icon-button-theme.icon-size(map.get($theme, icon-size));
+  @include icon-button-theme.state-layer-size(
+    $size: map.get($theme, state-layer-size)
+  );
+
+  @include icon-button-theme.icon-color(
+    (
+      default: map.get($theme, unselected-icon-color),
+      disabled: map.get($theme, disabled-icon-color),
+      focus: map.get($theme, unselected-focus-icon-color),
+      hover: map.get($theme, unselected-hover-icon-color),
+      pressed: map.get($theme, unselected-pressed-icon-color),
+    )
+  );
+
+  &.md3-icon-button--on {
+    @include icon-button-theme.icon-color(
+      (
+        default: map.get($theme, selected-icon-color),
+        disabled: map.get($theme, disabled-icon-color),
+        focus: map.get($theme, selected-focus-icon-color),
+        hover: map.get($theme, selected-hover-icon-color),
+        pressed: map.get($theme, selected-pressed-icon-color),
+      )
+    );
+  }
+
+  // States styles
+  @include ripple-theme.theme(
+    (
+      focus-state-layer-color:
+        map.get($theme, unselected-focus-state-layer-color),
+      focus-state-layer-opacity:
+        map.get($theme, unselected-focus-state-layer-opacity),
+      hover-state-layer-color:
+        map.get($theme, unselected-hover-state-layer-color),
+      hover-state-layer-opacity:
+        map.get($theme, unselected-hover-state-layer-opacity),
+      pressed-state-layer-color:
+        map.get($theme, unselected-pressed-state-layer-color),
+      pressed-state-layer-opacity:
+        map.get($theme, unselected-pressed-state-layer-opacity),
+    )
+  );
+
+  &.md3-icon-button--on {
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color:
+          map.get($theme, selected-focus-state-layer-color),
+        focus-state-layer-opacity:
+          map.get($theme, selected-focus-state-layer-opacity),
+        hover-state-layer-color:
+          map.get($theme, selected-hover-state-layer-color),
+        hover-state-layer-opacity:
+          map.get($theme, selected-hover-state-layer-opacity),
+        pressed-state-layer-color:
+          map.get($theme, selected-pressed-state-layer-color),
+        pressed-state-layer-opacity:
+          map.get($theme, selected-pressed-state-layer-opacity),
+      )
+    );
+  }
+}

package/iconbutton/lib/_standard-icon-button.scss

@@ -0,0 +1,13 @@
+//
+// 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-icon-button--standard {
+    background-color: transparent;
+  }
+}

package/iconbutton/lib/filled-styles.css.d.ts

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

package/iconbutton/lib/filled-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-icon-button--filled{height:var(--md-filled-icon-button-container-size, 40px);width:var(--md-filled-icon-button-container-size, 40px);margin:max(0px,(48px - var(--md-filled-icon-button-container-size, 40px))/2);border-radius:var(--md-filled-icon-button-container-shape, 9999px);font-size:var(--md-filled-icon-button-icon-size, 24px);color:var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));background-color:var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-focus-state-layer-opacity:var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-hover-state-layer-opacity:var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-pressed-state-layer-opacity:var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12)}.md3-icon-button--filled i,.md3-icon-button--filled svg,.md3-icon-button--filled img{height:var(--md-filled-icon-button-icon-size, 24px);width:var(--md-filled-icon-button-icon-size, 24px)}.md3-icon-button--filled:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled:focus{color:var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:hover{color:var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:not(:disabled):active{color:var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled.md3-icon-button--toggle-filled{color:var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));background-color:var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled.md3-icon-button--toggle-filled:focus{color:var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:hover{color:var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled.md3-icon-button--on{color:var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));background-color:var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled.md3-icon-button--on:focus{color:var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:hover{color:var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:not(:disabled):active{color:var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}/*# sourceMappingURL=filled-styles.css.map */
+`;
+//# sourceMappingURL=filled-styles.css.js.map

package/iconbutton/lib/filled-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-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-icon-button--filled{height:var(--md-filled-icon-button-container-size, 40px);width:var(--md-filled-icon-button-container-size, 40px);margin:max(0px,(48px - var(--md-filled-icon-button-container-size, 40px))/2);border-radius:var(--md-filled-icon-button-container-shape, 9999px);font-size:var(--md-filled-icon-button-icon-size, 24px);color:var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));background-color:var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-focus-state-layer-opacity:var(--md-filled-icon-button-focus-state-layer-opacity, 0.12);--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-hover-state-layer-opacity:var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-pressed-state-layer-opacity:var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12)}.md3-icon-button--filled i,.md3-icon-button--filled svg,.md3-icon-button--filled img{height:var(--md-filled-icon-button-icon-size, 24px);width:var(--md-filled-icon-button-icon-size, 24px)}.md3-icon-button--filled:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled:focus{color:var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:hover{color:var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:not(:disabled):active{color:var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled.md3-icon-button--toggle-filled{color:var(--md-filled-icon-button-toggle-unselected-icon-color, var(--md-sys-color-primary, #6750a4));background-color:var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled.md3-icon-button--toggle-filled:focus{color:var(--md-filled-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:hover{color:var(--md-filled-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:not(:disabled):active{color:var(--md-filled-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-icon-button--filled.md3-icon-button--toggle-filled:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled.md3-icon-button--on{color:var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));background-color:var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-filled-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-hover-state-layer-color:var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--md-ripple-pressed-state-layer-color:var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:disabled{color:var(--md-filled-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled.md3-icon-button--on:focus{color:var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:hover{color:var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:not(:disabled):active{color:var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}.md3-icon-button--filled.md3-icon-button--on:disabled{background-color:var(--md-filled-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}

package/iconbutton/lib/filled-styles.scss

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

package/iconbutton/lib/filled-tonal-styles.css.d.ts

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

package/iconbutton/lib/filled-tonal-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-icon-button--filled-tonal{height:var(--md-filled-tonal-icon-button-container-size, 40px);width:var(--md-filled-tonal-icon-button-container-size, 40px);margin:max(0px,(48px - var(--md-filled-tonal-icon-button-container-size, 40px))/2);border-radius:var(--md-filled-tonal-icon-button-container-shape, 9999px);font-size:var(--md-filled-tonal-icon-button-icon-size, 24px);color:var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));background-color:var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-focus-state-layer-opacity:var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-opacity:var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-opacity:var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12)}.md3-icon-button--filled-tonal i,.md3-icon-button--filled-tonal svg,.md3-icon-button--filled-tonal img{height:var(--md-filled-tonal-icon-button-icon-size, 24px);width:var(--md-filled-tonal-icon-button-icon-size, 24px)}.md3-icon-button--filled-tonal:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal:focus{color:var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:hover{color:var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:not(:disabled):active{color:var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal{color:var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));background-color:var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:focus{color:var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:hover{color:var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled-tonal.md3-icon-button--on{color:var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));background-color:var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal.md3-icon-button--on:focus{color:var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:hover{color:var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:not(:disabled):active{color:var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}/*# sourceMappingURL=filled-tonal-styles.css.map */
+`;
+//# sourceMappingURL=filled-tonal-styles.css.js.map

package/iconbutton/lib/filled-tonal-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-tonal-styles.css.js","sourceRoot":"","sources":["filled-tonal-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-icon-button--filled-tonal{height:var(--md-filled-tonal-icon-button-container-size, 40px);width:var(--md-filled-tonal-icon-button-container-size, 40px);margin:max(0px,(48px - var(--md-filled-tonal-icon-button-container-size, 40px))/2);border-radius:var(--md-filled-tonal-icon-button-container-shape, 9999px);font-size:var(--md-filled-tonal-icon-button-icon-size, 24px);color:var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));background-color:var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-focus-state-layer-opacity:var(--md-filled-tonal-icon-button-focus-state-layer-opacity, 0.12);--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-opacity:var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-opacity:var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12)}.md3-icon-button--filled-tonal i,.md3-icon-button--filled-tonal svg,.md3-icon-button--filled-tonal img{height:var(--md-filled-tonal-icon-button-icon-size, 24px);width:var(--md-filled-tonal-icon-button-icon-size, 24px)}.md3-icon-button--filled-tonal:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal:focus{color:var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:hover{color:var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:not(:disabled):active{color:var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal{color:var(--md-filled-tonal-icon-button-toggle-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));background-color:var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-toggle-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:focus{color:var(--md-filled-tonal-icon-button-toggle-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:hover{color:var(--md-filled-tonal-icon-button-toggle-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:not(:disabled):active{color:var(--md-filled-tonal-icon-button-toggle-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-icon-button--filled-tonal.md3-icon-button--toggle-filled-tonal:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}.md3-icon-button--filled-tonal.md3-icon-button--on{color:var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));background-color:var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--md-ripple-focus-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-hover-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--md-ripple-pressed-state-layer-color:var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:disabled{color:var(--md-filled-tonal-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38))}.md3-icon-button--filled-tonal.md3-icon-button--on:focus{color:var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:hover{color:var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:not(:disabled):active{color:var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b))}.md3-icon-button--filled-tonal.md3-icon-button--on:disabled{background-color:var(--md-filled-tonal-icon-button-disabled-container-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12))}/*# sourceMappingURL=filled-tonal-styles.css.map */\n`;\n "]}

package/iconbutton/lib/filled-tonal-styles.scss

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

package/iconbutton/lib/icon-button-styles.css.d.ts

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

package/iconbutton/lib/icon-button-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{display:inline-flex;outline:none;--md-focus-ring-container-outer-padding-vertical:0px;--md-focus-ring-container-outer-padding-horizontal:0px}:host([disabled]){pointer-events:none}.md3-icon-button{align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:flex;fill:currentColor;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0}.md3-icon-button i,.md3-icon-button svg,.md3-icon-button img,.md3-icon-button ::slotted(*){display:block}.md3-icon-button--flip-icon .md3-icon-button__icon{transform:scaleX(-1)}.md3-icon-button__icon{display:inline-flex}.md3-icon-button__icon.md3-icon-button__icon--on{display:none}.md3-icon-button--on .md3-icon-button__icon{display:none}.md3-icon-button--on .md3-icon-button__icon.md3-icon-button__icon--on{display:inline-flex}.md3-icon-button__link{height:100%;outline:none;position:absolute;width:100%}.md3-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}/*# sourceMappingURL=icon-button-styles.css.map */
+`;
+//# sourceMappingURL=icon-button-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-styles.css.js","sourceRoot":"","sources":["icon-button-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{display:inline-flex;outline:none;--md-focus-ring-container-outer-padding-vertical:0px;--md-focus-ring-container-outer-padding-horizontal:0px}:host([disabled]){pointer-events:none}.md3-icon-button{align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:flex;fill:currentColor;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0}.md3-icon-button i,.md3-icon-button svg,.md3-icon-button img,.md3-icon-button ::slotted(*){display:block}.md3-icon-button--flip-icon .md3-icon-button__icon{transform:scaleX(-1)}.md3-icon-button__icon{display:inline-flex}.md3-icon-button__icon.md3-icon-button__icon--on{display:none}.md3-icon-button--on .md3-icon-button__icon{display:none}.md3-icon-button--on .md3-icon-button__icon.md3-icon-button__icon--on{display:inline-flex}.md3-icon-button__link{height:100%;outline:none;position:absolute;width:100%}.md3-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}/*# sourceMappingURL=icon-button-styles.css.map */\n`;\n "]}

package/iconbutton/lib/icon-button-styles.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './icon-button';
+
+@include icon-button.static-styles;

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

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ActionElement, BeginPressConfig, EndPressConfig } from '@material/web/actionelement/action-element.js';
+import { MdRipple } from '@material/web/ripple/ripple.js';
+import { TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export declare abstract class IconButtonToggle extends ActionElement {
+    /** @soyPrefixAttribute */
+    ariaLabel: string;
+    disabled: boolean;
+    onIcon: string;
+    offIcon: string;
+    ariaLabelOn: string;
+    ariaLabelOff: string;
+    isOn: boolean;
+    ripple: MdRipple;
+    protected showFocusRing: boolean;
+    protected readonly rippleElementTag: import("lit-html/static").StaticValue;
+    protected readonly focusElementTag: import("lit-html/static").StaticValue;
+    protected readonly iconElementTag: import("lit-html/static").StaticValue;
+    beginPress({ positionEvent }: BeginPressConfig): void;
+    endPress({ cancelled }: EndPressConfig): void;
+    /** @soyTemplate */
+    protected renderRipple(): TemplateResult;
+    /** @soyTemplate */
+    protected render(): TemplateResult;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderIcon(icon: string): TemplateResult | string;
+    /** @soyTemplate */
+    protected renderTouchTarget(): TemplateResult;
+    /** @soyTemplate */
+    protected renderFocusRing(): TemplateResult;
+    handlePointerDown(e: PointerEvent): void;
+    protected handlePointerEnter(e: PointerEvent): void;
+    handlePointerLeave(e: PointerEvent): void;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+}