@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/iconbutton/harness.js

@@ -10,7 +10,10 @@ import { Harness } from '../testing/harness.js';
 export class IconButtonHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('.md3-icon-button');
+        if (this.element.href) {
+            return this.element.renderRoot.querySelector('a');
+        }
+        return this.element.renderRoot.querySelector('button');
     }
 }
 //# sourceMappingURL=harness.js.map

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;AAK9C;;GAEG;AACH,MAAM,OAAO,iBAAkB,SAAQ,OAAoC;IACtD,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAChD,CAAC;IAClB,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';\nimport {IconButtonToggle} from './lib/icon-button-toggle.js';\n\n/**\n * Test harness for icon buttons.\n */\nexport class IconButtonHarness extends Harness<IconButton|IconButtonToggle> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-icon-button') as\n        HTMLElement;\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 './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"]}

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

@@ -3,55 +3,65 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../ripple/ripple';
-@use '../../sass/theme';
-@use '../../focus/focus-ring';
 @use '../../tokens';
-@use './shared';
-
-$_custom-property-prefix: 'filled-icon-button';
+// go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-filled-icon-button-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-icon-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
-  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
-  $tokens: shared.resolve-shape-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
-  @include theme.emit-theme-vars($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();
-  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled');
-  $tokens: shared.resolve-shape-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-filled-icon-button-#{$token}, #{$value});
     }
 
-    @include focus-ring.theme(
-      (
-        shape: (
-          var(--_container-shape-start-start),
-          var(--_container-shape-start-end),
-          var(--_container-shape-end-end),
-          var(--_container-shape-end-start),
-        ),
-      )
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-filled-icon-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-filled-icon-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-filled-icon-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-filled-icon-button-container-shape-end-start,
+      var(--_container-shape)
     );
   }
 
-  .md3-icon-button {
-    background-color: var(--_container-color);
+  .icon-button {
     color: var(--_icon-color);
 
     &:hover {
@@ -67,25 +77,40 @@ $_custom-property-prefix: 'filled-icon-button';
     }
 
     &:disabled {
-      background-color: var(--_disabled-container-color);
       color: var(--_disabled-icon-color);
     }
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        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),
       )
     );
   }
 
-  .md3-icon-button--toggle-filled {
+  .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:disabled::before {
+    background-color: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  .icon-button:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .toggle-filled {
     &:not(:disabled) {
-      background-color: var(--_unselected-container-color);
       color: var(--_toggle-unselected-icon-color);
 
       &:hover {
@@ -103,19 +128,18 @@ $_custom-property-prefix: 'filled-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color:
-          var(--_toggle-unselected-focus-state-layer-color),
-        hover-state-layer-color:
-          var(--_toggle-unselected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-unselected-pressed-state-layer-color),
+        hover-color: var(--_toggle-unselected-hover-state-layer-color),
+        pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
       )
     );
   }
 
-  .md3-icon-button--on {
+  .toggle-filled:not(:disabled)::before {
+    background-color: var(--_unselected-container-color);
+  }
+
+  .selected {
     &:not(:disabled) {
-      background-color: var(--_selected-container-color);
       color: var(--_toggle-selected-icon-color);
 
       &:hover {
@@ -133,11 +157,13 @@ $_custom-property-prefix: 'filled-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
-        hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-selected-pressed-state-layer-color),
+        hover-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
       )
     );
   }
+
+  .selected:not(:disabled)::before {
+    background-color: var(--_selected-container-color);
+  }
 }

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

@@ -3,55 +3,67 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../ripple/ripple';
-@use '../../focus/focus-ring';
-@use '../../sass/theme';
 @use '../../tokens';
-@use './shared';
+// go/keep-sorted end
 
 $_custom-property-prefix: 'filled-tonal-icon-button';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-filled-tonal-icon-button-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-tonal-icon-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
-  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
-  $tokens: shared.resolve-shape-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
-  @include theme.emit-theme-vars($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();
-  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'filled-tonal');
-  $tokens: shared.resolve-shape-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-filled-tonal-icon-button-#{$token}, #{$value});
     }
 
-    @include focus-ring.theme(
-      (
-        shape: (
-          var(--_container-shape-start-start),
-          var(--_container-shape-start-end),
-          var(--_container-shape-end-end),
-          var(--_container-shape-end-start),
-        ),
-      )
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-filled-tonal-icon-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-filled-tonal-icon-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-filled-tonal-icon-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-filled-tonal-icon-button-container-shape-end-start,
+      var(--_container-shape)
     );
   }
 
-  .md3-icon-button {
-    background-color: var(--_container-color);
+  .icon-button {
     color: var(--_icon-color);
 
     &:hover {
@@ -67,25 +79,40 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     }
 
     &:disabled {
-      background-color: var(--_disabled-container-color);
       color: var(--_disabled-icon-color);
     }
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        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),
       )
     );
   }
 
