vaadin-text-field not applying material design.

Flow
1

I’m using vaadin 12 and writing custom polymer components.

On my main layout I have @Theme(Material.class)

I have a component that has a vaadin-button and a vaadin-text-field.

The vaadin-button is being correctly themed however the vaadin-text-field is not been themed.

If I change my text field import from:


<link rel="import" href="/frontend/bower_components/vaadin-text-field/src/vaadin-text-field.html">

to

<link rel="import" href="/frontend/bower_components/vaadin-text-field/theme/material/vaadin-text-field.html">

Then the text field is correctly themed but this seems wrong.

The component:

<link rel="import"
	href="/frontend/bower_components/polymer/polymer.html">

<link rel="import"
	href="/frontend/bower_components/vaadin-text-field/theme/material/vaadin-text-field.html">

<link rel="import"
	href="/frontend/bower_components/vaadin-button/src/vaadin-button.html">



<dom-module id="reg-business-name"> <template>
<style include="shared-styles">
</style>

<div>
	<p>Business Name</p>
	<vaadin-button theme="contained">hi</vaadin-button>
	<vaadin-text-field label="Business Name"
		placeholder="Enter your business name"></vaadin-text-field>
	<br></br>
</div>
</template> <script>
        class BusinessName extends Polymer.Element {
            static get is() {
                return 'reg-business-name';
            }

            static get properties() {
                return {
                    // Declare your properties here.
                };
            }
        }
        customElements.define(BusinessName.is, BusinessName);
    </script> </dom-module>