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

package/button/lib/_filled-button.scss

@@ -3,6 +3,51 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@mixin static-styles() {
-  // Intentionally left blank for future-proofing.
+@use 'sass:map';
+@use '../../sass/resolvers';
+@use '../../sass/theme';
+@use '../../sass/typography';
+@use '../../tokens';
+@use './elevation';
+@use './shared';
+
+$_custom-property-prefix: 'filled-button';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-filled-button-values(), $tokens);
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-button-values();
+
+  // TODO(b/198759625): Remove once spacing tokens are formally added
+  $tokens: map.set($tokens, 'spacing-leading', 24px);
+  $tokens: map.set($tokens, 'spacing-trailing', 24px);
+  $tokens: map.set($tokens, 'with-icon-spacing-leading', 16px);
+  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 24px);
+  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 24px);
+  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px);
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}
+
+@function _resolve-tokens($tokens) {
+  $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: shared.remove-unsupported-tokens($tokens);
+  $tokens: typography.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'typography'),
+    'label-text'
+  );
+  @return elevation.resolve-tokens($tokens);
 }

package/button/lib/_icon.scss

@@ -6,7 +6,7 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@mixin styles() {
   // The icon CSS class overrides styles defined in the .material-icons CSS
   // class, which is loaded separately so the order of CSS definitions is not
   // guaranteed. Therefore, increase specifity to ensure overrides apply.
@@ -15,35 +15,43 @@
 
     ::slotted([slot='icon']),
     .md3-button__icon {
-      @include icon;
+      display: inline-flex;
+      position: relative;
+      writing-mode: horizontal-tb;
+      color: var(--_with-icon-icon-color);
+      font-size: var(--_with-icon-icon-size);
+      inline-size: var(--_with-icon-icon-size);
+      block-size: var(--_with-icon-icon-size);
+
+      .md3-button:hover & {
+        color: var(--_with-icon-hover-icon-color);
+      }
+
+      .md3-button:focus & {
+        color: var(--_with-icon-focus-icon-color);
+      }
+
+      .md3-button:active & {
+        color: var(--_with-icon-pressed-icon-color);
+      }
+
+      .md3-button:disabled & {
+        color: var(--_with-icon-disabled-icon-color);
+      }
     }
   }
 
   .md3-button__icon--leading {
     ::slotted([slot='icon']),
     .md3-button__icon {
-      @include icon-leading;
+      margin-inline-end: 8px;
     }
   }
 
   .md3-button__icon--trailing {
     ::slotted([slot='icon']),
     .md3-button__icon {
-      @include icon-trailing;
+      margin-inline-start: 8px;
     }
   }
 }
-
-@mixin icon() {
-  display: inline-flex;
-  position: relative;
-  writing-mode: horizontal-tb;
-}
-
-@mixin icon-leading() {
-  margin-inline-end: 8px;
-}
-
-@mixin icon-trailing() {
-  margin-inline-start: 8px;
-}

package/button/lib/_outlined-button.scss

@@ -3,23 +3,85 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+@use 'sass:map';
+@use '../../sass/resolvers';
+@use '../../sass/theme';
+@use '../../sass/typography';
+@use '../../tokens';
+@use './shared';
+
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+$_custom-property-prefix: 'outlined-button';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-outlined-button-values(),
+    $tokens
+  );
+  $tokens: _resolve-theme($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-button-values();
+
+  // TODO(b/198759625): Remove once spacing tokens are formally added
+  $tokens: map.set($tokens, 'spacing-leading', 24px);
+  $tokens: map.set($tokens, 'spacing-trailing', 24px);
+  $tokens: map.set($tokens, 'with-icon-spacing-leading', 16px);
+  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 24px);
+  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 24px);
+  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px);
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
   .md3-button__outline {
-    @include outline;
+    inset: 0;
+    border-style: solid;
+    position: absolute;
+    box-sizing: border-box;
+    border-color: var(--_outline-color);
+    border-radius: var(--_container-shape);
+
+    .md3-button:active & {
+      border-color: var(--_pressed-outline-color);
+    }
+
+    .md3-button:disabled & {
+      border-color: var(--_disabled-outline-color);
+    }
+  }
+
+  .md3-button__outline,
+  .md3-button__ripple {
+    border-width: var(--_outline-width);
   }
 