-  .md3-icon-button--toggle-filled-tonal {
+  .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:disabled::before {
+    background-color: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  .icon-button:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .toggle-filled-tonal {
     &:not(:disabled) {
-      background-color: var(--_unselected-container-color);
       color: var(--_toggle-unselected-icon-color);
 
       &:hover {
@@ -103,19 +130,18 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color:
-          var(--_toggle-unselected-focus-state-layer-color),
-        hover-state-layer-color:
-          var(--_toggle-unselected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-unselected-pressed-state-layer-color),
+        hover-color: var(--_toggle-unselected-hover-state-layer-color),
+        pressed-color: var(--_toggle-unselected-pressed-state-layer-color),
       )
     );
   }
 
-  .md3-icon-button--on {
+  .toggle-filled-tonal:not(:disabled)::before {
+    background-color: var(--_unselected-container-color);
+  }
+
+  .selected {
     &:not(:disabled) {
-      background-color: var(--_selected-container-color);
       color: var(--_toggle-selected-icon-color);
 
       &:hover {
@@ -133,11 +159,13 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_toggle-selected-focus-state-layer-color),
-        hover-state-layer-color: var(--_toggle-selected-hover-state-layer-color),
-        pressed-state-layer-color:
-          var(--_toggle-selected-pressed-state-layer-color),
+        hover-color: var(--_toggle-selected-hover-state-layer-color),
+        pressed-color: var(--_toggle-selected-pressed-state-layer-color),
       )
     );
   }
+
+  .selected:not(:disabled)::before {
+    background-color: var(--_selected-container-color);
+  }
 }

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

@@ -3,67 +3,75 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
+// go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
 @use '../../ripple/ripple';
-@use '../../sass/resolvers';
-@use '../../sass/color';
-@use '../../sass/theme';
 @use '../../tokens';
-@use '../../focus/focus-ring';
 @use './shared';
-
-$_custom-property-prefix: 'outlined-icon-button';
+// go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(
-    tokens.md-comp-outlined-icon-button-values(),
-    $tokens
+  $supported-tokens: list.join(
+    tokens.$md-comp-outlined-icon-button-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
   );
-  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
-  $tokens: shared.resolve-shape-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
-  @include theme.emit-theme-vars($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();
-  $tokens: shared.flatten-disabled-colors($tokens, $variant: 'outlined');
-  $tokens: shared.resolve-shape-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
+      --_#{$token}: var(--md-outlined-icon-button-#{$token}, #{$value});
     }
 
-    @include focus-ring.theme(
-      (
-        shape: (
-          var(--_container-shape-start-start),
-          var(--_container-shape-start-end),
-          var(--_container-shape-end-end),
-          var(--_container-shape-end-start),
-        ),
-      )
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-outlined-icon-button-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-outlined-icon-button-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-outlined-icon-button-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-outlined-icon-button-container-shape-end-start,
+      var(--_container-shape)
     );
   }
 
-  .md3-icon-button--outlined {
+  .outlined {
     background-color: transparent;
     color: var(--_unselected-icon-color);
 
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        hover-color: var(--_unselected-hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_unselected-pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
       )
     );
 
@@ -88,12 +96,17 @@ $_custom-property-prefix: 'outlined-icon-button';
       color: var(--_disabled-icon-color);
 
       &::before {
-        border-color: var(--_disabled-outline-color);
+        border-color: var(--_disabled-unselected-outline-color);
+        opacity: var(--_disabled-unselected-outline-opacity);
       }
     }
   }
 
-  .md3-icon-button--outlined::before {
+  .outlined:disabled .icon {
+    opacity: var(--_disabled-icon-opacity);
+  }
+
+  .outlined::before {
     block-size: 100%;
     border-style: solid;
     border-radius: inherit;
@@ -103,17 +116,17 @@ $_custom-property-prefix: 'outlined-icon-button';
     inset: 0;
     pointer-events: none;
     position: absolute;
+    z-index: -1; // place behind content
   }
 
   // Selected toggle buttons have no outline.
-  .md3-icon-button--outlined.md3-icon-button--on::before {
+  .outlined.selected::before {
     border-width: 0;
   }
 
   // Selected icon button toggle.
-  .md3-icon-button--on {
+  .selected {
     &:not(:disabled) {
-      background-color: var(--_selected-container-color);
       color: var(--_selected-icon-color);
 
       &:hover {
@@ -129,32 +142,36 @@ $_custom-property-prefix: 'outlined-icon-button';
       }
     }
 
-    &:disabled {
-      background-color: var(--_disabled-selected-container-color);
-    }
-
     @include ripple.theme(
       (
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+        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)::before {
+    background-color: var(--_selected-container-color);
+  }
+
+  .selected:disabled::before {
+    background-color: var(--_disabled-selected-container-color);
+    opacity: var(--_disabled-selected-container-opacity);
+  }
+
   @media (forced-colors: active) {
     // Selected button in HCM has an outline.
-    .md3-icon-button--on {
+    .selected {
       &::before {
         border-color: var(--_unselected-outline-color);
         border-width: var(--_unselected-outline-width);
       }
 
       &:disabled::before {
-        border-color: var(--_disabled-outline-color);
+        border-color: var(--_disabled-unselected-outline-color);
+        opacity: var(--_disabled-unselected-outline-opacity);
       }
     }
   }