material-web-evo 10002.10001.10000

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

@@ -0,0 +1,146 @@
+//
+// Copyright 2022 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 '../../ripple/ripple';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-filled-icon-button-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-icon-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-icon-button-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .icon-button {
+    color: var(--_icon-color);
+
+    &:hover {
+      color: var(--_hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_pressed-icon-color);
+    }
+
+    &:is(:disabled, [aria-disabled='true']) {
+      color: var(--_disabled-icon-color);
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .icon-button::before {
+    // Background color, separate node for opacity changes
+    background-color: var(--_container-color);
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+    z-index: -1; // place behind content
+  }
+
+  .icon-button:is(:disabled, [aria-disabled='true'])::before {
+    background-color: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  .icon-button:is(:disabled, [aria-disabled='true']) .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .toggle-filled {
+    &:not(:disabled, [aria-disabled='true']) {
+      color: var(--_toggle-icon-color);
+
+      &:hover {
+        color: var(--_toggle-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-pressed-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_toggle-hover-state-layer-color),
+        pressed-color: var(--_toggle-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .toggle-filled:not(:disabled, [aria-disabled='true'])::before {
+    // Note: filled icon buttons have three container colors,
+    // "container-color" for regular, then selected/unselected for toggle.
+    background-color: var(--_unselected-container-color);
+  }
+
+  .selected {
+    &:not(:disabled, [aria-disabled='true']) {
+      color: var(--_toggle-selected-icon-color);
+
+      &:hover {
+        color: var(--_toggle-selected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-selected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-selected-pressed-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .selected:not(:disabled, [aria-disabled='true'])::before {
+    background-color: var(--_selected-container-color);
+  }
+}

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

@@ -0,0 +1,146 @@
+//
+// Copyright 2022 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 '../../ripple/ripple';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-filled-tonal-icon-button-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-tonal-icon-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-tonal-icon-button-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .icon-button {
+    color: var(--_icon-color);
+
+    &:hover {
+      color: var(--_hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_pressed-icon-color);
+    }
+
+    &:is(:disabled, [aria-disabled='true']) {
+      color: var(--_disabled-icon-color);
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .icon-button::before {
+    // Background color, separate node for opacity changes
+    background-color: var(--_container-color);
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+    z-index: -1; // place behind content
+  }
+
+  .icon-button:is(:disabled, [aria-disabled='true'])::before {
+    background-color: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  .icon-button:is(:disabled, [aria-disabled='true']) .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .toggle-filled-tonal {
+    &:not(:disabled, [aria-disabled='true']) {
+      color: var(--_toggle-icon-color);
+
+      &:hover {
+        color: var(--_toggle-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-pressed-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_toggle-hover-state-layer-color),
+        pressed-color: var(--_toggle-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .toggle-filled-tonal:not(:disabled, [aria-disabled='true'])::before {
+    // Note: filled tonal icon buttons have three container colors,
+    // "container-color" for regular, then selected/unselected for toggle.
+    background-color: var(--_unselected-container-color);
+  }
+
+  .selected {
+    &:not(:disabled, [aria-disabled='true']) {
+      color: var(--_toggle-selected-icon-color);
+
+      &:hover {
+        color: var(--_toggle-selected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_toggle-selected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_toggle-selected-pressed-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
+      )
+    );
+  }
+
+  .selected:not(:disabled, [aria-disabled='true'])::before {
+    background-color: var(--_selected-container-color);
+  }
+}

package/iconbutton/internal/_icon-button.scss

@@ -0,0 +1,131 @@
+//
+// Copyright 2022 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 '../../focus/focus-ring';
+@use '../../ripple/ripple';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-icon-button-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-icon-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-icon-button-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    // These custom properties are not used, so set defaults so token tests pass
+    // for <md-icon-button>.
+    --_container-shape-start-start: 0;
+    --_container-shape-start-end: 0;
+    --_container-shape-end-end: 0;
+    --_container-shape-end-start: 0;
+    --_container-height: 0;
+    --_container-width: 0;
+
+    height: var(--_state-layer-height);
+    width: var(--_state-layer-width);
+  }
+
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_state-layer-height))/2)
+      max(0px, (48px - var(--_state-layer-width))/2);
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape-start-start': var(--_state-layer-shape),
+        'shape-start-end': var(--_state-layer-shape),
+        'shape-end-end': var(--_state-layer-shape),
+        'shape-end-start': var(--_state-layer-shape),
+      )
+    );
+  }
+
+  .standard {
+    background-color: transparent;
+    color: var(--_icon-color);
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+
+    &:hover {
+      color: var(--_hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_pressed-icon-color);
+    }
+
+    &:is(:disabled, [aria-disabled='true']) {
+      color: var(--_disabled-icon-color);
+    }
+  }
+
+  md-ripple {
+    border-radius: var(--_state-layer-shape);
+  }
+
+  .standard:is(:disabled, [aria-disabled='true']) {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .selected {
+    &:not(:disabled, [aria-disabled='true']) {
+      color: var(--_selected-icon-color);
+
+      &:hover {
+        color: var(--_selected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_selected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_selected-pressed-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+      )
+    );
+  }
+}

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

@@ -0,0 +1,157 @@
+//
+// Copyright 2022 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 '../../ripple/ripple';
+@use '../../tokens';
+@use './shared';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-outlined-icon-button-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-outlined-icon-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-icon-button-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .outlined {
+    background-color: transparent;
+    color: var(--_icon-color);
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+
+    &::before {
+      border-color: var(--_outline-color);
+      border-width: var(--_outline-width);
+    }
+
+    &:hover {
+      color: var(--_hover-icon-color);
+    }
+
+    &:focus {
+      color: var(--_focus-icon-color);
+    }
+
+    &:active {
+      color: var(--_pressed-icon-color);
+    }
+
+    &:is(:disabled, [aria-disabled='true']) {
+      color: var(--_disabled-icon-color);
+
+      &::before {
+        border-color: var(--_disabled-outline-color);
+        opacity: var(--_disabled-outline-opacity);
+      }
+    }
+  }
+
+  .outlined:is(:disabled, [aria-disabled='true']) .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .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;
+    z-index: -1; // place behind content
+  }
+
+  // Selected toggle buttons have no outline.
+  .outlined.selected::before {
+    border-width: 0;
+  }
+
+  // Selected icon button toggle.
+  .selected {
+    &:not(:disabled, [aria-disabled='true']) {
+      color: var(--_selected-icon-color);
+
+      &:hover {
+        color: var(--_selected-hover-icon-color);
+      }
+
+      &:focus {
+        color: var(--_selected-focus-icon-color);
+      }
+
+      &:active {
+        color: var(--_selected-pressed-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .selected:not(:disabled, [aria-disabled='true'])::before {
+    background-color: var(--_selected-container-color);
+  }
+
+  .selected:is(:disabled, [aria-disabled='true'])::before {
+    background-color: var(--_disabled-selected-container-color);
+    opacity: var(--_disabled-selected-container-opacity);
+  }
+
+  @media (forced-colors: active) {
+    :host(:is([disabled], [soft-disabled])) {
+      --_disabled-outline-opacity: 1;
+    }
+
+    // Selected button in HCM has an outline.
+    .selected {
+      &::before {
+        border-color: CanvasText;
+        border-width: var(--_outline-width);
+      }
+
+      &:is(:disabled, [aria-disabled='true'])::before {
+        border-color: GrayText;
+        opacity: 1;
+      }
+    }
+  }
+}

package/iconbutton/internal/_shared.scss

@@ -0,0 +1,117 @@
+//
+// 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-height);
+    width: var(--_container-width);
+    justify-content: center;
+  }
+
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_container-height)) / 2)
+      max(0px, (48px - var(--_container-width)) / 2);
+  }
+
+  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(:is([disabled], [soft-disabled])) {
+    pointer-events: none;
+  }
+
+  .icon-button {
+    place-items: center;
+    background: none;
+    border: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    place-content: center;
+    outline: none;
+    padding: 0;
+    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 {
+    ::slotted(*) {
+      font-size: var(--_icon-size);
+      height: var(--_icon-size);
+      width: var(--_icon-size);
+      font-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;
+    height: max(48px, 100%);
+    width: max(48px, 100%);
+  }
+
+  :host([touch-target='none']) .touch {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    :host(:is([disabled], [soft-disabled])) {
+      --_disabled-icon-color: GrayText;
+      --_disabled-icon-opacity: 1;
+    }
+  }
+}

package/iconbutton/internal/filled-styles.css

@@ -0,0 +1 @@
+:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}/*# sourceMappingURL=filled-styles.css.map */

package/iconbutton/internal/filled-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_filled-icon-button.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AA8BE,MAII,ggIAIJ,aACE,yBClBE,oPDoBF,mBACE,+BAGF,mBACE,+BAGF,oBACE,iCAGF,gDACE,kCAaJ,qBAEE,yCACA,sBACA,WACA,QACA,kBACA,WAGF,wDACE,kDACA,2CAGF,sDACE,sCAGF,eCjEI,oIDkEF,mDACE,gCAEA,yDACE,sCAGF,yDACE,sCAGF,0DACE,wCAYN,2DAGE,oDAGF,UChGI,sJDiGF,8CACE,yCAEA,oDACE,+CAGF,oDACE,+CAGF,qDACE,iDAYN,sDACE","file":"filled-styles.css"}