-  .md3-button--outlined .md3-button__ripple {
+  .md3-button__ripple {
+    inline-size: calc(100% - 2 * var(--_outline-width));
+    block-size: calc(100% - 2 * var(--_outline-width));
     border-style: solid;
     border-color: transparent;
   }
 }
 
-@mixin outline() {
-  inset: 0;
-  position: absolute;
-  border-style: solid;
-  box-sizing: border-box;
+@function _resolve-tokens($tokens) {
+  $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: shared.remove-unsupported-tokens($tokens);
+  $tokens: typography.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'typography'),
+    'label-text'
+  );
+  @return $tokens;
 }

package/button/lib/_shared.scss

@@ -0,0 +1,180 @@
+//
+// Copyright 2021 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 '../../ripple/ripple';
+@use '../../sass/color';
+@use '../../sass/dom';
+@use '../../sass/typography';
+@use '../../sass/resolvers';
+
+@mixin styles() {
+  :host {
+    display: inline-flex;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    /**
+     * Override vertical-align with shortest value "top". Vertical-align's default
+     * "baseline" value causes buttons to be misaligned next to each other if one
+     * button has an icon and the other does not.
+     */
+    vertical-align: top;
+
+    @include ripple.theme(
+      (
+        hover-state-layer-color: var(--_hover-state-layer-color),
+        focus-state-layer-color: var(--_focus-state-layer-color),
+        pressed-state-layer-color: var(--_pressed-state-layer-color),
+        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
+        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
+        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  :host([disabled]) {
+    cursor: default;
+    pointer-events: none;
+
+    border-start-start-radius: var(
+      --md-comp-button-shape-start-start,
+      var(--md-comp-button-shape)
+    );
+  }
+
+  .md3-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-inline-size: 64px;
+    border: none;
+    outline: none;
+    line-height: inherit;
+    user-select: none;
+    -webkit-appearance: none;
+    vertical-align: middle;
+    background: transparent;
+    text-decoration: none;
+    inline-size: 100%;
+    position: relative;
+    z-index: 0; // Place content on top of elevation and ripple
+    block-size: var(--_container-height);
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    letter-spacing: var(--_label-text-tracking);
+    font-weight: var(--_label-text-weight);
+    background-color: var(--_container-color);
+    color: var(--_label-text-color);
+    // TODO(b/181413732): Verify token below are named correctly
+    padding-inline-start: var(--_spacing-leading);
+    padding-inline-end: var(--_spacing-trailing);
+
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+
+    &:hover {
+      color: var(--_hover-label-text-color);
+      cursor: pointer;
+    }
+
+    &:focus {
+      color: var(--_focus-label-text-color);
+    }
+
+    &:active {
+      color: var(--_pressed-label-text-color);
+      outline: none;
+    }
+
+    &:disabled {
+      background-color: var(--_disabled-container-color);
+      color: var(--_disabled-label-text-color);
+    }
+
+    @media (forced-colors: active) {
+      &::before {
+        @include dom.transparent-border();
+      }
+    }
+  }
+
+  .md3-button,
+  .md3-button__ripple {
+    border-radius: var(--_container-shape);
+  }
+
+  md-elevation,
+  .md3-button__ripple {
+    z-index: -1; // Place behind content
+  }
+
+  // TODO(b/181413732): Verify token below are named correctly
+  .md3-button--icon-leading {
+    padding-inline-start: var(--_with-icon-spacing-leading);
+    padding-inline-end: var(--_with-icon-spacing-trailing);
+  }
+
+  .md3-button--icon-trailing {
+    padding-inline-start: var(--_with-trailing-icon-spacing-leading);
+    padding-inline-end: var(--_with-trailing-icon-spacing-trailing);
+  }
+
+  .md3-link-button-wrapper {
+    inline-size: 100%;
+  }
+}
+
+@function flatten-disabled-colors($tokens) {
+  @return color.join-color-and-opacity-pairs(
+    $tokens,
+    (
+      (
+        color-key: 'disabled-container-color',
+        opacity-key: 'disabled-container-opacity'
+      ),
+      (
+        color-key: 'disabled-label-text-color',
+        opacity-key: 'disabled-label-text-opacity'
+      ),
+      (
+        color-key: 'with-icon-disabled-icon-color',
+        opacity-key: 'with-icon-disabled-icon-opacity'
+      ),
+      (
+        color-key: 'disabled-outline-color',
+        opacity-key: 'disabled-outline-opacity'
+      )
+    )
+  );
+}
+
+@function remove-unsupported-tokens($tokens) {
+  // b/193825150: Text and Outlined Button don't have `container-shadow-color`,
+  // leaving `container-elevation` useless.
+  @if not map.get($tokens, 'container-shadow-color') {
+    $tokens: map.remove($tokens, 'container-elevation');
+  }
+
+  $unsupported-tokens: (
+    // TODO(b/233225796): Clean up this removal of `dragged` tokens.
+    'dragged-container-elevation',
+    'dragged-label-text-color',
+    'dragged-state-layer-color',
+    'dragged-state-layer-opacity',
+    'with-icon-dragged-icon-color',
+    // b/189346077#comment2: `label-text-line-height` is included in token set
+    // "just in case", but it's okay to ignore.
+    'label-text-line-height',
+    // b/203778922: `label-text-type` used by other platforms but not web.
+    'label-text-type'
+  );
+  @return map.remove($tokens, $unsupported-tokens);
+}

package/button/lib/_text-button.scss

@@ -3,6 +3,56 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@mixin static-styles() {
-  // Intentionally blank for future-proofing.
+@use 'sass:map';
+@use '../../sass/resolvers';
+@use '../../sass/theme';
+@use '../../sass/typography';
+@use '../../tokens';
+@use './shared';
+
+$_custom-property-prefix: 'text-button';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-text-button-values(), $tokens);
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-text-button-values();
+
+  // TODO(b/198759625): Remove once spacing tokens are formally added
+  $tokens: map.set($tokens, 'spacing-leading', 12px);
+  $tokens: map.set($tokens, 'spacing-trailing', 12px);
+  $tokens: map.set($tokens, 'with-icon-spacing-leading', 12px);
+  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 16px);
+  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 16px);
+  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 12px);
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}
+
+@function _resolve-tokens($tokens) {
+  // TODO(b/233066105): Clean up this removal of extraneous tokens
+  $tokens: map.remove(
+    $tokens,
+    'disabled-container-color',
+    'disabled-container-opacity'
+  );
+  $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: shared.remove-unsupported-tokens($tokens);
+  $tokens: typography.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'typography'),
+    'label-text'
+  );
+  @return $tokens;
 }

