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

package/field/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAIzD;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,OAAc;IACrC,KAAK,CAAC,iBAAiB,CAAC,OAA0B,EAAE;QAC3D,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAEQ,KAAK,CAAC,gBAAgB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;IACjC,CAAC;IAEQ,KAAK,CAAC,IAAI;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAEkB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC;YAC1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAgB,CAAC;IAC9E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '@material/web/testing/harness.js';\n\nimport {Field} from './lib/field.js';\n\n/**\n * Test harness for field elements.\n */\nexport class FieldHarness extends Harness<Field> {\n  override async focusWithKeyboard(init: KeyboardEventInit = {}) {\n    this.element.focused = true;\n    await super.focusWithKeyboard(init);\n  }\n\n  override async focusWithPointer() {\n    this.element.focused = true;\n    await super.focusWithPointer();\n  }\n\n  override async blur() {\n    this.element.focused = false;\n    await super.blur();\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (this.element.querySelector(':not([slot])') ||\n            this.element.renderRoot.querySelector('.md3-field')) as 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,YAAa,SAAQ,OAAc;IACrC,KAAK,CAAC,iBAAiB,CAAC,OAA0B,EAAE;QAC3D,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAEQ,KAAK,CAAC,gBAAgB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;IACjC,CAAC;IAEQ,KAAK,CAAC,IAAI;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAEkB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC;YAC1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAgB,CAAC;IAC9E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Field} from './lib/field.js';\n\n/**\n * Test harness for field elements.\n */\nexport class FieldHarness extends Harness<Field> {\n  override async focusWithKeyboard(init: KeyboardEventInit = {}) {\n    this.element.focused = true;\n    await super.focusWithKeyboard(init);\n  }\n\n  override async focusWithPointer() {\n    this.element.focused = true;\n    await super.focusWithPointer();\n  }\n\n  override async blur() {\n    this.element.focused = false;\n    await super.blur();\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (this.element.querySelector(':not([slot])') ||\n            this.element.renderRoot.querySelector('.md3-field')) as HTMLElement;\n  }\n}\n"]}

package/field/lib/_content.scss

@@ -7,7 +7,7 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:math';
-@use '@material/web/motion/animation';
+@use '../../motion/animation';
 
 // Duration of the label animation.
 $_label-duration: 150ms;
@@ -17,7 +17,7 @@ $_visible-duration: math.round(math.div($_label-duration * 5, 9));
 // out of the way before the content starts to appear.
 $_enter-delay: $_label-duration - $_visible-duration;
 
-@mixin static-styles() {
+@mixin styles() {
   .md3-field__start,
   .md3-field__middle,
   .md3-field__end {
@@ -52,6 +52,9 @@ $_enter-delay: $_label-duration - $_visible-duration;
     flex: 1;
     opacity: 0;
     transition: animation.standard(opacity, $_visible-duration);
+    // Content elements provided to the field (such as <input>) may use
+    // `currentColor` to inherit this property.
+    color: var(--_content-color);
 
     .md3-field--no-label &,
     .md3-field--focused &,
@@ -60,4 +63,50 @@ $_enter-delay: $_label-duration - $_visible-duration;
       transition-delay: $_enter-delay;
     }
   }
+
+  .md3-field--disabled {
+    &.md3-field--no-label,
+    &.md3-field--focused,
+    &.md3-field--populated {
+      .md3-field__content {
+        opacity: var(--_disabled-content-opacity);
+      }
+    }
+  }
+
+  :hover {
+    .md3-field__content {
+      color: var(--_hover-content-color);
+    }
+  }
+
+  .md3-field--focused {
+    .md3-field__content {
+      color: var(--_focus-content-color);
+    }
+  }
+
+  .md3-field--disabled {
+    .md3-field__content {
+      color: var(--_disabled-content-color);
+    }
+  }
+
+  .md3-field--error:not(.md3-field--disabled) {
+    .md3-field__content {
+      color: var(--_error-content-color);
+    }
+
+    &:hover {
+      .md3-field__content {
+        color: var(--_error-hover-content-color);
+      }
+    }
+
+    &.md3-field--focused {
+      .md3-field__content {
+        color: var(--_error-focus-content-color);
+      }
+    }
+  }
 }

package/field/lib/_filled-field.scss

@@ -7,123 +7,202 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '@material/web/motion/animation';
-@use './field-theme';
+@use '../../motion/animation';
+@use '../../sass/resolvers';
+@use '../../sass/shape';
+@use '../../sass/theme';
+@use './md-comp-filled-field';
+@use './shared';
 
 $_animation-duration: 150ms;
 
-@mixin static-styles() {
-  .md3-field--filled {
-    .md3-field__container {
-      @include container;
+@mixin theme($tokens) {
+  $reference: md-comp-filled-field.values();
+  // Add resolved tokens so that $theme may specify them.
+  $reference: map.merge($reference, shared.resolve-tokens($reference));
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, filled-field);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: md-comp-filled-field.values();
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, filled-field);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
     }
+  }
 
-    &:not(.md3-field--disabled):hover {
-      .md3-field__state-layer {
-        @include container-state-layer-hover;
-      }
+  .md3-field__container {
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-end-radius: var(--_container-shape-end-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    // If bottom corner radii are set, prevent the active indicator from
+    // overflowing.
+    overflow: hidden;
+    padding-top: var(--_container-padding-vertical);
+    padding-bottom: var(--_container-padding-vertical);
+    // Needed for negative z-index below to place background and state layer
+    // behind content.
+    z-index: 0;
+
+    // ::before is used for background color so that opacity may be changed
+    // without affecting content
+    &::before {
+      background: var(--_container-color);
+    }
+
+    // ::after is used for the state layer color and opacity
+    &::after {
+      visibility: hidden;
     }
 
-    .md3-field__label--floating {
-      @include label-floating;
+    &::before,
+    &::after {
+      border-radius: inherit;
+      content: '';
+      display: flex;
+      height: 100%;
+      position: absolute;
+      width: 100%;
+      z-index: -1;
     }
   }
 
+  .md3-field__label--floating {
+    position: absolute;
+    top: 0;
+  }
+
   .md3-field__state-layer {
-    @include container-state-layer;
+    border-radius: inherit;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    visibility: hidden;
+    z-index: -1;
+
+    .md3-field:not(.md3-field--disabled):hover & {
+      visibility: visible;
+    }
   }
 
   .md3-field__active-indicator {
-    @include active-indicator;
+    // Prevent click events on the indicator element since it has no width and
+    // causes bugs when handled by the foundation for updating transform-origin.
+    inset: auto 0 0 0;
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+
+    &::before,
+    &::after {
+      border-bottom: var(--_active-indicator-height) solid
+        var(--_active-indicator-color);
+      inset: auto 0 0 0;
+      content: '';
+      position: absolute;
+      width: 100%;
+    }
+
+    // focused indicator
+    &::after {
+      opacity: 0;
+      transform: scaleX(0);
+      // The element needs to update the transform-origin style attribute in
+      // response to click events. Psuedo elements cannot have their style
+      // updated, but their transform-origin can be inherited.
+      transform-origin: inherit;
+      // Add two transitions: opacity and a delayed transform. With a non-delayed
+      // transform transition on the focus selector without an opacity transition,
+      // this will result in the indicator scaling on enter and fading on exit.
+      transition: animation.standard(opacity, $_animation-duration),
+        transform 0s ease $_animation-duration;
+    }
 
     .md3-field--focused & {
-      @include active-indicator-focus;
+      &::after {
+        opacity: 1;
+        transform: scaleX(1);
+        transition: animation.standard(transform, $_animation-duration);
+      }
     }
   }
-}
 
-@mixin container() {
-  // If bottom corner radii are set, prevent the active indicator from
-  // overflowing.
-  overflow: hidden;
-  // Needed for negative z-index below to place background and state layer
-  // behind content.
-  z-index: 0;
-
-  // ::before is used for background color so that opacity may be changed
-  // without affecting content
-  &::before,
-  // ::after is used for the state layer color and opacity
-  &::after {
-    border-radius: inherit;
-    content: '';
-    display: flex;
-    height: 100%;
-    position: absolute;
-    width: 100%;
-    z-index: -1;
+  .md3-field:not(.md3-field--with-start) {
+    .md3-field__start {
+      padding-inline-start: var(--_container-padding-horizontal);
+    }
   }
 
-  &::after {
-    visibility: hidden;
+  .md3-field:not(.md3-field--with-end) {
+    .md3-field__end {
+      padding-inline-end: var(--_container-padding-horizontal);
+    }
   }
-}
 
-@mixin container-state-layer() {
-  border-radius: inherit;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-  visibility: hidden;
-  z-index: -1;
-}
+  .md3-field:not(.md3-field--no-label) {
+    .md3-field__middle {
+      padding-top: var(--_label-text-populated-line-height);
+    }
+  }
 
-@mixin container-state-layer-hover() {
-  visibility: visible;
-}
+  :hover {
+    .md3-field__active-indicator::before {
+      border-bottom-color: var(--_hover-active-indicator-color);
+      border-bottom-width: var(--_hover-active-indicator-height);
+    }
 
-@mixin label-floating() {
-  position: absolute;
-  top: 0;
-}
+    .md3-field__state-layer {
+      background: var(--_hover-state-layer-color);
+      opacity: var(--_hover-state-layer-opacity);
+    }
+  }
 
-@mixin active-indicator() {
-  // Prevent click events on the indicator element since it has no width and
-  // causes bugs when handled by the foundation for updating transform-origin.
-  inset: auto 0 0 0;
-  pointer-events: none;
-  position: absolute;
-  width: 100%;
-
-  &::before,
-  &::after {
-    border-bottom-style: solid;
-    inset: auto 0 0 0;
-    content: '';
-    position: absolute;
-    width: 100%;
+  // Focus is on a separate element and does not need a focus selector
+  .md3-field__active-indicator::after {
+    border-bottom-color: var(--_focus-active-indicator-color);
+    border-bottom-width: var(--_focus-active-indicator-height);
   }
 
-  // focused indicator
-  &::after {
-    opacity: 0;
-    transform: scaleX(0);
-    // The foundation needs to update the transform-origin style attribute in
-    // response to click events. Psuedo elements cannot have their style
-    // updated, but their transform-origin can be inherited.
-    transform-origin: inherit;
-    // Add two transitions: opacity and a delayed transform. With a non-delayed
-    // transform transition on the focus selector without an opacity transition,
-    // this will result in the indicator scaling on enter and fading on exit.
-    transition: animation.standard(opacity, $_animation-duration),
-      transform 0s ease $_animation-duration;
+  .md3-field--disabled {
+    .md3-field__active-indicator::before {
+      border-bottom-color: var(--_disabled-active-indicator-color);
+      border-bottom-width: var(--_disabled-active-indicator-height);
+      opacity: var(--_disabled-active-indicator-opacity);
+    }
+
+    .md3-field__container::before {
+      background: var(--_disabled-container-color);
+      opacity: var(--_disabled-container-opacity);
+    }
   }
-}
 
-@mixin active-indicator-focus() {
-  &::after {
-    opacity: 1;
-    transform: scaleX(1);
-    transition: animation.standard(transform, $_animation-duration);
+  .md3-field--error:not(.md3-field--disabled) {
+    .md3-field__active-indicator::before {
+      border-bottom-color: var(--_error-active-indicator-color);
+    }
+
+    &:hover {
+      .md3-field__active-indicator::before {
+        border-bottom-color: var(--_error-hover-active-indicator-color);
+      }
+
+      .md3-field__state-layer {
+        background: var(--_error-hover-state-layer-color);
+        opacity: var(--_error-hover-state-layer-opacity);
+      }
+    }
+
+    // Focus is on a separate element and does not need a focus selector
+    .md3-field__active-indicator::after {
+      border-bottom-color: var(--_error-focus-active-indicator-color);
+    }
   }
 }

package/field/lib/_label.scss

@@ -3,11 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+@use '../../sass/typography';
+
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@mixin styles() {
   .md3-field__label {
+    color: var(--_label-text-color);
     overflow: hidden;
     max-width: 100%;
     // The resting label at 100% height can block pointer events to the content
@@ -23,6 +26,14 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     z-index: 1;
+
+    @include typography.theme-styles(
+      (
+        font: var(--_label-text-font),
+        tracking: var(--_label-text-tracking),
+        weight: var(--_label-text-weight),
+      )
+    );
   }
 
   .md3-field__label--resting {
@@ -31,10 +42,22 @@
     transform: translateY(-50%);
     /*rtl:ignore*/
     transform-origin: top left;
+
+    @include typography.theme-styles(
+      (
+        size: var(--_label-text-size),
+        line-height: var(--_label-text-line-height),
+      )
+    );
   }
 
   .md3-field__label--floating {
-    /*! Used in field.ts @queryAsync. go/css-conformance#unstyled-classes */
+    @include typography.theme-styles(
+      (
+        size: var(--_label-text-populated-size),
+        line-height: var(--_label-text-populated-line-height),
+      )
+    );
   }
 
   .md3-field__label--hidden {
@@ -46,4 +69,44 @@
       display: none;
     }
   }
+
+  :hover {
+    .md3-field__label {
+      color: var(--_hover-label-text-color);
+    }
+  }
+
+  .md3-field--focused {
+    .md3-field__label {
+      color: var(--_focus-label-text-color);
+    }
+  }
+
+  .md3-field--disabled {
+    .md3-field__label {
+      color: var(--_disabled-label-text-color);
+
+      &:not(.md3-field__label--hidden) {
+        opacity: var(--_disabled-label-text-opacity);
+      }
+    }
+  }
+
+  .md3-field--error:not(.md3-field--disabled) {
+    .md3-field__label {
+      color: var(--_error-label-text-color);
+    }
+
+    &:hover {
+      .md3-field__label {
+        color: var(--_error-hover-label-text-color);
+      }
+    }
+
+    &.md3-field--focused {
+      .md3-field__label {
+        color: var(--_error-focus-label-text-color);
+      }
+    }
+  }
 }

package/field/lib/_md-comp-filled-field.scss

@@ -0,0 +1,72 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '../../tokens';
+
+$_default-deps: (
+  md-sys-color: tokens.md-sys-color-values-light(),
+  md-sys-shape: tokens.md-sys-shape-values(),
+  md-sys-state: tokens.md-sys-state-values(),
+  md-sys-typescale: tokens.md-sys-typescale-values(),
+);
+
+@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
+  $text-field-values: tokens.md-comp-filled-text-field-values(
+    $deps,
+    $exclude-hardcoded-values
+  );
+  // TODO(b/203778922): Remove *-type when type composite tokens are removed
+  // Remove unused tokens.
+  $values: map.remove(
+    $text-field-values,
+    caret-color,
+    disabled-input-text-color,
+    disabled-input-text-opacity,
+    error-focus-caret-color,
+    error-focus-input-text-color,
+    error-hover-input-text-color,
+    error-input-text-color,
+    focus-input-text-color,
+    hover-input-text-color,
+    input-text-color,
+    input-text-font,
+    input-text-line-height,
+    input-text-size,
+    input-text-tracking,
+    input-text-type,
+    input-text-weight,
+    input-text-placeholder-color,
+    input-text-prefix-color,
+    input-text-suffix-color,
+    label-text-type,
+    supporting-text-type
+  );
+
+  // Add missing tokens.
+  $values: map.merge(
+    $values,
+    (
+      container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
+      container-padding-vertical: if($exclude-hardcoded-values, null, 8px),
+      content-color: map.get($text-field-values, input-text-color),
+      disabled-content-color:
+        map.get($text-field-values, disabled-input-text-color),
+      disabled-content-opacity:
+        map.get($text-field-values, disabled-input-text-opacity),
+      error-content-color: map.get($text-field-values, error-input-text-color),
+      error-focus-content-color:
+        map.get($text-field-values, error-focus-input-text-color),
+      error-hover-content-color:
+        map.get($text-field-values, error-hover-input-text-color),
+      focus-content-color: map.get($text-field-values, focus-input-text-color),
+      hover-content-color: map.get($text-field-values, hover-input-text-color),
+      supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
+      supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
+    )
+  );
+
+  @return $values;
+}

package/field/lib/_md-comp-outlined-field.scss

@@ -0,0 +1,74 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '../../tokens';
+
+$_default-deps: (
+  md-sys-color: tokens.md-sys-color-values-light(),
+  md-sys-shape: tokens.md-sys-shape-values(),
+  md-sys-state: tokens.md-sys-state-values(),
+  md-sys-typescale: tokens.md-sys-typescale-values(),
+);
+
+@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
+  $text-field-values: tokens.md-comp-outlined-text-field-values(
+    $deps,
+    $exclude-hardcoded-values
+  );
+  // TODO(b/203778922): Remove *-type when type composite tokens are removed
+  // Remove unused tokens.
+  $values: map.remove(
+    $text-field-values,
+    caret-color,
+    disabled-input-text-color,
+    disabled-input-text-opacity,
+    error-focus-caret-color,
+    error-focus-input-text-color,
+    error-hover-input-text-color,
+    error-input-text-color,
+    focus-input-text-color,
+    hover-input-text-color,
+    input-text-color,
+    input-text-font,
+    input-text-line-height,
+    input-text-size,
+    input-text-tracking,
+    input-text-type,
+    input-text-weight,
+    input-text-placeholder-color,
+    input-text-prefix-color,
+    input-text-suffix-color,
+    label-text-type,
+    supporting-text-type
+  );
+
+  // Add missing tokens.
+  $values: map.merge(
+    $values,
+    (
+      container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
+      container-padding-vertical: if($exclude-hardcoded-values, null, 8px),
+      content-color: map.get($text-field-values, input-text-color),
+      disabled-content-color:
+        map.get($text-field-values, disabled-input-text-color),
+      disabled-content-opacity:
+        map.get($text-field-values, disabled-input-text-opacity),
+      error-content-color: map.get($text-field-values, error-input-text-color),
+      error-focus-content-color:
+        map.get($text-field-values, error-focus-input-text-color),
+      error-hover-content-color:
+        map.get($text-field-values, error-hover-input-text-color),
+      focus-content-color: map.get($text-field-values, focus-input-text-color),
+      hover-content-color: map.get($text-field-values, hover-input-text-color),
+      label-text-padding-bottom: if($exclude-hardcoded-values, null, 8px),
+      outline-label-padding: if($exclude-hardcoded-values, null, 4px),
+      supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
+      supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
+    )
+  );
+
+  @return $values;
+}