diff --git a/guides/release/tutorial/part-1/interactive-components.md b/guides/release/tutorial/part-1/interactive-components.md
index 14c5467694..92a1853ab9 100644
--- a/guides/release/tutorial/part-1/interactive-components.md
+++ b/guides/release/tutorial/part-1/interactive-components.md
@@ -226,11 +226,10 @@ Finally, we added the `@action` decorator to our method. This indicates to Ember
 
 With that, it's time to wire this up in the template section:
 
-```gjs { data-filename="app/components/rental/image.gjs" data-diff="+4,-15,+16,-19,+20,-22,+23,-26,+27" }
+```gjs { data-filename="app/components/rental/image.gjs" data-diff="-14,+15,-18,+19,-21,+22,-25,+26" }
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { on } from '@ember/modifier';
 
 export default class RentalImage extends Component {
   @tracked isLarge = false;
@@ -263,7 +262,7 @@ We changed two things here.
 
 First, since we wanted to make our component interactive, we switched the containing tag from `<div>` to `<button>` (this is important for accessibility reasons). By using the correct semantic tag, we will also get focusability and keyboard interaction handling "for free".
 
-Next, we used the `{{on}}` _[modifier](../../../components/template-lifecycle-dom-and-modifiers/#toc_event-handlers)_ to attach `this.toggleSize` as a click handler on the button. The `{{on}}` modifier is imported from the `@ember/modifier` package, which is part of Ember.
+Next, we used the `{{on}}` _[modifier](../../../components/template-lifecycle-dom-and-modifiers/#toc_event-handlers)_ to attach `this.toggleSize` as a click handler on the button. The `{{on}}` modifier is a built-in keyword in Ember.
 
 With that, we have created our first _interactive_ component. Go ahead and try it in the browser!
 
@@ -337,11 +336,10 @@ Let's clean up our template before moving on. We introduced a lot of duplication
 
 These changes are buried deep within the large amount of duplicated code. We can reduce the duplication by using an `{{if}}` _[expression](../../../components/conditional-content/#toc_inline-if)_ instead:
 
-```gjs { data-filename="app/components/rental/image.gjs" data-diff="-14,-15,-16,+17,+18,+19,-21,-22,-23,-24,+25,-27,-28,+29,+30" }
+```gjs { data-filename="app/components/rental/image.gjs" data-diff="-13,-14,-15,+16,+17,+18,-20,-21,-22,-23,+24,-26,-27,+28,+29" }
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { on } from '@ember/modifier';
 
 export default class RentalImage extends Component {
   @tracked isLarge = false;
@@ -376,11 +374,10 @@ The expression version of `{{if}}` takes two arguments. The first argument is th
 
 Optionally, `{{if}}` can take a third argument for what the expression should evaluate into if the condition is false. This means we could rewrite the button label like so:
 
-```gjs { data-filename="app/components/rental/image.gjs" data-diff="-16,-17,-18,-19,-20,+21" }
+```gjs { data-filename="app/components/rental/image.gjs" data-diff="-15,-16,-17,-18,-19,+20" }
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { on } from '@ember/modifier';
 
 export default class RentalImage extends Component {
   @tracked isLarge = false;
diff --git a/guides/release/tutorial/part-1/orientation.md b/guides/release/tutorial/part-1/orientation.md
index aff222b8f2..12b272bde2 100644
--- a/guides/release/tutorial/part-1/orientation.md
+++ b/guides/release/tutorial/part-1/orientation.md
@@ -24,7 +24,7 @@ To verify that your installation was successful, run:
 
 ```shell
 $ ember --version
-ember-cli: 6.12.0
+ember-cli: 7.3.0
 node: 20.20.2
 os: linux x64
 ```
@@ -143,14 +143,13 @@ super-rentals
 │   │       ├── vendor.css
 │   │       └── vendor.js
 │   ├── assets
-│   │   ├── app-DgioD2rk.css
-│   │   ├── app-kH0EqUK0.js
-│   │   ├── dist-BUdT4Swa.js
-│   │   ├── main-BINtkAbW.js
-│   │   ├── manager-C2ILo-5D.js
-│   │   ├── modules-4-12-BPXQYON-.js
-│   │   ├── tests-BdSWFklr.css
-│   │   └── tests-CIHkQsCT.js
+│   │   ├── app-B85jO3oc.css
+│   │   ├── app-D1Y5nz2p.js
+│   │   ├── main-Ccofqu7K.js
+│   │   ├── modules-4-12-C-gQXu4k.js
+│   │   ├── rolldown-runtime-hePW80VL.js
+│   │   ├── tests-C0U09n5o.css
+│   │   └── tests-CH0rHjgr.js
 │   ├── ember-welcome-page
 │   │   └── construction.png
 │   ├── tests
@@ -192,7 +191,7 @@ super-rentals
 ├── testem.cjs
 └── vite.config.mjs
 
-26 directories, 59 files
+26 directories, 58 files
 ```
 
 We'll learn about the purposes of these files and folders as we go. For now, just know that we'll spend most of our time working within the `app` folder.
@@ -219,11 +218,11 @@ Build successful (9761ms)
 
 Slowest Nodes (totalTime >= 5%) | Total (avg)
 -+-
-Babel: @embroider/macros (1) | 330ms
+Babel: @embroider/macros (1) | 257ms
 
 
 
-  VITE v8.0.11  ready in 3171 ms
+  VITE v8.3.3  ready in 2587 ms
 
   ➜  Local:   http://localhost:4200/
 ```
diff --git a/guides/release/tutorial/part-1/reusable-components.md b/guides/release/tutorial/part-1/reusable-components.md
index b94d6fb374..7296ec1dfe 100644
--- a/guides/release/tutorial/part-1/reusable-components.md
+++ b/guides/release/tutorial/part-1/reusable-components.md
@@ -6,83 +6,149 @@ The last missing feature for the `<Rental>` component is a map to show the locat
 
 While adding the map, you will learn about:
 
-- Managing application-level configurations
+- Installing and using third-party packages
+- Using modifiers to interact with the DOM
 - Parameterizing components with arguments
 - Accessing component arguments
-- Interpolating values in templates
+- Safely injecting styles with `trustHTML`
 - Overriding HTML attributes in `...attributes`
 - Refactoring with getters and auto-track
 - Getting JavaScript values into the test context
+- Centralizing configuration in `config/environment`
 
-## Managing Application-level Configurations
+## Generating a Component with a Component Class
 
-We will use the [TomTom](https://developer.tomtom.com/map-display-api/documentation/product-information/introduction) API to generate maps for our rental properties. You can [sign up](https://developer.tomtom.com) for free and without a credit card.
+We will use [MapLibre GL JS](https://maplibre.org/), an open-source mapping library, to render interactive maps. Since MapLibre GL is just an npm package, we can install and use it exactly as we would in any plain JavaScript project.
 
-TomTom provides a [static map images API](https://developer.tomtom.com/map-display-api/documentation/raster/static-image), which serves map images in PNG format. This means that we can generate the appropriate URL for the parameters we want and render the map using a standard `<img>` tag. Pretty neat!
+Let's add it to our app:
 
-Once you have signed up, grab your _[default public token](https://developer.tomtom.com/user/me/apps)_ and paste it into `config/environment.js`:
+```shell
+$ npm install maplibre-gl@6 --save-dev
+ WARN  deprecated eslint@9.39.5: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+../../..                                 |  +23 ++
+devDependencies:
++ maplibre-gl 6.13.0
+```
 
-```js { data-filename="config/environment.js" data-diff="+48,+49" }
-'use strict';
+Now let's generate a new component for our map.
 
-module.exports = function (environment) {
-  const ENV = {
-    modulePrefix: 'super-rentals',
-    environment,
-    rootURL: '/',
-    locationType: 'history',
-    EmberENV: {
-      RAISE_ON_DEPRECATION: true,
-      EXTEND_PROTOTYPES: false,
-      FEATURES: {
-        // Here you can enable experimental features on an ember canary build
-        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
-      },
-    },
+```shell
+$ ember generate component map --component-class=@glimmer/component
+installing component
+  create app/components/map.gjs
+installing component-test
+  create tests/integration/components/map-test.gjs
 
-    APP: {
-      // Here you can pass flags/options to your application instance
-      // when it is created
-    },
-  };
+Running "lint:fix" script...
+```
 
-  if (environment === 'development') {
-    // ENV.APP.LOG_RESOLVER = true;
-    // ENV.APP.LOG_ACTIVE_GENERATION = true;
-    // ENV.APP.LOG_TRANSITIONS = true;
-    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
-    // ENV.APP.LOG_VIEW_LOOKUPS = true;
-  }
+Since not every component will necessarily have some defined behavior associated with it, the component generator does not generate the JavaScript parts of the file for us by default. As we saw earlier, we can always add the JavaScript class to a component later on.
 
-  if (environment === 'test') {
-    // Testem prefers this...
-    ENV.locationType = 'none';
+However, in the case of our `<Map>` component, we are pretty sure that we are going to need a JavaScript file for some behavior that we have yet to define! To save a step later, we can pass the `--component-class=@glimmer/component` flag to the component generator so that we have everything we need from the get-go.
 
-    // keep test console output quieter
-    ENV.APP.LOG_ACTIVE_GENERATION = false;
-    ENV.APP.LOG_VIEW_LOOKUPS = false;
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+        <p>Too much typing? Use <code>ember g component map -gc</code> instead. The <code>-gc</code> flag stands for <strong>G</strong>limmer <strong>c</strong>omponent, but you may also remember it as <strong>g</strong>enerate <strong>c</strong>lass.</p>
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="">
+  </div>
+</div>
 
-    ENV.APP.rootElement = '#ember-testing';
-    ENV.APP.autoboot = false;
-  }
+## Making use of arguments to create a reusable Map component
 
-  if (environment === 'production') {
-    // here you can enable a production-specific feature
-  }
+Let's update our component to render an interactive map:
 
-  ENV.TOMTOM_ACCESS_TOKEN = 'paste your TomTom API key here';
+```gjs { data-filename="app/components/map.gjs" data-diff="+2,+3,+4,+5,+6,+7,+8,+9,+10,+11,+12,+13,+14,+15,+16,+17,+18,+19,-23,+24,+25,+26,+27" }
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { Map as MapLibreGLMap, Marker } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
+
+const displayMap = modifier((element, [lat, lng, zoom]) => {
+  const map = new MapLibreGLMap({
+    container: element,
+    style: MAP_STYLE,
+    center: [lng, lat],
+    zoom,
+  });
 
-  return ENV;
-};
+  new Marker().setLngLat([lng, lat]).addTo(map);
+
+  return () => map.remove();
+});
+
+export default class Map extends Component {
+  <template>
+    {{yield}}
+    <div class="map"
+      {{displayMap @lat @lng @zoom}}
+      style="width: 500px; height: 500px;"
+    ></div>
+  </template>
+}
 ```
 
-As its name implies, `config/environment.js` is used to _configure_ our app and store API keys like these. These values can be accessed from other parts of our app, and they can have different values depending on the current environment (which might be development, test, or production).
+There is a lot going on here! Let's work through it piece by piece.
 
-After saving the changes to our configuration file, we will need to restart our development server to pick up these file changes. Unlike the files we have edited so far, `config/environment.js` is not automatically reloaded.
+First, we have imports for `modifier` from `ember-modifier`, `Map` (aliased as `MapLibreGLMap` so as not to conflict with the component class name) and `Marker` from `maplibre-gl`, and the MapLibre CSS file. The CSS provides the map controls and visual elements that MapLibre renders — without it, the map buttons and overlays won't look right.
 
-<!-- TODO: https://github.com/ember-cli/ember-cli/issues/8782 -->
+Next, we define a `MAP_STYLE` constant pointing to [OpenFreeMap](https://openfreemap.org/), an open-source tile server that provides free map tiles with no API key required.
 
-You can stop the server by finding the terminal window where `npm start` is running, then type `Ctrl + C`. That is, typing the "C" key on your keyboard _while_ holding down the "Ctrl" key at the same time. Once it has stopped, you can start it back up again with the same `npm start` command.
+The heart of this component is `displayMap`, a custom _[modifier](../../../components/template-lifecycle-dom-and-modifiers/)_ created with the `modifier()` function from `ember-modifier`. A modifier is a way to run JavaScript code that directly interacts with a specific DOM element. When Ember renders `<div {{displayMap ...}}>`, our modifier function is called with two arguments: the DOM element itself, and an array of any positional arguments passed in the template. Here we use destructuring — `[lat, lng, zoom]` — to unpack that array directly in the function signature.
+
+Inside the modifier, we use `maplibregl` exactly as we would in plain JavaScript: instantiate a `new MapLibreGLMap()`, pass it the container element, the OpenFreeMap style URL, and the coordinates, then add a `Marker` at the same position to visually pin the location. No Ember-specific APIs are needed — it is just regular JavaScript library usage.
+
+Finally, the modifier returns a _cleanup function_, `() => map.remove()`. Ember automatically calls this function when the element is removed from the DOM — for instance, when the user navigates to a different page. Returning a cleanup function is how modifiers signal to Ember what teardown work needs to happen.
+
+Our component's template accepts `@lat`, `@lng`, and `@zoom` as _[arguments](../../../components/component-arguments-and-html-attributes/#toc_arguments)_ to the `<Map>` component that we pass through to the modifier. By _parameterizing_ our component using arguments, we made a reusable component that can be invoked from different parts of the app and customized to meet the needs for those specific contexts. We have already seen this in action when using the `<LinkTo>` component [earlier](../building-pages/); we had to specify a `@route` argument so that it knew what page to navigate to.
+
+Let's write some initial tests to make sure the component renders correctly:
+
+```gjs { data-filename="tests/integration/components/map-test.gjs" data-diff="-9,-10,-11,-12,-13,-14,-15,-16,-17,-18,-19,+20,-22,-23,-24,+25,+26,+27,+28,+29,+30,+31,-34,+35" }
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'super-rentals/tests/helpers';
+import { render } from '@ember/test-helpers';
+import Map from 'super-rentals/components/map';
+
+module('Integration | Component | map', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Updating values is achieved using autotracking, just like in app code. For example:
+    // class State { @tracked myProperty = 0; }; const state = new State();
+    // and update using state.myProperty = 1; await rerender();
+    // Handle any actions with function myAction(val) { ... };
+
+    await render(<template><Map /></template>);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+  test('it renders a map for the specified parameters', async function (assert) {
+    await render(<template>
+      <Map>
+        template block text
+      </Map>
+      <Map
+        @lat="37.7797"
+        @lng="-122.4184"
+        @zoom="10"
+        @width="150"
+        @height="120"
+      />
+    </template>);
+
+    assert.dom().hasText('template block text');
+    assert.dom('.map').exists();
+  });
+});
+```
 
 ```shell
 $ npm start
@@ -102,115 +168,149 @@ Build successful (13286ms)
 
 Slowest Nodes (totalTime >= 5%) | Total (avg)
 -+-
-Babel: @embroider/macros (1) | 336ms
+Babel: @embroider/macros (1) | 250ms
 
 
+5:46:52 AM [vite] (client) Re-optimizing dependencies because lockfile has changed
 
-  VITE v8.0.11  ready in 3176 ms
+  VITE v8.3.3  ready in 2457 ms
 
   ➜  Local:   http://localhost:4200/
 ```
 
-## Generating a Component with a Component Class
+<img src="/images/tutorial/part-1/reusable-components/pass@2x.png" alt="Tests passing with the initial &lt;Map&gt; tests" width="1024" height="768">
 
-With the TomTom API key in place, let's generate a new component for our map.
+## Sizing the Map with inline styles
 
-```shell
-$ ember generate component map --component-class=@glimmer/component
-installing component
-  create app/components/map.gjs
-installing component-test
-  create tests/integration/components/map-test.gjs
+Our map renders, but it is a fixed size. We want the caller to be able to pass `@width` and `@height` arguments to control the map's dimensions.
 
-Running "lint:fix" script...
+The natural way to set a size is through an inline `style` attribute. You might try:
+
+```gjs
+<div class="map"
+  {{displayMap @lat @lng @zoom}}
+  style="width: {{@width}}px; height: {{@height}}px;"
+></div>
 ```
 
-Since not every component will necessarily have some defined behavior associated with it, the component generator does not generate the JavaScript parts of the file for us by default. As we saw earlier, we can always add the JavaScript class to a component later on.
+However, Ember will log a console warning when you do this:
 
-However, in the case of our `<Map>` component, we are pretty sure that we are going to need a JavaScript file for some behavior that we have yet to define! To save a step later, we can pass the `--component-class=@glimmer/component` flag to the component generator so that we have everything we need from the get-go.
+> Binding style attributes may introduce cross-site scripting vulnerabilities...
 
-<div class="cta">
-  <div class="cta-note">
-    <div class="cta-note-body">
-      <div class="cta-note-heading">Zoey says...</div>
-      <div class="cta-note-message">
-        <p>Too much typing? Use <code>ember g component map -gc</code> instead. The <code>-gc</code> flag stands for <strong>G</strong>limmer <strong>c</strong>omponent, but you may also remember it as <strong>g</strong>enerate <strong>c</strong>lass.</p>
-      </div>
-    </div>
-    <img src="/images/mascots/zoey.png" role="presentation" alt="">
-  </div>
-</div>
-
-## Parameterizing Components with Arguments
+Ember warns about dynamic string interpolation inside `style` attributes because of the risk of _[XSS (Cross-Site Scripting)](https://owasp.org/www-community/attacks/xss/)_ attacks. If `@width` could ever receive a value from **untrusted** user input, a malicious string could inject arbitrary styles — or worse, `</style><script>` — into the page.
 
-Let's update our component:
+To safely set a computed style string that we control, we use `trustHTML` from `@ember/template`. This function takes a string and marks it as _trusted HTML_, which tells Ember it can be used in HTML attribute contexts without further escaping:
 
-```gjs { data-filename="app/components/map.gjs" data-diff="+2,+5,+6,+7,+8,-10,+11,+12,+13,+14,+15,+16,+17,+18" }
+```gjs { data-filename="app/components/map.gjs" data-diff="+3,+23,+24,+25,+26,-30,+31" }
 import Component from '@glimmer/component';
-import ENV from 'super-rentals/config/environment';
+import { modifier } from 'ember-modifier';
+import { trustHTML } from '@ember/template';
+import { Map as MapLibreGLMap, Marker } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
+
+const displayMap = modifier((element, [lat, lng, zoom]) => {
+  const map = new MapLibreGLMap({
+    container: element,
+    style: MAP_STYLE,
+    center: [lng, lat],
+    zoom,
+  });
+
+  new Marker().setLngLat([lng, lat]).addTo(map);
+
+  return () => map.remove();
+});
 
 export default class Map extends Component {
-  get token() {
-    return encodeURIComponent(ENV.TOMTOM_ACCESS_TOKEN);
+  get mapSize() {
+    return trustHTML(`width: ${this.args.width}px; height: ${this.args.height}px;`);
   }
 
   <template>
-    {{yield}}
-    <div class="map">
-      <img
-        alt="Map image at coordinates {{@lat}},{{@lng}}"
-        ...attributes
-        src="https://api.tomtom.com/map/1/staticimage?key={{this.token}}&zoom={{@zoom}}&center={{@lng}},{{@lat}}&width={{@width}}&height={{@height}}"
-        width={{@width}} height={{@height}}
-      >
-    </div>
+    <div class="map"
+      {{displayMap @lat @lng @zoom}}
+      style="width: 500px; height: 500px;"
+      style={{this.mapSize}}
+    ></div>
   </template>
 }
 ```
 
-Here, we import the access token from the config file and return it from a `token` _[getter](https://javascript.info/property-accessors)_. This allows us to access our token as `this.token` both inside the `Map` class body, as well as the template section. It is also important to [URL-encode](https://javascript.info/url#encoding-strings) the token, just in case it contains any special characters that are not URL-safe.
+We add a `mapSize` _[getter](https://javascript.info/property-accessors)_ to the `Map` class. From within our JavaScript class, we have access to component arguments using the `this.args.*` API. Here, `this.args.width` and `this.args.height` give us the values the caller passed as `@width` and `@height`. We interpolate those into a CSS style string and wrap the result with `trustHTML`.
 
-First, we have a container element for styling purposes.
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+        <p><code>this.args</code> is an API provided by the Glimmer component superclass. You may come across other component superclasses, such as "classic" components in legacy codebases, that provide different APIs for accessing component arguments from JavaScript code.</p>
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="">
+  </div>
+</div>
 
-Then we have an `<img>` tag to request and render the static map image from TomTom.
+We chose a getter merely to demonstrate both getters and `this.args`, we could instead have used a local helper function and passed in the values for `@width` and `@height` from the template.
 
-Our component's template contains several values that don't yet exist—`@lat`, `@lng`, `@zoom`, `@width`, and `@height`. These are _[arguments](../../../components/component-arguments-and-html-attributes/#toc_arguments)_ to the `<Map>` component that we will supply when invoking it.
+We know using `trustHTML` here is safe because `@width` and `@height` are numbers that we control — they are component arguments passed by the caller, not raw user input read from a form field or a URL parameter.
 
-By _parameterizing_ our component using arguments, we made a reusable component that can be invoked from different parts of the app and customized to meet the needs for those specific contexts. We have already seen this in action when using the `<LinkTo>` component [earlier](../building-pages/); we had to specify a `@route` argument so that it knew what page to navigate to.
+In the template, `{{this.mapSize}}` evaluates the getter and binds the resulting safe string to the `style` attribute.
 
-We supplied a reasonable default value for the `alt` attribute based on the values of the `@lat` and `@lng` arguments. You may notice that we are directly _interpolating_ values into the `alt` attribute's value. Ember will automatically concatenate these interpolated values into a final string value for us, including doing any necessary HTML-escaping.
+Let's update our test to assert that the style is applied correctly:
 
-## Overriding HTML Attributes in `...attributes`
+```gjs { data-filename="tests/integration/components/map-test.gjs" data-diff="-20,+21,+22,+23,+24" }
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'super-rentals/tests/helpers';
+import { render } from '@ember/test-helpers';
+import Map from 'super-rentals/components/map';
 
-Next, we used `...attributes` to allow the invoker to further customize the `<img>` tag, such as passing extra attributes such as `class`, as well as _overriding_ our default `alt` attribute with a more specific or human-friendly one.
+module('Integration | Component | map', function (hooks) {
+  setupRenderingTest(hooks);
 
-_The ordering is important here!_ Ember applies the attributes in the order that they appear. By assigning the default `alt` attribute first (_before_ `...attributes` is applied), we are explicitly providing the invoker the _option_ to provide a more tailored `alt` attribute according to their use case.
+  test('it renders a map for the specified parameters', async function (assert) {
+    await render(<template>
+      <Map
+        @lat="37.7797"
+        @lng="-122.4184"
+        @zoom="10"
+        @width="150"
+        @height="120"
+      />
+    </template>);
 
-Since the passed-in `alt` attribute (if any exists) will appear _after_ ours, it will override the value we specified. On the other hand, it is important that we assign `src`, `width`, and `height` after `...attributes`, so that they don't get accidentally overwritten by the invoker.
+    assert.dom('.map').exists();
+    assert
+      .dom('.map')
+      .exists()
+      .hasAttribute('style', 'width: 150px; height: 120px;');
+  });
+});
+```
 
-The `src` attribute interpolates all the required parameters into the URL format for TomTom's [static map image API](https://developer.tomtom.com/map-display-api/documentation/raster/static-image), including the URL-escaped access token from `this.token`.
+<img src="/images/tutorial/part-1/reusable-components/pass-2@2x.png" alt="Tests passing after adding mapSize" width="1024" height="768">
 
-Finally, since we are using the `@2x` "retina" image, we should specify the `width` and `height` attributes. Otherwise, the `<img>` will be rendered at twice the size than what we expected!
+## Getting JavaScript Values into the Test Context
+
+The `mapSize` helper depends on `@width` and `@height` — but does the `style` attribute update when those arguments change? Let's write a test to find out.
 
-We just added a lot of behavior into a single component, so let's write some tests! In particular, we should make sure to have some _[test coverage](../../../testing/)_ for the overriding-HTML-attributes behavior we discussed above.
+To update component arguments from inside a test, we need a way to hold mutable state outside the template. We can create a simple class for this, using the `@tracked` decorator just like we would in application code:
 
-```gjs { data-filename="tests/integration/components/map-test.gjs" data-diff="-3,+4,+5,-11,-12,-13,-14,-15,+16,+17,+18,+19,+20,+21,+22,+23,+24,+25,+26,+27,+28,+29,+30,+31,+32,+33,+34,+35,+36,+37,+38,+39,+40,+41,+42,+43,+44,+45,+46,-48,+49,+50,+51,+52,-54,+55,+56,+57,+58,+59,+60,+61,+62,+63,+64,+65,+66,+67,+68,+69,+70,+71,+72,+73,+74,-76,+77,-79,-80,-81,+82,+83,+84,+85,+86,+87,+88,+89,+90,+91,-94,+95,+96,+97,+98,+99" }
+```gjs { data-filename="tests/integration/components/map-test.gjs" data-diff="-3,+4,+6,-8,+9,-12,+13,+29,+30,+31,+32,+33,+34,+35,+36,+37,+38,+39,+40,+41,+42,+43,+44,+45,+46,+47,+48,+49,+50,+51,+52,+53,+54,+55,+56,+57,+58,+59,+60" }
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'super-rentals/tests/helpers';
 import { render } from '@ember/test-helpers';
-import { render, find } from '@ember/test-helpers';
-import ENV from 'super-rentals/config/environment';
+import { render, rerender } from '@ember/test-helpers';
 import Map from 'super-rentals/components/map';
+import { tracked } from '@glimmer/tracking';
 
 module('Integration | Component | map', function (hooks) {
+module('Integration | Component | map', function(hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function (assert) {
-    // Updating values is achieved using autotracking, just like in app code. For example:
-    // class State { @tracked myProperty = 0; }; const state = new State();
-    // and update using state.myProperty = 1; await rerender();
-    // Handle any actions with function myAction(val) { ... };
-  test('it renders a map image for the specified parameters', async function (assert) {
+  test('it renders a map for the specified parameters', async function (assert) {
+  test('it renders a map for the specified parameters', async function(assert) {
     await render(<template>
       <Map
         @lat="37.7797"
@@ -222,40 +322,117 @@ module('Integration | Component | map', function (hooks) {
     </template>);
 
     assert
-      .dom('.map img')
+      .dom('.map')
       .exists()
-      .hasAttribute('alt', 'Map image at coordinates 37.7797,-122.4184')
-      .hasAttribute('src')
-      .hasAttribute('width', '150')
-      .hasAttribute('height', '120');
+      .hasAttribute('style', 'width: 150px; height: 120px;');
+  });
+
+  test('it updates the style when the dimensions change', async function(assert) {
+    class State {
+      @tracked width = 150;
+      @tracked height = 120;
+    }
 
-    let { src } = find('.map img');
-    let token = encodeURIComponent(ENV.TOMTOM_ACCESS_TOKEN);
+    const state = new State();
 
-    assert.ok(
-      src.startsWith('https://api.tomtom.com/'),
-      'the src starts with "https://api.tomtom.com/"',
-    );
+    await render(<template>
+      <Map
+        @lat="37.7797"
+        @lng="-122.4184"
+        @zoom="10"
+        @width={{state.width}}
+        @height={{state.height}}
+      />
+    </template>);
 
-    assert.ok(
-      src.includes('zoom=10'),
-      'the src should include the zoom parameter',
-    );
+    assert
+      .dom('.map')
+      .hasAttribute('style', 'width: 150px; height: 120px;');
 
-    await render(<template><Map /></template>);
-    assert.ok(
-      src.includes('center=-122.4184,37.7797'),
-      'the src should include the lng,lat parameter',
-    );
+    state.width = 300;
+    state.height = 200;
 
-    assert.dom().hasText('');
-    assert.ok(
-      src.includes(`key=${token}`),
-      'the src should include the escaped access token',
-    );
+    await rerender();
+
+    assert
+      .dom('.map')
+      .hasAttribute('style', 'width: 300px; height: 200px;');
+  });
+});
+```
+
+In this test we create a local `State` class and an instance called `state`. There is nothing special about the name — it's a plain JavaScript class that holds reactive data. We decorate its properties with `@tracked` so that Ember knows to re-render whenever they change.
+
+After mutating `state.width` and `state.height`, we call `await rerender()` to give Ember a chance to flush the update before we assert again.
+
+Note that we did not mark our `mapSize` getter as `@tracked`. Unlike instance variables, getters cannot be "assigned" a new value directly, so it does not make sense for Ember to monitor them for changes.
+
+That being said, the values _produced_ by getters can certainly change. In our case, the value produced by `mapSize` depends on `this.args.width` and `this.args.height`. Whenever these dependencies are updated, we would expect `{{this.mapSize}}` in the template to be updated accordingly.
+
+Ember does this by automatically tracking any variables that were accessed while computing a getter's value. As long as the dependencies themselves are marked as `@tracked`, Ember knows exactly when to invalidate and re-render any templates that may contain "stale" getter values. This feature is also known as _[autotracking](../../../in-depth-topics/autotracking-in-depth/)_. 
+
+All arguments accessible from `this.args` (in other words, `this.args.*`) are implicitly marked as `@tracked` by the Glimmer component superclass. Since we inherited from that superclass, everything Just Works™.
+
+Auto-track works the same way inside modifiers: if the positional arguments passed to `{{displayMap @lat @lng @zoom}}` change, Ember will call the modifier's cleanup function and re-run the modifier with the new values.
+
+<img src="/images/tutorial/part-1/reusable-components/pass-3@2x.png" alt="Tests passing after the autotracking test" width="1024" height="768">
+
+## Overriding HTML Attributes in `...attributes`
+
+Next, we use `...attributes` to allow the invoker to further customize the map `<div>`, for example by passing accessibility attributes like `role` and `aria-label`:
+
+```gjs { data-filename="app/components/map.gjs" data-diff="+31" }
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { trustHTML } from '@ember/template';
+import { Map as MapLibreGLMap, Marker } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
+
+const displayMap = modifier((element, [lat, lng, zoom]) => {
+  const map = new MapLibreGLMap({
+    container: element,
+    style: MAP_STYLE,
+    center: [lng, lat],
+    zoom,
   });
 
-  test('the default alt attribute can be overridden', async function (assert) {
+  new Marker().setLngLat([lng, lat]).addTo(map);
+
+  return () => map.remove();
+});
+
+export default class Map extends Component {
+  get mapSize() {
+    return trustHTML(`width: ${this.args.width}px; height: ${this.args.height}px;`);
+  }
+
+  <template>
+    <div class="map"
+      {{displayMap @lat @lng @zoom}}
+      style={{this.mapSize}}
+      ...attributes
+    ></div>
+  </template>
+}
+```
+
+_The ordering is important here!_ Ember applies attributes in the order they appear. By placing `...attributes` _after_ `style={{this.mapSize}}`, we allow the invoker to override the inline styles if they want. Note that `...attributes` _does_ forward any modifiers the caller passes — but our own `{{displayMap ...}}` is defined directly on the element, so it always runs regardless of what the caller provides.
+
+Let's add a test to verify that `...attributes` works correctly:
+
+```gjs { data-filename="tests/integration/components/map-test.gjs" data-diff="+58,+59,+60,+61,+62,+63,+64,+65,+66,+67,+68,+69,+70,+71,+72,+73,+74,+75,+76,+77,+78" }
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'super-rentals/tests/helpers';
+import { render, rerender } from '@ember/test-helpers';
+import Map from 'super-rentals/components/map';
+import { tracked } from '@glimmer/tracking';
+
+module('Integration | Component | map', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders a map for the specified parameters', async function(assert) {
     await render(<template>
       <Map
         @lat="37.7797"
@@ -263,50 +440,77 @@ module('Integration | Component | map', function (hooks) {
         @zoom="10"
         @width="150"
         @height="120"
-        alt="A map of San Francisco"
       />
     </template>);
 
-    assert.dom('.map img').hasAttribute('alt', 'A map of San Francisco');
+    assert
+      .dom('.map')
+      .exists()
+      .hasAttribute('style', 'width: 150px; height: 120px;');
   });
 
-    // Template block usage:
-  test('the src, width and height attributes cannot be overridden', async function (assert) {
+  test('it updates the style when the dimensions change', async function(assert) {
+    class State {
+      @tracked width = 150;
+      @tracked height = 120;
+    }
+
+    const state = new State();
+
+    await render(<template>
+      <Map
+        @lat="37.7797"
+        @lng="-122.4184"
+        @zoom="10"
+        @width={{state.width}}
+        @height={{state.height}}
+      />
+    </template>);
+
+    assert
+      .dom('.map')
+      .hasAttribute('style', 'width: 150px; height: 120px;');
+
+    state.width = 300;
+    state.height = 200;
+
+    await rerender();
+
+    assert
+      .dom('.map')
+      .hasAttribute('style', 'width: 300px; height: 200px;');
+  });
+
+  test('the attributes can be customized', async function(assert) {
     await render(<template>
-      <Map>
-        template block text
-      </Map>
       <Map
         @lat="37.7797"
         @lng="-122.4184"
         @zoom="10"
         @width="150"
         @height="120"
-        src="/assets/images/teaching-tomster.png"
-        width="200"
-        height="300"
+        role="img"
+        aria-label="A map of San Francisco"
+        class="my-map"
       />
     </template>);
 
-    assert.dom().hasText('template block text');
     assert
-      .dom('.map img')
-      .hasAttribute('src', /^https:\/\/api\.tomtom\.com\//)
-      .hasAttribute('width', '150')
-      .hasAttribute('height', '120');
+      .dom('.map')
+      .hasAttribute('role', 'img')
+      .hasAttribute('aria-label', 'A map of San Francisco')
+      .hasClass('my-map');
   });
 });
 ```
 
-Note that the `hasAttribute` test helper from [`qunit-dom`](https://github.com/simplabs/qunit-dom/blob/master/API.md) supports using _[regular expressions](https://javascript.info/regexp-introduction)_. We used this feature to confirm that the `src` attribute starts with `https://api.tomtom.com/`, as opposed to requiring it to be an exact match against a string. This allows us to be reasonably confident that the code is working correctly, without being overly-detailed in our tests.
-
 _Fingers crossed..._ Let's run our tests.
 
-<img src="/images/tutorial/part-1/reusable-components/pass@2x.png" alt="Tests passing with the new &lt;Map&gt; tests" width="1024" height="768">
+<img src="/images/tutorial/part-1/reusable-components/pass-4@2x.png" alt="All our tests are passing" width="1024" height="768">
 
 Hey, all the tests passed! But does that mean it actually works in practice? Let's find out by invoking the `<Map>` component from the `<Rental>` component's template:
 
-```gjs { data-filename="app/components/rental.gjs" data-diff="+2,+25,+26,+27,+28,+29,+30,+31,+32" }
+```gjs { data-filename="app/components/rental.gjs" data-diff="+2,+25,+26,+27,+28,+29,+30,+31,+32,+33" }
 import RentalImage from 'super-rentals/components/rental/image';
 import Map from 'super-rentals/components/map';
 
@@ -337,7 +541,8 @@ import Map from 'super-rentals/components/map';
       @zoom="9"
       @width="150"
       @height="150"
-      alt="A map of Grand Old Mansion"
+      role="img"
+      aria-label="A map of Grand Old Mansion"
     />
   </article>
 </template>
@@ -347,20 +552,6 @@ Hey! That's a map!
 
 <img src="/images/tutorial/part-1/reusable-components/three-old-mansions@2x.png" alt="Three Grand Old Mansions" width="1024" height="1130">
 
-<!-- TODO: https://github.com/ember-cli/ember-cli/issues/8782 -->
-
-<div class="cta">
-  <div class="cta-note">
-    <div class="cta-note-body">
-      <div class="cta-note-heading">Zoey says...</div>
-      <div class="cta-note-message">
-        <p>If the map image failed to load, make sure you have the correct <code>TOMTOM_ACCESS_TOKEN</code> set in <code>config/environment.js</code>. Don't forget to restart the development and test servers after editing your config file!</p>
-      </div>
-    </div>
-    <img src="/images/mascots/zoey.png" role="presentation" alt="">
-  </div>
-</div>
-
 For good measure, we will also add an assertion to the `<Rental>` tests to make sure we rendered the `<Map>` component successfully.
 
 ```gjs { data-filename="tests/integration/components/rental-test.gjs" data-diff="+19" }
@@ -387,250 +578,112 @@ module('Integration | Component | rental', function (hooks) {
 });
 ```
 
-## Refactoring with Getters and Auto-track
+## Pulling the Tile Style URL from Configuration
 
-At this point, a big part of our `<Map>` component's template section is devoted to the `<img>` tag's `src` attribute, which is getting pretty long. One alternative is to move this computation into the JavaScript class instead.
+The `MAP_STYLE` constant is currently hardcoded inside the map component. This works, but a tile server URL is the kind of app-level setting that could reasonably differ between environments — for example, pointing at a self-hosted tile server in production while using OpenFreeMap during development. Ember's convention is to centralize these values in `config/environment.js`, where all environment-specific configuration lives.
 
-From within our JavaScript class, we have access to our component's arguments using the `this.args.*` API. Using that, we can move the URL logic up from the template into a new getter.
+Let's move the tile style URL there:
 
-<div class="cta">
-  <div class="cta-note">
-    <div class="cta-note-body">
-      <div class="cta-note-heading">Zoey says...</div>
-      <div class="cta-note-message">
-        <p><code>this.args</code> is an API provided by the Glimmer component superclass. You may come across other component superclasses, such as "classic" components in legacy codebases, that provide different APIs for accessing component arguments from JavaScript code.</p>
-      </div>
-    </div>
-    <img src="/images/mascots/zoey.png" role="presentation" alt="">
-  </div>
-</div>
-
-```js { data-filename="app/components/map.gjs" data-diff="+4,+5,+7,+8,+9,+10,+11,+12,+13,+14,+15,+16,-26,+27" }
-import Component from '@glimmer/component';
-import ENV from 'super-rentals/config/environment';
-
-const TOMTOM_API = 'https://api.tomtom.com/map/1/staticimage';
-
-export default class Map extends Component {
-  get src() {
-    let { lng, lat, width, height, zoom } = this.args;
+```js { data-filename="config/environment.js" data-diff="+48,+49" }
+'use strict';
 
-    let coordinates = `&zoom=${zoom}&center=${lng},${lat}`;
-    let dimensions = `&width=${width}&height=${height}`;
-    let accessToken = `?key=${this.token}`;
+module.exports = function (environment) {
+  const ENV = {
+    modulePrefix: 'super-rentals',
+    environment,
+    rootURL: '/',
+    locationType: 'history',
+    EmberENV: {
+      RAISE_ON_DEPRECATION: true,
+      EXTEND_PROTOTYPES: false,
+      FEATURES: {
+        // Here you can enable experimental features on an ember canary build
+        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
+      },
+    },
 
-    return `${TOMTOM_API}${accessToken}${coordinates}${dimensions}`;
-  }
+    APP: {
+      // Here you can pass flags/options to your application instance
+      // when it is created
+    },
+  };
 
-  get token() {
-    return encodeURIComponent(ENV.TOMTOM_ACCESS_TOKEN);
+  if (environment === 'development') {
+    // ENV.APP.LOG_RESOLVER = true;
+    // ENV.APP.LOG_ACTIVE_GENERATION = true;
+    // ENV.APP.LOG_TRANSITIONS = true;
+    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
+    // ENV.APP.LOG_VIEW_LOOKUPS = true;
   }
 
-  <template>
-    <div class="map">
-      <img
-        alt="Map image at coordinates {{@lat}},{{@lng}}"
-        ...attributes
-        src="https://api.tomtom.com/map/1/staticimage?key={{this.token}}&zoom={{@zoom}}&center={{@lng}},{{@lat}}&width={{@width}}&height={{@height}}"
-        src={{this.src}}
-        width={{@width}} height={{@height}}
-      >
-    </div>
-  </template>
-}
-```
+  if (environment === 'test') {
+    // Testem prefers this...
+    ENV.locationType = 'none';
 
-Much nicer! And all of our tests still pass!
+    // keep test console output quieter
+    ENV.APP.LOG_ACTIVE_GENERATION = false;
+    ENV.APP.LOG_VIEW_LOOKUPS = false;
 
-<img src="/images/tutorial/part-1/reusable-components/pass-2@2x.png" alt="Tests passing after the src getter refactor" width="1024" height="768">
+    ENV.APP.rootElement = '#ember-testing';
+    ENV.APP.autoboot = false;
+  }
 
-Note that we did not mark our getter as `@tracked`. Unlike instance variables, getters cannot be "assigned" a new value directly, so it does not make sense for Ember to monitor them for changes.
+  if (environment === 'production') {
+    // here you can enable a production-specific feature
+  }
 
-That being said, the values _produced_ by getters can certainly change. In our case, the value produced by our `src` getter depends on the values of `lat`, `lng`, `width`, `height` and `zoom` from `this.args`. Whenever these _dependencies_ get updated, we would expect `{{this.src}}` from our template to be updated accordingly.
+  ENV.MAP_TILE_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
 
-Ember does this by automatically tracking any variables that were accessed while computing a getter's value. As long as the dependencies themselves are marked as `@tracked`, Ember knows exactly when to invalidate and re-render any templates that may potentially contain any "stale" and outdated getter values. This feature is also known as _[auto-track](../../../in-depth-topics/autotracking-in-depth/)_. All arguments that can be accessed from `this.args` (in other words, `this.args.*`) are implicitly marked as `@tracked` by the Glimmer component superclass. Since we inherited from that superclass, everything Just Works™.
+  return ENV;
+};
+```
 
-## Getting JavaScript Values into the Test Context
+Now update `map.gjs` to import `ENV` from `super-rentals/config/environment` and read the URL from there instead of the local constant:
 
-Just to be sure, we can add a test for this behavior:
+```gjs { data-filename="app/components/map.gjs" data-diff="-6,-7,+8,-13,+14" }
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { trustHTML } from '@ember/template';
+import { Map as MapLibreGLMap, Marker } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
 
-```gjs { data-filename="tests/integration/components/map-test.gjs" data-diff="-3,+4,+7,+55,+56,+57,+58,+59,+60,+61,+62,+63,+64,+65,+66,+67,+68,+69,+70,+71,+72,+73,+74,+75,+76,+77,+78,+79,+80,+81,+82,+83,+84,+85,+86,+87,+88,+89,+90,+91,+92,+93,+94,+95,+96,+97,+98,+99,+100,+101,+102,+103,+104,+105,+106,+107,+108,+109,+110,+111,+112,+113,+114,+115,+116,+117,+118,+119,+120,+121,+122,+123,+124,+125,+126,+127,+128,+129,+130,+131,+132,+133,+134" }
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'super-rentals/tests/helpers';
-import { render, find } from '@ember/test-helpers';
-import { render, find, rerender } from '@ember/test-helpers';
+const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty';
 import ENV from 'super-rentals/config/environment';
-import Map from 'super-rentals/components/map';
-import { tracked } from '@glimmer/tracking';
-
-module('Integration | Component | map', function (hooks) {
-  setupRenderingTest(hooks);
 
-  test('it renders a map image for the specified parameters', async function (assert) {
-    await render(<template>
-      <Map
-        @lat="37.7797"
-        @lng="-122.4184"
-        @zoom="10"
-        @width="150"
-        @height="120"
-      />
-    </template>);
-
-    assert
-      .dom('.map img')
-      .exists()
-      .hasAttribute('alt', 'Map image at coordinates 37.7797,-122.4184')
-      .hasAttribute('src')
-      .hasAttribute('width', '150')
-      .hasAttribute('height', '120');
-
-    let { src } = find('.map img');
-    let token = encodeURIComponent(ENV.TOMTOM_ACCESS_TOKEN);
-
-    assert.ok(
-      src.startsWith('https://api.tomtom.com/'),
-      'the src starts with "https://api.tomtom.com/"',
-    );
-
-    assert.ok(
-      src.includes('zoom=10'),
-      'the src should include the zoom parameter',
-    );
-
-    assert.ok(
-      src.includes('center=-122.4184,37.7797'),
-      'the src should include the lng,lat parameter',
-    );
-
-    assert.ok(
-      src.includes(`key=${token}`),
-      'the src should include the escaped access token',
-    );
+const displayMap = modifier((element, [lat, lng, zoom]) => {
+  const map = new MapLibreGLMap({
+    container: element,
+    style: MAP_STYLE,
+    style: ENV.MAP_TILE_STYLE,
+    center: [lng, lat],
+    zoom,
   });
 
-  test('it updates the `src` attribute when the arguments change', async function (assert) {
-    class State { 
-      @tracked lat = 37.7749;
-      @tracked lng = -122.4194;
-      @tracked zoom = 10;
-      @tracked width = 150;
-      @tracked height = 120;
-    };
-
-    const state = new State();
+  new Marker().setLngLat([lng, lat]).addTo(map);
 
-    await render(<template>
-      <Map
-        @lat={{state.lat}}
-        @lng={{state.lng}}
-        @zoom={{state.zoom}}
-        @width={{state.width}}
-        @height={{state.height}}
-      />
-    </template>);
-
-    let img = find('.map img');
-
-    assert.ok(
-      img.src.includes('zoom=10'),
-      'the src should include the zoom parameter',
-    );
-
-    assert.ok(
-      img.src.includes('-122.4194,37.7749'),
-      'the src should include the lng,lat parameter',
-    );
-
-    assert.ok(
-      img.src.includes('width=150'),
-      'the src should include the width parameter',
-    );
-
-    assert.ok(
-      img.src.includes('height=120'),
-      'the src should include the height parameter',
-    );
-
-    state.width = 300;
-    state.height = 200;
-    state.zoom = 12;
-
-    await rerender();
-
-    assert.ok(
-      img.src.includes('-122.4194,37.7749'),
-      'the src should still include the lng,lat parameter',
-    );
-
-    assert.ok(
-      img.src.includes('width=300'),
-      'the src should include the updated width parameter',
-    );
-
-    assert.ok(
-      img.src.includes('height=200'),
-      'the src should include the updated height parameter',
-    );
-
-    assert.ok(
-      img.src.includes('zoom=12'),
-      'the src should include the updated zoom parameter',
-    );
-
-    state.lat = 47.6062;
-    state.lng = -122.3321;
-
-    await rerender();
-
-    assert.ok(
-      img.src.includes('center=-122.3321,47.6062'),
-      'the src should include the updated lng,lat parameter',
-    );
-  });
-
-  test('the default alt attribute can be overridden', async function (assert) {
-    await render(<template>
-      <Map
-        @lat="37.7797"
-        @lng="-122.4184"
-        @zoom="10"
-        @width="150"
-        @height="120"
-        alt="A map of San Francisco"
-      />
-    </template>);
-
-    assert.dom('.map img').hasAttribute('alt', 'A map of San Francisco');
-  });
-
-  test('the src, width and height attributes cannot be overridden', async function (assert) {
-    await render(<template>
-      <Map
-        @lat="37.7797"
-        @lng="-122.4184"
-        @zoom="10"
-        @width="150"
-        @height="120"
-        src="/assets/images/teaching-tomster.png"
-        width="200"
-        height="300"
-      />
-    </template>);
-
-    assert
-      .dom('.map img')
-      .hasAttribute('src', /^https:\/\/api\.tomtom\.com\//)
-      .hasAttribute('width', '150')
-      .hasAttribute('height', '120');
-  });
+  return () => map.remove();
 });
-```
 
-In this test, we create a local class called `State` and an instance of that class called `state`. There is nothing special about the name `State`—it's just a regular JavaScript class we use to keep track of data we might want to pass into our component. We use the `@tracked` decorator just like in the application code so whenever we make a change, Ember will update the page automatically.
+export default class Map extends Component {
+  get mapSize() {
+    return trustHTML(`width: ${this.args.width}px; height: ${this.args.height}px;`);
+  }
 
-In tests like this, whenever we make changes to state that is rendered, we call `await rerender()`. This gives Ember a chance to update the display before continuing with the queries and assertions that follow. Following this pattern allows us to update these values as needed from the test function.
+  <template>
+    <div class="map"
+      {{displayMap @lat @lng @zoom}}
+      style={{this.mapSize}}
+      ...attributes
+    ></div>
+  </template>
+}
+```
 
-With all our tests passing, we are ready to move on!
+The import path `super-rentals/config/environment` is the standard Ember module 
+path that resolves to the project's `config/environment.js` file. The `ENV` 
+object it exports contains all the values we set there, for the current environment, 
+including our newly added `MAP_TILE_STYLE`. 
+The component is no longer responsible for knowing what the URL for tiles is — 
+it just reads it from the central configuration at startup.
 
-<img src="/images/tutorial/part-1/reusable-components/pass-3@2x.png" alt="All our tests are passing" width="1024" height="768">
+<img src="/images/tutorial/part-1/reusable-components/pass-5@2x.png" alt="All tests still passing after the refactor" width="1024" height="768">
diff --git a/guides/release/tutorial/part-1/working-with-data.md b/guides/release/tutorial/part-1/working-with-data.md
index bfc9c4772d..e211825812 100644
--- a/guides/release/tutorial/part-1/working-with-data.md
+++ b/guides/release/tutorial/part-1/working-with-data.md
@@ -132,7 +132,7 @@ import Rental from 'super-rentals/components/rental';
 
 By passing in `@model` into the `<Rental>` component as the `@rental` argument, we will have access to our "Grand Old Mansion" model object in the `<Rental>` component's template! Now, we can replace our hard-coded values in this component by using the values that live on our `@rental` model.
 
-```gjs { data-filename="app/components/rental.gjs" data-diff="-7,-8,+9,+10,-13,+14,-16,+17,-20,+21,-24,+25,-28,+29,-33,-34,+35,+36,-40,+41" }
+```gjs { data-filename="app/components/rental.gjs" data-diff="-7,-8,+9,+10,-13,+14,-16,+17,-20,+21,-24,+25,-28,+29,-33,-34,+35,+36,-41,+42" }
 import RentalImage from 'super-rentals/components/rental/image';
 import Map from 'super-rentals/components/map';
 
@@ -172,8 +172,9 @@ import Map from 'super-rentals/components/map';
       @zoom="9"
       @width="150"
       @height="150"
-      alt="A map of Grand Old Mansion"
-      alt="A map of {{@rental.title}}"
+      role="img"
+      aria-label="A map of Grand Old Mansion"
+      aria-label="A map of {{@rental.title}}"
     />
   </article>
 </template>
diff --git a/guides/release/tutorial/part-2/provider-components.md b/guides/release/tutorial/part-2/provider-components.md
index 88ad2960b9..27ae8d2530 100644
--- a/guides/release/tutorial/part-2/provider-components.md
+++ b/guides/release/tutorial/part-2/provider-components.md
@@ -233,11 +233,10 @@ Now, if we try running our tests, they should all pass after making this change.
 
 Now that we have our component all set up, we can finally wire up our search box and store our search query! Let's create a component class to store our query state and handle events from the `form` element and wire up our query state in the component template:
 
-```gjs { data-filename="app/components/rentals.gjs" data-diff="+2,+3,+4,+8,+9,+10,+11,+12,+13,+14,+15,+16,+17,+18,+19,+20,+21,-24,+25,-28,+29,+31" }
+```gjs { data-filename="app/components/rentals.gjs" data-diff="+2,+3,+7,+8,+9,+10,+11,+12,+13,+14,+15,+16,+17,+18,+19,+20,-23,+24,-27,+28,+30" }
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { on } from '@ember/modifier';
 import Rental from 'super-rentals/components/rental';
 
 export default class Rentals extends Component {
@@ -321,11 +320,10 @@ In our component template, we are not actually _rendering_ anything. Instead, we
 
 Well, in order to answer this question, let's look at how the data that we're yielding is being used in the `<Rentals>` component.
 
-```gjs { data-filename="app/components/rentals.gjs" data-diff="+6,-34,-35,-36,+37,+38,+39,+40,+41" }
+```gjs { data-filename="app/components/rentals.gjs" data-diff="+5,-33,-34,-35,+36,+37,+38,+39,+40" }
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { on } from '@ember/modifier';
 import Rental from 'super-rentals/components/rental';
 import RentalsFilter from 'super-rentals/components/rentals/filter';
 
diff --git a/guides/release/tutorial/part-2/route-params.md b/guides/release/tutorial/part-2/route-params.md
index ddb76a40b4..7bd551e5b8 100644
--- a/guides/release/tutorial/part-2/route-params.md
+++ b/guides/release/tutorial/part-2/route-params.md
@@ -77,7 +77,8 @@ import { LinkTo } from '@ember/routing';
       @zoom="9"
       @width="150"
       @height="150"
-      alt="A map of {{@rental.title}}"
+      role="img"
+      aria-label="A map of {{@rental.title}}"
     />
   </article>
 </template>
diff --git a/public/images/tutorial/part-1/automated-testing/fail@2x.png b/public/images/tutorial/part-1/automated-testing/fail@2x.png
index b3a6bfdb2f..0005eeea1b 100644
Binary files a/public/images/tutorial/part-1/automated-testing/fail@2x.png and b/public/images/tutorial/part-1/automated-testing/fail@2x.png differ
diff --git a/public/images/tutorial/part-1/building-pages/about-with-link@2x.png b/public/images/tutorial/part-1/building-pages/about-with-link@2x.png
index 2a3bbfc24a..3207ca3267 100644
Binary files a/public/images/tutorial/part-1/building-pages/about-with-link@2x.png and b/public/images/tutorial/part-1/building-pages/about-with-link@2x.png differ
diff --git a/public/images/tutorial/part-1/building-pages/contact-with-link@2x.png b/public/images/tutorial/part-1/building-pages/contact-with-link@2x.png
index c7571fbfc3..d402c36f27 100644
Binary files a/public/images/tutorial/part-1/building-pages/contact-with-link@2x.png and b/public/images/tutorial/part-1/building-pages/contact-with-link@2x.png differ
diff --git a/public/images/tutorial/part-1/building-pages/contact@2x.png b/public/images/tutorial/part-1/building-pages/contact@2x.png
index 48216e1fb1..9d0edaa3b7 100644
Binary files a/public/images/tutorial/part-1/building-pages/contact@2x.png and b/public/images/tutorial/part-1/building-pages/contact@2x.png differ
diff --git a/public/images/tutorial/part-1/building-pages/index-with-link@2x.png b/public/images/tutorial/part-1/building-pages/index-with-link@2x.png
index 9549daca1e..22490dc806 100644
Binary files a/public/images/tutorial/part-1/building-pages/index-with-link@2x.png and b/public/images/tutorial/part-1/building-pages/index-with-link@2x.png differ
diff --git a/public/images/tutorial/part-1/component-basics/about@2x.png b/public/images/tutorial/part-1/component-basics/about@2x.png
index 2a3bbfc24a..3207ca3267 100644
Binary files a/public/images/tutorial/part-1/component-basics/about@2x.png and b/public/images/tutorial/part-1/component-basics/about@2x.png differ
diff --git a/public/images/tutorial/part-1/component-basics/contact@2x.png b/public/images/tutorial/part-1/component-basics/contact@2x.png
index c7571fbfc3..d402c36f27 100644
Binary files a/public/images/tutorial/part-1/component-basics/contact@2x.png and b/public/images/tutorial/part-1/component-basics/contact@2x.png differ
diff --git a/public/images/tutorial/part-1/component-basics/index-with-nav@2x.png b/public/images/tutorial/part-1/component-basics/index-with-nav@2x.png
index 3cfb6eb8fd..278603e827 100644
Binary files a/public/images/tutorial/part-1/component-basics/index-with-nav@2x.png and b/public/images/tutorial/part-1/component-basics/index-with-nav@2x.png differ
diff --git a/public/images/tutorial/part-1/interactive-components/is-large-true@2x.png b/public/images/tutorial/part-1/interactive-components/is-large-true@2x.png
index 14ae244b77..0839d3c792 100644
Binary files a/public/images/tutorial/part-1/interactive-components/is-large-true@2x.png and b/public/images/tutorial/part-1/interactive-components/is-large-true@2x.png differ
diff --git a/public/images/tutorial/part-1/more-about-components/pass@2x.png b/public/images/tutorial/part-1/more-about-components/pass@2x.png
index e59c2ac041..7b39c0ed84 100644
Binary files a/public/images/tutorial/part-1/more-about-components/pass@2x.png and b/public/images/tutorial/part-1/more-about-components/pass@2x.png differ
diff --git a/public/images/tutorial/part-1/more-about-components/three-old-mansions@2x.png b/public/images/tutorial/part-1/more-about-components/three-old-mansions@2x.png
index cacb9eac19..96f48dd19d 100644
Binary files a/public/images/tutorial/part-1/more-about-components/three-old-mansions@2x.png and b/public/images/tutorial/part-1/more-about-components/three-old-mansions@2x.png differ
diff --git a/public/images/tutorial/part-1/orientation/styled-with-tomster@2x.png b/public/images/tutorial/part-1/orientation/styled-with-tomster@2x.png
index 88b5a51e74..84624cf9b5 100644
Binary files a/public/images/tutorial/part-1/orientation/styled-with-tomster@2x.png and b/public/images/tutorial/part-1/orientation/styled-with-tomster@2x.png differ
diff --git a/public/images/tutorial/part-1/orientation/styled@2x.png b/public/images/tutorial/part-1/orientation/styled@2x.png
index 88b5a51e74..84624cf9b5 100644
Binary files a/public/images/tutorial/part-1/orientation/styled@2x.png and b/public/images/tutorial/part-1/orientation/styled@2x.png differ
diff --git a/public/images/tutorial/part-1/reusable-components/pass-2@2x.png b/public/images/tutorial/part-1/reusable-components/pass-2@2x.png
index b9f9650117..b6f0c95942 100644
Binary files a/public/images/tutorial/part-1/reusable-components/pass-2@2x.png and b/public/images/tutorial/part-1/reusable-components/pass-2@2x.png differ
diff --git a/public/images/tutorial/part-1/reusable-components/pass-3@2x.png b/public/images/tutorial/part-1/reusable-components/pass-3@2x.png
index af172c783f..316920da0f 100644
Binary files a/public/images/tutorial/part-1/reusable-components/pass-3@2x.png and b/public/images/tutorial/part-1/reusable-components/pass-3@2x.png differ
diff --git a/public/images/tutorial/part-1/reusable-components/pass-4@2x.png b/public/images/tutorial/part-1/reusable-components/pass-4@2x.png
new file mode 100644
index 0000000000..2eca7f50e1
Binary files /dev/null and b/public/images/tutorial/part-1/reusable-components/pass-4@2x.png differ
diff --git a/public/images/tutorial/part-1/reusable-components/pass-5@2x.png b/public/images/tutorial/part-1/reusable-components/pass-5@2x.png
new file mode 100644
index 0000000000..a8070c448d
Binary files /dev/null and b/public/images/tutorial/part-1/reusable-components/pass-5@2x.png differ
diff --git a/public/images/tutorial/part-1/reusable-components/pass@2x.png b/public/images/tutorial/part-1/reusable-components/pass@2x.png
index 121ef3f19a..f37196e8f4 100644
Binary files a/public/images/tutorial/part-1/reusable-components/pass@2x.png and b/public/images/tutorial/part-1/reusable-components/pass@2x.png differ
diff --git a/public/images/tutorial/part-1/reusable-components/three-old-mansions@2x.png b/public/images/tutorial/part-1/reusable-components/three-old-mansions@2x.png
index 125f824a7c..d20057126b 100644
Binary files a/public/images/tutorial/part-1/reusable-components/three-old-mansions@2x.png and b/public/images/tutorial/part-1/reusable-components/three-old-mansions@2x.png differ
diff --git a/public/images/tutorial/part-1/working-with-data/model-header@2x.png b/public/images/tutorial/part-1/working-with-data/model-header@2x.png
index f7013a9ad3..7077d4b819 100644
Binary files a/public/images/tutorial/part-1/working-with-data/model-header@2x.png and b/public/images/tutorial/part-1/working-with-data/model-header@2x.png differ
diff --git a/public/images/tutorial/part-1/working-with-data/pass-2@2x.png b/public/images/tutorial/part-1/working-with-data/pass-2@2x.png
index 61e603e012..440e773a80 100644
Binary files a/public/images/tutorial/part-1/working-with-data/pass-2@2x.png and b/public/images/tutorial/part-1/working-with-data/pass-2@2x.png differ
diff --git a/public/images/tutorial/part-1/working-with-data/pass@2x.png b/public/images/tutorial/part-1/working-with-data/pass@2x.png
index 3d82dd3683..18d9427c1f 100644
Binary files a/public/images/tutorial/part-1/working-with-data/pass@2x.png and b/public/images/tutorial/part-1/working-with-data/pass@2x.png differ
diff --git a/public/images/tutorial/part-1/working-with-data/three-properties@2x.png b/public/images/tutorial/part-1/working-with-data/three-properties@2x.png
index e8e3dcc740..8f39d50476 100644
Binary files a/public/images/tutorial/part-1/working-with-data/three-properties@2x.png and b/public/images/tutorial/part-1/working-with-data/three-properties@2x.png differ
diff --git a/public/images/tutorial/part-1/working-with-data/using-model-data@2x.png b/public/images/tutorial/part-1/working-with-data/using-model-data@2x.png
index 4a36bbd738..631147a95c 100644
Binary files a/public/images/tutorial/part-1/working-with-data/using-model-data@2x.png and b/public/images/tutorial/part-1/working-with-data/using-model-data@2x.png differ
diff --git a/public/images/tutorial/part-2/ember-data/detailed@2x.png b/public/images/tutorial/part-2/ember-data/detailed@2x.png
index 0e8ee3175e..52b9f45c72 100644
Binary files a/public/images/tutorial/part-2/ember-data/detailed@2x.png and b/public/images/tutorial/part-2/ember-data/detailed@2x.png differ
diff --git a/public/images/tutorial/part-2/ember-data/fail-1@2x.png b/public/images/tutorial/part-2/ember-data/fail-1@2x.png
index ee932792dc..242ce86562 100644
Binary files a/public/images/tutorial/part-2/ember-data/fail-1@2x.png and b/public/images/tutorial/part-2/ember-data/fail-1@2x.png differ
diff --git a/public/images/tutorial/part-2/ember-data/homepage@2x.png b/public/images/tutorial/part-2/ember-data/homepage@2x.png
index 30d3abdd13..fb010e3116 100644
Binary files a/public/images/tutorial/part-2/ember-data/homepage@2x.png and b/public/images/tutorial/part-2/ember-data/homepage@2x.png differ
diff --git a/public/images/tutorial/part-2/ember-data/pass-1@2x.png b/public/images/tutorial/part-2/ember-data/pass-1@2x.png
index 989df04aee..94db4c0343 100644
Binary files a/public/images/tutorial/part-2/ember-data/pass-1@2x.png and b/public/images/tutorial/part-2/ember-data/pass-1@2x.png differ
diff --git a/public/images/tutorial/part-2/ember-data/pass-2@2x.png b/public/images/tutorial/part-2/ember-data/pass-2@2x.png
index 5b317928a7..9df11956c5 100644
Binary files a/public/images/tutorial/part-2/ember-data/pass-2@2x.png and b/public/images/tutorial/part-2/ember-data/pass-2@2x.png differ
diff --git a/public/images/tutorial/part-2/provider-components/filtered-results@2x.png b/public/images/tutorial/part-2/provider-components/filtered-results@2x.png
index a2471372fb..150fe2044a 100644
Binary files a/public/images/tutorial/part-2/provider-components/filtered-results@2x.png and b/public/images/tutorial/part-2/provider-components/filtered-results@2x.png differ
diff --git a/public/images/tutorial/part-2/provider-components/homepage-with-inert-search@2x.png b/public/images/tutorial/part-2/provider-components/homepage-with-inert-search@2x.png
index a96a99f17b..63e81dfe99 100644
Binary files a/public/images/tutorial/part-2/provider-components/homepage-with-inert-search@2x.png and b/public/images/tutorial/part-2/provider-components/homepage-with-inert-search@2x.png differ
diff --git a/public/images/tutorial/part-2/provider-components/homepage-with-rentals-component@2x.png b/public/images/tutorial/part-2/provider-components/homepage-with-rentals-component@2x.png
index a96a99f17b..63e81dfe99 100644
Binary files a/public/images/tutorial/part-2/provider-components/homepage-with-rentals-component@2x.png and b/public/images/tutorial/part-2/provider-components/homepage-with-rentals-component@2x.png differ
diff --git a/public/images/tutorial/part-2/provider-components/pass-1@2x.png b/public/images/tutorial/part-2/provider-components/pass-1@2x.png
index 7c04d9faff..a1b3bec39a 100644
Binary files a/public/images/tutorial/part-2/provider-components/pass-1@2x.png and b/public/images/tutorial/part-2/provider-components/pass-1@2x.png differ
diff --git a/public/images/tutorial/part-2/provider-components/pass-2@2x.png b/public/images/tutorial/part-2/provider-components/pass-2@2x.png
index bd12509920..975c6a4fd5 100644
Binary files a/public/images/tutorial/part-2/provider-components/pass-2@2x.png and b/public/images/tutorial/part-2/provider-components/pass-2@2x.png differ
diff --git a/public/images/tutorial/part-2/route-params/broken-links@2x.png b/public/images/tutorial/part-2/route-params/broken-links@2x.png
index 30d3abdd13..fb010e3116 100644
Binary files a/public/images/tutorial/part-2/route-params/broken-links@2x.png and b/public/images/tutorial/part-2/route-params/broken-links@2x.png differ
diff --git a/public/images/tutorial/part-2/route-params/grand-old-mansion@2x.png b/public/images/tutorial/part-2/route-params/grand-old-mansion@2x.png
index 0e8ee3175e..06d8eb07cc 100644
Binary files a/public/images/tutorial/part-2/route-params/grand-old-mansion@2x.png and b/public/images/tutorial/part-2/route-params/grand-old-mansion@2x.png differ
diff --git a/public/images/tutorial/part-2/route-params/pass-2@2x.png b/public/images/tutorial/part-2/route-params/pass-2@2x.png
index bbe6f9c41c..74fdeb4d66 100644
Binary files a/public/images/tutorial/part-2/route-params/pass-2@2x.png and b/public/images/tutorial/part-2/route-params/pass-2@2x.png differ
diff --git a/public/images/tutorial/part-2/route-params/pass-3@2x.png b/public/images/tutorial/part-2/route-params/pass-3@2x.png
index 84bed914c6..cbd9af2fec 100644
Binary files a/public/images/tutorial/part-2/route-params/pass-3@2x.png and b/public/images/tutorial/part-2/route-params/pass-3@2x.png differ
diff --git a/public/images/tutorial/part-2/route-params/pass@2x.png b/public/images/tutorial/part-2/route-params/pass@2x.png
index 374a70931f..c3bf7be4e0 100644
Binary files a/public/images/tutorial/part-2/route-params/pass@2x.png and b/public/images/tutorial/part-2/route-params/pass@2x.png differ
diff --git a/public/images/tutorial/part-2/service-injection/pass-1@2x.png b/public/images/tutorial/part-2/service-injection/pass-1@2x.png
index 9802c543b9..c08b853dab 100644
Binary files a/public/images/tutorial/part-2/service-injection/pass-1@2x.png and b/public/images/tutorial/part-2/service-injection/pass-1@2x.png differ
diff --git a/public/images/tutorial/part-2/service-injection/pass-2@2x.png b/public/images/tutorial/part-2/service-injection/pass-2@2x.png
index e8e3a9d340..4c011828b8 100644
Binary files a/public/images/tutorial/part-2/service-injection/pass-2@2x.png and b/public/images/tutorial/part-2/service-injection/pass-2@2x.png differ
diff --git a/public/images/tutorial/part-2/service-injection/share-button@2x.png b/public/images/tutorial/part-2/service-injection/share-button@2x.png
index 0e8ee3175e..52b9f45c72 100644
Binary files a/public/images/tutorial/part-2/service-injection/share-button@2x.png and b/public/images/tutorial/part-2/service-injection/share-button@2x.png differ