package/button/lib/_tonal-button.scss

@@ -3,6 +3,54 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@mixin static-styles() {
-  // Intentionally left blank for future-proofing.
+@use 'sass:map';
+@use '../../sass/resolvers';
+@use '../../sass/theme';
+@use '../../sass/typography';
+@use '../../tokens';
+@use './elevation';
+@use './shared';
+
+$_custom-property-prefix: 'tonal-button';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    tokens.md-comp-filled-tonal-button-values(),
+    $tokens
+  );
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-tonal-button-values();
+
+  // TODO(b/198759625): Remove once spacing tokens are formally added
+  $tokens: map.set($tokens, 'spacing-leading', 24px);
+  $tokens: map.set($tokens, 'spacing-trailing', 24px);
+  $tokens: map.set($tokens, 'with-icon-spacing-leading', 16px);
+  $tokens: map.set($tokens, 'with-icon-spacing-trailing', 24px);
+  $tokens: map.set($tokens, 'with-trailing-icon-spacing-leading', 24px);
+  $tokens: map.set($tokens, 'with-trailing-icon-spacing-trailing', 16px);
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}
+
+@function _resolve-tokens($tokens) {
+  $tokens: shared.flatten-disabled-colors($tokens);
+  $tokens: shared.remove-unsupported-tokens($tokens);
+  $tokens: typography.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, 'typography'),
+    'label-text'
+  );
+  @return elevation.resolve-tokens($tokens);
 }

package/button/lib/_touch-target.scss

@@ -6,11 +6,13 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-// TODO(b/228217731): Remove compat dependencies
-@use '@material/web/compat/touchtarget/touch-target';
-
-@mixin static-styles() {
+@mixin styles() {
   .md3-button__touch {
-    @include touch-target.touch-target;
+    position: absolute;
+    top: 50%;
+    height: 48px;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
   }
 }

package/button/lib/button.d.ts

@@ -5,71 +5,76 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '@material/web/icon/icon.js';
-import '@material/web/focus/focus-ring.js';
-import '@material/web/ripple/ripple.js';
-import { ActionElement, BeginPressConfig, EndPressConfig } from '@material/web/actionelement/action-element.js';
-import { MdRipple } from '@material/web/ripple/ripple.js';
-import { ARIAHasPopup } from '@material/web/types/aria.js';
-import { TemplateResult } from 'lit';
+import '../../icon/icon.js';
+import '../../focus/focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement, TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
+import { MdRipple } from '../../ripple/ripple.js';
+import { ARIAHasPopup } from '../../types/aria.js';
 import { ButtonState } from './state.js';
-/** @soyCompatible */
-export declare abstract class Button extends ActionElement implements ButtonState {
+export declare abstract class Button extends LitElement implements ButtonState {
     static shadowRootOptions: ShadowRootInit;
     protected readonly iconTag: import("lit-html/static.js").StaticValue;
     ariaHasPopup: ARIAHasPopup;
+    ariaLabel: string;
+    /**
+     * Whether or not the button is disabled.
+     */
     disabled: boolean;
+    /**
+     * Whether to render the icon at the inline end of the label rather than the
+     * inline start.
+     *
+     * _Note:_ Link buttons cannot have trailing icons.
+     */
     trailingIcon: boolean;
+    /**
+     * The label of the icon to render.
+     *
+     * See md-icon's documentation for usage.
+     */
     icon: string;
+    /**
+     * The button's visible label.
+     */
     label: string;
-    ariaLabel: string;
+    /**
+     * Whether to display the icon or not.
+     */
     hasIcon: boolean;
+    /**
+     * Whether `preventDefault()` should be called on the underlying button.
+     * Useful for preventing certain native functionalities like preventing form
+     * submissions.
+     */
     preventClickDefault: boolean;
-    buttonElement: HTMLElement;
-    ripple: MdRipple;
+    protected buttonElement: HTMLElement;
+    protected ripple: Promise<MdRipple | null>;
     protected showFocusRing: boolean;
+    protected showRipple: boolean;
     protected iconElement: HTMLElement[] | null;
-    /**
-     * @soyTemplate
-     * @soyAttributes buttonAttributes: .md3-button
-     */
+    constructor();
+    private readonly handleActivationClick;
+    focus(): void;
+    blur(): void;
+    protected readonly getRipple: () => Promise<MdRipple>;
     protected render(): TemplateResult;
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
-    /** @soyTemplate */
     protected getIconContainerClasses(): ClassInfo;
-    /** @soyTemplate */
     protected renderTouchTarget(): TemplateResult;
-    /** @soyTemplate */
-    protected renderOverlay(): TemplateResult;
-    /** @soyTemplate */
-    protected renderRipple(): TemplateResult | string;
-    /** @soyTemplate */
+    protected renderElevation(): TemplateResult;
+    protected renderRipple: () => TemplateResult<1>;
     protected renderOutline(): TemplateResult;
-    /** @soyTemplate */
     protected renderFocusRing(): TemplateResult;
-    /** @soyTemplate */
     protected renderLabel(): TemplateResult;
-    /** @soyTemplate */
     protected renderLeadingIcon(): TemplateResult | string;
-    /** @soyTemplate */
     protected renderTrailingIcon(): TemplateResult | string;
-    /** @soyTemplate */
     protected renderIcon(): TemplateResult;
-    /** @soyTemplate */
     protected renderFontIcon(): TemplateResult;
     update(changedProperties: Map<string, string>): void;
-    focus(): void;
-    blur(): void;
-    beginPress({ positionEvent }: BeginPressConfig): void;
-    endPress(options: EndPressConfig): void;
-    handlePointerDown(e: PointerEvent): void;
-    protected handlePointerEnter(e: PointerEvent): void;
-    handlePointerLeave(e: PointerEvent): void;
-    /** Delegate clicks on host element to inner button element. */
-    click(): void;
-    handleClick(e: MouseEvent): void;
+    protected handlePointerDown(e: PointerEvent): void;
+    protected handleClick(e: MouseEvent): void;
     protected handleFocus(): void;
     protected handleBlur(): void;
     protected handleSlotChange(): void;