npm - ember-source - Versions diffs - 7.1.0-beta.1 → 7.1.0 - Mend

ember-source 7.1.0-beta.1 → 7.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/docs/data.json CHANGED Viewed

@@ -3,7 +3,7 @@
     "name": "The Ember API",
     "description": "The Ember API: a framework for building ambitious web applications",
     "url": "https://emberjs.com/",
-    "version": "7.1.0-beta.1"
+    "version": "7.1.0"
   },
   "files": {
     "node_modules/rsvp/lib/rsvp/promise/all.js": {
@@ -2609,7 +2609,7 @@
       "tag": "main",
       "file": "packages/@ember/-internals/glimmer/lib/helper.ts",
       "line": 57,
-      "description": "[Glimmer](https://github.com/tildeio/glimmer) is a templating engine used by Ember.js that is compatible with a subset of the [Handlebars](http://handlebarsjs.com/) syntax.\n\n### Showing a property\n\nTemplates manage the flow of an application's UI, and display state (through\nthe DOM) to a user. For example, given a component with the property \"name\",\nthat component's template can use the name in several ways:\n\n```app/components/person-profile.js\nimport Component from '@ember/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class extends Component {\n  @tracked name = 'Jill'\n}\n```\n\n```app/components/person-profile.hbs\n{{this.name}}\n<div>{{this.name}}</div>\n<span data-name={{this.name}}></span>\n```\n\nAny time the \"name\" property on the component changes, the DOM will be\nupdated.\n\nProperties can be chained as well:\n\n```handlebars\n{{@aUserModel.name}}\n<div>{{@listOfUsers.firstObject.name}}</div>\n```\n\n### Using Ember helpers\n\nWhen content is passed in mustaches `{{}}`, Ember will first try to find a helper\nor component with that name. For example, the `if` helper:\n\n```app/components/person-profile.hbs\n{{if this.name \"I have a name\" \"I have no name\"}}\n<span data-has-name={{if this.name true}}></span>\n```\n\nThe returned value is placed where the `{{}}` is called. The above style is\ncalled \"inline\". A second style of helper usage is called \"block\". For example:\n\n```handlebars\n{{#if this.name}}\n  I have a name\n{{else}}\n  I have no name\n{{/if}}\n```\n\nThe block form of helpers allows you to control how the UI is created based\non the values of properties.\nA third form of helper is called \"nested\". For example here the concat\nhelper will add \" Doe\" to a displayed name if the person has no last name:\n\n```handlebars\n<span data-name={{concat this.firstName (\n  if this.lastName (concat \" \" this.lastName) \"Doe\"\n)}}></span>\n```\n\nEmber's built-in helpers are described under the [Ember.Templates.helpers](/ember/release/classes/Ember.Templates.helpers)\nnamespace. Documentation on creating custom helpers can be found under\n[helper](/ember/release/functions/@ember%2Fcomponent%2Fhelper/helper) (or\nunder [Helper](/ember/release/classes/Helper) if a helper requires access to\ndependency injection).\n\n### Invoking a Component\n\nEmber components represent state to the UI of an application. Further\nreading on components can be found under [Component](/ember/release/classes/Component).",
+      "description": "[Glimmer](https://github.com/tildeio/glimmer) is a templating engine used by Ember.js that is compatible with a subset of the [Handlebars](http://handlebarsjs.com/) syntax.\n\nEmber ships with two types of JavaScript classes for components:\n\n1. Glimmer components, imported from `@glimmer/component`, which are the\ndefault component's for Ember Octane (3.15) and more recent editions.\n2. Classic components, imported from `@ember/component`, which were the\ndefault for older editions of Ember (pre 3.15) but are still supported.\n\nBelow is the documentation for Classic components. If you are looking for the\nAPI documentation for Template-only or Glimmer components, it is [available\nhere](/ember/release/modules/@glimmer%2Fcomponent).\n\nNote: Prior to Ember 6.8, by default, components were authored in paired `.hbs` and `.js`\nfiles. This is still supported, but the default authoring format is now `.gjs` or \"template tag\".\nThe documentation for `@ember/component` still refers to the older authoring format. To read about\nthe new authoring format, see the\n[Glimmer Component API documentation](/ember/release/modules/@glimmer%2Fcomponent).\n  \n### Showing a property\n\nTemplates manage the flow of an application's UI, and display state (through\nthe DOM) to a user. For example, given a component with the property \"name\",\nthat component's template can use the name in several ways:\n\n```app/components/person-profile.js\nimport Component from '@ember/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class extends Component {\n  @tracked name = 'Jill'\n}\n```\n\n```app/components/person-profile.hbs\n{{this.name}}\n<div>{{this.name}}</div>\n<span data-name={{this.name}}></span>\n```\n\nAny time the \"name\" property on the component changes, the DOM will be\nupdated.\n\nProperties can be chained as well:\n\n```handlebars\n{{@aUserModel.name}}\n<div>{{@listOfUsers.firstObject.name}}</div>\n```\n\n### Using Ember helpers\n\nWhen content is passed in mustaches `{{}}`, Ember will first try to find a helper\nor component with that name. For example, the `if` helper:\n\n```app/components/person-profile.hbs\n{{if this.name \"I have a name\" \"I have no name\"}}\n<span data-has-name={{if this.name true}}></span>\n```\n\nThe returned value is placed where the `{{}}` is called. The above style is\ncalled \"inline\". A second style of helper usage is called \"block\". For example:\n\n```handlebars\n{{#if this.name}}\n  I have a name\n{{else}}\n  I have no name\n{{/if}}\n```\n\nThe block form of helpers allows you to control how the UI is created based\non the values of properties.\nA third form of helper is called \"nested\". For example here the concat\nhelper will add \" Doe\" to a displayed name if the person has no last name:\n\n```handlebars\n<span data-name={{concat this.firstName (\n  if this.lastName (concat \" \" this.lastName) \"Doe\"\n)}}></span>\n```\n\nEmber's built-in helpers are described under the [Ember.Templates.helpers](/ember/release/classes/Ember.Templates.helpers)\nnamespace. Documentation on creating custom helpers can be found under\n[helper](/ember/release/functions/@ember%2Fcomponent%2Fhelper/helper) (or\nunder [Helper](/ember/release/classes/Helper) if a helper requires access to\ndependency injection).\n\n### Invoking a Component\n\nEmber components represent state to the UI of an application. Further\nreading on components can be found under [Component](/ember/release/classes/Component).",
       "itemtype": "main",
       "access": "public",
       "tagname": ""
@@ -3355,7 +3355,7 @@
       "tag": "module",
       "file": "packages/@glimmer/component/dist/index.d.ts",
       "line": 3,
-      "description": "A component is a reusable UI element that consists of a `.hbs` template and an\noptional JavaScript class that defines its behavior. For example, someone\nmight make a `button` in the template and handle the click behavior in the\nJavaScript file that shares the same name as the template.\n\nComponents are broken down into two categories:\n\n- Components _without_ JavaScript, that are based only on a template. These\n  are called Template-only or TO components.\n- Components _with_ JavaScript, which consist of a template and a backing\n  class.\n\nEmber ships with two types of JavaScript classes for components:\n\n1. Glimmer components, imported from `@glimmer/component`, which are the\n   default components for Ember Octane (3.15) and more recent editions.\n2. Classic components, imported from `@ember/component`, which were the\n   default for older editions of Ember (pre 3.15).\n\nBelow is the documentation for Template-only and Glimmer components. If you\nare looking for the API documentation for Classic components, it is\n[available here](/ember/release/classes/Component). The source code for\nGlimmer components can be found in [`@glimmer/component`](https://github.com/glimmerjs/glimmer.js/tree/master/packages/%40glimmer/component).\n\n## Defining a Template-only Component\n\nThe simplest way to create a component is to create a template file in\n`app/templates/components`. For example, if you name a template\n`app/templates/components/person-profile.hbs`:\n\n```app/templates/components/person-profile.hbs\n<h1>{{@person.name}}</h1>\n<img src={{@person.avatar}}>\n<p class='signature'>{{@person.signature}}</p>\n```\n\nYou will be able to use `<PersonProfile />` to invoke this component elsewhere\nin your application:\n\n```app/templates/application.hbs\n<PersonProfile @person={{this.currentUser}} />\n```\n\nNote that component names are capitalized here in order to distinguish them\nfrom regular HTML elements, but they are dasherized in the file system.\n\nWhile the angle bracket invocation form is generally preferred, it is also\npossible to invoke the same component with the `{{person-profile}}` syntax:\n\n```app/templates/application.hbs\n{{person-profile person=this.currentUser}}\n```\n\nNote that with this syntax, you use dashes in the component name and\narguments are passed without the `@` sign.\n\nIn both cases, Ember will render the content of the component template we\ncreated above. The end result will be something like this:\n\n```html\n<h1>Tomster</h1>\n<img src=\"https://emberjs.com/tomster.jpg\">\n<p class='signature'>Out of office this week</p>\n```\n\n## File System Nesting\n\nComponents can be nested inside sub-folders for logical groupping. For\nexample, if we placed our template in\n`app/templates/components/person/short-profile.hbs`, we can invoke it as\n`<Person::ShortProfile />`:\n\n```app/templates/application.hbs\n<Person::ShortProfile @person={{this.currentUser}} />\n```\n\nOr equivalently, `{{person/short-profile}}`:\n\n```app/templates/application.hbs\n{{person/short-profile person=this.currentUser}}\n```\n\n## Using Blocks\n\nYou can use `yield` inside a template to include the **contents** of any block\nattached to the component. For instance, if we added a `{{yield}}` to our\ncomponent like so:\n\n```app/templates/components/person-profile.hbs\n<h1>{{@person.name}}</h1>\n{{yield}}\n```\n\nWe could then invoke it like this:\n\n```handlebars\n<PersonProfile @person={{this.currentUser}}>\n  <p>Admin mode</p>\n</PersonProfile>\n```\n\nor with curly syntax like this:\n\n```handlebars\n{{#person-profile person=this.currentUser}}\n  <p>Admin mode</p>\n{{/person-profile}}\n```\n\nAnd the content passed in between the brackets of the component would be\nrendered in the same place as the `{{yield}}` within it, replacing it.\n\nBlocks are executed in their original context, meaning they have access to the\nscope and any in-scope variables where they were defined.\n\n### Passing parameters to blocks\n\nYou can also pass positional parameters to `{{yield}}`, which are then made\navailable in the block:\n\n```app/templates/components/person-profile.hbs\n<h1>{{@person.name}}</h1>\n{{yield @person.signature}}\n```\n\nWe can then use this value in the block like so:\n\n```handlebars\n<PersonProfile @person={{this.currentUser}} as |signature|>\n  {{signature}}\n</PersonProfile>\n```\n\n### Passing multiple blocks\n\nYou can pass multiple blocks to a component by giving them names, and\nspecifying which block you are yielding to with `{{yield}}`. For instance, if\nwe wanted to add a way for users to customize the title of our\n`<PersonProfile>` component, we could add a named block inside of the header:\n\n```app/templates/components/person-profile.hbs\n<h1>{{yield to=\"title\"}}</h1>\n{{yield}}\n```\n\nThis component could then be invoked like so:\n\n```handlebars\n<PersonProfile @person={{this.currentUser}}>\n  <:title>{{this.currentUser.name}}</:title>\n  <:default>{{this.currentUser.signature}}</:default>\n</PersonProfile>\n```\n\nWhen passing named blocks, you must name every block, including the `default`\nblock, which is the block that is defined if you do not pass a `to` parameter\nto `{{yield}}`. Whenever you invoke a component without passing explicitly\nnamed blocks, the passed block is considered the `default` block.\n\n### Passing parameters to named blocks\n\nYou can also pass parameters to named blocks:\n\n```app/templates/components/person-profile.hbs\n<h1>{{yield @person.name to=\"title\"}}</h1>\n{{yield @person.signature}}\n```\n\nThese parameters can then be used like so:\n\n```handlebars\n<PersonProfile @person={{this.currentUser}}>\n  <:title as |name|>{{name}}</:title>\n  <:default as |signature|>{{signature}}</:default>\n</PersonProfile>\n```\n\n### Checking to see if a block exists\n\nYou can also check to see if a block exists using the `(has-block)` keyword,\nand conditionally use it, or provide a default template instead.\n\n```app/templates/components/person-profile.hbs\n<h1>\n  {{#if (has-block \"title\")}}\n    {{yield @person.name to=\"title\"}}\n  {{else}}\n    {{@person.name}}\n  {{/if}}\n</h1>\n\n{{#if (has-block)}}\n  {{yield @person.signature}}\n{{else}}\n  {{@person.signature}}\n{{/if}}\n```\n\nWith this template, we can then optionally pass in one block, both blocks, or\nnone at all:\n\n```handlebars\n{{! passing both blocks }}\n<PersonProfile @person={{this.currentUser}}>\n  <:title as |name|>{{name}}</:title>\n  <:default as |signature|>{{signature}}</:default>\n</PersonProfile>\n\n{{! passing just the title block }}\n<PersonProfile @person={{this.currentUser}}>\n  <:title as |name|>{{name}}</:title>\n</PersonProfile>\n\n{{! passing just the default block }}\n<PersonProfile @person={{this.currentUser}} as |signature|>\n  {{signature}}\n</PersonProfile>\n\n{{! not passing any blocks }}\n<PersonProfile @person={{this.currentUser}}/>\n```\n\n### Checking to see if a block has parameters\n\nWe can also check if a block receives parameters using the `(has-block-params)`\nkeyword, and conditionally yield different values if so.\n\n```app/templates/components/person-profile.hbs\n{{#if (has-block-params)}}\n  {{yield @person.signature}}\n{{else}}\n  {{yield}}\n{{/if}}\n```\n\n## Customizing Components With JavaScript\n\nTo add JavaScript to a component, create a JavaScript file in the same\nlocation as the template file, with the same name, and export a subclass\nof `Component` as the default value. For example, to add Javascript to the\n`PersonProfile` component which we defined above, we would create\n`app/components/person-profile.js` and export our class as the default, like\nso:\n\n```app/components/person-profile.js\nimport Component from '@glimmer/component';\n\nexport default class PersonProfileComponent extends Component {\n  get displayName() {\n    let { title, firstName, lastName } = this.args.person;\n\n    if (title) {\n      return `${title} ${lastName}`;\n    } else {\n      return `${firstName} ${lastName}`;\n    }\n  })\n}\n```\n\nYou can add your own properties, methods, and lifecycle hooks to this\nsubclass to customize its behavior, and you can reference the instance of the\nclass in your template using `{{this}}`. For instance, we could access the\n`displayName` property of our `PersonProfile` component instance in the\ntemplate like this:\n\n```app/templates/components/person-profile.hbs\n<h1>{{this.displayName}}</h1>\n{{yield}}\n```\n\n## `constructor`\n\nparams: `owner` object and `args` object\n\nConstructs a new component and assigns itself the passed properties. The\nconstructor is run whenever a new instance of the component is created, and\ncan be used to setup the initial state of the component.\n\n```javascript\nimport Component from '@glimmer/component';\n\nexport default class SomeComponent extends Component {\n  constructor(owner, args) {\n    super(owner, args);\n\n    if (this.args.displayMode === 'list') {\n      this.items = [];\n    }\n  }\n}\n```\n\nService injections and arguments are available in the constructor.\n\n```javascript\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class SomeComponent extends Component {\n  @service myAnimations;\n\n  constructor(owner, args) {\n    super(owner, args);\n\n    if (this.args.fadeIn === true) {\n      this.myAnimations.register(this, 'fade-in');\n    }\n  }\n}\n```\n\n## `willDestroy`\n\n`willDestroy` is called after the component has been removed from the DOM, but\nbefore the component is fully destroyed. This lifecycle hook can be used to\ncleanup the component and any related state.\n\n```javascript\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class SomeComponent extends Component {\n  @service myAnimations;\n\n  willDestroy() {\n    super.willDestroy();\n\n    this.myAnimations.unregister(this);\n  }\n}\n```\n\n## `args`\n\nThe `args` property of Glimmer components is an object that contains the\n_arguments_ that are passed to the component. For instance, the\nfollowing component usage:\n\n```handlebars\n<SomeComponent @fadeIn={{true}} />\n```\n\nWould result in the following `args` object to be passed to the component:\n\n```javascript\n{ fadeIn: true }\n```\n\n`args` can be accessed at any point in the component lifecycle, including\n`constructor` and `willDestroy`. They are also automatically marked as tracked\nproperties, and they can be depended on as computed property dependencies:\n\n```javascript\nimport Component from '@glimmer/component';\nimport { computed } from '@ember/object';\n\nexport default class SomeComponent extends Component {\n\n  @computed('args.someValue')\n  get computedGetter() {\n    // updates whenever args.someValue updates\n    return this.args.someValue;\n  }\n\n  get standardGetter() {\n    // updates whenever args.anotherValue updates (Ember 3.13+)\n    return this.args.anotherValue;\n  }\n}\n```\n\n## `isDestroying`\n\nA boolean flag to tell if the component is in the process of destroying. This is set to\ntrue before `willDestroy` is called.\n\n## `isDestroyed`\nA boolean to tell if the component has been fully destroyed. This is set to true\nafter `willDestroy` is called.",
+      "description": "A component is a reusable UI element that consists of a template and an\noptional JavaScript class that defines its behavior. For example, someone\nmight make a `button` in the template and handle the click behavior in the\nJavaScript.\n\nComponents are broken down into two categories:\n\n- Components _without_ JavaScript, that are based only on a template. These\n  are called Template-only or TO components.\n- Components _with_ JavaScript, which consist of a template and a backing\n  class.\n\nEmber ships with two types of JavaScript classes for components:\n\n1. Glimmer components, imported from `@glimmer/component`, which are the\n   default components for Ember Octane (3.15) and more recent editions.\n2. Classic components, imported from `@ember/component`, which were the\n   default for older editions of Ember (pre 3.15).\n\nBelow is the documentation for Template-only and Glimmer components. If you\nare looking for the API documentation for Classic components, it is\n[available here](/ember/release/classes/Component). The source code for\nGlimmer components can be found in [`@glimmer/component`](https://github.com/emberjs/ember.js/tree/main/packages/%40glimmer/component).\n\nNote: Prior to Ember 6.8, by default, components were authored in paired `.hbs` and `.js`\nfiles. This is still supported, but the default authoring format is now `.gjs` or \"template tag\".\nTo read more about how components were previously authored, see the\n[6.7 version of this API documentation](https://api.emberjs.com/ember/6.7/modules/@glimmer%2Fcomponent).\n  \n## Defining a Template-only Component\n\nThe simplest way to create a component is to create a `gjs` file in\n`app/components` with a `<template>` tag wrapper:\n\n```app/components/person-profile.gjs\n<template>\n  <h1>{{@person.name}}</h1>\n  <img src={{@person.avatar}}>\n  <p class='signature'>{{@person.signature}}</p>\n</template>\n```\n\nYou will be able to use `<PersonProfile />` to invoke this component elsewhere\nin your application:\n\n```app/templates/application.gjs\nimport PersonProfile from '../components/person-profile';\n  \n<template>\n  <PersonProfile @person={{@model.currentUser}} />\n</template>\n```\n\nNote that component names are capitalized here in order to distinguish them\nfrom regular HTML elements.\n\nEmber will render the content of the component template we\ncreated above. The end result will be something like this:\n\n```html\n<h1>Tomster</h1>\n<img src=\"https://emberjs.com/tomster.jpg\">\n<p class='signature'>Out of office this week</p>\n```\n\n## File System Nesting\n\nIn Ember templates, “invokables” are things you can invoke in a template. These include components,\nhelpers, and modifiers. In the template tag format, these invokables need to be imported before\nthey can be used. This makes it easier to understand where values come from and what they do, as\nwell as unlocks build optimizations.\n\nWhen making use of the `PersonProfile` component as defined before in a different component file,\nit first needs to be imported. This is done using the import statement, just like you would import\nany other JavaScript module -- from your local project or from an external package.\n\nSince they are imported, Components can be placed anywhere in your project on the filesystem, but\nthey are conventionally placed within `app/components` for reusable components and within\n`app/templates` for Route components.\n  \nRoute components must be named after the route they are associated with -- and placed in the\n`app/templates` directory. For example, a `Person` route would have a corresponding `Person`\ncomponent defined in `app/templates/person.gjs`. This component would then be rendered whenever\nthe user visits the `/person` route. For more information, see the\n[Routing](https://guides.emberjs.com/release/routing/) section of the guides.\n\n## Using Blocks\n\nYou can use `yield` inside a template to include the **contents** of any block\nattached to the component. For instance, if we added a `{{yield}}` to our\ncomponent like so:\n\n```app/components/person-profile.gjs\n<template>\n  <h1>{{@person.name}}</h1>\n  {{yield}}\n</template>\n```\n\nWe could then invoke it like this:\n\n```gjs\nimport PersonProfile from '../components/person-profile';\n  \n<template>\n  <PersonProfile @person={{@model.currentUser}}>\n    <p>Admin mode</p>\n  </PersonProfile>\n</template>\n```\n  \nAnd the content passed in between the brackets of the component would be\nrendered in the same place as the `{{yield}}` within it, replacing it.\n\nBlocks are executed in their original context, meaning they have access to the\nscope and any in-scope variables where they were defined.\n\n### Passing parameters to blocks\n\nYou can also pass positional parameters to `{{yield}}`, which are then made\navailable in the block:\n\n```app/components/person-profile.gjs\n<template>\n  <h1>{{@person.name}}</h1>\n  {{yield @person.signature}}\n</template>\n```\n\nWe can then use this value in the block like so:\n\n```gjs\nimport PersonProfile from '../components/person-profile';\n  \n<template>\n  <PersonProfile @person={{@model.currentUser}} as |signature|>\n    {{signature}}\n  </PersonProfile>\n</template>\n```\n\n### Passing multiple blocks\n\nYou can pass multiple blocks to a component by giving them names, and\nspecifying which block you are yielding to with `{{yield}}`. For instance, if\nwe wanted to add a way for users to customize the title of our\n`<PersonProfile>` component, we could add a named block inside of the header:\n\n```app/components/person-profile.gjs\n<template>\n  <h1>{{yield to=\"title\"}}</h1>\n  {{yield}}\n</template>\n```\n\nThis component could then be invoked like so:\n\n```gjs\nimport PersonProfile from '../components/person-profile';\n\n<template>\n  <PersonProfile @person={{@model.currentUser}}>\n    <:title>{{@model.currentUser.name}}</:title>\n    <:default>{{@model.currentUser.signature}}</:default>\n  </PersonProfile>\n</template>\n```\n\nWhen passing named blocks, you must name every block, including the `default`\nblock, which is the block that is defined if you do not pass a `to` parameter\nto `{{yield}}`. Whenever you invoke a component without passing explicitly\nnamed blocks, the passed block is considered the `default` block.\n\n### Passing parameters to named blocks\n\nYou can also pass parameters to named blocks:\n\n```app/components/person-profile.gjs\n<template>\n  <h1>{{yield @person.name to=\"title\"}}</h1>\n  {{yield @person.signature}}\n</template>\n```\n\nThese parameters can then be used like so:\n\n```gjs\nimport PersonProfile from '../components/person-profile';\n\n<template>\n  <PersonProfile @person={{@model.currentUser}}>\n    <:title as |name|>{{name}}</:title>\n    <:default as |signature|>{{signature}}</:default>\n  </PersonProfile>\n</template>\n```\n\n### Checking to see if a block exists\n\nYou can also check to see if a block exists using the `(has-block)` keyword,\nand conditionally use it, or provide a default template instead.\n\n```app/components/person-profile.gjs\n<template>\n  <h1>\n    {{#if (has-block \"title\")}}\n      {{yield @person.name to=\"title\"}}\n    {{else}}\n      {{@person.name}}\n    {{/if}}\n  </h1>\n\n  {{#if (has-block)}}\n    {{yield @person.signature}}\n  {{else}}\n    {{@person.signature}}\n  {{/if}}\n</template>\n```\n\nWith this template, we can then optionally pass in one block, both blocks, or\nnone at all:\n\n```gjs\nimport PersonProfile from '../components/person-profile';\n\n<template>\n  {{! passing both blocks }}\n  <PersonProfile @person={{@model.currentUser}}>\n    <:title as |name|>{{name}}</:title>\n    <:default as |signature|>{{signature}}</:default>\n  </PersonProfile>\n\n  {{! passing just the title block }}\n  <PersonProfile @person={{@model.currentUser}}>\n    <:title as |name|>{{name}}</:title>\n  </PersonProfile>\n\n  {{! passing just the default block }}\n  <PersonProfile @person={{@model.currentUser}} as |signature|>\n    {{signature}}\n  </PersonProfile>\n\n  {{! not passing any blocks }}\n  <PersonProfile @person={{@model.currentUser}}/>\n</template>\n```\n\n### Checking to see if a block has parameters\n\nWe can also check if a block receives parameters using the `(has-block-params)`\nkeyword, and conditionally yield different values if so.\n\n```app/components/person-profile.gjs\n<template>\n  {{#if (has-block-params)}}\n    {{yield @person.signature}}\n  {{else}}\n    {{yield}}\n  {{/if}}\n</template>\n```\n\n## Customizing Components With JavaScript\n\nTo add JavaScript to a component, add a class extending from `@glimmer/component` to the `gjs`\nfile, wrapping your `<template>` tag.\nFor example, to add JavaScript to the `PersonProfile` component which we defined above:\n\n```app/components/person-profile.gjs\nimport Component from '@glimmer/component';\n\nexport default class PersonProfile extends Component {\n  get displayName() {\n    let { title, firstName, lastName } = this.args.person;\n\n    if (title) {\n      return `${title} ${lastName}`;\n    } else {\n      return `${firstName} ${lastName}`;\n    }\n  })\n  \n  <template>\n    <h1>{{this.displayName}}</h1>\n    {{yield}}\n  </template>\n}\n```\n\nYou can add your own properties, methods, and lifecycle hooks to this\nsubclass to customize its behavior, and you can reference the instance of the\nclass in your template using `{{this}}`. In the example above, we access the\n`displayName` property of our `PersonProfile` component instance in the\ntemplate.\n\n## `constructor`\n\nparams: `owner` object and `args` object\n\nConstructs a new component and assigns itself the passed properties. The\nconstructor is run whenever a new instance of the component is created, and\ncan be used to setup the initial state of the component.\n\n```gjs\nimport Component from '@glimmer/component';\n\nexport default class SomeComponent extends Component {\n  constructor(owner, args) {\n    super(owner, args);\n\n    if (this.args.displayMode === 'list') {\n      this.items = [];\n    }\n  }\n}\n```\n\nService injections and arguments are available in the constructor.\n\n```gjs\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class SomeComponent extends Component {\n  @service myAnimations;\n\n  constructor(owner, args) {\n    super(owner, args);\n\n    if (this.args.fadeIn === true) {\n      this.myAnimations.register(this, 'fade-in');\n    }\n  }\n}\n```\n\n## `willDestroy`\n\n`willDestroy` is called after the component has been removed from the DOM, but\nbefore the component is fully destroyed. This lifecycle hook can be used to\ncleanup the component and any related state.\n  \nYou may prefer the [@ember/destroyable](/ember/release/modules//@ember%2Fdestroyable) APIs for\nthis purpose.\n\n```gjs\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class SomeComponent extends Component {\n  @service myAnimations;\n\n  willDestroy() {\n    super.willDestroy();\n\n    this.myAnimations.unregister(this);\n  }\n}\n```\n\n## `args`\n\nThe `args` property of Glimmer components is an object that contains the\n_arguments_ that are passed to the component. For instance, the\nfollowing component usage:\n\n```gjs\n<template>\n  <SomeComponent @fadeIn={{true}} />\n</template>\n```\n\nWould result in the following `args` object to be passed to the component:\n\n```javascript\n{ fadeIn: true }\n```\n\n`args` can be accessed at any point in the component lifecycle, including\n`constructor` and `willDestroy`. They are also automatically marked as tracked\nproperties, and they can be depended on to update as any other tracked property:\n\n```gjs\nimport Component from '@glimmer/component';\nimport { computed } from '@ember/object';\n\nexport default class SomeComponent extends Component {\n  get standardGetter() {\n    // updates whenever args.anotherValue updates\n    return this.args.anotherValue;\n  }\n}\n```\n  \nA components arguments are accessible in the template using the `@` prefix - for example,\n`this.args.fadeIn` from the example above can be accessed in the template as `@fadeIn`.\n\n## `isDestroying`\n\nA boolean flag to tell if the component is in the process of destroying. This is set to\ntrue before `willDestroy` is called.\n\n## `isDestroyed`\nA boolean to tell if the component has been fully destroyed. This is set to true\nafter `willDestroy` is called.",
       "access": "public",
       "tagname": ""
     },
@@ -3493,7 +3493,7 @@
       "module": "ember",
       "namespace": "",
       "file": "packages/@ember/-internals/glimmer/index.ts",
-      "line": 87,
+      "line": 104,
       "access": "public",
       "tagname": ""
     },
@@ -3614,7 +3614,7 @@
       "namespace": "",
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
       "line": 209,
-      "description": "A component is a reusable UI element that consists of a `.hbs` template and an\noptional JavaScript class that defines its behavior. For example, someone\nmight make a `button` in the template and handle the click behavior in the\nJavaScript file that shares the same name as the template.\n\nComponents are broken down into two categories:\n\n- Components _without_ JavaScript, that are based only on a template. These\n  are called Template-only or TO components.\n- Components _with_ JavaScript, which consist of a template and a backing\n  class.\n\nEmber ships with two types of JavaScript classes for components:\n\n1. Glimmer components, imported from `@glimmer/component`, which are the\n   default component's for Ember Octane (3.15) and more recent editions.\n2. Classic components, imported from `@ember/component`, which were the\n   default for older editions of Ember (pre 3.15).\n\nBelow is the documentation for Classic components. If you are looking for the\nAPI documentation for Template-only or Glimmer components, it is [available\nhere](/ember/release/modules/@glimmer%2Fcomponent).\n\n## Defining a Classic Component\n\nIf you want to customize the component in order to handle events, transform\narguments or maintain internal state, you implement a subclass of `Component`.\n\nOne example is to add computed properties to your component:\n\n```app/components/person-profile.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  @computed('person.title', 'person.firstName', 'person.lastName')\n  get displayName() {\n    let { title, firstName, lastName } = this.person;\n\n    if (title) {\n      return `${title} ${lastName}`;\n    } else {\n      return `${firstName} ${lastName}`;\n    }\n  }\n}\n```\n\nAnd then use it in the component's template:\n\n```app/templates/components/person-profile.hbs\n<h1>{{this.displayName}}</h1>\n{{yield}}\n```\n\n## Customizing a Classic Component's HTML Element in JavaScript\n\n### HTML Tag\n\nThe default HTML tag name used for a component's HTML representation is `div`.\nThis can be customized by setting the `tagName` property.\n\nConsider the following component class:\n\n```app/components/emphasized-paragraph.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'em';\n}\n```\n\nWhen invoked, this component would produce output that looks something like\nthis:\n\n```html\n<em id=\"ember1\" class=\"ember-view\"></em>\n```\n\n### HTML `class` Attribute\n\nThe HTML `class` attribute of a component's tag can be set by providing a\n`classNames` property that is set to an array of strings:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNames = ['my-class', 'my-other-class'];\n}\n```\n\nInvoking this component will produce output that looks like this:\n\n```html\n<div id=\"ember1\" class=\"ember-view my-class my-other-class\"></div>\n```\n\n`class` attribute values can also be set by providing a `classNameBindings`\nproperty set to an array of properties names for the component. The return\nvalue of these properties will be added as part of the value for the\ncomponents's `class` attribute. These properties can be computed properties:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\nimport { computed } from '@ember/object';\n\nexport default class extends Component {\n  classNames = ['my-class', 'my-other-class'];\n  classNameBindings = ['propertyA', 'propertyB'];\n\n  propertyA = 'from-a';\n\n  get propertyB {\n    if (someLogic) { return 'from-b'; }\n  }\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view my-class my-other-class from-a from-b\"></div>\n```\n\nNote that `classNames` and `classNameBindings` is in addition to the `class`\nattribute passed with the angle bracket invocation syntax. Therefore, if this\ncomponent was invoked like so:\n\n```handlebars\n<MyWidget class=\"from-invocation\" />\n```\n\nThe resulting HTML will look similar to this:\n\n```html\n<div id=\"ember1\" class=\"from-invocation ember-view my-class my-other-class from-a from-b\"></div>\n```\n\nIf the value of a class name binding returns a boolean the property name\nitself will be used as the class name if the property is true. The class name\nwill not be added if the value is `false` or `undefined`.\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNameBindings = ['hovered'];\n\n  hovered = true;\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view hovered\"></div>\n```\n\n### Custom Class Names for Boolean Values\n\nWhen using boolean class name bindings you can supply a string value other\nthan the property name for use as the `class` HTML attribute by appending the\npreferred value after a \":\" character when defining the binding:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNameBindings = ['awesome:so-very-cool'];\n\n  awesome = true;\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view so-very-cool\"></div>\n```\n\nBoolean value class name bindings whose property names are in a\ncamelCase-style format will be converted to a dasherized format:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNameBindings = ['isUrgent'];\n\n  isUrgent = true;\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view is-urgent\"></div>\n```\n\nClass name bindings can also refer to object values that are found by\ntraversing a path relative to the component itself:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\nimport EmberObject from '@ember/object';\n\nexport default class extends Component {\n  classNameBindings = ['messages.empty'];\n\n  messages = EmberObject.create({\n    empty: true\n  });\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view empty\"></div>\n```\n\nIf you want to add a class name for a property which evaluates to true and and\na different class name if it evaluates to false, you can pass a binding like\nthis:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNameBindings = ['isEnabled:enabled:disabled'];\n\n  isEnabled = true;\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view enabled\"></div>\n```\n\nWhen isEnabled is `false`, the resulting HTML representation looks like this:\n\n```html\n<div id=\"ember1\" class=\"ember-view disabled\"></div>\n```\n\nThis syntax offers the convenience to add a class if a property is `false`:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\n// Applies no class when isEnabled is true and class 'disabled' when isEnabled is false\nexport default class extends Component {\n  classNameBindings = ['isEnabled::disabled'];\n\n  isEnabled = true;\n}\n```\n\nInvoking this component when the `isEnabled` property is true will produce\nHTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view\"></div>\n```\n\nInvoking it when the `isEnabled` property on the component is `false` will\nproduce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view disabled\"></div>\n```\n\nUpdates to the value of a class name binding will result in automatic update\nof the  HTML `class` attribute in the component's rendered HTML\nrepresentation. If the value becomes `false` or `undefined` the class name\nwill be removed.\n\nBoth `classNames` and `classNameBindings` are concatenated properties. See\n[EmberObject](/ember/release/classes/EmberObject) documentation for more\ninformation about concatenated properties.\n\n### Other HTML Attributes\n\nThe HTML attribute section of a component's tag can be set by providing an\n`attributeBindings` property set to an array of property names on the\ncomponent. The return value of these properties will be used as the value of\nthe component's HTML associated attribute:\n\n```app/components/my-anchor.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'a';\n  attributeBindings = ['href'];\n\n  href = 'http://google.com';\n};\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<a id=\"ember1\" class=\"ember-view\" href=\"http://google.com\"></a>\n```\n\nOne property can be mapped on to another by placing a \":\" between the source\nproperty and the destination property:\n\n```app/components/my-anchor.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'a';\n  attributeBindings = ['url:href'];\n\n  url = 'http://google.com';\n};\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<a id=\"ember1\" class=\"ember-view\" href=\"http://google.com\"></a>\n```\n\nHTML attributes passed with angle bracket invocations will take precedence\nover those specified in `attributeBindings`. Therefore, if this component was\ninvoked like so:\n\n```handlebars\n<MyAnchor href=\"http://bing.com\" @url=\"http://google.com\" />\n```\n\nThe resulting HTML will looks like this:\n\n```html\n<a id=\"ember1\" class=\"ember-view\" href=\"http://bing.com\"></a>\n```\n\nNote that the `href` attribute is ultimately set to `http://bing.com`, despite\nit having attribute binidng to the `url` property, which was set to\n`http://google.com`.\n\nNamespaced attributes (e.g. `xlink:href`) are supported, but have to be\nmapped, since `:` is not a valid character for properties in Javascript:\n\n```app/components/my-use.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'use';\n  attributeBindings = ['xlinkHref:xlink:href'];\n\n  xlinkHref = '#triangle';\n};\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<use xlink:href=\"#triangle\"></use>\n```\n\nIf the value of a property monitored by `attributeBindings` is a boolean, the\nattribute will be present or absent depending on the value:\n\n```app/components/my-text-input.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'input';\n  attributeBindings = ['disabled'];\n\n  disabled = false;\n};\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<input id=\"ember1\" class=\"ember-view\" />\n```\n\n`attributeBindings` can refer to computed properties:\n\n```app/components/my-text-input.js\nimport Component from '@ember/component';\nimport { computed } from '@ember/object';\n\nexport default class extends Component {\n  tagName = 'input';\n  attributeBindings = ['disabled'];\n\n  get disabled() {\n    if (someLogic) {\n      return true;\n    } else {\n      return false;\n    }\n  }\n};\n```\n\nTo prevent setting an attribute altogether, use `null` or `undefined` as the\nvalue of the property used in `attributeBindings`:\n\n```app/components/my-text-input.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'form';\n  attributeBindings = ['novalidate'];\n  novalidate = null;\n};\n```\n\nUpdates to the property of an attribute binding will result in automatic\nupdate of the  HTML attribute in the component's HTML output.\n\n`attributeBindings` is a concatenated property. See\n[EmberObject](/ember/release/classes/EmberObject) documentation for more\ninformation about concatenated properties.\n\n## Layouts\n\nThe `layout` property can be used to dynamically specify a template associated\nwith a component class, instead of relying on Ember to link together a\ncomponent class and a template based on file names.\n\nIn general, applications should not use this feature, but it's commonly used\nin addons for historical reasons.\n\nThe `layout` property should be set to the default export of a template\nmodule, which is the name of a template file without the `.hbs` extension.\n\n```app/templates/components/person-profile.hbs\n<h1>Person's Title</h1>\n<div class='details'>{{yield}}</div>\n```\n\n```app/components/person-profile.js\n  import Component from '@ember/component';\n  import layout from '../templates/components/person-profile';\n\n  export default class extends Component {\n    layout = layout;\n  }\n```\n\nIf you invoke the component:\n\n```handlebars\n<PersonProfile>\n  <h2>Chief Basket Weaver</h2>\n  <h3>Fisherman Industries</h3>\n</PersonProfile>\n```\n\nor\n\n```handlebars\n{{#person-profile}}\n  <h2>Chief Basket Weaver</h2>\n  <h3>Fisherman Industries</h3>\n{{/person-profile}}\n```\n\nIt will result in the following HTML output:\n\n```html\n<h1>Person's Title</h1>\n  <div class=\"details\">\n  <h2>Chief Basket Weaver</h2>\n  <h3>Fisherman Industries</h3>\n</div>\n```\n\n## Handling Browser Events\n\nThere are two ways to handle user-initiated events:\n\n### Using the `on` modifier to capture browser events\n\nIn a component's template, you can attach an event handler to any element with the `on` modifier:\n\n```handlebars\n<button {{on 'click' this.doSomething}} />\n```\n\nThis will call the function on your component:\n\n```js\nimport Component from '@ember/component';\n\nexport default class ExampleComponent extends Component {\n  doSomething = (event) => {\n    // `event` is the native click Event\n    console.log('clicked on the button');\n  };\n}\n```\n\nSee the [Guide on Component event\nhandlers](https://guides.emberjs.com/release/components/component-state-and-actions/#toc_html-modifiers-and-actions)\nand the [API docs for `on`](../Ember.Templates.helpers/methods/on?anchor=on)\nfor more details.\n\n### Event Handler Methods\n\nComponents can also respond to user-initiated events by implementing a method\nthat matches the event name. This approach is appropriate when the same event\nshould be handled by all instances of the same component.\n\nAn event object will be passed as the argument to the event handler method.\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  click(event) {\n    // `event.target` is either the component's element or one of its children\n    let tag = event.target.tagName.toLowerCase();\n    console.log('clicked on a `<${tag}>` HTML element!');\n  }\n}\n```\n\nIn this example, whenever the user clicked anywhere inside the component, it\nwill log a message to the console.\n\nIt is possible to handle event types other than `click` by implementing the\nfollowing event handler methods. In addition, custom events can be registered\nby using `Application.customEvents`.\n\nTouch events:\n\n* `touchStart`\n* `touchMove`\n* `touchEnd`\n* `touchCancel`\n\nKeyboard events:\n\n* `keyDown`\n* `keyUp`\n* `keyPress`\n\nMouse events:\n\n* `mouseDown`\n* `mouseUp`\n* `contextMenu`\n* `click`\n* `doubleClick`\n* `focusIn`\n* `focusOut`\n\nForm events:\n\n* `submit`\n* `change`\n* `focusIn`\n* `focusOut`\n* `input`\n\nDrag and drop events:\n\n* `dragStart`\n* `drag`\n* `dragEnter`\n* `dragLeave`\n* `dragOver`\n* `dragEnd`\n* `drop`",
+      "description": "A component is a reusable UI element that consists of a `.hbs` template and an\noptional JavaScript class that defines its behavior. For example, someone\nmight make a `button` in the template and handle the click behavior in the\nJavaScript file that shares the same name as the template.\n\nComponents are broken down into two categories:\n\n- Components _without_ JavaScript, that are based only on a template. These\n  are called Template-only or TO components.\n- Components _with_ JavaScript, which consist of a template and a backing\n  class.\n\nEmber ships with two types of JavaScript classes for components:\n\n1. Glimmer components, imported from `@glimmer/component`, which are the\n   default component's for Ember Octane (3.15) and more recent editions.\n2. Classic components, imported from `@ember/component`, which were the\n   default for older editions of Ember (pre 3.15).\n\nBelow is the documentation for Classic components. If you are looking for the\nAPI documentation for Template-only or Glimmer components, it is [available\nhere](/ember/release/modules/@glimmer%2Fcomponent).\n\nNote: Prior to Ember 6.8, by default, components were authored in paired `.hbs` and `.js`\nfiles. This is still supported, but the default authoring format is now `.gjs` or \"template tag\".\nThe documentation for `@ember/component` still refers to the older authoring format. To read about\nthe new authoring format, see the \n[Glimmer Component API documentation](/ember/release/modules/@glimmer%2Fcomponent).\n  \n## Defining a Classic Component\n\nIf you want to customize the component in order to handle events, transform\narguments or maintain internal state, you implement a subclass of `Component`.\n\nOne example is to add computed properties to your component:\n\n```app/components/person-profile.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  @computed('person.title', 'person.firstName', 'person.lastName')\n  get displayName() {\n    let { title, firstName, lastName } = this.person;\n\n    if (title) {\n      return `${title} ${lastName}`;\n    } else {\n      return `${firstName} ${lastName}`;\n    }\n  }\n}\n```\n\nAnd then use it in the component's template:\n\n```app/components/person-profile.hbs\n<h1>{{this.displayName}}</h1>\n{{yield}}\n```\n\n## Customizing a Classic Component's HTML Element in JavaScript\n\n### HTML Tag\n\nThe default HTML tag name used for a component's HTML representation is `div`.\nThis can be customized by setting the `tagName` property.\n\nConsider the following component class:\n\n```app/components/emphasized-paragraph.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'em';\n}\n```\n\nWhen invoked, this component would produce output that looks something like\nthis:\n\n```html\n<em id=\"ember1\" class=\"ember-view\"></em>\n```\n\n### HTML `class` Attribute\n\nThe HTML `class` attribute of a component's tag can be set by providing a\n`classNames` property that is set to an array of strings:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNames = ['my-class', 'my-other-class'];\n}\n```\n\nInvoking this component will produce output that looks like this:\n\n```html\n<div id=\"ember1\" class=\"ember-view my-class my-other-class\"></div>\n```\n\n`class` attribute values can also be set by providing a `classNameBindings`\nproperty set to an array of properties names for the component. The return\nvalue of these properties will be added as part of the value for the\ncomponents's `class` attribute. These properties can be computed properties:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\nimport { computed } from '@ember/object';\n\nexport default class extends Component {\n  classNames = ['my-class', 'my-other-class'];\n  classNameBindings = ['propertyA', 'propertyB'];\n\n  propertyA = 'from-a';\n\n  get propertyB {\n    if (someLogic) { return 'from-b'; }\n  }\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view my-class my-other-class from-a from-b\"></div>\n```\n\nNote that `classNames` and `classNameBindings` is in addition to the `class`\nattribute passed with the angle bracket invocation syntax. Therefore, if this\ncomponent was invoked like so:\n\n```handlebars\n<MyWidget class=\"from-invocation\" />\n```\n\nThe resulting HTML will look similar to this:\n\n```html\n<div id=\"ember1\" class=\"from-invocation ember-view my-class my-other-class from-a from-b\"></div>\n```\n\nIf the value of a class name binding returns a boolean the property name\nitself will be used as the class name if the property is true. The class name\nwill not be added if the value is `false` or `undefined`.\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNameBindings = ['hovered'];\n\n  hovered = true;\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view hovered\"></div>\n```\n\n### Custom Class Names for Boolean Values\n\nWhen using boolean class name bindings you can supply a string value other\nthan the property name for use as the `class` HTML attribute by appending the\npreferred value after a \":\" character when defining the binding:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNameBindings = ['awesome:so-very-cool'];\n\n  awesome = true;\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view so-very-cool\"></div>\n```\n\nBoolean value class name bindings whose property names are in a\ncamelCase-style format will be converted to a dasherized format:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNameBindings = ['isUrgent'];\n\n  isUrgent = true;\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view is-urgent\"></div>\n```\n\nClass name bindings can also refer to object values that are found by\ntraversing a path relative to the component itself:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\nimport EmberObject from '@ember/object';\n\nexport default class extends Component {\n  classNameBindings = ['messages.empty'];\n\n  messages = EmberObject.create({\n    empty: true\n  });\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view empty\"></div>\n```\n\nIf you want to add a class name for a property which evaluates to true and and\na different class name if it evaluates to false, you can pass a binding like\nthis:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  classNameBindings = ['isEnabled:enabled:disabled'];\n\n  isEnabled = true;\n}\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view enabled\"></div>\n```\n\nWhen isEnabled is `false`, the resulting HTML representation looks like this:\n\n```html\n<div id=\"ember1\" class=\"ember-view disabled\"></div>\n```\n\nThis syntax offers the convenience to add a class if a property is `false`:\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\n// Applies no class when isEnabled is true and class 'disabled' when isEnabled is false\nexport default class extends Component {\n  classNameBindings = ['isEnabled::disabled'];\n\n  isEnabled = true;\n}\n```\n\nInvoking this component when the `isEnabled` property is true will produce\nHTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view\"></div>\n```\n\nInvoking it when the `isEnabled` property on the component is `false` will\nproduce HTML that looks like:\n\n```html\n<div id=\"ember1\" class=\"ember-view disabled\"></div>\n```\n\nUpdates to the value of a class name binding will result in automatic update\nof the  HTML `class` attribute in the component's rendered HTML\nrepresentation. If the value becomes `false` or `undefined` the class name\nwill be removed.\n\nBoth `classNames` and `classNameBindings` are concatenated properties. See\n[EmberObject](/ember/release/classes/EmberObject) documentation for more\ninformation about concatenated properties.\n\n### Other HTML Attributes\n\nThe HTML attribute section of a component's tag can be set by providing an\n`attributeBindings` property set to an array of property names on the\ncomponent. The return value of these properties will be used as the value of\nthe component's HTML associated attribute:\n\n```app/components/my-anchor.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'a';\n  attributeBindings = ['href'];\n\n  href = 'http://google.com';\n};\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<a id=\"ember1\" class=\"ember-view\" href=\"http://google.com\"></a>\n```\n\nOne property can be mapped on to another by placing a \":\" between the source\nproperty and the destination property:\n\n```app/components/my-anchor.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'a';\n  attributeBindings = ['url:href'];\n\n  url = 'http://google.com';\n};\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<a id=\"ember1\" class=\"ember-view\" href=\"http://google.com\"></a>\n```\n\nHTML attributes passed with angle bracket invocations will take precedence\nover those specified in `attributeBindings`. Therefore, if this component was\ninvoked like so:\n\n```handlebars\n<MyAnchor href=\"http://bing.com\" @url=\"http://google.com\" />\n```\n\nThe resulting HTML will looks like this:\n\n```html\n<a id=\"ember1\" class=\"ember-view\" href=\"http://bing.com\"></a>\n```\n\nNote that the `href` attribute is ultimately set to `http://bing.com`, despite\nit having attribute binidng to the `url` property, which was set to\n`http://google.com`.\n\nNamespaced attributes (e.g. `xlink:href`) are supported, but have to be\nmapped, since `:` is not a valid character for properties in Javascript:\n\n```app/components/my-use.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'use';\n  attributeBindings = ['xlinkHref:xlink:href'];\n\n  xlinkHref = '#triangle';\n};\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<use xlink:href=\"#triangle\"></use>\n```\n\nIf the value of a property monitored by `attributeBindings` is a boolean, the\nattribute will be present or absent depending on the value:\n\n```app/components/my-text-input.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'input';\n  attributeBindings = ['disabled'];\n\n  disabled = false;\n};\n```\n\nInvoking this component will produce HTML that looks like:\n\n```html\n<input id=\"ember1\" class=\"ember-view\" />\n```\n\n`attributeBindings` can refer to computed properties:\n\n```app/components/my-text-input.js\nimport Component from '@ember/component';\nimport { computed } from '@ember/object';\n\nexport default class extends Component {\n  tagName = 'input';\n  attributeBindings = ['disabled'];\n\n  get disabled() {\n    if (someLogic) {\n      return true;\n    } else {\n      return false;\n    }\n  }\n};\n```\n\nTo prevent setting an attribute altogether, use `null` or `undefined` as the\nvalue of the property used in `attributeBindings`:\n\n```app/components/my-text-input.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  tagName = 'form';\n  attributeBindings = ['novalidate'];\n  novalidate = null;\n};\n```\n\nUpdates to the property of an attribute binding will result in automatic\nupdate of the  HTML attribute in the component's HTML output.\n\n`attributeBindings` is a concatenated property. See\n[EmberObject](/ember/release/classes/EmberObject) documentation for more\ninformation about concatenated properties.\n\n## Layouts\n\nThe `layout` property can be used to dynamically specify a template associated\nwith a component class, instead of relying on Ember to link together a\ncomponent class and a template based on file names.\n\nIn general, applications should not use this feature, but it's commonly used\nin addons for historical reasons.\n\nThe `layout` property should be set to the default export of a template\nmodule, which is the name of a template file without the `.hbs` extension.\n\n```app/components/person-profile.hbs\n<h1>Person's Title</h1>\n<div class='details'>{{yield}}</div>\n```\n\n```app/components/person-profile.js\n  import Component from '@ember/component';\n  import layout from '../templates/components/person-profile';\n\n  export default class extends Component {\n    layout = layout;\n  }\n```\n\nIf you invoke the component:\n\n```handlebars\n<PersonProfile>\n  <h2>Chief Basket Weaver</h2>\n  <h3>Fisherman Industries</h3>\n</PersonProfile>\n```\n\nor\n\n```handlebars\n{{#person-profile}}\n  <h2>Chief Basket Weaver</h2>\n  <h3>Fisherman Industries</h3>\n{{/person-profile}}\n```\n\nIt will result in the following HTML output:\n\n```html\n<h1>Person's Title</h1>\n  <div class=\"details\">\n  <h2>Chief Basket Weaver</h2>\n  <h3>Fisherman Industries</h3>\n</div>\n```\n\n## Handling Browser Events\n\nThere are two ways to handle user-initiated events:\n\n### Using the `on` modifier to capture browser events\n\nIn a component's template, you can attach an event handler to any element with the `on` modifier:\n\n```handlebars\n<button {{on 'click' this.doSomething}} />\n```\n\nThis will call the function on your component:\n\n```js\nimport Component from '@ember/component';\n\nexport default class ExampleComponent extends Component {\n  doSomething = (event) => {\n    // `event` is the native click Event\n    console.log('clicked on the button');\n  };\n}\n```\n\nSee the [Guide on Component event\nhandlers](https://guides.emberjs.com/release/components/component-state-and-actions/#toc_html-modifiers-and-actions)\nand the [API docs for `on`](../Ember.Templates.helpers/methods/on?anchor=on)\nfor more details.\n\n### Event Handler Methods\n\nComponents can also respond to user-initiated events by implementing a method\nthat matches the event name. This approach is appropriate when the same event\nshould be handled by all instances of the same component.\n\nAn event object will be passed as the argument to the event handler method.\n\n```app/components/my-widget.js\nimport Component from '@ember/component';\n\nexport default class extends Component {\n  click(event) {\n    // `event.target` is either the component's element or one of its children\n    let tag = event.target.tagName.toLowerCase();\n    console.log('clicked on a `<${tag}>` HTML element!');\n  }\n}\n```\n\nIn this example, whenever the user clicked anywhere inside the component, it\nwill log a message to the console.\n\nIt is possible to handle event types other than `click` by implementing the\nfollowing event handler methods. In addition, custom events can be registered\nby using `Application.customEvents`.\n\nTouch events:\n\n* `touchStart`\n* `touchMove`\n* `touchEnd`\n* `touchCancel`\n\nKeyboard events:\n\n* `keyDown`\n* `keyUp`\n* `keyPress`\n\nMouse events:\n\n* `mouseDown`\n* `mouseUp`\n* `contextMenu`\n* `click`\n* `doubleClick`\n* `focusIn`\n* `focusOut`\n\nForm events:\n\n* `submit`\n* `change`\n* `focusIn`\n* `focusOut`\n* `input`\n\nDrag and drop events:\n\n* `dragStart`\n* `drag`\n* `dragEnter`\n* `dragLeave`\n* `dragOver`\n* `dragEnd`\n* `drop`",
       "extends": "Ember.CoreView",
       "uses": [
         "Ember.TargetActionSupport",
@@ -3646,7 +3646,7 @@
       "namespace": "",
       "file": "packages/@ember/-internals/glimmer/lib/helper.ts",
       "line": 57,
-      "description": "Ember Helpers are functions that can compute values, and are used in templates.\nFor example, this code calls a helper named `format-currency`:\n\n```app/templates/application.hbs\n<Cost @cents={{230}} />\n```\n\n```app/components/cost.hbs\n<div>{{format-currency @cents currency=\"$\"}}</div>\n```\n\nAdditionally a helper can be called as a nested helper.\nIn this example, we show the formatted currency value if the `showMoney`\nnamed argument is truthy.\n\n```handlebars\n{{if @showMoney (format-currency @cents currency=\"$\")}}\n```\n\nHelpers defined using a class must provide a `compute` function. For example:\n\n```app/helpers/format-currency.js\nimport Helper from '@ember/component/helper';\n\nexport default class extends Helper {\n  compute([cents], { currency }) {\n    return `${currency}${cents * 0.01}`;\n  }\n}\n```\n\nEach time the input to a helper changes, the `compute` function will be\ncalled again.\n\nAs instances, these helpers also have access to the container and will accept\ninjected dependencies.\n\nAdditionally, class helpers can call `recompute` to force a new computation.",
+      "description": "Ember Helpers are functions that can compute values, and are used in templates.\nFor example, this code calls a helper named `format-currency`:\n\n```app/templates/application.gjs\nimport Cost from '../components/cost';\n  \n<template>\n  <Cost @cents={{230}} />\n</template>\n```\n\n```app/components/cost.gjs\nimport formatCurrency from '../helpers/format-currency';\n  \n<template>\n  <div>{{formatCurrency @cents currency=\"$\"}}</div>\n</template>\n```\n\nAdditionally a helper can be called as a nested helper.\nIn this example, we show the formatted currency value if the `showMoney`\nnamed argument is truthy.\n\n```gjs\nimport formatCurrency from '../helpers/format-currency';\n\n<template>\n  {{if @showMoney (formatCurrency @cents currency=\"$\")}}\n</template>\n```\n\nHelpers defined using a class must provide a `compute` function. For example:\n\n```app/helpers/format-currency.js\nimport Helper from '@ember/component/helper';\n\nexport default class extends Helper {\n  compute([cents], { currency }) {\n    return `${currency}${cents * 0.01}`;\n  }\n}\n```\n\nEach time the input to a helper changes, the `compute` function will be\ncalled again.\n\nAs instances, these helpers also have access to the container and will accept\ninjected dependencies.\n\nAdditionally, class helpers can call `recompute` to force a new computation.",
       "extends": "CoreObject",
       "access": "public",
       "tagname": "",
@@ -4147,7 +4147,7 @@
       "namespace": "Ember",
       "file": "packages/@ember/-internals/runtime/lib/mixins/target_action_support.ts",
       "line": 12,
-      "description": "`TargetActionSupport` is a mixin that can be included in a class\nto add a `triggerAction` method with semantics similar to the Handlebars\n`{{action}}` helper. In normal Ember usage, the `{{action}}` helper is\nusually the best choice. This mixin is most often useful when you are\ndoing more complex event handling in Components.",
+      "description": "`TargetActionSupport` is a mixin that can be included in a class\nto add a `triggerAction` method with semantics similar to the\n`{{action}}` helper. In normal Ember usage, the `{{action}}` helper is\nusually the best choice. This mixin is most often useful when you are\ndoing more complex event handling in Components.",
       "extends": "Mixin",
       "access": "private",
       "tagname": ""
@@ -4370,7 +4370,7 @@
       "module": "ember",
       "namespace": "",
       "file": "packages/@ember/array/index.ts",
-      "line": 2071,
+      "line": 2075,
       "description": "The NativeArray mixin contains the properties needed to make the native\nArray support MutableArray and all of its dependent APIs.",
       "uses": [
         "MutableArray",
@@ -4995,7 +4995,7 @@
       "namespace": "",
       "file": "packages/@ember/routing/router-service.ts",
       "line": 28,
-      "description": "The Router service is the public API that provides access to the router.\n\nThe immediate benefit of the Router service is that you can inject it into components,\ngiving them a friendly way to initiate transitions and ask questions about the current\nglobal router state.\n\nIn this example, the Router service is injected into a component to initiate a transition\nto a dedicated route:\n\n```app/components/example.js\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nexport default class ExampleComponent extends Component {\n  @service router;\n\n  @action\n  next() {\n    this.router.transitionTo('other.route');\n  }\n}\n```\n\nLike any service, it can also be injected into helpers, routes, etc.",
+      "description": "The Router service is the public API that provides access to the router.\n\nThe immediate benefit of the Router service is that you can inject it into components,\ngiving them a friendly way to initiate transitions and ask questions about the current\nglobal router state.\n\nIn this example, the Router service is injected into a component to initiate a transition\nto a dedicated route:\n\n```app/components/example.gjs\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nexport default class ExampleComponent extends Component {\n  @service router;\n\n  @action\n  next() {\n    this.router.transitionTo('other.route');\n  }\n}\n```\n\nLike any service, it can also be injected into helpers, routes, etc.",
       "access": "public",
       "tagname": "",
       "extends": "Service"
@@ -6504,7 +6504,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/components/input.ts",
       "line": 67,
-      "description": "The `Input` component lets you create an HTML `<input>` element.\n\n```handlebars\n<Input @value=\"987\" />\n```\n\ncreates an `<input>` element with `type=\"text\"` and value set to 987.\n\n### Text field\n\nIf no `type` argument is specified, a default of type 'text' is used.\n\n```handlebars\nSearch:\n<Input @value={{this.searchWord}} />\n```\n\nIn this example, the initial value in the `<input>` will be set to the value of\n`this.searchWord`. If the user changes the text, the value of `this.searchWord` will also be\nupdated.\n\n### Actions\n\nThe `Input` component takes a number of arguments with callbacks that are invoked in response to\nuser events.\n\n* `enter`\n* `insert-newline`\n* `escape-press`\n* `focus-in`\n* `focus-out`\n* `key-down`\n* `key-press`\n* `key-up`\n\nThese callbacks are passed to `Input` like this:\n\n```handlebars\n<Input @value={{this.searchWord}} @enter={{this.query}} />\n```\n\nStarting with Ember Octane, we recommend using the `{{on}}` modifier to call actions\non specific events, such as the input event.\n\n```handlebars\n<label for=\"input-name\">Name:</label>\n<Input\n  @id=\"input-name\"\n  @value={{this.name}}\n  {{on \"input\" this.validateName}}\n/>\n```\n\nThe event name (e.g. `focusout`, `input`, `keydown`) always follows the casing\nthat the HTML standard uses.\n\n### `<input>` HTML Attributes to Avoid\n\nIn most cases, if you want to pass an attribute to the underlying HTML `<input>` element, you\ncan pass the attribute directly, just like any other Ember component.\n\n```handlebars\n<Input @type=\"text\" size=\"10\" />\n```\n\nIn this example, the `size` attribute will be applied to the underlying `<input>` element in the\noutputted HTML.\n\nHowever, there are a few attributes where you **must** use the `@` version.\n\n* `@type`: This argument is used to control which Ember component is used under the hood\n* `@value`: The `@value` argument installs a two-way binding onto the element. If you wanted a\n  one-way binding, use `<input>` with the `value` property and the `input` event instead.\n* `@checked` (for checkboxes): like `@value`, the `@checked` argument installs a two-way binding\n  onto the element. If you wanted a one-way binding, use `<input type=\"checkbox\">` with\n  `checked` and the `input` event instead.\n\n### Checkbox\n\nTo create an `<input type=\"checkbox\">`:\n\n```handlebars\nEmberize Everything:\n<Input @type=\"checkbox\" @checked={{this.isEmberized}} name=\"isEmberized\" />\n```\n\nThis will bind the checked state of this checkbox to the value of `isEmberized` -- if either one\nchanges, it will be reflected in the other.",
+      "description": "The `Input` component lets you create an HTML `<input>` element.\n\n```gjs\nimport { Input } from '@ember/component';\n  \n<template>\n  <Input @value=\"987\" />\n</template>\n```\n\ncreates an `<input>` element with `type=\"text\"` and value set to 987.\n\n### Text field\n\nIf no `type` argument is specified, a default of type 'text' is used.\n\n```handlebars\nSearch:\n<Input @value={{this.searchWord}} />\n```\n\nIn this example, the initial value in the `<input>` will be set to the value of\n`this.searchWord`. If the user changes the text, the value of `this.searchWord` will also be\nupdated.\n\n### Actions\n\nThe `Input` component takes a number of arguments with callbacks that are invoked in response to\nuser events.\n\n* `enter`\n* `insert-newline`\n* `escape-press`\n* `focus-in`\n* `focus-out`\n* `key-down`\n* `key-press`\n* `key-up`\n\nThese callbacks are passed to `Input` like this:\n\n```handlebars\n<Input @value={{this.searchWord}} @enter={{this.query}} />\n```\n\nStarting with Ember Octane, we recommend using the `{{on}}` modifier to call actions\non specific events, such as the input event.\n\n```handlebars\n<label for=\"input-name\">Name:</label>\n<Input\n  @id=\"input-name\"\n  @value={{this.name}}\n  {{on \"input\" this.validateName}}\n/>\n```\n\nThe event name (e.g. `focusout`, `input`, `keydown`) always follows the casing\nthat the HTML standard uses.\n\n### `<input>` HTML Attributes to Avoid\n\nIn most cases, if you want to pass an attribute to the underlying HTML `<input>` element, you\ncan pass the attribute directly, just like any other Ember component.\n\n```handlebars\n<Input @type=\"text\" size=\"10\" />\n```\n\nIn this example, the `size` attribute will be applied to the underlying `<input>` element in the\noutputted HTML.\n\nHowever, there are a few attributes where you **must** use the `@` version.\n\n* `@type`: This argument is used to control which Ember component is used under the hood\n* `@value`: The `@value` argument installs a two-way binding onto the element. If you wanted a\n  one-way binding, use `<input>` with the `value` property and the `input` event instead.\n* `@checked` (for checkboxes): like `@value`, the `@checked` argument installs a two-way binding\n  onto the element. If you wanted a one-way binding, use `<input type=\"checkbox\">` with\n  `checked` and the `input` event instead.\n\n### Checkbox\n\nTo create an `<input type=\"checkbox\">`:\n\n```handlebars\nEmberize Everything:\n<Input @type=\"checkbox\" @checked={{this.isEmberized}} name=\"isEmberized\" />\n```\n\nThis will bind the checked state of this checkbox to the value of `isEmberized` -- if either one\nchanges, it will be reflected in the other.",
       "itemtype": "method",
       "name": "Input",
       "params": [
@@ -6521,14 +6521,14 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/components/input.ts",
-      "line": 167,
+      "line": 171,
       "description": "The HTML class attribute.",
       "class": "Ember.Templates.components",
       "module": "@ember/component"
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/components/input.ts",
-      "line": 178,
+      "line": 182,
       "description": "The HTML type attribute.",
       "class": "Ember.Templates.components",
       "module": "@ember/component"
@@ -6550,7 +6550,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/components/link-to.ts",
       "line": 48,
-      "description": "The `LinkTo` component renders a link to the supplied `routeName` passing an optionally\nsupplied model to the route as its `model` context of the route. The block for `LinkTo`\nbecomes the contents of the rendered element:\n\n```handlebars\n<LinkTo @route='photoGallery'>\n  Great Hamster Photos\n</LinkTo>\n```\n\nThis will result in:\n\n```html\n<a href=\"/hamster-photos\">\n  Great Hamster Photos\n</a>\n```\n\n### Disabling the `LinkTo` component\n\nThe `LinkTo` component can be disabled by using the `disabled` argument. A disabled link\ndoesn't result in a transition when activated, and adds the `disabled` class to the `<a>`\nelement.\n\n(The class name to apply to the element can be overridden by using the `disabledClass`\nargument)\n\n```handlebars\n<LinkTo @route='photoGallery' @disabled={{true}}>\n  Great Hamster Photos\n</LinkTo>\n```\n\n### Handling `href`\n\n`<LinkTo>` will use your application's Router to fill the element's `href` property with a URL\nthat matches the path to the supplied `routeName`.\n\n### Handling current route\n\nThe `LinkTo` component will apply a CSS class name of 'active' when the application's current\nroute matches the supplied routeName. For example, if the application's current route is\n'photoGallery.recent', then the following invocation of `LinkTo`:\n\n```handlebars\n<LinkTo @route='photoGallery.recent'>\n  Great Hamster Photos\n</LinkTo>\n```\n\nwill result in\n\n```html\n<a href=\"/hamster-photos/this-week\" class=\"active\">\n  Great Hamster Photos\n</a>\n```\n\nThe CSS class used for active classes can be customized by passing an `activeClass` argument:\n\n```handlebars\n<LinkTo @route='photoGallery.recent' @activeClass=\"current-url\">\n  Great Hamster Photos\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/this-week\" class=\"current-url\">\n  Great Hamster Photos\n</a>\n```\n\n### Keeping a link active for other routes\n\nIf you need a link to be 'active' even when it doesn't match the current route, you can use the\n`current-when` argument.\n\n```handlebars\n<LinkTo @route='photoGallery' @current-when='photos'>\n  Photo Gallery\n</LinkTo>\n```\n\nThis may be helpful for keeping links active for:\n\n* non-nested routes that are logically related\n* some secondary menu approaches\n* 'top navigation' with 'sub navigation' scenarios\n\nA link will be active if `current-when` is `true` or the current\nroute is the route this link would transition to.\n\nTo match multiple routes 'space-separate' the routes:\n\n```handlebars\n<LinkTo @route='gallery' @current-when='photos drawings paintings'>\n  Art Gallery\n</LinkTo>\n```\n\n### Supplying a model\n\nAn optional `model` argument can be used for routes whose\npaths contain dynamic segments. This argument will become\nthe model context of the linked route:\n\n```javascript\nRouter.map(function() {\n  this.route(\"photoGallery\", {path: \"hamster-photos/:photo_id\"});\n});\n```\n\n```handlebars\n<LinkTo @route='photoGallery' @model={{this.aPhoto}}>\n  {{aPhoto.title}}\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/42\">\n  Tomster\n</a>\n```\n\n### Supplying multiple models\n\nFor deep-linking to route paths that contain multiple\ndynamic segments, the `models` argument can be used.\n\nAs the router transitions through the route path, each\nsupplied model argument will become the context for the\nroute with the dynamic segments:\n\n```javascript\nRouter.map(function() {\n  this.route(\"photoGallery\", { path: \"hamster-photos/:photo_id\" }, function() {\n    this.route(\"comment\", {path: \"comments/:comment_id\"});\n  });\n});\n```\n\nThis argument will become the model context of the linked route:\n\n```handlebars\n<LinkTo @route='photoGallery.comment' @models={{array this.aPhoto this.comment}}>\n  {{comment.body}}\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/42/comments/718\">\n  A+++ would snuggle again.\n</a>\n```\n\n### Supplying an explicit dynamic segment value\n\nIf you don't have a model object available to pass to `LinkTo`,\nan optional string or integer argument can be passed for routes whose\npaths contain dynamic segments. This argument will become the value\nof the dynamic segment:\n\n```javascript\nRouter.map(function() {\n  this.route(\"photoGallery\", { path: \"hamster-photos/:photo_id\" });\n});\n```\n\n```handlebars\n<LinkTo @route='photoGallery' @model={{aPhotoId}}>\n  {{this.aPhoto.title}}\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/42\">\n  Tomster\n</a>\n```\n\nWhen transitioning into the linked route, the `model` hook will\nbe triggered with parameters including this passed identifier.\n\n### Supplying query parameters\n\nIf you need to add optional key-value pairs that appear to the right of the ? in a URL,\nyou can use the `query` argument.\n\n```handlebars\n<LinkTo @route='photoGallery' @query={{hash page=1 per_page=20}}>\n  Great Hamster Photos\n</LinkTo>\n```\n\nThis will result in:\n\n```html\n<a href=\"/hamster-photos?page=1&per_page=20\">\n  Great Hamster Photos\n</a>\n```",
+      "description": "The `LinkTo` component renders a link to the supplied `routeName` passing an optionally\nsupplied model to the route as its `model` context of the route. The block for `LinkTo`\nbecomes the contents of the rendered element:\n\n```gjs\nimport { LinkTo } from '@ember/routing';\n  \n<template>\n  <LinkTo @route='photoGallery'>\n    Great Hamster Photos\n  </LinkTo>\n</template>\n```\n\nThis will result in:\n\n```html\n<a href=\"/hamster-photos\">\n  Great Hamster Photos\n</a>\n```\n\n### Disabling the `LinkTo` component\n\nThe `LinkTo` component can be disabled by using the `disabled` argument. A disabled link\ndoesn't result in a transition when activated, and adds the `disabled` class to the `<a>`\nelement.\n\n(The class name to apply to the element can be overridden by using the `disabledClass`\nargument)\n\n```handlebars\n<LinkTo @route='photoGallery' @disabled={{true}}>\n  Great Hamster Photos\n</LinkTo>\n```\n\n### Handling `href`\n\n`<LinkTo>` will use your application's Router to fill the element's `href` property with a URL\nthat matches the path to the supplied `routeName`.\n\n### Handling current route\n\nThe `LinkTo` component will apply a CSS class name of 'active' when the application's current\nroute matches the supplied routeName. For example, if the application's current route is\n'photoGallery.recent', then the following invocation of `LinkTo`:\n\n```handlebars\n<LinkTo @route='photoGallery.recent'>\n  Great Hamster Photos\n</LinkTo>\n```\n\nwill result in\n\n```html\n<a href=\"/hamster-photos/this-week\" class=\"active\">\n  Great Hamster Photos\n</a>\n```\n\nThe CSS class used for active classes can be customized by passing an `activeClass` argument:\n\n```handlebars\n<LinkTo @route='photoGallery.recent' @activeClass=\"current-url\">\n  Great Hamster Photos\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/this-week\" class=\"current-url\">\n  Great Hamster Photos\n</a>\n```\n\n### Keeping a link active for other routes\n\nIf you need a link to be 'active' even when it doesn't match the current route, you can use the\n`current-when` argument.\n\n```handlebars\n<LinkTo @route='photoGallery' @current-when='photos'>\n  Photo Gallery\n</LinkTo>\n```\n\nThis may be helpful for keeping links active for:\n\n* non-nested routes that are logically related\n* some secondary menu approaches\n* 'top navigation' with 'sub navigation' scenarios\n\nA link will be active if `current-when` is `true` or the current\nroute is the route this link would transition to.\n\nTo match multiple routes 'space-separate' the routes:\n\n```handlebars\n<LinkTo @route='gallery' @current-when='photos drawings paintings'>\n  Art Gallery\n</LinkTo>\n```\n\n### Supplying a model\n\nAn optional `model` argument can be used for routes whose\npaths contain dynamic segments. This argument will become\nthe model context of the linked route:\n\n```javascript\nRouter.map(function() {\n  this.route(\"photoGallery\", {path: \"hamster-photos/:photo_id\"});\n});\n```\n\n```handlebars\n<LinkTo @route='photoGallery' @model={{this.aPhoto}}>\n  {{aPhoto.title}}\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/42\">\n  Tomster\n</a>\n```\n\n### Supplying multiple models\n\nFor deep-linking to route paths that contain multiple\ndynamic segments, the `models` argument can be used.\n\nAs the router transitions through the route path, each\nsupplied model argument will become the context for the\nroute with the dynamic segments:\n\n```javascript\nRouter.map(function() {\n  this.route(\"photoGallery\", { path: \"hamster-photos/:photo_id\" }, function() {\n    this.route(\"comment\", {path: \"comments/:comment_id\"});\n  });\n});\n```\n\nThis argument will become the model context of the linked route:\n\n```handlebars\n<LinkTo @route='photoGallery.comment' @models={{array this.aPhoto this.comment}}>\n  {{comment.body}}\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/42/comments/718\">\n  A+++ would snuggle again.\n</a>\n```\n\n### Supplying an explicit dynamic segment value\n\nIf you don't have a model object available to pass to `LinkTo`,\nan optional string or integer argument can be passed for routes whose\npaths contain dynamic segments. This argument will become the value\nof the dynamic segment:\n\n```javascript\nRouter.map(function() {\n  this.route(\"photoGallery\", { path: \"hamster-photos/:photo_id\" });\n});\n```\n\n```handlebars\n<LinkTo @route='photoGallery' @model={{aPhotoId}}>\n  {{this.aPhoto.title}}\n</LinkTo>\n```\n\n```html\n<a href=\"/hamster-photos/42\">\n  Tomster\n</a>\n```\n\nWhen transitioning into the linked route, the `model` hook will\nbe triggered with parameters including this passed identifier.\n\n### Supplying query parameters\n\nIf you need to add optional key-value pairs that appear to the right of the ? in a URL,\nyou can use the `query` argument.\n\n```handlebars\n<LinkTo @route='photoGallery' @query={{hash page=1 per_page=20}}>\n  Great Hamster Photos\n</LinkTo>\n```\n\nThis will result in:\n\n```html\n<a href=\"/hamster-photos?page=1&per_page=20\">\n  Great Hamster Photos\n</a>\n```",
       "itemtype": "method",
       "name": "LinkTo",
       "access": "public",
@@ -6560,7 +6560,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/components/link-to.ts",
-      "line": 260,
+      "line": 264,
       "description": "See [Ember.Templates.components.LinkTo](/ember/release/classes/Ember.Templates.components/methods/input?anchor=LinkTo).",
       "itemtype": "method",
       "name": "link-to",
@@ -6574,7 +6574,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/components/link-to.ts",
-      "line": 269,
+      "line": 273,
       "description": "An opaque interface which can be imported and used in strict-mode\ntemplates to call <LinkTo>.\n\nSee [Ember.Templates.components.LinkTo](/ember/release/classes/Ember.Templates.components/methods/input?anchor=LinkTo).",
       "itemtype": "method",
       "name": "LinkTo",
@@ -6589,7 +6589,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/components/textarea.ts",
       "line": 10,
-      "description": "The `Textarea` component inserts a new instance of `<textarea>` tag into the template.\n\nThe `@value` argument provides the content of the `<textarea>`.\n\nThis template:\n\n```handlebars\n<Textarea @value=\"A bunch of text\" />\n```\n\nWould result in the following HTML:\n\n```html\n<textarea class=\"ember-text-area\">\n  A bunch of text\n</textarea>\n```\n\nThe `@value` argument is two-way bound. If the user types text into the textarea, the `@value`\nargument is updated. If the `@value` argument is updated, the text in the textarea is updated.\n\nIn the following example, the `writtenWords` property on the component will be updated as the user\ntypes 'Lots of text' into the text area of their browser's window.\n\n```app/components/word-editor.js\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class WordEditorComponent extends Component {\n  @tracked writtenWords = \"Lots of text that IS bound\";\n}\n```\n\n```handlebars\n<Textarea @value={{writtenWords}} />\n```\n\nWould result in the following HTML:\n\n```html\n<textarea class=\"ember-text-area\">\n  Lots of text that IS bound\n</textarea>\n```\n\nIf you wanted a one way binding, you could use the `<textarea>` element directly, and use the\n`value` DOM property and the `input` event.\n\n### Actions\n\nThe `Textarea` component takes a number of arguments with callbacks that are invoked in\nresponse to user events.\n\n* `enter`\n* `insert-newline`\n* `escape-press`\n* `focus-in`\n* `focus-out`\n* `key-press`\n\nThese callbacks are passed to `Textarea` like this:\n\n```handlebars\n<Textarea @value={{this.searchWord}} @enter={{this.query}} />\n```\n\n## Classic Invocation Syntax\n\nThe `Textarea` component can also be invoked using curly braces, just like any other Ember\ncomponent.\n\nFor example, this is an invocation using angle-bracket notation:\n\n```handlebars\n<Textarea @value={{this.searchWord}} @enter={{this.query}} />\n```\n\nYou could accomplish the same thing using classic invocation:\n\n```handlebars\n{{textarea value=this.searchWord enter=this.query}}\n```\n\nThe main difference is that angle-bracket invocation supports any HTML attribute using HTML\nattribute syntax, because attributes and arguments have different syntax when using angle-bracket\ninvocation. Curly brace invocation, on the other hand, only has a single syntax for arguments,\nand components must manually map attributes onto component arguments.\n\nWhen using classic invocation with `{{textarea}}`, only the following attributes are mapped onto\narguments:\n\n* rows\n* cols\n* name\n* selectionEnd\n* selectionStart\n* autocomplete\n* wrap\n* lang\n* dir\n* value\n\n## Classic `layout` and `layoutName` properties\n\nBecause HTML `textarea` elements do not contain inner HTML the `layout` and\n`layoutName` properties will not be applied.",
+      "description": "The `Textarea` component inserts a new instance of `<textarea>` tag into the template.\n\nThe `@value` argument provides the content of the `<textarea>`.\n\nThis template:\n\n```handlebars\nimport { Textarea } from '@ember/component';\n\n<template>\n  <Textarea @value=\"A bunch of text\" />\n</template>\n```\n\nWould result in the following HTML:\n\n```html\n<textarea class=\"ember-text-area\">\n  A bunch of text\n</textarea>\n```\n\nThe `@value` argument is two-way bound. If the user types text into the textarea, the `@value`\nargument is updated. If the `@value` argument is updated, the text in the textarea is updated.\n\nIn the following example, the `writtenWords` property on the component will be updated as the user\ntypes 'Lots of text' into the text area of their browser's window.\n\n```app/components/word-editor.gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class WordEditorComponent extends Component {\n  @tracked writtenWords = \"Lots of text that IS bound\";\n  \n  <template>\n    <Textarea @value={{writtenWords}} />\n  </template>\n}\n```\n\nWould result in the following HTML:\n\n```html\n<textarea class=\"ember-text-area\">\n  Lots of text that IS bound\n</textarea>\n```\n\nIf you wanted a one way binding, you could use the `<textarea>` element directly, and use the\n`value` DOM property and the `input` event.\n\n### Actions\n\nThe `Textarea` component takes a number of arguments with callbacks that are invoked in\nresponse to user events.\n\n* `enter`\n* `insert-newline`\n* `escape-press`\n* `focus-in`\n* `focus-out`\n* `key-press`\n\nThese callbacks are passed to `Textarea` like this:\n\n```handlebars\n<Textarea @value={{this.searchWord}} @enter={{this.query}} />\n```\n\n## Classic Invocation Syntax\n\nThe `Textarea` component can also be invoked using curly braces, just like any other Ember\ncomponent.\n\nFor example, this is an invocation using angle-bracket notation:\n\n```handlebars\n<Textarea @value={{this.searchWord}} @enter={{this.query}} />\n```\n\nYou could accomplish the same thing using classic invocation:\n\n```handlebars\n{{textarea value=this.searchWord enter=this.query}}\n```\n\nThe main difference is that angle-bracket invocation supports any HTML attribute using HTML\nattribute syntax, because attributes and arguments have different syntax when using angle-bracket\ninvocation. Curly brace invocation, on the other hand, only has a single syntax for arguments,\nand components must manually map attributes onto component arguments.\n\nWhen using classic invocation with `{{textarea}}`, only the following attributes are mapped onto\narguments:\n\n* rows\n* cols\n* name\n* selectionEnd\n* selectionStart\n* autocomplete\n* wrap\n* lang\n* dir\n* value\n\n## Classic `layout` and `layoutName` properties\n\nBecause HTML `textarea` elements do not contain inner HTML the `layout` and\n`layoutName` properties will not be applied.",
       "itemtype": "method",
       "name": "Textarea",
       "access": "public",
@@ -6599,7 +6599,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/components/textarea.ts",
-      "line": 123,
+      "line": 127,
       "description": "See [Ember.Templates.components.Textarea](/ember/release/classes/Ember.Templates.components/methods/Textarea?anchor=Textarea)",
       "itemtype": "method",
       "name": "textarea",
@@ -6613,7 +6613,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/components/textarea.ts",
-      "line": 132,
+      "line": 136,
       "description": "An opaque interface which can be imported and used in strict-mode\ntemplates to call <Textarea>.\n\nSee [Ember.Templates.components.Textarea](/ember/release/classes/Ember.Templates.components/methods/Textarea?anchor=Textarea).",
       "itemtype": "method",
       "name": "Textarea",
@@ -6635,7 +6635,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/array.ts",
       "line": 5,
-      "description": "Use the `{{array}}` helper to create an array to pass as an option to your\ncomponents.\n\n```handlebars\n<MyComponent @people={{array\n  'Tom Dale'\n  'Yehuda Katz'\n  this.myOtherPerson}}\n/>\n```\n or\n```handlebars\n{{my-component people=(array\n  'Tom Dale'\n  'Yehuda Katz'\n  this.myOtherPerson)\n}}\n```\n\nWould result in an object such as:\n\n```js\n['Tom Dale', 'Yehuda Katz', this.get('myOtherPerson')]\n```\n\nWhere the 3rd item in the array is bound to updates of the `myOtherPerson` property.",
+      "description": "Use the `{{array}}` helper to create an array to pass as an option to your\ncomponents.\n\n```handlebars\n<MyComponent @people={{array\n  'Tom Dale'\n  'Yehuda Katz'\n  this.myOtherPerson}}\n/>\n```\n or\n```handlebars\n{{yield people=(array\n  'Tom Dale'\n  'Yehuda Katz'\n  this.myOtherPerson)\n}}\n```\n\nWould result in an object such as:\n\n```js\n['Tom Dale', 'Yehuda Katz', this.get('myOtherPerson')]\n```\n\nWhere the 3rd item in the array is bound to updates of the `myOtherPerson` property.\n \nThe `array` helper is built-in keyword and does not need to be imported as of v7.1.0.",
       "itemtype": "method",
       "name": "array",
       "params": [
@@ -6658,7 +6658,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/component.ts",
       "line": 5,
-      "description": "The `{{component}}` helper lets you add instances of `Component` to a\ntemplate. See [Component](/ember/release/classes/Component) for\nadditional information on how a `Component` functions.\n`{{component}}`'s primary use is for cases where you want to dynamically\nchange which type of component is rendered as the state of your application\nchanges. This helper has three modes: inline, block, and nested.\n\n### Inline Form\n\nGiven the following template:\n\n```app/application.hbs\n{{component this.infographicComponentName}}\n```\n\nAnd the following application code:\n\n```app/controllers/application.js\nimport Controller from '@ember/controller';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class ApplicationController extends Controller {\n  @tracked isMarketOpen = 'live-updating-chart'\n\n  get infographicComponentName() {\n    return this.isMarketOpen ? 'live-updating-chart' : 'market-close-summary';\n  }\n}\n```\n\nThe `live-updating-chart` component will be appended when `isMarketOpen` is\n`true`, and the `market-close-summary` component will be appended when\n`isMarketOpen` is `false`. If the value changes while the app is running,\nthe component will be automatically swapped out accordingly.\nNote: You should not use this helper when you are consistently rendering the same\ncomponent. In that case, use standard component syntax, for example:\n\n```app/templates/application.hbs\n<LiveUpdatingChart />\n```\n\nor\n\n```app/templates/application.hbs\n{{live-updating-chart}}\n```\n\n### Block Form\n\nUsing the block form of this helper is similar to using the block form\nof a component. Given the following application template:\n\n```app/templates/application.hbs\n{{#component this.infographicComponentName}}\n  Last update: {{this.lastUpdateTimestamp}}\n{{/component}}\n```\n\nThe following controller code:\n\n```app/controllers/application.js\nimport Controller from '@ember/controller';\nimport { computed } from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class ApplicationController extends Controller {\n  @tracked isMarketOpen = 'live-updating-chart'\n\n  get lastUpdateTimestamp() {\n    return new Date();\n  }\n\n  get infographicComponentName() {\n    return this.isMarketOpen ? 'live-updating-chart' : 'market-close-summary';\n  }\n}\n```\n\nAnd the following component template:\n\n```app/templates/components/live-updating-chart.hbs\n{{! chart }}\n{{yield}}\n```\n\nThe `Last Update: {{this.lastUpdateTimestamp}}` will be rendered in place of the `{{yield}}`.\n\n### Nested Usage\n\nThe `component` helper can be used to package a component path with initial attrs.\nThe included attrs can then be merged during the final invocation.\nFor example, given a `person-form` component with the following template:\n\n```app/templates/components/person-form.hbs\n{{yield (hash\n  nameInput=(component \"my-input-component\" value=@model.name placeholder=\"First Name\")\n)}}\n```\n\nWhen yielding the component via the `hash` helper, the component is invoked directly.\nSee the following snippet:\n\n```\n<PersonForm as |form|>\n  <form.nameInput @placeholder=\"Username\" />\n</PersonForm>\n```\n\nor\n```\n{{#person-form as |form|}}\n  {{form.nameInput placeholder=\"Username\"}}\n{{/person-form}}\n```\n\nWhich outputs an input whose value is already bound to `model.name` and `placeholder`\nis \"Username\".\n\nWhen yielding the component without the `hash` helper use the `component` helper.\nFor example, below is a `full-name` component template:\n\n```handlebars\n{{yield (component \"my-input-component\" value=@model.name placeholder=\"Name\")}}\n```\n\n```\n<FullName as |field|>\n  {{component field placeholder=\"Full name\"}}\n</FullName>\n```\nor\n```\n{{#full-name as |field|}}\n  {{component field placeholder=\"Full name\"}}\n{{/full-name}}\n```",
+      "description": "The `component` helper is used to package a Component with initial arguments.\nThe included arguments can then be merged during the final invocation.\n\nSee [Component](/ember/release/modules/@glimmer%2Fcomponent/) for\nadditional information on how a `Component` functions.\n\nThis is similar to the concept of Partial Application.\n  \nFor example, given a `FullName` component:\n\n```app/components/full-name.gjs\nimport MyInputComponent from './my-input-component';\n\n<template>\n  {{yield (component MyInputComponent value=@model.name placeholder=\"Username\")}}\n</template>\n```\n\nThe yielded component can be invoked by the calling component.\nSee the following snippet:\n\n```app/components/person-form.gjs\nimport FullName from './full-name';\n  \n<template>\n  <FullName @model={{@model}} as |Field|>\n    <Field />\n  </FullName>\n</template>\n```\n\nWhich will output an input whose value is already bound to `@model.name` and `placeholder`\nis \"Username\".\n  \nAny arguments passed at the invocation site of the component will override those applied via\nthe `component` helper. For example, if the invocation site of the component is:\n\n```app/components/person-form.gjs\nimport FullName from './full-name';\n\n<template>\n  <FullName @model={{@model}} as |Field|>\n    <Field @placeholder=\"Your name\" />\n  </FullName>\n</template>\n```\n\nThe output will be an input whose value is bound to `@model.name` and `placeholder`\nis \"Your name\".\n  \nThe `component` helper is built-in and does not need to be imported. \n  \nPrior to Strict Mode aka \"Template Tag\" or gjs, the component helper was also used to invoke\ncomponents dynamically. This is no longer necessary, and they can be directly invoked, as above.\n\n### Dynamic Component Invocation\n\n```app/templates/application.gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { component } from '@ember/helper';\nimport LiveUpdatingChart from '../components/live-updating-chart';\nimport MarketCloseSummary from '../components/market-close-summary';\n\nexport default class Application extends Component {\n  @tracked isMarketOpen = false;\n\n  get infographicComponent() {\n    return this.isMarketOpen ? LiveUpdatingChart : MarketCloseSummary;\n  }\n\n  <template>\n    {{!-- The component can be invoked directly --}}\n    <this.infographicComponent />\n  \n    {{!-- The component helper here is no longer necessary --}}\n    {{component this.infographicComponentName}}\n  </template>\n}\n```",
       "itemtype": "method",
       "name": "component",
       "since": "1.11.0",
@@ -6670,7 +6670,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/concat.ts",
       "line": 5,
-      "description": "Concatenates the given arguments into a string.\n\nExample:\n\n```handlebars\n{{some-component name=(concat firstName \" \" lastName)}}\n\n{{! would pass name=\"<first name value> <last name value>\" to the component}}\n```\n\nor for angle bracket invocation, you actually don't need concat at all.\n\n```handlebars\n<SomeComponent @name=\"{{firstName}} {{lastName}}\" />\n```",
+      "description": "Concatenates the given arguments into a string.\n\nExample:\n\n```gjs\nimport { concat } from '@ember/helper';\n  \n<template>\n  {{yield (concat firstName \" \" lastName)}}\n\n  {{! would yield name=\"<first name value> <last name value>\" to the component}}\n</template>\n```\n\nFor invocation of components, you don't need concat at all.\n\n```handlebars\n<SomeComponent @name=\"{{firstName}} {{lastName}}\" />\n```",
       "access": "public",
       "tagname": "",
       "itemtype": "method",
@@ -6682,7 +6682,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/each-in.ts",
       "line": 13,
-      "description": "The `{{#each}}` helper loops over elements in a collection. It is an extension\nof the base Handlebars `{{#each}}` helper.\n\nThe default behavior of `{{#each}}` is to yield its inner block once for every\nitem in an array passing the item as the first block parameter.\n\nAssuming the `@developers` argument contains this array:\n\n```javascript\n[{ name: 'Yehuda' },{ name: 'Tom' }, { name: 'Paul' }];\n```\n\n```handlebars\n<ul>\n  {{#each @developers as |person|}}\n    <li>Hello, {{person.name}}!</li>\n  {{/each}}\n</ul>\n```\n\nThe same rules apply to arrays of primitives.\n\n```javascript\n['Yehuda', 'Tom', 'Paul']\n```\n\n```handlebars\n<ul>\n  {{#each @developerNames as |name|}}\n    <li>Hello, {{name}}!</li>\n  {{/each}}\n</ul>\n```\n\nDuring iteration, the index of each item in the array is provided as a second block\nparameter.\n\n```handlebars\n<ul>\n  {{#each @developers as |person index|}}\n    <li>Hello, {{person.name}}! You're number {{index}} in line</li>\n  {{/each}}\n</ul>\n```\n\n### Specifying Keys\n\nIn order to improve rendering speed, Ember will try to reuse the DOM elements\nwhere possible. Specifically, if the same item is present in the array both\nbefore and after the change, its DOM output will be reused.\n\nThe `key` option is used to tell Ember how to determine if the items in the\narray being iterated over with `{{#each}}` has changed between renders. By\ndefault the item's object identity is used.\n\nThis is usually sufficient, so in most cases, the `key` option is simply not\nneeded. However, in some rare cases, the objects' identities may change even\nthough they represent the same underlying data.\n\nFor example:\n\n```javascript\npeople.map(person => {\n  return { ...person, type: 'developer' };\n});\n```\n\nIn this case, each time the `people` array is `map`-ed over, it will produce\nan new array with completely different objects between renders. In these cases,\nyou can help Ember determine how these objects related to each other with the\n`key` option:\n\n```handlebars\n<ul>\n  {{#each @developers key=\"name\" as |person|}}\n    <li>Hello, {{person.name}}!</li>\n  {{/each}}\n</ul>\n```\n\nBy doing so, Ember will use the value of the property specified (`person.name`\nin the example) to find a \"match\" from the previous render. That is, if Ember\nhas previously seen an object from the `@developers` array with a matching\nname, its DOM elements will be re-used.\n\nThere are two special values for `key`:\n\n  * `@index` - The index of the item in the array.\n  * `@identity` - The item in the array itself.\n\n### {{else}} condition\n\n`{{#each}}` can have a matching `{{else}}`. The contents of this block will render\nif the collection is empty.\n\n```handlebars\n<ul>\n  {{#each @developers as |person|}}\n    <li>{{person.name}} is available!</li>\n  {{else}}\n    <li>Sorry, nobody is available for this task.</li>\n  {{/each}}\n</ul>\n```",
+      "description": "The `{{#each}}` keyword loops over elements in a collection. It is an extension\nof the base Handlebars `{{#each}}` helper.\n\nThe default behavior of `{{#each}}` is to yield its inner block once for every\nitem in an array passing the item as the first block parameter.\n\nAssuming the `@developers` argument contains this array:\n\n```javascript\n[{ name: 'Yehuda' },{ name: 'Tom' }, { name: 'Paul' }];\n```\n\n```handlebars\n<ul>\n  {{#each @developers as |person|}}\n    <li>Hello, {{person.name}}!</li>\n  {{/each}}\n</ul>\n```\n\nThe same rules apply to arrays of primitives.\n\n```javascript\n['Yehuda', 'Tom', 'Paul']\n```\n\n```handlebars\n<ul>\n  {{#each @developerNames as |name|}}\n    <li>Hello, {{name}}!</li>\n  {{/each}}\n</ul>\n```\n\nDuring iteration, the index of each item in the array is provided as a second block\nparameter.\n\n```handlebars\n<ul>\n  {{#each @developers as |person index|}}\n    <li>Hello, {{person.name}}! You're number {{index}} in line</li>\n  {{/each}}\n</ul>\n```\n  \n`#each` is a keyword and does not need to be imported. \n\n### Specifying Keys\n\nIn order to improve rendering speed, Ember will try to reuse the DOM elements\nwhere possible. Specifically, if the same item is present in the array both\nbefore and after the change, its DOM output will be reused.\n\nThe `key` option is used to tell Ember how to determine if the items in the\narray being iterated over with `{{#each}}` has changed between renders. By\ndefault the item's object identity is used.\n\nThis is usually sufficient, so in most cases, the `key` option is simply not\nneeded. However, in some rare cases, the objects' identities may change even\nthough they represent the same underlying data.\n\nFor example:\n\n```javascript\npeople.map(person => {\n  return { ...person, type: 'developer' };\n});\n```\n\nIn this case, each time the `people` array is `map`-ed over, it will produce\nan new array with completely different objects between renders. In these cases,\nyou can help Ember determine how these objects related to each other with the\n`key` option:\n\n```handlebars\n<ul>\n  {{#each @developers key=\"name\" as |person|}}\n    <li>Hello, {{person.name}}!</li>\n  {{/each}}\n</ul>\n```\n\nBy doing so, Ember will use the value of the property specified (`person.name`\nin the example) to find a \"match\" from the previous render. That is, if Ember\nhas previously seen an object from the `@developers` array with a matching\nname, its DOM elements will be re-used.\n\nThere are two special values for `key`:\n\n  * `@index` - The index of the item in the array.\n  * `@identity` - The item in the array itself.\n\n### {{else}} condition\n\n`{{#each}}` can have a matching `{{else}}`. The contents of this block will render\nif the collection is empty.\n\n```handlebars\n<ul>\n  {{#each @developers as |person|}}\n    <li>{{person.name}} is available!</li>\n  {{else}}\n    <li>Sorry, nobody is available for this task.</li>\n  {{/each}}\n</ul>\n```",
       "itemtype": "method",
       "name": "each",
       "access": "public",
@@ -6692,8 +6692,8 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/each-in.ts",
-      "line": 124,
-      "description": "The `{{each-in}}` helper loops over properties on an object.\n\nFor example, given this component definition:\n\n```app/components/developer-details.js\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class extends Component {\n  @tracked developer = {\n    \"name\": \"Shelly Sails\",\n    \"age\": 42\n  };\n}\n```\n\nThis template would display all properties on the `developer`\nobject in a list:\n\n```app/components/developer-details.hbs\n<ul>\n  {{#each-in this.developer as |key value|}}\n    <li>{{key}}: {{value}}</li>\n  {{/each-in}}\n</ul>\n```\n\nOutputting their name and age:\n\n```html\n<ul>\n  <li>name: Shelly Sails</li>\n  <li>age: 42</li>\n</ul>\n```",
+      "line": 126,
+      "description": "The `{{#each-in}}` keyword loops over properties on an object.\n\nFor example, given this component definition:\n\n```app/components/developer-details.gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class extends Component {\n  @tracked developer = {\n    \"name\": \"Shelly Sails\",\n    \"age\": 42\n  };\n  \n  <template>\n    <ul>\n      {{#each-in this.developer as |key value|}}\n        <li>{{key}}: {{value}}</li>\n      {{/each-in}}\n    </ul>\n  </template>\n}\n```\n\nThis template would display all properties on the `developer`\nobject in a list, outputting their name and age:\n\n```html\n<ul>\n  <li>name: Shelly Sails</li>\n  <li>age: 42</li>\n</ul>\n```\n \n`#each-in` is a keyword and does not need to be imported.",
       "itemtype": "method",
       "name": "each-in",
       "access": "public",
@@ -6705,7 +6705,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/element.ts",
       "line": 84,
-      "description": "The `element` helper lets you dynamically set the tag name of an element.\n\n```handlebars\n{{#let (element @tagName) as |Tag|}}\n  <Tag class=\"my-element\">Hello</Tag>\n{{/let}}\n```\n\nWhen `@tagName` is `\"h1\"`, this renders `<h1 class=\"my-element\">Hello</h1>`.\n\nWhen `@tagName` is an empty string `\"\"`, the block content is rendered without\na wrapping element.\n\nPassing `null`, `undefined`, or non-string values will throw an assertion error.\n\nChanging the tag name will tear down and recreate the element and its contents.",
+      "description": "The `element` helper lets you dynamically set the tag name of an element.\n\n```handlebars\n{{#let (element @tagName) as |Tag|}}\n  <Tag class=\"my-element\">Hello</Tag>\n{{/let}}\n```\n\nWhen `@tagName` is `\"h1\"`, this renders `<h1 class=\"my-element\">Hello</h1>`.\n\nWhen `@tagName` is an empty string `\"\"`, the block content is rendered without\na wrapping element.\n\nPassing `null`, `undefined`, or non-string values will throw an assertion error.\n\nChanging the tag name will tear down and recreate the element and its contents.\n \nThe `element` helper is built-in and does not need to be imported.",
       "itemtype": "method",
       "name": "element",
       "access": "public",
@@ -6716,7 +6716,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/fn.ts",
       "line": 5,
-      "description": "The `fn` helper allows you to ensure a function that you are passing off\nto another component, helper, or modifier has access to arguments that are\navailable in the template.\n\nFor example, if you have an `each` helper looping over a number of items, you\nmay need to pass a function that expects to receive the item as an argument\nto a component invoked within the loop. Here's how you could use the `fn`\nhelper to pass both the function and its arguments together:\n\n  ```app/templates/components/items-listing.hbs\n{{#each @items as |item|}}\n  <DisplayItem @item=item @select={{fn this.handleSelected item}} />\n{{/each}}\n```\n\n```app/components/items-list.js\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class ItemsList extends Component {\n  @action\n  handleSelected(item) {\n    // ...snip...\n  }\n}\n```\n\nIn this case the `display-item` component will receive a normal function\nthat it can invoke. When it invokes the function, the `handleSelected`\nfunction will receive the `item` and any arguments passed, thanks to the\n`fn` helper.\n\nLet's take look at what that means in a couple circumstances:\n\n- When invoked as `this.args.select()` the `handleSelected` function will\n  receive the `item` from the loop as its first and only argument.\n- When invoked as `this.args.select('foo')` the `handleSelected` function\n  will receive the `item` from the loop as its first argument and the\n  string `'foo'` as its second argument.\n\nIn the example above, we used `@action` to ensure that `handleSelected` is\nproperly bound to the `items-list`, but let's explore what happens if we\nleft out `@action`:\n\n```app/components/items-list.js\nimport Component from '@glimmer/component';\n\nexport default class ItemsList extends Component {\n  handleSelected(item) {\n    // ...snip...\n  }\n}\n```\n\nIn this example, when `handleSelected` is invoked inside the `display-item`\ncomponent, it will **not** have access to the component instance. In other\nwords, it will have no `this` context, so please make sure your functions\nare bound (via `@action` or other means) before passing into `fn`!\n\nSee also [partial application](https://en.wikipedia.org/wiki/Partial_application).",
+      "description": "The `fn` helper allows you to ensure a function that you are passing off\nto another component, helper, or modifier has access to arguments that are\navailable in the template.\n\nFor example, if you have an `each` helper looping over a number of items, you\nmay need to pass a function that expects to receive the item as an argument\nto a component invoked within the loop. Here's how you could use the `fn`\nhelper to pass both the function and its arguments together:\n\n```app/components/items-listing.gjs\n<template>\n  {{#each @items as |item|}}\n    <DisplayItem @item=item @select={{fn this.handleSelected item}} />\n  {{/each}}\n</template>\n```\n\n```app/components/items-list.gjs\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class ItemsList extends Component {\n  @action\n  handleSelected(item) {\n    // ...snip...\n  }\n}\n```\n\nIn this case the `DisplayItem` component will receive a normal function\nthat it can invoke. When it invokes the function, the `handleSelected`\nfunction will receive the `item` and any arguments passed, thanks to the\n`fn` helper.\n\nLet's take look at what that means in a couple circumstances:\n\n- When invoked as `this.args.select()` the `handleSelected` function will\n  receive the `item` from the loop as its first and only argument.\n- When invoked as `this.args.select('foo')` the `handleSelected` function\n  will receive the `item` from the loop as its first argument and the\n  string `'foo'` as its second argument.\n\nIn the example above, we used `@action` to ensure that `handleSelected` is\nproperly bound to the `items-list`, but let's explore what happens if we\nleft out `@action`:\n\n```app/components/items-list.gjs\nimport Component from '@glimmer/component';\n\nexport default class ItemsList extends Component {\n  handleSelected(item) {\n    // ...snip...\n  }\n}\n```\n\nIn this example, when `handleSelected` is invoked inside the `display-item`\ncomponent, it will **not** have access to the component instance. In other\nwords, it will have no `this` context, so please make sure your functions\nare bound (via `@action` or other means) before passing into `fn`!\n\nSee also [partial application](https://en.wikipedia.org/wiki/Partial_application).\n \n`fn` is built-in and does not need to be imported.",
       "itemtype": "method",
       "name": "fn",
       "access": "public",
@@ -6728,7 +6728,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/get.ts",
       "line": 5,
-      "description": "Dynamically look up a property on an object or an element in an array.\nThe second argument to `{{get}}` should have a string or number value,\nalthough it can be bound.\n\nFor example, these two usages are equivalent:\n\n```app/components/developer-detail.js\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class extends Component {\n  @tracked developer = {\n    name: \"Sandi Metz\",\n    language: \"Ruby\"\n  }\n}\n```\n\n```handlebars\n{{this.developer.name}}\n{{get this.developer \"name\"}}\n```\n\nIf there were several facts about a person, the `{{get}}` helper can dynamically\npick one:\n\n```app/templates/application.hbs\n<DeveloperDetail @factName=\"language\" />\n```\n\n```handlebars\n{{get this.developer @factName}}\n```\n\nFor a more complex example, this template would allow the user to switch\nbetween showing the user's name and preferred coding language with a click:\n\n```app/components/developer-detail.js\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class extends Component {\n  @tracked developer = {\n    name: \"Sandi Metz\",\n    language: \"Ruby\"\n  }\n\n  @tracked currentFact = 'name'\n\n  @action\n  showFact(fact) {\n    this.currentFact = fact;\n  }\n}\n```\n\n```app/components/developer-detail.js\n{{get this.developer this.currentFact}}\n\n<button {{on 'click' (fn this.showFact \"name\")}}>Show name</button>\n<button {{on 'click' (fn this.showFact \"language\")}}>Show language</button>\n```\n\nThe `{{get}}` helper can also respect mutable values itself. For example:\n\n```app/components/developer-detail.js\n<Input @value={{mut (get this.person this.currentFact)}} />\n\n<button {{on 'click' (fn this.showFact \"name\")}}>Show name</button>\n<button {{on 'click' (fn this.showFact \"language\")}}>Show language</button>\n```\n\nWould allow the user to swap what fact is being displayed, and also edit\nthat fact via a two-way mutable binding.\n\nThe `{{get}}` helper can also be used for array element access via index.\nThis would display the value of the first element in the array `this.names`:\n\n```handlebars\n{{get this.names 0}}\n```\n\nArray element access also works with a dynamic second argument:\n\n```handlebars\n{{get this.names @index}}\n```",
+      "description": "Dynamically look up a property on an object or an element in an array.\nThe second argument to `{{get}}` should have a string or number value,\nalthough it can be bound.\n\nFor example, these two usages are equivalent:\n\n```app/components/developer-detail.gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { get } from '@ember/object';\n\nexport default class extends Component {\n  @tracked developer = {\n    name: \"Sandi Metz\",\n    language: \"Ruby\"\n  }\n  \n  <template>\n    {{this.developer.name}}\n    {{get this.developer \"name\"}}\n  </template>\n}\n```\n  \nIf there were several facts about a person, the `{{get}}` helper can dynamically\npick one:\n\n```app/templates/application.gjs\nimport DeveloperDetail from '../components/developer-detail';\n\n<template>\n  <DeveloperDetail @factName=\"language\" />\n</template\n```\n\n```handlebars\n{{get this.developer @factName}}\n```\n\nFor a more complex example, this template would allow the user to switch\nbetween showing the user's name and preferred coding language with a click:\n\n```app/components/developer-detail.gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { get } from '@ember/object';\n\nexport default class extends Component {\n  @tracked developer = {\n    name: \"Sandi Metz\",\n    language: \"Ruby\"\n  }\n\n  @tracked currentFact = 'name'\n\n  @action\n  showFact(fact) {\n    this.currentFact = fact;\n  }\n  \n  <template>\n    {{get this.developer this.currentFact}}\n\n    <button {{on 'click' (fn this.showFact \"name\")}}>Show name</button>\n    <button {{on 'click' (fn this.showFact \"language\")}}>Show language</button>\n  </template>\n}\n```\n\nThe `{{get}}` helper can also be used for array element access via index.\nThis would display the value of the first element in the array `this.names`:\n\n```handlebars\n{{get this.names 0}}\n```\n\nArray element access also works with a dynamic second argument:\n\n```handlebars\n{{get this.names @index}}\n```",
       "access": "public",
       "tagname": "",
       "itemtype": "method",
@@ -6740,7 +6740,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/hash.ts",
       "line": 5,
-      "description": "Use the `{{hash}}` helper to create a hash to pass as an option to your\ncomponents. This is specially useful for contextual components where you can\njust yield a hash:\n\n```handlebars\n{{yield (hash\n   name='Sarah'\n   title=office\n)}}\n```\n\nWould result in an object such as:\n\n```js\n{ name: 'Sarah', title: this.get('office') }\n```\n\nWhere the `title` is bound to updates of the `office` property.\n\nNote that the hash is an empty object with no prototype chain, therefore\ncommon methods like `toString` are not available in the resulting hash.\nIf you need to use such a method, you can use the `call` or `apply`\napproach:\n\n```js\nfunction toString(obj) {\n  return Object.prototype.toString.apply(obj);\n}\n```",
+      "description": "Use the `{{hash}}` helper to create a hash to pass as an option to your\ncomponents. This is especially useful for contextual components where you can\njust yield a hash:\n\n```handlebars\n{{yield (hash\n   name='Sarah'\n   title=office\n)}}\n```\n\nWould result in an object such as:\n\n```js\n{ name: 'Sarah', title: this.get('office') }\n```\n\nWhere the `title` is bound to updates of the `office` property.\n\nNote that the hash is an empty object with no prototype chain, therefore\ncommon methods like `toString` are not available in the resulting hash.\nIf you need to use such a method, you can use the `call` or `apply`\napproach:\n\n```js\nfunction toString(obj) {\n  return Object.prototype.toString.apply(obj);\n}\n```\n \nThe `hash` helper is a built-in keyword and does not need to be imported as of v7.1.0.",
       "itemtype": "method",
       "name": "hash",
       "params": [
@@ -6775,7 +6775,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/if-unless.ts",
       "line": 5,
-      "description": "The `if` helper allows you to conditionally render one of two branches,\ndepending on the \"truthiness\" of a property.\nFor example the following values are all falsey: `false`, `undefined`, `null`, `\"\"`, `0`, `NaN` or an empty array.\n\nThis helper has two forms, block and inline.\n\n## Block form\n\nYou can use the block form of `if` to conditionally render a section of the template.\n\nTo use it, pass the conditional value to the `if` helper,\nusing the block form to wrap the section of template you want to conditionally render.\nLike so:\n\n```app/templates/application.hbs\n<Weather />\n```\n\n```app/components/weather.hbs\n{{! will not render because greeting is undefined}}\n{{#if @isRaining}}\n  Yes, grab an umbrella!\n{{/if}}\n```\n\nYou can also define what to show if the property is falsey by using\nthe `else` helper.\n\n```app/components/weather.hbs\n{{#if @isRaining}}\n  Yes, grab an umbrella!\n{{else}}\n  No, it's lovely outside!\n{{/if}}\n```\n\nYou are also able to combine `else` and `if` helpers to create more complex\nconditional logic.\n\nFor the following template:\n\n ```app/components/weather.hbs\n{{#if @isRaining}}\n  Yes, grab an umbrella!\n{{else if @isCold}}\n  Grab a coat, it's chilly!\n{{else}}\n  No, it's lovely outside!\n{{/if}}\n```\n\nIf you call it by saying `isCold` is true:\n\n```app/templates/application.hbs\n<Weather @isCold={{true}} />\n```\n\nThen `Grab a coat, it's chilly!` will be rendered.\n\n## Inline form\n\nThe inline `if` helper conditionally renders a single property or string.\n\nIn this form, the `if` helper receives three arguments, the conditional value,\nthe value to render when truthy, and the value to render when falsey.\n\nFor example, if `useLongGreeting` is truthy, the following:\n\n```app/templates/application.hbs\n<Greeting @useLongGreeting={{true}} />\n```\n\n```app/components/greeting.hbs\n{{if @useLongGreeting \"Hello\" \"Hi\"}} Alex\n```\n\nWill render:\n\n```html\nHello Alex\n```\n\nOne detail to keep in mind is that both branches of the `if` helper will be evaluated,\nso if you have `{{if condition \"foo\" (expensive-operation \"bar\")`,\n`expensive-operation` will always calculate.",
+      "description": "The `if` helper allows you to conditionally render one of two branches,\ndepending on the \"truthiness\" of a property.\nFor example the following values are all falsey: `false`, `undefined`, `null`, `\"\"`, `0`, `NaN` or an empty array.\n\nThis helper has two forms, block and inline.\n\n## Block form\n\nYou can use the block form of `if` to conditionally render a section of the template.\n\nTo use it, pass the conditional value to the `if` helper,\nusing the block form to wrap the section of template you want to conditionally render.\nLike so:\n\n```app/templates/application.gjs\nimport Weather from '../components/weather';\n  \n<template>\n  <Weather />\n</template>\n```\n\n```app/components/weather.gjs\n<template>\n  {{! will not render because greeting is undefined}}\n  {{#if @isRaining}}\n    Yes, grab an umbrella!\n  {{/if}}\n</template>\n```\n\nYou can also define what to show if the property is falsey by using\nthe `else` helper.\n\n```app/components/weather.gjs\n<template>\n  {{#if @isRaining}}\n    Yes, grab an umbrella!\n  {{else}}\n    No, it's lovely outside!\n  {{/if}}\n</template>\n```\n\nYou are also able to combine `else` and `if` helpers to create more complex\nconditional logic.\n\nFor the following template:\n\n ```app/components/weather.gjs\n<template>\n  {{#if @isRaining}}\n    Yes, grab an umbrella!\n  {{else if @isCold}}\n    Grab a coat, it's chilly!\n  {{else}}\n    No, it's lovely outside!\n  {{/if}}\n</template>  \n```\n\nIf you call it by saying `isCold` is true:\n\n```app/templates/application.gjs\nimport Weather from '../components/weather';\n  \n<template>\n  <Weather @isCold={{true}} />\n</template>\n```\n\nThen `Grab a coat, it's chilly!` will be rendered.\n\n## Inline form\n\nThe inline `if` helper conditionally renders a single property or string.\n\nIn this form, the `if` helper receives three arguments, the conditional value,\nthe value to render when truthy, and the value to render when falsey.\n\nFor example, if `useLongGreeting` is truthy, the following:\n\n```app/templates/application.gjs\nimport Greeting from '../components/greeting';\n\n<template>\n  <Greeting @useLongGreeting={{true}} />\n<template>\n```\n\n```app/components/greeting.gjs\n<template>\n  {{if @useLongGreeting \"Hello\" \"Hi\"}} Alex\n<template>\n```\n\nWill render:\n\n```html\nHello Alex\n```\n\nOne detail to keep in mind is that both branches of the `if` helper will be evaluated,\nso if you have `{{if condition \"foo\" (expensive-operation \"bar\")`,\n`expensive-operation` will always calculate.\n \n`if` is built-in and does not need to be imported.",
       "itemtype": "method",
       "name": "if",
       "access": "public",
@@ -6785,8 +6785,8 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/if-unless.ts",
-      "line": 97,
-      "description": "The `unless` helper is the inverse of the `if` helper. It displays if a value\nis falsey (\"not true\" or \"is false\"). Example values that will display with\n`unless`: `false`, `undefined`, `null`, `\"\"`, `0`, `NaN` or an empty array.\n\n## Inline form\n\nThe inline `unless` helper conditionally renders a single property or string.\nThis helper acts like a ternary operator. If the first property is falsy,\nthe second argument will be displayed, otherwise, the third argument will be\ndisplayed\n\nFor example, if you pass a falsey `useLongGreeting` to the `Greeting` component:\n\n```app/templates/application.hbs\n<Greeting @useLongGreeting={{false}} />\n```\n\n```app/components/greeting.hbs\n{{unless @useLongGreeting \"Hi\" \"Hello\"}} Ben\n```\n\nThen it will display:\n\n```html\nHi Ben\n```\n\n## Block form\n\nLike the `if` helper, the `unless` helper also has a block form.\n\nThe following will not render anything:\n\n```app/templates/application.hbs\n<Greeting />\n```\n\n```app/components/greeting.hbs\n{{#unless @greeting}}\n  No greeting was found. Why not set one?\n{{/unless}}\n```\n\nYou can also use an `else` helper with the `unless` block. The\n`else` will display if the value is truthy.\n\nIf you have the following component:\n\n```app/components/logged-in.hbs\n{{#unless @userData}}\n  Please login.\n{{else}}\n  Welcome back!\n{{/unless}}\n```\n\nCalling it with a truthy `userData`:\n\n```app/templates/application.hbs\n<LoggedIn @userData={{hash username=\"Zoey\"}} />\n```\n\nWill render:\n\n```html\nWelcome back!\n```\n\nand calling it with a falsey `userData`:\n\n```app/templates/application.hbs\n<LoggedIn @userData={{false}} />\n```\n\nWill render:\n\n```html\nPlease login.\n```",
+      "line": 119,
+      "description": "The `unless` helper is the inverse of the `if` helper. It displays if a value\nis falsey (\"not true\" or \"is false\"). Example values that will display with\n`unless`: `false`, `undefined`, `null`, `\"\"`, `0`, `NaN` or an empty array.\n\n## Inline form\n\nThe inline `unless` helper conditionally renders a single property or string.\nThis helper acts like a ternary operator. If the first property is falsy,\nthe second argument will be displayed, otherwise, the third argument will be\ndisplayed\n\nFor example, if you pass a falsey `useLongGreeting` to the `Greeting` component:\n\n```app/templates/application.gjs\nimport Greeting from '../components/greeting';\n  \n<template>\n  <Greeting @useLongGreeting={{false}} />\n</template>\n```\n\n```app/components/greeting.gjs\n<template>\n  {{unless @useLongGreeting \"Hi\" \"Hello\"}} Ben\n</template>\n```\n\nThen it will display:\n\n```html\nHi Ben\n```\n\n## Block form\n\nLike the `if` helper, the `unless` helper also has a block form.\n\nThe following will not render anything:\n\n```app/templates/application.gjs\nimport Greeting from '../components/greeting';\n  \n<template>\n  <Greeting />\n</template>\n```\n\n```app/components/greeting.gjs\n<template>\n  {{#unless @greeting}}\n    No greeting was found. Why not set one?\n  {{/unless}}\n</template>\n```\n\nYou can also use an `else` helper with the `unless` block. The\n`else` will display if the value is truthy.\n\nIf you have the following component:\n\n```app/components/logged-in.gjs\n<template>\n  {{#unless @userData}}\n    Please login.\n  {{else}}\n    Welcome back!\n  {{/unless}}\n</template>\n```\n\nCalling it with a truthy `userData`:\n\n```app/templates/application.gjs\nimport LoggedIn from '../components/logged-in';\n  \n<template>\n  <LoggedIn @userData={{hash username=\"Zoey\"}} />\n</template>\n```\n\nWill render:\n\n```html\nWelcome back!\n```\n\nand calling it with a falsey `userData`:\n\n```app/templates/application.gjs\nimport LoggedIn from '../components/logged-in';\n\n<template>\n  <LoggedIn @userData={{false}} />\n</template>\n```\n\nWill render:\n\n```html\nPlease login.\n```\n \n`unless` is built-in and does not need to be imported.",
       "itemtype": "method",
       "name": "unless",
       "access": "public",
@@ -6827,7 +6827,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/mut.ts",
       "line": 9,
-      "description": "The `mut` helper lets you __clearly specify__ that a child `Component` can update the\n(mutable) value passed to it, which will __change the value of the parent component__.\n\nTo specify that a parameter is mutable, when invoking the child `Component`:\n\n```handlebars\n<MyChild @childClickCount={{fn (mut totalClicks)}} />\n```\n\n or\n\n```handlebars\n{{my-child childClickCount=(mut totalClicks)}}\n```\n\nThe child `Component` can then modify the parent's value just by modifying its own\nproperty:\n\n```javascript\n// my-child.js\nexport default class MyChild extends Component {\n  click() {\n    this.incrementProperty('childClickCount');\n  }\n}\n```\n\nNote that for curly components (`{{my-component}}`) the bindings are already mutable,\nmaking the `mut` unnecessary.\n\nAdditionally, the `mut` helper can be combined with the `fn` helper to\nmutate a value. For example:\n\n```handlebars\n<MyChild @childClickCount={{this.totalClicks}} @click-count-change={{fn (mut totalClicks))}} />\n```\n\nor\n\n```handlebars\n{{my-child childClickCount=totalClicks click-count-change=(fn (mut totalClicks))}}\n```\n\nThe child `Component` would invoke the function with the new click value:\n\n```javascript\n// my-child.js\nexport default class MyChild extends Component {\n  click() {\n    this.get('click-count-change')(this.get('childClickCount') + 1);\n  }\n}\n```\n\nThe `mut` helper changes the `totalClicks` value to what was provided as the `fn` argument.\n\nThe `mut` helper, when used with `fn`, will return a function that\nsets the value passed to `mut` to its first argument. As an example, we can create a\nbutton that increments a value passing the value directly to the `fn`:\n\n```handlebars\n{{! inc helper is not provided by Ember }}\n<button onclick={{fn (mut count) (inc count)}}>\n  Increment count\n</button>\n```",
+      "description": "The `mut` helper is a shortcut for updating for args.\n  \nHowever, defining update functions on your backing class is preferable to using `mut`.\n  \nMore directly: Don't use `mut`. \n\nThe `mut` helper, when used with `fn`, will return a function that\nsets the value passed to `mut` to its first argument. As an example, we can create a\nbutton that increments a value passing the value directly to the `fn`:\n\n```handlebars\n<MyChild @childClickCount={{this.totalClicks}} @clickCountChange={{fn (mut this.totalClicks)}} />\n```\n\nThe child `Component` would invoke the function with the new click count:\n\n```app/components/my-child.gjs\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n  \nexport default class MyChild extends Component {\n  @action\n  update() {\n    this.args.clickCountChange(this.args.childClickCount + 1);\n  }\n  \n  <template>\n    <button {{on \"click\" this.update}}>\n      Click me!\n    </button>\n  </template>\n}\n```\n\nThe `mut` helper changes the `totalClicks` value to what was provided as the `fn` argument.",
       "itemtype": "method",
       "name": "mut",
       "params": [
@@ -6846,7 +6846,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/page-title.ts",
       "line": 5,
-      "description": "`page-title` allows you to set the title of any page in your application and\nappend additional titles for each route. For complete documentation, see\nhttps://github.com/ember-cli/ember-page-title.\n\n```handlebars\n{{page-title \"My Page Title\" }}\n```",
+      "description": "`page-title` allows you to set the title of any page in your application and\nappend additional titles for each route. For complete documentation, see\nhttps://github.com/ember-cli/ember-page-title.\n\n```gjs\nimport pageTitle from 'ember-page-title/helpers/page-title';\n\n<template>\n  {{pageTitle \"My Page Title\" }}\n</template>\n```",
       "itemtype": "method",
       "name": "page-title",
       "params": [
@@ -6864,7 +6864,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/helpers/readonly.ts",
       "line": 9,
-      "description": "The `readonly` helper let's you specify that a binding is one-way only,\ninstead of two-way.\nWhen you pass a `readonly` binding from an outer context (e.g. parent component),\nto to an inner context (e.g. child component), you are saying that changing that\nproperty in the inner context does not change the value in the outer context.\n\nTo specify that a binding is read-only, when invoking the child `Component`:\n\n```app/components/my-parent.js\nexport default class MyParent extends Component {\n  totalClicks = 3;\n}\n```\n\n```app/templates/components/my-parent.hbs\n{{log totalClicks}} // -> 3\n<MyChild @childClickCount={{readonly totalClicks}} />\n```\n```\n{{my-child childClickCount=(readonly totalClicks)}}\n```\n\nNow, when you update `childClickCount`:\n\n```app/components/my-child.js\nexport default class MyChild extends Component {\n  click() {\n    this.incrementProperty('childClickCount');\n  }\n}\n```\n\nThe value updates in the child component, but not the parent component:\n\n```app/templates/components/my-child.hbs\n{{log childClickCount}} //-> 4\n```\n\n```app/templates/components/my-parent.hbs\n{{log totalClicks}} //-> 3\n<MyChild @childClickCount={{readonly totalClicks}} />\n```\nor\n```app/templates/components/my-parent.hbs\n{{log totalClicks}} //-> 3\n{{my-child childClickCount=(readonly totalClicks)}}\n```\n\n### Objects and Arrays\n\nWhen passing a property that is a complex object (e.g. object, array) instead of a primitive object (e.g. number, string),\nonly the reference to the object is protected using the readonly helper.\nThis means that you can change properties of the object both on the parent component, as well as the child component.\nThe `readonly` binding behaves similar to the `const` keyword in JavaScript.\n\nLet's look at an example:\n\nFirst let's set up the parent component:\n\n```app/components/my-parent.js\nimport Component from '@ember/component';\n\nexport default class MyParent extends Component {\n  clicks: null,\n\n  init() {\n    this._super(...arguments);\n    this.set('clicks', { total: 3 });\n  }\n}\n```\n\n```app/templates/components/my-parent.hbs\n{{log clicks.total}} //-> 3\n<MyChild @childClicks={{readonly clicks}} />\n```\n```app/templates/components/my-parent.hbs\n{{log clicks.total}} //-> 3\n{{my-child childClicks=(readonly clicks)}}\n```\n\nNow, if you update the `total` property of `childClicks`:\n\n```app/components/my-child.js\nimport Component from '@ember/component';\n\nexport default class MyChild extends Component {\n  click() {\n    this.get('clicks').incrementProperty('total');\n  }\n}\n```\n\nYou will see the following happen:\n\n```app/templates/components/my-parent.hbs\n{{log clicks.total}} //-> 4\n<MyChild @childClicks={{readonly clicks}} />\n```\nor\n```app/templates/components/my-parent.hbs\n{{log clicks.total}} //-> 4\n{{my-child childClicks=(readonly clicks)}}\n```\n\n```app/templates/components/my-child.hbs\n{{log childClicks.total}} //-> 4\n```",
+      "description": "The `readonly` helper let's you specify that a binding is one-way only,\ninstead of two-way.\n\nThis is a vestigial helper from the days of `@ember/component` and does not apply to\ncomponents extending from `@glimmer/component`.\n  \nWhen you pass a `readonly` binding from an outer context (e.g. parent component),\nto to an inner context (e.g. child component), you are saying that changing that\nproperty in the inner context does not change the value in the outer context.\n\nTo specify that a binding is read-only, when invoking the child `Component`:\n\n```app/components/my-parent.js\nexport default class MyParent extends Component {\n  totalClicks = 3;\n}\n```\n\nNow, when you update `childClickCount`:\n\n```app/components/my-child.js\nexport default class MyChild extends Component {\n  click() {\n    this.incrementProperty('childClickCount');\n  }\n}\n```\n\nThe value updates in the child component, but not the parent component:\n\n```app/templates/components/my-child.hbs\n{{log childClickCount}} //-> 4\n```\n\n```app/templates/components/my-parent.hbs\n{{log totalClicks}} //-> 3\n<MyChild @childClickCount={{readonly totalClicks}} />\n```\nor\n```app/templates/components/my-parent.hbs\n{{log totalClicks}} //-> 3\n{{my-child childClickCount=(readonly totalClicks)}}\n```\n\n### Objects and Arrays\n\nWhen passing a property that is a complex object (e.g. object, array) instead of a primitive object (e.g. number, string),\nonly the reference to the object is protected using the readonly helper.\nThis means that you can change properties of the object both on the parent component, as well as the child component.\nThe `readonly` binding behaves similar to the `const` keyword in JavaScript.\n\nLet's look at an example:\n\nFirst let's set up the parent component:\n\n```app/components/my-parent.js\nimport Component from '@ember/component';\n\nexport default class MyParent extends Component {\n  clicks: null,\n\n  init() {\n    this._super(...arguments);\n    this.set('clicks', { total: 3 });\n  }\n}\n```\n\n```app/templates/components/my-parent.hbs\n{{log clicks.total}} //-> 3\n<MyChild @childClicks={{readonly clicks}} />\n```\n```app/templates/components/my-parent.hbs\n{{log clicks.total}} //-> 3\n{{my-child childClicks=(readonly clicks)}}\n```\n\nNow, if you update the `total` property of `childClicks`:\n\n```app/components/my-child.js\nimport Component from '@ember/component';\n\nexport default class MyChild extends Component {\n  click() {\n    this.get('clicks').incrementProperty('total');\n  }\n}\n```\n\nYou will see the following happen:\n\n```app/templates/components/my-parent.hbs\n{{log clicks.total}} //-> 4\n<MyChild @childClicks={{readonly clicks}} />\n```\nor\n```app/templates/components/my-parent.hbs\n{{log clicks.total}} //-> 4\n{{my-child childClicks=(readonly clicks)}}\n```\n\n```app/templates/components/my-child.hbs\n{{log childClicks.total}} //-> 4\n```",
       "itemtype": "method",
       "name": "readonly",
       "params": [
@@ -6906,7 +6906,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/modifiers/on.ts",
       "line": 5,
-      "description": "The `{{on}}` modifier lets you easily add event listeners (it uses\n[EventTarget.addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\ninternally).\n\nFor example, if you'd like to run a function on your component when a `<button>`\nin the components template is clicked you might do something like:\n\n```app/components/like-post.hbs\n<button {{on 'click' this.saveLike}}>Like this post!</button>\n```\n\n```app/components/like-post.js\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class LikePostComponent extends Component {\n  @action\n  saveLike() {\n    // someone likes your post!\n    // better send a request off to your server...\n  }\n}\n```\n\n### Arguments\n\n`{{on}}` accepts two positional arguments, and a few named arguments.\n\nThe positional arguments are:\n\n- `event` -- the name to use when calling `addEventListener`\n- `callback` -- the function to be passed to `addEventListener`\n\nThe named arguments are:\n\n- capture -- a `true` value indicates that events of this type will be dispatched\n  to the registered listener before being dispatched to any EventTarget beneath it\n  in the DOM tree.\n- once -- indicates that the listener should be invoked at most once after being\n  added. If true, the listener would be automatically removed when invoked.\n- passive -- if `true`, indicates that the function specified by listener will never\n  call preventDefault(). If a passive listener does call preventDefault(), the user\n  agent will do nothing other than generate a console warning. See\n  [Improving scrolling performance with passive listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners)\n  to learn more.\n\nThe callback function passed to `{{on}}` will receive any arguments that are passed\nto the event handler. Most commonly this would be the `event` itself.\n\nIf you would like to pass additional arguments to the function you should use\nthe `{{fn}}` helper.\n\nFor example, in our example case above if you'd like to pass in the post that\nwas being liked when the button is clicked you could do something like:\n\n```app/components/like-post.hbs\n<button {{on 'click' (fn this.saveLike @post)}}>Like this post!</button>\n```\n\nIn this case, the `saveLike` function will receive two arguments: the click event\nand the value of `@post`.\n\n### Function Context\n\nIn the example above, we used `@action` to ensure that `likePost` is\nproperly bound to the `items-list`, but let's explore what happens if we\nleft out `@action`:\n\n```app/components/like-post.js\nimport Component from '@glimmer/component';\n\nexport default class LikePostComponent extends Component {\n  saveLike() {\n    // ...snip...\n  }\n}\n```\n\nIn this example, when the button is clicked `saveLike` will be invoked,\nit will **not** have access to the component instance. In other\nwords, it will have no `this` context, so please make sure your functions\nare bound (via `@action` or other means) before passing into `on`!",
+      "description": "The `{{on}}` modifier lets you easily add event listeners (it uses\n[EventTarget.addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\ninternally).\n\nFor example, if you'd like to run a function on your component when a `<button>`\nin the components template is clicked you might do something like:\n\n```app/components/like-post.gjs\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class LikePost extends Component {\n  @action\n  saveLike() {\n    // someone likes your post!\n    // better send a request off to your server...\n  }\n  \n  <template>\n    <button {{on 'click' this.saveLike}}>Like this post!</button>\n  </template>\n}\n```\n\n### Arguments\n\n`{{on}}` accepts two positional arguments, and a few named arguments.\n\nThe positional arguments are:\n\n- `event` -- the name to use when calling `addEventListener`\n- `callback` -- the function to be passed to `addEventListener`\n\nThe named arguments are:\n\n- capture -- a `true` value indicates that events of this type will be dispatched\n  to the registered listener before being dispatched to any EventTarget beneath it\n  in the DOM tree.\n- once -- indicates that the listener should be invoked at most once after being\n  added. If true, the listener would be automatically removed when invoked.\n- passive -- if `true`, indicates that the function specified by listener will never\n  call preventDefault(). If a passive listener does call preventDefault(), the user\n  agent will do nothing other than generate a console warning. See\n  [Improving scrolling performance with passive listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners)\n  to learn more.\n\nThe callback function passed to `{{on}}` will receive any arguments that are passed\nto the event handler. Most commonly this would be the `event` itself.\n\nIf you would like to pass additional arguments to the function you should use\nthe `{{fn}}` helper.\n\nFor example, in our example case above if you'd like to pass in the post that\nwas being liked when the button is clicked you could do something like:\n\n```hbs\n<button {{on 'click' (fn this.saveLike @post)}}>Like this post!</button>\n```\n\nIn this case, the `saveLike` function will receive two arguments: the click event\nand the value of `@post`.\n\n### Function Context\n\nIn the example above, we used `@action` to ensure that `likePost` is\nproperly bound to the `LikePost` Component, but let's explore what happens if we\nleft out `@action`:\n\n```app/components/like-post.gjs\nimport Component from '@glimmer/component';\n\nexport default class LikePost extends Component {\n  saveLike() {\n    // ...snip...\n  }\n}\n```\n\nIn this example, when the button is clicked `saveLike` will be invoked,\nit will **not** have access to the component instance. In other\nwords, it will have no `this` context, so please make sure your functions\nare bound (via `@action` or other means) before passing into `on`!",
       "itemtype": "method",
       "name": "on",
       "access": "public",
@@ -6918,7 +6918,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/syntax/in-element.ts",
       "line": 5,
-      "description": "The `in-element` helper renders its block content outside of the regular flow,\ninto a DOM element given by its `destinationElement` positional argument.\n\nCommon use cases - often referred to as \"portals\" or \"wormholes\" - are rendering\ndropdowns, modals or tooltips close to the root of the page to bypass CSS overflow\nrules, or to render content to parts of the page that are outside of the control\nof the Ember app itself (e.g. embedded into a static or server rendered HTML page).\n\n```handlebars\n{{#in-element this.destinationElement}}\n  <div>Some content</div>\n{{/in-element}}\n```\n\n### Arguments\n\n`{{in-element}}` requires a single positional argument:\n\n- `destinationElement` -- the DOM element to render into. It must exist at the time\nof rendering.\n\nIt also supports an optional named argument:\n\n- `insertBefore` -- by default the DOM element's content is replaced when used as\n`destinationElement`. Passing `null` to `insertBefore` changes the behaviour to\nappend the block content to the end of any existing content. Any other value than\n`null` is currently not supported.\n\n    For example:\n\n    ```handlebars\n    {{#in-element this.destinationElement insertBefore=null}}\n      <div>Some content</div>\n    {{/in-element}}\n    ```",
+      "description": "The `in-element` helper renders its block content outside of the regular flow,\ninto a DOM element given by its `destinationElement` positional argument.\n\nCommon use cases - often referred to as \"portals\" or \"wormholes\" - are rendering\ndropdowns, modals or tooltips close to the root of the page to bypass CSS overflow\nrules, or to render content to parts of the page that are outside of the control\nof the Ember app itself (e.g. embedded into a static or server rendered HTML page).\n\n```handlebars\n{{#in-element this.destinationElement}}\n  <div>Some content</div>\n{{/in-element}}\n```\n\n### Arguments\n\n`{{in-element}}` requires a single positional argument:\n\n- `destinationElement` -- the DOM element to render into. It must exist at the time\nof rendering.\n\nIt also supports an optional named argument:\n\n- `insertBefore` -- by default the DOM element's content is replaced when used as\n`destinationElement`. Passing `null` to `insertBefore` changes the behaviour to\nappend the block content to the end of any existing content. Any other value than\n`null` is currently not supported.\n\n    For example:\n\n    ```handlebars\n    {{#in-element this.destinationElement insertBefore=null}}\n      <div>Some content</div>\n    {{/in-element}}\n    ```\n\n`in-element` is built-in and does not need to be imported.",
       "itemtype": "method",
       "name": "in-element",
       "access": "public",
@@ -6929,7 +6929,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/syntax/let.ts",
       "line": 5,
-      "description": "The `let` helper receives one or more positional arguments and yields\nthem out as block params.\n\nThis allows the developer to introduce shorter names for certain computations\nin the template.\n\nThis is especially useful if you are passing properties to a component\nthat receives a lot of options and you want to clean up the invocation.\n\nFor the following example, the template receives a `post` object with\n`content` and `title` properties.\n\nWe are going to call the `my-post` component, passing a title which is\nthe title of the post suffixed with the name of the blog, the content\nof the post, and a series of options defined in-place.\n\n```handlebars\n{{#let\n    (concat post.title ' | The Ember.js Blog')\n    post.content\n    (hash\n      theme=\"high-contrast\"\n      enableComments=true\n    )\n    as |title content options|\n}}\n  <MyPost @title={{title}} @content={{content}} @options={{options}} />\n{{/let}}\n  ```\n or\n  ```handlebars\n{{#let\n    (concat post.title ' | The Ember.js Blog')\n    post.content\n    (hash\n      theme=\"high-contrast\"\n      enableComments=true\n    )\n    as |title content options|\n}}\n  {{my-post title=title content=content options=options}}\n{{/let}}\n  ```",
+      "description": "The `let` helper receives one or more positional arguments and yields\nthem out as block params.\n\nThis allows the developer to introduce shorter names for certain computations\nin the template.\n\nThis is especially useful if you are passing properties to a component\nthat receives a lot of options and you want to clean up the invocation.\n\nFor the following example, the template receives a `post` object with\n`content` and `title` properties.\n\nWe are going to call the `my-post` component, passing a title which is\nthe title of the post suffixed with the name of the blog, the content\nof the post, and a series of options defined in-place.\n\n```handlebars\n{{#let\n    (concat post.title ' | The Ember.js Blog')\n    post.content\n    (hash\n      theme=\"high-contrast\"\n      enableComments=true\n    )\n    as |title content options|\n}}\n  <MyPost @title={{title}} @content={{content}} @options={{options}} />\n{{/let}}\n  ```\n\n `let` is built-in and does not need to be imported.",
       "itemtype": "method",
       "name": "let",
       "access": "public",
@@ -6940,7 +6940,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/syntax/mount.ts",
       "line": 17,
-      "description": "The `{{mount}}` helper lets you embed a routeless engine in a template.\nMounting an engine will cause an instance to be booted and its `application`\ntemplate to be rendered.\n\nFor example, the following template mounts the `ember-chat` engine:\n\n```handlebars\n{{! application.hbs }}\n{{mount \"ember-chat\"}}\n```\n\nAdditionally, you can also pass in a `model` argument that will be\nset as the engines model. This can be an existing object:\n\n```\n<div>\n  {{mount 'admin' model=userSettings}}\n</div>\n```\n\nOr an inline `hash`, and you can even pass components:\n\n```\n<div>\n  <h1>Application template!</h1>\n  {{mount 'admin' model=(hash\n      title='Secret Admin'\n      signInButton=(component 'sign-in-button')\n  )}}\n</div>\n```",
+      "description": "The `{{mount}}` helper lets you embed a routeless engine in a template.\nMounting an engine will cause an instance to be booted and its `application`\ntemplate to be rendered.\n\nFor example, the following template mounts the `ember-chat` engine:\n\n```app/templates/application.gjs\n{{mount \"ember-chat\"}}\n```\n\nAdditionally, you can also pass in a `model` argument that will be\nset as the engines model. This can be an existing object:\n\n```hbs\n<div>\n  {{mount 'admin' model=userSettings}}\n</div>\n```\n\nOr an inline `hash`, and you can even pass components:\n\n```gjs\nimport SignInButton from '../components/sign-in-button';\n<template>\n  <div>\n    <h1>Application template!</h1>\n    {{mount 'admin' model=(hash\n        title='Secret Admin'\n        signInButton=SignInButton\n    )}}\n  </div>\n</template>\n```\n \n `mount` is built-in and does not need to be imported.",
       "itemtype": "method",
       "name": "mount",
       "params": [
@@ -6964,7 +6964,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/syntax/outlet.ts",
       "line": 28,
-      "description": "The `{{outlet}}` helper lets you specify where a child route will render in\nyour template. An important use of the `{{outlet}}` helper is in your\napplication's `application.hbs` file:\n\n```app/templates/application.hbs\n<MyHeader />\n\n<div class=\"my-dynamic-content\">\n  <!-- this content will change based on the current route, which depends on the current URL -->\n  {{outlet}}\n</div>\n\n<MyFooter />\n```\n\nSee the [routing guide](https://guides.emberjs.com/release/routing/rendering-a-template/) for more\ninformation on how your `route` interacts with the `{{outlet}}` helper.\nNote: Your content __will not render__ if there isn't an `{{outlet}}` for it.",
+      "description": "The `{{outlet}}` helper lets you specify where a child route will render in\nyour template. An important use of the `{{outlet}}` helper is in your\napplication's `application.gjs` file:\n\n```app/templates/application.gjs\nimport MyHeader from '../components/my-header';\nimport MyFooter from '../components/my-footer';\n  \n<template>\n  <MyHeader />\n\n  <div class=\"my-dynamic-content\">\n    <!-- this content will change based on the current route, which depends on the current URL -->\n    {{outlet}}\n  </div>\n\n  <MyFooter />\n</template>\n```\n\nSee the [routing guide](https://guides.emberjs.com/release/routing/rendering-a-template/) for more\ninformation on how your `route` interacts with the `{{outlet}}` helper.\nNote: Your content __will not render__ if there isn't an `{{outlet}}` for it.\n\n`outlet` is built-in and does not need to be imported.",
       "itemtype": "method",
       "name": "outlet",
       "access": "public",
@@ -7349,7 +7349,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 832,
+      "line": 838,
       "description": "Standard CSS class names to apply to the view's outer element. This\nproperty automatically inherits any class names defined by the view's\nsuperclasses as well.",
       "itemtype": "property",
       "name": "classNames",
@@ -7362,7 +7362,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 844,
+      "line": 850,
       "description": "A list of properties of the view to apply as class names. If the property\nis a string value, the value of that string will be applied as a class\nname.\n\n```javascript\n// Applies the 'high' class to the view element\nimport Component from '@ember/component';\nComponent.extend({\n  classNameBindings: ['priority'],\n  priority: 'high'\n});\n```\n\nIf the value of the property is a Boolean, the name of that property is\nadded as a dasherized class name.\n\n```javascript\n// Applies the 'is-urgent' class to the view element\nimport Component from '@ember/component';\nComponent.extend({\n  classNameBindings: ['isUrgent'],\n  isUrgent: true\n});\n```\n\nIf you would prefer to use a custom value instead of the dasherized\nproperty name, you can pass a binding like this:\n\n```javascript\n// Applies the 'urgent' class to the view element\nimport Component from '@ember/component';\nComponent.extend({\n  classNameBindings: ['isUrgent:urgent'],\n  isUrgent: true\n});\n```\n\nIf you would like to specify a class that should only be added when the\nproperty is false, you can declare a binding like this:\n\n```javascript\n// Applies the 'disabled' class to the view element\nimport Component from '@ember/component';\nComponent.extend({\n  classNameBindings: ['isEnabled::disabled'],\n  isEnabled: false\n});\n```\n\nThis list of properties is inherited from the component's superclasses as well.",
       "itemtype": "property",
       "name": "classNameBindings",
@@ -7375,7 +7375,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1051,
+      "line": 1057,
       "description": "Normally, Ember's component model is \"write-only\". The component takes a\nbunch of attributes that it got passed in, and uses them to render its\ntemplate.\n\nOne nice thing about this model is that if you try to set a value to the\nsame thing as last time, Ember (through HTMLBars) will avoid doing any\nwork on the DOM.\n\nThis is not just a performance optimization. If an attribute has not\nchanged, it is important not to clobber the element's \"hidden state\".\nFor example, if you set an input's `value` to the same value as before,\nit will clobber selection state and cursor position. In other words,\nsetting an attribute is not **always** idempotent.\n\nThis method provides a way to read an element's attribute and also\nupdate the last value Ember knows about at the same time. This makes\nsetting an attribute idempotent.\n\nIn particular, what this means is that if you get an `<input>` element's\n`value` attribute and then re-render the template with the same value,\nit will avoid clobbering the cursor and selection position.\nSince most attribute sets are idempotent in the browser, you typically\ncan get away with reading attributes using jQuery, but the most reliable\nway to do so is through this method.",
       "itemtype": "method",
       "name": "readDOMAttr",
@@ -7396,7 +7396,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1109,
+      "line": 1115,
       "description": "A list of properties of the view to apply as attributes. If the property\nis a string value, the value of that string will be applied as the value\nfor an attribute of the property's name.\n\nThe following example creates a tag like `<div priority=\"high\" />`.\n\n```app/components/my-component.js\nimport Component from '@ember/component';\n\nexport default Component.extend({\n   attributeBindings: ['priority'],\n   priority: 'high'\n });\n```\n\nIf the value of the property is a Boolean, the attribute is treated as\nan HTML Boolean attribute. It will be present if the property is `true`\nand omitted if the property is `false`.\n\nThe following example creates markup like `<div visible />`.\n\n```app/components/my-component.js\nimport Component from '@ember/component';\n\nexport default Component.extend({\n   attributeBindings: ['visible'],\n   visible: true\n });\n```\n\nIf you would prefer to use a custom value instead of the property name,\nyou can create the same markup as the last example with a binding like\nthis:\n\n```app/components/my-component.js\nimport Component from '@ember/component';\n\nexport default Component.extend({\n   attributeBindings: ['isVisible:visible'],\n   isVisible: true\n });\n```\n\nThis list of attributes is inherited from the component's superclasses,\nas well.",
       "itemtype": "property",
       "name": "attributeBindings",
@@ -7409,7 +7409,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1163,
+      "line": 1169,
       "description": "Enables components to take a list of parameters as arguments.\n For example, a component that takes two parameters with the names\n `name` and `age`:\n\n ```app/components/my-component.js\n import Component from '@ember/component';\n\n export default class MyComponent extends Component {\n   static positionalParams = ['name', 'age'];\n }\n ```\n\n It can then be invoked like this:\n\n ```hbs\n {{my-component \"John\" 38}}\n ```\n\n The parameters can be referred to just like named parameters:\n\n ```hbs\n Name: {{name}}, Age: {{age}}.\n ```\n\n Using a string instead of an array allows for an arbitrary number of\n parameters:\n\n ```app/components/my-component.js\n import Component from '@ember/component';\n\n export default class MyComponent extends Component {\n   static positionalParams = 'names';\n }\n ```\n\n It can then be invoked like this:\n\n ```hbs\n {{my-component \"John\" \"Michael\" \"Scott\"}}\n ```\n The parameters can then be referred to by enumerating over the list:\n\n ```hbs\n {{#each names as |name|}}{{name}}{{/each}}\n ```",
       "static": 1,
       "access": "public",
@@ -7422,7 +7422,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1268,
+      "line": 1274,
       "description": "Layout can be used to wrap content in a component.",
       "itemtype": "property",
       "name": "layout",
@@ -7434,7 +7434,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1276,
+      "line": 1282,
       "description": "The name of the layout to lookup if no layout is provided.\nBy default `Component` will lookup a template with this name in\n`Ember.TEMPLATES` (a shared global object).",
       "itemtype": "property",
       "name": "layoutName",
@@ -7447,7 +7447,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1287,
+      "line": 1293,
       "description": "The WAI-ARIA role of the control represented by this view. For example, a\n button may have a role of type 'button', or a pane may have a role of\n type 'alertdialog'. This property is used by assistive software to help\n visually challenged users navigate rich web applications.\n\n The full list of valid WAI-ARIA roles is available at:\n [https://www.w3.org/TR/wai-aria/#roles_categorization](https://www.w3.org/TR/wai-aria/#roles_categorization)",
       "itemtype": "property",
       "name": "ariaRole",
@@ -7460,7 +7460,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1303,
+      "line": 1309,
       "description": "Array of child views. You should never edit this array directly.",
       "itemtype": "property",
       "name": "childViews",
@@ -7473,7 +7473,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1343,
+      "line": 1349,
       "description": "Return the nearest ancestor that is an instance of the provided\nclass or mixin.",
       "itemtype": "method",
       "name": "nearestOfType",
@@ -7496,7 +7496,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1367,
+      "line": 1373,
       "description": "Return the nearest ancestor that has a given property.",
       "itemtype": "method",
       "name": "nearestWithProperty",
@@ -7519,7 +7519,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1389,
+      "line": 1395,
       "description": "Renders the view again. This will work regardless of whether the\nview is already in the DOM or not. If the view is in the DOM, the\nrendering process will be deferred to give bindings a chance\nto synchronize.\n\nIf children were added during the rendering process using `appendChild`,\n`rerender` will remove them, because they will be added again\nif needed by the next `render`.\n\nIn general, if the display of your view changes, you should modify\nthe DOM element directly instead of manually calling `rerender`, which can\nbe slow.",
       "itemtype": "method",
       "name": "rerender",
@@ -7530,7 +7530,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1414,
+      "line": 1420,
       "description": "Returns the current DOM element for the view.",
       "itemtype": "property",
       "name": "element",
@@ -7542,7 +7542,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1427,
+      "line": 1433,
       "description": "Appends the view's element to the specified parent element.\n\nNote that this method just schedules the view to be appended; the DOM\nelement will not be appended to the given element until all bindings have\nfinished synchronizing.\n\nThis is not typically a function that you will need to call directly when\nbuilding your application. If you do need to use `appendTo`, be sure that\nthe target element you are providing is associated with an `Application`\nand does not have an ancestor element that is associated with an Ember view.",
       "itemtype": "method",
       "name": "appendTo",
@@ -7564,7 +7564,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1492,
+      "line": 1498,
       "description": "Appends the view's element to the document body. If the view does\nnot have an HTML representation yet\nthe element will be generated automatically.\n\nIf your application uses the `rootElement` property, you must append\nthe view within that element. Rendering views outside of the `rootElement`\nis not supported.\n\nNote that this method just schedules the view to be appended; the DOM\nelement will not be appended to the document body until all bindings have\nfinished synchronizing.",
       "itemtype": "method",
       "name": "append",
@@ -7579,7 +7579,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1513,
+      "line": 1519,
       "description": "The HTML `id` of the view's element in the DOM. You can provide this\nvalue yourself but it must be unique (just as in HTML):\n\n```handlebars\n{{my-component elementId=\"a-really-cool-id\"}}\n```\n\nIf not manually set a default value will be provided by the framework.\n\nOnce rendered an element's `elementId` is considered immutable and you\nshould never change it. If you need to compute a dynamic value for the\n`elementId`, you should do this when the component or element is being\ninstantiated:\n\n```app/components/my-component.js\nimport Component from '@ember/component';\n\nexport default Component.extend({\n   init() {\n     this._super(...arguments);\n     let index = this.get('index');\n     this.set('elementId', 'component-id' + index);\n   }\n });\n```",
       "itemtype": "property",
       "name": "elementId",
@@ -7591,7 +7591,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1546,
+      "line": 1552,
       "description": "Called when a view is going to insert an element into the DOM.",
       "itemtype": "event",
       "name": "willInsertElement",
@@ -7602,7 +7602,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1556,
+      "line": 1562,
       "description": "Called when the element of the view has been inserted into the DOM.\nOverride this function to do any set up that requires an element\nin the document body.\n\nWhen a view has children, didInsertElement will be called on the\nchild view(s) first and on itself afterwards.",
       "itemtype": "event",
       "name": "didInsertElement",
@@ -7613,7 +7613,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1571,
+      "line": 1577,
       "description": "Called when the view is about to rerender, but before anything has\nbeen torn down. This is a good opportunity to tear down any manual\nobservers you have installed based on the DOM state",
       "itemtype": "event",
       "name": "willClearRender",
@@ -7624,7 +7624,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1583,
+      "line": 1589,
       "description": "You must call `destroy` on a view to destroy the view (and all of its\nchild views). This will remove the view from any parent node, then make\nsure that the DOM element managed by the view can be released by the\nmemory manager.",
       "itemtype": "method",
       "name": "destroy",
@@ -7635,7 +7635,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1598,
+      "line": 1604,
       "description": "Called when the element of the view is going to be destroyed. Override\nthis function to do any teardown that requires an element, like removing\nevent listeners.\n\nPlease note: any property changes made during this event will have no\neffect on object observers.",
       "itemtype": "event",
       "name": "willDestroyElement",
@@ -7646,7 +7646,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1613,
+      "line": 1619,
       "description": "Called after the element of the view is destroyed.",
       "itemtype": "event",
       "name": "willDestroyElement",
@@ -7657,7 +7657,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1623,
+      "line": 1629,
       "description": "Called when the parentView property has changed.",
       "itemtype": "event",
       "name": "parentViewDidChange",
@@ -7668,7 +7668,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1637,
+      "line": 1643,
       "description": "Tag name for the view's outer element. The tag name is only used when an\nelement is first created. If you change the `tagName` for an element, you\nmust destroy and recreate the view element.\n\nBy default, the render buffer will use a `<div>` tag for views.\n\nIf the tagName is `''`, the view will be tagless, with no outer element.\nComponent properties that depend on the presence of an outer element, such\nas `classNameBindings` and `attributeBindings`, do not work with tagless\ncomponents. Tagless components cannot implement methods to handle events,\nand their `element` property has a `null` value.",
       "itemtype": "property",
       "name": "tagName",
@@ -7681,7 +7681,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/component.ts",
-      "line": 1664,
+      "line": 1670,
       "description": "Handle events from `EventDispatcher`",
       "itemtype": "method",
       "name": "handleEvent",
@@ -7705,7 +7705,7 @@
     {
       "file": "packages/@ember/-internals/glimmer/lib/glimmer-tracking-docs.ts",
       "line": 22,
-      "description": "Marks a property as tracked. By default, values that are rendered in Ember app\ntemplates are _static_, meaning that updates to them won't cause the\napplication to rerender. Marking a property as tracked means that when that\nproperty changes, any templates that used that property, directly or\nindirectly, will rerender. For instance, consider this component:\n\n```handlebars\n<div>Count: {{this.count}}</div>\n<div>Times Ten: {{this.timesTen}}</div>\n<div>\n  <button {{on \"click\" this.plusOne}}>\n    Plus One\n  </button>\n</div>\n```\n\n```javascript\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport default class CounterComponent extends Component {\n  @tracked count = 0;\n\n  get timesTen() {\n    return this.count * 10;\n  }\n\n  @action\n  plusOne() {\n    this.count += 1;\n  }\n}\n```\n\nBoth the `{{this.count}}` and the `{{this.timesTen}}` properties in the\ntemplate will update whenever the button is clicked. Any tracked properties\nthat are used in any way to calculate a value that is used in the template\nwill cause a rerender when updated - this includes through method calls and\nother means:\n\n```javascript\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nclass Entry {\n  @tracked name;\n  @tracked phoneNumber;\n\n  constructor(name, phoneNumber) {\n    this.name = name;\n    this.phoneNumber = phoneNumber;\n  }\n}\n\nexport default class PhoneBookComponent extends Component {\n  entries = [\n    new Entry('Pizza Palace', 5551234),\n    new Entry('1st Street Cleaners', 5554321),\n    new Entry('Plants R Us', 5552468),\n  ];\n\n  // Any usage of this property will update whenever any of the names in the\n  // entries arrays are updated\n  get names() {\n    return this.entries.map(e => e.name);\n  }\n\n  // Any usage of this property will update whenever any of the numbers in the\n  // entries arrays are updated\n  get numbers() {\n    return this.getFormattedNumbers();\n  }\n\n  getFormattedNumbers() {\n    return this.entries\n      .map(e => e.phoneNumber)\n      .map(number => {\n        let numberString = '' + number;\n\n        return numberString.slice(0, 3) + '-' + numberString.slice(3);\n      });\n  }\n}\n```\n\nIt's important to note that setting tracked properties will always trigger an\nupdate, even if the property is set to the same value as it was before.\n\n```js\nlet entry = new Entry('Pizza Palace', 5551234);\n\n// if entry was used when rendering, this would cause a rerender, even though\n// the name is being set to the same value as it was before\nentry.name = entry.name;\n```\n\n`tracked` can also be used with the classic Ember object model in a similar\nmanner to classic computed properties:\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nconst Entry = EmberObject.extend({\n  name: tracked(),\n  phoneNumber: tracked()\n});\n```\n\nOften this is unnecessary, but to ensure robust auto-tracking behavior it is\nadvisable to mark tracked state appropriately wherever possible.\n\nThis form of `tracked` also accepts an optional configuration object\ncontaining either an initial `value` or an `initializer` function (but not\nboth).\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nconst Entry = EmberObject.extend({\n  name: tracked({ value: 'Zoey' }),\n  favoriteSongs: tracked({\n    initializer: () => ['Raspberry Beret', 'Time After Time']\n  })\n});\n```",
+      "description": "Marks a property as tracked. By default, values that are rendered in Ember app\ntemplates are _static_, meaning that updates to them won't cause the\napplication to rerender. Marking a property as tracked means that when that\nproperty changes, any templates that used that property, directly or\nindirectly, will rerender. For instance, consider this component:\n\n```gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport default class CounterComponent extends Component {\n  @tracked count = 0;\n\n  get timesTen() {\n    return this.count * 10;\n  }\n\n  @action\n  plusOne() {\n    this.count += 1;\n  }\n  \n  <template>\n    <div>Count: {{this.count}}</div>\n    <div>Times Ten: {{this.timesTen}}</div>\n    <div>\n      <button {{on \"click\" this.plusOne}}>\n        Plus One\n      </button>\n    </div>\n  </template>\n}\n```\n\nBoth the `{{this.count}}` and the `{{this.timesTen}}` properties in the\ntemplate will update whenever the button is clicked. Any tracked properties\nthat are used in any way to calculate a value that is used in the template\nwill cause a rerender when updated - this includes through method calls and\nother means:\n\n```gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nclass Entry {\n  @tracked name;\n  @tracked phoneNumber;\n\n  constructor(name, phoneNumber) {\n    this.name = name;\n    this.phoneNumber = phoneNumber;\n  }\n}\n\nexport default class PhoneBookComponent extends Component {\n  entries = [\n    new Entry('Pizza Palace', 5551234),\n    new Entry('1st Street Cleaners', 5554321),\n    new Entry('Plants R Us', 5552468),\n  ];\n\n  // Any usage of this property will update whenever any of the names in the\n  // entries arrays are updated\n  get names() {\n    return this.entries.map(e => e.name);\n  }\n\n  // Any usage of this property will update whenever any of the numbers in the\n  // entries arrays are updated\n  get numbers() {\n    return this.getFormattedNumbers();\n  }\n\n  getFormattedNumbers() {\n    return this.entries\n      .map(e => e.phoneNumber)\n      .map(number => {\n        let numberString = '' + number;\n\n        return numberString.slice(0, 3) + '-' + numberString.slice(3);\n      });\n  }\n}\n```\n\nIt's important to note that setting tracked properties will always trigger an\nupdate, even if the property is set to the same value as it was before.\n\n```js\nlet entry = new Entry('Pizza Palace', 5551234);\n\n// if entry was used when rendering, this would cause a rerender, even though\n// the name is being set to the same value as it was before\nentry.name = entry.name;\n```\n\n`tracked` can also be used with the classic Ember object model in a similar\nmanner to classic computed properties:\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nconst Entry = EmberObject.extend({\n  name: tracked(),\n  phoneNumber: tracked()\n});\n```\n\nOften this is unnecessary, but to ensure robust auto-tracking behavior it is\nadvisable to mark tracked state appropriately wherever possible.\n\nThis form of `tracked` also accepts an optional configuration object\ncontaining either an initial `value` or an `initializer` function (but not\nboth).\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nconst Entry = EmberObject.extend({\n  name: tracked({ value: 'Zoey' }),\n  favoriteSongs: tracked({\n    initializer: () => ['Raspberry Beret', 'Time After Time']\n  })\n});\n```",
       "itemtype": "method",
       "name": "tracked",
       "static": 1,
@@ -7728,7 +7728,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/helper.ts",
-      "line": 105,
+      "line": 117,
       "description": "Override this function when writing a class-based helper.",
       "itemtype": "method",
       "name": "compute",
@@ -7752,13 +7752,13 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/helper.ts",
-      "line": 123,
+      "line": 135,
       "class": "Helper",
       "module": "@ember/component"
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/helper.ts",
-      "line": 142,
+      "line": 154,
       "description": "On a class-based helper, it may be useful to force a recomputation of that\nhelpers value. This is akin to `rerender` on a component.\n\nIn most cases, `recompute` is not needed because accessing tracked\nproperties in `compute` will automatically re-run the helper when\nthose properties change. Use `recompute` only when you need to\ntrigger a recomputation imperatively, for example in response to an\nexternal event:\n\n```app/helpers/current-time.js\nimport Helper from '@ember/component/helper';\n\nexport default class CurrentTimeHelper extends Helper {\n  interval = null;\n\n  compute() {\n    return new Date().toLocaleTimeString();\n  }\n\n  constructor() {\n    super(...arguments);\n    this.interval = setInterval(() => this.recompute(), 1000);\n  }\n\n  willDestroy() {\n    super.willDestroy();\n    clearInterval(this.interval);\n  }\n}\n```",
       "itemtype": "method",
       "name": "recompute",
@@ -7770,7 +7770,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/helper.ts",
-      "line": 313,
+      "line": 325,
       "description": "The type of a function-based helper.",
       "note": "This is *not* user-constructible: it is exported only so that the type\n  returned by the `helper` function can be named (and indeed can be exported\n  like `export default helper(...)` safely).",
       "class": "Helper",
@@ -7778,7 +7778,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/lib/helper.ts",
-      "line": 344,
+      "line": 356,
       "description": "In many cases it is not necessary to use the full `Helper` class.\nThe `helper` method create pure-function helpers without instances.\nFor example:\n\n```app/helpers/format-currency.js\nimport { helper } from '@ember/component/helper';\n\nexport default helper(function([cents], {currency}) {\n  return `${currency}${cents * 0.01}`;\n});\n```",
       "static": 1,
       "params": [
@@ -7998,8 +7998,8 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/index.ts",
-      "line": 92,
-      "description": "`{{yield}}` denotes an area of a template that will be rendered inside\nof another template.\n\n### Use with `Component`\n\nWhen designing components `{{yield}}` is used to denote where, inside the component's\ntemplate, an optional block passed to the component should render:\n\n```app/templates/application.hbs\n<LabeledTextfield @value={{@model.name}}>\n  First name:\n</LabeledTextfield>\n```\n\n```app/components/labeled-textfield.hbs\n<label>\n  {{yield}} <Input @value={{@value}} />\n</label>\n```\n\nResult:\n\n```html\n<label>\n  First name: <input type=\"text\" />\n</label>\n```\n\nAdditionally you can `yield` properties into the context for use by the consumer:\n\n```app/templates/application.hbs\n<LabeledTextfield @value={{@model.validation}} @validator={{this.firstNameValidator}} as |validationError|>\n  {{#if validationError}}\n    <p class=\"error\">{{validationError}}</p>\n  {{/if}}\n  First name:\n</LabeledTextfield>\n```\n\n```app/components/labeled-textfield.hbs\n<label>\n  {{yield this.validationError}} <Input @value={{@value}} />\n</label>\n```\n\nResult:\n\n```html\n<label>\n  <p class=\"error\">First Name must be at least 3 characters long.</p>\n  First name: <input type=\"text\" />\n</label>\n```\n\n`yield` can also be used with the `hash` helper:\n\n```app/templates/application.hbs\n<DateRanges @value={{@model.date}} as |range|>\n  Start date: {{range.start}}\n  End date: {{range.end}}\n</DateRanges>\n```\n\n```app/components/date-ranges.hbs\n<div>\n  {{yield (hash start=@value.start end=@value.end)}}\n</div>\n```\n\nResult:\n\n```html\n<div>\n  Start date: July 1st\n  End date: July 30th\n</div>\n```\n\nMultiple values can be yielded as block params:\n\n```app/templates/application.hbs\n<Banner @value={{@model}} as |title subtitle body|>\n  <h1>{{title}}</h1>\n  <h2>{{subtitle}}</h2>\n  {{body}}\n</Banner>\n```\n\n```app/components/banner.hbs\n<div>\n  {{yield \"Hello title\" \"hello subtitle\" \"body text\"}}\n</div>\n```\n\nResult:\n\n```html\n<div>\n  <h1>Hello title</h1>\n  <h2>hello subtitle</h2>\n  body text\n</div>\n```\n\nHowever, it is preferred to use the hash helper, as this can prevent breaking changes to your component and also simplify the api for the component.\n\nMultiple components can be yielded with the `hash` and `component` helper:\n\n```app/templates/application.hbs\n<Banner @value={{@model}} as |banner|>\n  <banner.Title>Banner title</banner.Title>\n  <banner.Subtitle>Banner subtitle</banner.Subtitle>\n  <banner.Body>A load of body text</banner.Body>\n</Banner>\n```\n\n```app/components/banner.js\nimport Title from './banner/title';\nimport Subtitle from './banner/subtitle';\nimport Body from './banner/body';\n\nexport default class Banner extends Component {\n  Title = Title;\n  Subtitle = Subtitle;\n  Body = Body;\n}\n```\n\n```app/components/banner.hbs\n<div>\n  {{yield (hash\n    Title=this.Title\n    Subtitle=this.Subtitle\n    Body=(component this.Body defaultArg=\"some value\")\n  )}}\n</div>\n```\n\nResult:\n\n```html\n<div>\n  <h1>Banner title</h1>\n  <h2>Banner subtitle</h2>\n  A load of body text\n</div>\n```\n\nA benefit of using this pattern is that the user of the component can change the order the components are displayed.\n\n```app/templates/application.hbs\n<Banner @value={{@model}} as |banner|>\n  <banner.Subtitle>Banner subtitle</banner.Subtitle>\n  <banner.Title>Banner title</banner.Title>\n  <banner.Body>A load of body text</banner.Body>\n</Banner>\n```\n\nResult:\n\n```html\n<div>\n  <h2>Banner subtitle</h2>\n  <h1>Banner title</h1>\n  A load of body text\n</div>\n```\n\nAnother benefit to using `yield` with the `hash` and `component` helper\nis you can pass attributes and arguments to these components:\n\n```app/templates/application.hbs\n<Banner @value={{@model}} as |banner|>\n  <banner.Subtitle class=\"mb-1\">Banner subtitle</banner.Subtitle>\n  <banner.Title @variant=\"loud\">Banner title</banner.Title>\n  <banner.Body>A load of body text</banner.Body>\n</Banner>\n```\n\n```app/components/banner/subtitle.hbs\n{{!-- note the use of ..attributes --}}\n<h2 ...attributes>\n  {{yield}}\n</h2>\n```\n\n```app/components/banner/title.hbs\n{{#if (eq @variant \"loud\")}}\n    <h1 class=\"loud\">{{yield}}</h1>\n{{else}}\n    <h1 class=\"quiet\">{{yield}}</h1>\n{{/if}}\n```\n\nResult:\n\n```html\n<div>\n  <h2 class=\"mb-1\">Banner subtitle</h2>\n  <h1 class=\"loud\">Banner title</h1>\n  A load of body text\n</div>\n```",
+      "line": 109,
+      "description": "`{{yield}}` denotes an area of a template that will be rendered inside\nof another template.\n\n### Use with `Component`\n\nWhen designing components `{{yield}}` is used to denote where, inside the component's\ntemplate, an optional block passed to the component should render:\n\n```app/templates/application.gjs\nimport LabeledTextField from '../components/labeled-textfield';\n  \n<template>\n  <LabeledTextField @value={{@model.name}}>\n    First name:\n  </LabeledTextField>\n</template>\n```\n\n```app/components/labeled-textfield.gjs\nimport { Input } from '@ember/component';\n  \n<template>\n  <label>\n    {{yield}} <Input @value={{@value}} />\n  </label>\n</template>\n```\n\nResult:\n\n```html\n<label>\n  First name: <input type=\"text\" />\n</label>\n```\n\nAdditionally you can `yield` properties into the context for use by the consumer:\n\n```app/templates/application.gjs\nimport Component from '@glimmer/component';\nimport LabeledTextField from '../components/labeled-textfield';\n  \nexport default class Application extends Component {\n  firstNameValidator = (value) => {\n    // validates\n  }\n  \n  <template>\n    <LabeledTextField @value={{@model.validation}} @validator={{this.firstNameValidator}} as |validationError|>\n      {{#if validationError}}\n        <p class=\"error\">{{validationError}}</p>\n      {{/if}}\n      First name:\n    </LabeledTextField>\n  </template>\n}\n```\n\n```app/components/labeled-textfield.gjs\nimport { Input } from '@ember/component';\n  \n<template>\n  <label>\n    {{yield this.validationError}} <Input @value={{@value}} />\n  </label>\n</template>\n```\n\nResult:\n\n```html\n<label>\n  <p class=\"error\">First Name must be at least 3 characters long.</p>\n  First name: <input type=\"text\" />\n</label>\n```\n\n`yield` can also be used with the `hash` helper:\n\n```app/templates/application.gjs\nimport DateRanges from '../components/date-ranges';\n  \n<template>\n  <DateRanges @value={{@model.date}} as |range|>\n    Start date: {{range.start}}\n    End date: {{range.end}}\n  </DateRanges>\n</template>\n```\n\n```app/components/date-ranges.gjs\n<template>\n  <div>\n    {{yield (hash start=@value.start end=@value.end)}}\n  </div>\n</template>\n```\n\nResult:\n\n```html\n<div>\n  Start date: July 1st\n  End date: July 30th\n</div>\n```\n\nMultiple values can be yielded as block params:\n  \n```app/templates/application.gjs\nimport Banner from '../components/banner';\n  \n<template>\n  <Banner @value={{@model}} as |title subtitle body|>\n    <h1>{{title}}</h1>\n    <h2>{{subtitle}}</h2>\n    {{body}}\n  </Banner>\n</template>\n```\n\n```app/components/banner.gjs\n<template>\n  <div>\n    {{yield \"Hello title\" \"hello subtitle\" \"body text\"}}\n  </div>\n</template>\n```\n\nResult:\n\n```html\n<div>\n  <h1>Hello title</h1>\n  <h2>hello subtitle</h2>\n  body text\n</div>\n```\n\nHowever, it is preferred to use the hash helper, as this can prevent breaking changes to your component and also simplify the api for the component.\n\nMultiple components can be yielded with the `hash` and `component` helper:\n\n```app/templates/application.gjs\nimport Banner from '../components/banner';\n\n<template>\n  <Banner @value={{@model}} as |banner|>\n    <banner.Title>Banner title</banner.Title>\n    <banner.Subtitle>Banner subtitle</banner.Subtitle>\n    <banner.Body>A load of body text</banner.Body>\n  </Banner>\n</template>\n```\n\n```app/components/banner.gjs\nimport Title from './banner/title';\nimport Subtitle from './banner/subtitle';\nimport Body from './banner/body';\n\nexport default class Banner extends Component {\n  Title = Title;\n  Subtitle = Subtitle;\n  Body = Body;\n  \n  <template>\n    <div>\n      {{yield (hash\n        Title=this.Title\n        Subtitle=this.Subtitle\n        Body=(component this.Body defaultArg=\"some value\")\n      )}}\n    </div>\n  </template>\n}\n```\n\nResult:\n\n```html\n<div>\n  <h1>Banner title</h1>\n  <h2>Banner subtitle</h2>\n  A load of body text\n</div>\n```\n\nA benefit of using this pattern is that the user of the component can change the order the components are displayed.\n\n```app/templates/application.gjs\nimport Banner from '../components/banner';\n\n<template>\n  <Banner @value={{@model}} as |banner|>\n    <banner.Subtitle>Banner subtitle</banner.Subtitle>\n    <banner.Title>Banner title</banner.Title>\n    <banner.Body>A load of body text</banner.Body>\n  </Banner>\n</template>\n```\n\nResult:\n\n```html\n<div>\n  <h2>Banner subtitle</h2>\n  <h1>Banner title</h1>\n  A load of body text\n</div>\n```\n\nAnother benefit to using `yield` with the `hash` and `component` helper\nis you can pass attributes and arguments to these components:\n\n```app/templates/application.gjs\nimport Banner from '../components/banner';\n\n<template>\n  <Banner @value={{@model}} as |banner|>\n    <banner.Subtitle class=\"mb-1\">Banner subtitle</banner.Subtitle>\n    <banner.Title @variant=\"loud\">Banner title</banner.Title>\n    <banner.Body>A load of body text</banner.Body>\n  </Banner>\n</template>\n```\n\n```app/components/banner/subtitle.gjs\n{{!-- note the use of ..attributes --}}\n<h2 ...attributes>\n  {{yield}}\n</h2>\n```\n\n```app/components/banner/title.gjs\n<template>\n  {{#if (eq @variant \"loud\")}}\n    <h1 class=\"loud\">{{yield}}</h1>\n  {{else}}\n    <h1 class=\"quiet\">{{yield}}</h1>\n  {{/if}}\n</template>\n```\n\nResult:\n\n```html\n<div>\n  <h2 class=\"mb-1\">Banner subtitle</h2>\n  <h1 class=\"loud\">Banner title</h1>\n  A load of body text\n</div>\n```",
       "itemtype": "method",
       "name": "yield",
       "params": [
@@ -8020,8 +8020,8 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/index.ts",
-      "line": 304,
-      "description": "`{{(has-block)}}` indicates if the component was invoked with a block.\n\nThis component is invoked with a block:\n\n```handlebars\n{{#my-component}}\n  Hi Jen!\n{{/my-component}}\n```\n\nThis component is invoked without a block:\n\n```handlebars\n{{my-component}}\n```\n\nUsing angle bracket invocation, this looks like:\n\n```html\n<MyComponent>Hi Jen!</MyComponent> {{! with a block}}\n```\n\n```html\n<MyComponent/> {{! without a block}}\n```\n\nThis is useful when you want to create a component that can optionally take a block\nand then render a default template when it is not invoked with a block.\n\n```app/templates/components/my-component.hbs\n{{#if (has-block)}}\n  Welcome {{yield}}, we are happy you're here!\n{{else}}\n  Hey you! You're great!\n{{/if}}\n```",
+      "line": 370,
+      "description": "`{{(has-block)}}` indicates if the component was invoked with a block.\n\nThis component is invoked with a block:\n\n```handlebars\n<MyComponent>\n  Hi Jen!\n</MyComponent>\n```\n\nThis component is invoked without a block:\n\n```handlebars\n<MyComponent />\n```\n\nThis is useful when you want to create a component that can optionally take a block\nand then render a default template when it is not invoked with a block.\n\n```app/components/my-component.gjs\n<template>\n  {{#if (has-block)}}\n    Welcome {{yield}}, we are happy you're here!\n  {{else}}\n    Hey you! You're great!\n  {{/if}}\n</template>\n```",
       "itemtype": "method",
       "name": "has-block",
       "params": [
@@ -8042,8 +8042,8 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/index.ts",
-      "line": 349,
-      "description": "`{{(has-block-params)}}` indicates if the component was invoked with block params.\n\nThis component is invoked with block params:\n\n```handlebars\n{{#my-component as |favoriteFlavor|}}\n  Hi Jen!\n{{/my-component}}\n```\n\nThis component is invoked without block params:\n\n```handlebars\n{{#my-component}}\n  Hi Jenn!\n{{/my-component}}\n```\n\nWith angle bracket syntax, block params look like this:\n\n  ```handlebars\n<MyComponent as |favoriteFlavor|>\n  Hi Jen!\n</MyComponent>\n```\n\nAnd without block params:\n\n```handlebars\n<MyComponent>\n  Hi Jen!\n</MyComponent>\n```\n\nThis is useful when you want to create a component that can render itself\ndifferently when it is not invoked with block params.\n\n```app/templates/components/my-component.hbs\n{{#if (has-block-params)}}\n  Welcome {{yield this.favoriteFlavor}}, we're happy you're here and hope you\n  enjoy your favorite ice cream flavor.\n{{else}}\n  Welcome {{yield}}, we're happy you're here, but we're unsure what\n  flavor ice cream you would enjoy.\n{{/if}}\n```",
+      "line": 407,
+      "description": "`{{(has-block-params)}}` indicates if the component was invoked with block params.\n\nThis component is invoked with block params:\n  \n```handlebars\n<MyComponent as |favoriteFlavor|>\nHi Jen!\n</MyComponent>\n```\n\nAnd without block params:\n\n```handlebars\n<MyComponent>\nHi Jen!\n</MyComponent>\n```\n\nThis is useful when you want to create a component that can render itself\ndifferently when it is not invoked with block params.\n\n```app/components/my-component.gjs\n<template>\n  {{#if (has-block-params)}}\n    Welcome {{yield this.favoriteFlavor}}, we're happy you're here and hope you\n    enjoy your favorite ice cream flavor.\n  {{else}}\n    Welcome {{yield}}, we're happy you're here, but we're unsure what\n    flavor ice cream you would enjoy.\n  {{/if}}\n</template>\n```",
       "itemtype": "method",
       "name": "has-block-params",
       "params": [
@@ -8064,7 +8064,7 @@
     },
     {
       "file": "packages/@ember/-internals/glimmer/index.ts",
-      "line": 404,
+      "line": 448,
       "description": "Execute the `debugger` statement in the current template's context.\n\n```handlebars\n{{debugger}}\n```\n\nWhen using the debugger helper you will have access to a `get` function. This\nfunction retrieves values available in the context of the template.\nFor example, if you're wondering why a value `{{foo}}` isn't rendering as\nexpected within a template, you could place a `{{debugger}}` statement and,\nwhen the `debugger;` breakpoint is hit, you can attempt to retrieve this value:\n\n```\n> get('foo')\n```\n\n`get` is also aware of keywords. So in this situation\n\n```handlebars\n{{#each this.items as |item|}}\n  {{debugger}}\n{{/each}}\n```\n\nYou'll be able to get values from the current item:\n\n```\n> get('item.name')\n```\n\nYou can also access the context of the view to make sure it is the object that\nyou expect:\n\n```\n> context\n```",
       "itemtype": "method",
       "name": "debugger",
@@ -12043,7 +12043,7 @@
     {
       "file": "packages/@ember/array/index.ts",
       "line": 1870,
-      "description": "Creates an `NativeArray` from an Array-like object.\nDoes not modify the original object's contents.\n\nExample\n\n```app/components/my-component.js\nimport Component from '@ember/component';\nimport { A } from '@ember/array';\n\nexport default Component.extend({\n  tagName: 'ul',\n  classNames: ['pagination'],\n\n  init() {\n    this._super(...arguments);\n\n    if (!this.get('content')) {\n      this.set('content', A());\n      this.set('otherContent', A([1,2,3]));\n    }\n  }\n});\n```",
+      "description": "Creates an `NativeArray` from an Array-like object.\nDoes not modify the original object's contents.\n  \nThis exists primarily for historic reasons and should not be used\nin new code. Prefer native [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)\nor [trackedArray](/ember/release/functions/@ember%2Freactive%2Fcollections/trackedArray).\n\nExample\n\n```app/components/my-component.js\nimport Component from '@ember/component';\nimport { A } from '@ember/array';\n\nexport default Component.extend({\n  tagName: 'ul',\n  classNames: ['pagination'],\n\n  init() {\n    this._super(...arguments);\n\n    if (!this.get('content')) {\n      this.set('content', A());\n      this.set('otherContent', A([1,2,3]));\n    }\n  }\n});\n```",
       "itemtype": "method",
       "name": "A",
       "static": 1,
@@ -12058,70 +12058,70 @@
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1911,
+      "line": 1915,
       "description": "The final definition of NativeArray removes all native methods. This is the list of removed methods\nwhen run in Chrome 106.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1928,
+      "line": 1932,
       "description": "These additional items must be redefined since `Omit` causes methods that return `this` to return the\ntype at the time of the Omit.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1952,
+      "line": 1956,
       "description": "Remove all elements from the array. This is useful if you\nwant to reuse an existing array without having to recreate it.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1957,
+      "line": 1961,
       "description": "This will use the primitive `replace()` method to insert an object at the\nspecified index.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1962,
+      "line": 1966,
       "description": "Remove an object at the specified index using the `replace()` primitive\nmethod. You can pass either a single index, or a start and a length.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1967,
+      "line": 1971,
       "description": "Add the objects in the passed numerable to the end of the array. Defers\nnotifying observers of the change until all objects are added.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1972,
+      "line": 1976,
       "description": "Adds the named objects to the beginning of the array. Defers notifying\nobservers until all objects have been added.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1977,
+      "line": 1981,
       "description": "Reverse objects in the array. Works just like `reverse()` but it is\nKVO-compliant.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1982,
+      "line": 1986,
       "description": "Replace all the receiver's content with content of the argument.\nIf argument is an empty array receiver will be cleared.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 1987,
+      "line": 1991,
       "description": "Remove all occurrences of an object in the array.\n\n```javascript\nlet cities = ['Chicago', 'Berlin', 'Lima', 'Chicago'];\n\ncities.removeObject('Chicago');  // ['Berlin', 'Lima']\ncities.removeObject('Lima');     // ['Berlin']\ncities.removeObject('Tokyo')     // ['Berlin']\n```",
       "itemtype": "method",
       "name": "removeObject",
@@ -12143,14 +12143,14 @@
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 2004,
+      "line": 2008,
       "description": "Removes each object in the passed array from the receiver.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 2008,
+      "line": 2012,
       "description": "Push the object onto the end of the array if it is not already\npresent in the array.\n\n```javascript\nlet cities = ['Chicago', 'Berlin'];\n\ncities.addObject('Lima');    // ['Chicago', 'Berlin', 'Lima']\ncities.addObject('Berlin');  // ['Chicago', 'Berlin', 'Lima']\n```",
       "itemtype": "method",
       "name": "addObject",
@@ -12172,14 +12172,14 @@
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 2025,
+      "line": 2029,
       "description": "Adds each object in the passed enumerable to the receiver.",
       "class": "@ember/array",
       "module": "ember"
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 2029,
+      "line": 2033,
       "description": "Sets the value on the named property for each member. This is more\nergonomic than using other methods defined on this helper. If the object\nimplements Observable, the value will be changed to `set(),` otherwise\nit will be set directly. `null` objects are skipped.\n\n```javascript\nlet people = [{name: 'Joe'}, {name: 'Matt'}];\n\npeople.setEach('zipCode', '10011');\n// [{name: 'Joe', zipCode: '10011'}, {name: 'Matt', zipCode: '10011'}];\n```",
       "itemtype": "method",
       "name": "setEach",
@@ -12206,7 +12206,7 @@
     },
     {
       "file": "packages/@ember/array/index.ts",
-      "line": 2049,
+      "line": 2053,
       "description": "This is the handler for the special array content property. If you get\nthis property, it will return this. If you set this property to a new\narray, it will replace the current content.\n\n```javascript\nlet peopleToMoon = ['Armstrong', 'Aldrin'];\n\npeopleToMoon.get('[]'); // ['Armstrong', 'Aldrin']\n\npeopleToMoon.set('[]', ['Collins']); // ['Collins']\npeopleToMoon.get('[]'); // ['Collins']\n```",
       "itemtype": "property",
       "name": "[]",
@@ -12522,7 +12522,7 @@
     {
       "file": "packages/@ember/controller/index.ts",
       "line": 39,
-      "description": "The object to which actions from the view should be sent.\n\nFor example, when a Handlebars template uses the `{{action}}` helper,\nit will attempt to send the action to the view's controller's `target`.\n\nBy default, the value of the target property is set to the router, and\nis injected when a controller is instantiated. This injection is applied\nas part of the application's initialization process. In most cases the\n`target` property will automatically be set to the logical consumer of\nactions for the controller.",
+      "description": "The object to which actions from the view should be sent.\n\nFor example, when a template uses the `{{action}}` helper,\nit will attempt to send the action to the view's controller's `target`.\n\nBy default, the value of the target property is set to the router, and\nis injected when a controller is instantiated. This injection is applied\nas part of the application's initialization process. In most cases the\n`target` property will automatically be set to the logical consumer of\nactions for the controller.",
       "itemtype": "property",
       "name": "target",
       "default": "null",
@@ -14045,41 +14045,41 @@
     {
       "file": "packages/@ember/helper/index.ts",
       "line": 346,
-      "description": "Using the `{{hash}}` helper, you can pass objects directly from the template\nas an argument to your components.\n\n```\nimport { hash } from '@ember/helper';\n\n<template>\n  {{#each-in (hash givenName='Jen' familyName='Weber') as |key value|}}\n    <p>{{key}}: {{value}}</p>\n  {{/each-in}}\n</template>\n```\n\n**NOTE:** this example uses the experimental `<template>` feature, which is\nthe only place you need to import `hash` to use it (it is a built-in when\nwriting standalone `.hbs` files).",
+      "description": "Using the `{{hash}}` helper, you can pass objects directly from the template\nas an argument to your components.\n\n```\n<template>\n  {{#each-in (hash givenName='Jen' familyName='Weber') as |key value|}}\n    <p>{{key}}: {{value}}</p>\n  {{/each-in}}\n</template>\n```",
       "class": "@ember/helper",
       "module": "@ember/helper"
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 367,
-      "description": "Using the `{{array}}` helper, you can pass arrays directly from the template\nas an argument to your components.\n\n```js\nimport { array } from '@ember/helper';\n\n<template>\n  <ul>\n  {{#each (array 'Tom Dale' 'Yehuda Katz' @anotherPerson) as |person|}}\n    <li>{{person}}</li>\n  {{/each}}\n  </ul>\n</template>\n\n**NOTE:** this example uses the experimental `<template>` feature, which is\nthe only place you need to import `array` to use it (it is a built-in when\nwriting standalone `.hbs` files).\n```",
+      "line": 361,
+      "description": "Using the `{{array}}` helper, you can pass arrays directly from the template\nas an argument to your components.\n\n```js\n\n<template>\n  <ul>\n  {{#each (array 'Tom Dale' 'Yehuda Katz' @anotherPerson) as |person|}}\n    <li>{{person}}</li>\n  {{/each}}\n  </ul>\n</template>\n```",
       "class": "@ember/helper",
       "module": "@ember/helper"
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 390,
-      "description": "The `{{concat}}` helper makes it easy to dynamically send a number of\nparameters to a component or helper as a single parameter in the format of a\nconcatenated string.\n\nFor example:\n\n```js\nimport { concat } from '@ember/helper';\n\n<template>\n  {{get @foo (concat \"item\" @index)}}\n</template>\n```\n\nThis will display the result of `@foo.item1` when `index` is `1`, and\n`this.foo.item2` when `index` is `2`, etc.\n\n**NOTE:** this example uses the experimental `<template>` feature, which is\nthe only place you need to import `concat` to use it (it is a built-in when\nwriting standalone `.hbs` files).",
+      "line": 379,
+      "description": "The `{{concat}}` helper makes it easy to dynamically send a number of\nparameters to a component or helper as a single parameter in the format of a\nconcatenated string.\n\nFor example:\n\n```js\nimport { concat } from '@ember/helper';\n\n<template>\n  {{get @foo (concat \"item\" @index)}}\n</template>\n```\n\nThis will display the result of `@foo.item1` when `index` is `1`, and\n`this.foo.item2` when `index` is `2`, etc.",
       "class": "@ember/helper",
       "module": "@ember/helper"
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 415,
-      "description": "The `{{get}}` helper makes it easy to dynamically look up a property on an\nobject or an element in an array. The second argument to `{{get}}` can be a\nstring or a number, depending on the object being accessed.\n\nTo access a property on an object with a string key:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @someObject \"objectKey\"}}\n</template>\n```\n\nTo access the first element in an array:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @someArray 0}}\n</template>\n```\n\nTo access a property on an object with a dynamic key:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @address @field}}\n</template>\n```\n\nThis will display the result of `@foo.item1` when `index` is `1`, and\n`this.foo.item2` when `index` is `2`, etc.\n\n**NOTE:** this example uses the experimental `<template>` feature, which is\nthe only place you need to import `concat` to use it (it is a built-in when\nwriting standalone `.hbs` files).",
+      "line": 400,
+      "description": "The `{{get}}` helper makes it easy to dynamically look up a property on an\nobject or an element in an array. The second argument to `{{get}}` can be a\nstring or a number, depending on the object being accessed.\n\nTo access a property on an object with a string key:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @someObject \"objectKey\"}}\n</template>\n```\n\nTo access the first element in an array:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @someArray 0}}\n</template>\n```\n\nTo access a property on an object with a dynamic key:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @address @field}}\n</template>\n```\n\nThis will display the result of `@foo.item1` when `index` is `1`, and\n`this.foo.item2` when `index` is `2`, etc.",
       "class": "@ember/helper",
       "module": "@ember/helper"
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 460,
+      "line": 441,
       "description": "`{{fn}}` is a helper that receives a function and some arguments, and returns\na new function that combines. This allows you to pass parameters along to\nfunctions in your templates:\n\n```js\nimport { fn } from '@ember/helper';\n\nfunction showAlert(message) {\n  alert(`The message is: '${message}'`);\n}\n\n<template>\n  <button type=\"button\" {{on \"click\" (fn showAlert \"Hello!\")}}>\n    Click me!\n  </button>\n</template>\n```",
       "class": "@ember/helper",
       "module": "@ember/helper"
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 482,
+      "line": 463,
       "description": "The `{{gt}}` helper returns `true` if the first argument is greater than\nthe second argument.\n\n```js\nimport { gt } from '@ember/helper';\n\n<template>\n  {{if (gt @score 100) \"High score!\" \"Keep trying\"}}\n</template>\n```\n\nIn strict-mode (gjs/gts) templates, `gt` is available as a keyword and\ndoes not need to be imported.",
       "itemtype": "method",
       "name": "gt",
@@ -14104,7 +14104,7 @@
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 505,
+      "line": 486,
       "description": "The `{{gte}}` helper returns `true` if the first argument is greater than\nor equal to the second argument.\n\n```js\nimport { gte } from '@ember/helper';\n\n<template>\n  {{if (gte @age 18) \"Adult\" \"Minor\"}}\n</template>\n```\n\nIn strict-mode (gjs/gts) templates, `gte` is available as a keyword and\ndoes not need to be imported.",
       "itemtype": "method",
       "name": "gte",
@@ -14129,7 +14129,7 @@
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 528,
+      "line": 509,
       "description": "The `{{lt}}` helper returns `true` if the first argument is less than\nthe second argument.\n\n```js\nimport { lt } from '@ember/helper';\n\n<template>\n  {{if (lt @temperature 0) \"Freezing\" \"Above zero\"}}\n</template>\n```\n\nIn strict-mode (gjs/gts) templates, `lt` is available as a keyword and\ndoes not need to be imported.",
       "itemtype": "method",
       "name": "lt",
@@ -14154,7 +14154,7 @@
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 551,
+      "line": 532,
       "description": "The `{{lte}}` helper returns `true` if the first argument is less than\nor equal to the second argument.\n\n```js\nimport { lte } from '@ember/helper';\n\n<template>\n  {{if (lte @count 0) \"Empty\" \"Has items\"}}\n</template>\n```\n\nIn strict-mode (gjs/gts) templates, `lte` is available as a keyword and\ndoes not need to be imported.",
       "itemtype": "method",
       "name": "lte",
@@ -14179,7 +14179,7 @@
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 574,
+      "line": 555,
       "description": "The `element` helper lets you dynamically set the tag name of an element.\n\n```js\nimport { element } from '@ember/helper';\n\n<template>\n  {{#let (element @tagName) as |Tag|}}\n    <Tag class=\"my-element\">Hello</Tag>\n  {{/let}}\n</template>\n```\n\nWhen `@tagName` is `\"h1\"`, this renders `<h1 class=\"my-element\">Hello</h1>`.\nWhen `@tagName` is an empty string, the block content is rendered without a\nwrapping element. When `@tagName` is `null` or `undefined`, nothing is rendered.",
       "itemtype": "method",
       "name": "element",
@@ -14195,14 +14195,14 @@
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 597,
+      "line": 578,
       "description": "Use the {{uniqueId}} helper to generate a unique ID string suitable for use as\nan ID attribute in the DOM.\n\nEach invocation of {{uniqueId}} will return a new, unique ID string.\nYou can use the `let` helper to create an ID that can be reused within a template.\n\n```js\nimport { uniqueId } from '@ember/helper';\n\n<template>\n  {{#let (uniqueId) as |emailId|}}\n    <label for={{emailId}}>Email address</label>\n    <input id={{emailId}} type=\"email\" />\n  {{/let}}\n</template>\n```",
       "class": "@ember/helper",
       "module": "@ember/helper"
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 618,
+      "line": 599,
       "description": "The `{{eq}}` helper returns `true` if its two arguments are strictly equal\n(`===`). Takes exactly two arguments.\n\n```js\nimport { eq } from '@ember/helper';\n\n<template>\n  {{if (eq @status \"active\") \"Active\" \"Inactive\"}}\n</template>\n```\n\nIn strict-mode (gjs/gts) templates, `eq` is available as a keyword and\ndoes not need to be imported.",
       "itemtype": "method",
       "name": "eq",
@@ -14227,7 +14227,7 @@
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 641,
+      "line": 622,
       "description": "The `{{neq}}` helper returns `true` if its two arguments are strictly\nnot equal (`!==`). Takes exactly two arguments.\n\n```js\nimport { neq } from '@ember/helper';\n\n<template>\n  {{if (neq @status \"active\") \"Not active\" \"Active\"}}\n</template>\n```\n\nIn strict-mode (gjs/gts) templates, `neq` is available as a keyword and\ndoes not need to be imported.",
       "itemtype": "method",
       "name": "neq",
@@ -14252,7 +14252,7 @@
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 664,
+      "line": 645,
       "description": "The `{{and}}` helper evaluates arguments left to right, returning the first\nfalsy value (using Handlebars truthiness) or the right-most value if all\nare truthy. Requires at least two arguments.\n\n```js\nimport { and } from '@ember/helper';\n\n<template>\n  {{if (and @isAdmin @isLoggedIn) \"Welcome, admin!\" \"Access denied\"}}\n</template>\n```\n\nIn strict-mode (gjs/gts) templates, `and` is available as a keyword and\ndoes not need to be imported.",
       "itemtype": "method",
       "name": "and",
@@ -14272,7 +14272,7 @@
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 687,
+      "line": 668,
       "description": "The `{{or}}` helper evaluates arguments left to right, returning the first\ntruthy value (using Handlebars truthiness) or the right-most value if all\nare falsy. Requires at least two arguments.\n\n```js\nimport { or } from '@ember/helper';\n\n<template>\n  {{if (or @hasAccess @isAdmin) \"Welcome!\" \"No access\"}}\n</template>\n```\n\nIn strict-mode (gjs/gts) templates, `or` is available as a keyword and\ndoes not need to be imported.",
       "itemtype": "method",
       "name": "or",
@@ -14292,7 +14292,7 @@
     },
     {
       "file": "packages/@ember/helper/index.ts",
-      "line": 710,
+      "line": 691,
       "description": "The `{{not}}` helper returns the logical negation of its argument using\nHandlebars truthiness. Takes exactly one argument.\n\n```js\nimport { not } from '@ember/helper';\n\n<template>\n  {{if (not @isDisabled) \"Enabled\" \"Disabled\"}}\n</template>\n```\n\nIn strict-mode (gjs/gts) templates, `not` is available as a keyword and\ndoes not need to be imported.",
       "itemtype": "method",
       "name": "not",
@@ -15698,7 +15698,7 @@
     {
       "file": "packages/@ember/object/index.ts",
       "line": 48,
-      "description": "Decorator that turns the target function into an Action which can be accessed\ndirectly by reference.\n\n```js\nimport Component from '@ember/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport default class Tooltip extends Component {\n  @tracked isShowing = false;\n\n  @action\n  toggleShowing() {\n    this.isShowing = !this.isShowing;\n  }\n}\n```\n```hbs\n<!-- template.hbs -->\n<button {{on \"click\" this.toggleShowing}}>Show tooltip</button>\n\n{{#if isShowing}}\n  <div class=\"tooltip\">\n    I'm a tooltip!\n  </div>\n{{/if}}\n```\n\nIt also binds the function directly to the instance, so it can be used in any\ncontext and will correctly refer to the class it came from:\n\n```js\nimport Component from '@ember/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport default class Tooltip extends Component {\n  constructor() {\n    super(...arguments);\n\n    // this.toggleShowing is still bound correctly when added to\n    // the event listener\n    document.addEventListener('click', this.toggleShowing);\n  }\n\n  @tracked isShowing = false;\n\n  @action\n  toggleShowing() {\n    this.isShowing = !this.isShowing;\n  }\n}\n```",
+      "description": "Decorator that turns the target function into an Action which can be accessed\ndirectly by reference.\n\n```gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport default class Tooltip extends Component {\n  @tracked isShowing = false;\n\n  @action\n  toggleShowing() {\n    this.isShowing = !this.isShowing;\n  }\n  \n  <template>\n    <button {{on \"click\" this.toggleShowing}}>Show tooltip</button>\n  \n    {{#if isShowing}}\n      <div class=\"tooltip\">\n        I'm a tooltip!\n      </div>\n    {{/if}}\n  </template>\n}\n```\n\nIt also binds the function directly to the instance, so it can be used in any\ncontext and will correctly refer to the class it came from:\n\n```gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport default class Tooltip extends Component {\n  constructor() {\n    super(...arguments);\n\n    // this.toggleShowing is still bound correctly when added to\n    // the event listener\n    document.addEventListener('click', this.toggleShowing);\n  }\n\n  @tracked isShowing = false;\n\n  @action\n  toggleShowing() {\n    this.isShowing = !this.isShowing;\n  }\n  \n  <template>\n    {{!-- ...--}}\n  </template>\n}\n```",
       "access": "public",
       "tagname": "",
       "itemtype": "method",
@@ -15720,8 +15720,8 @@
     },
     {
       "file": "packages/@ember/object/index.ts",
-      "line": 237,
-      "description": "Specify a method that observes property changes.\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { observer } from '@ember/object';\n\nexport default EmberObject.extend({\n  valueObserver: observer('value', function() {\n    // Executes whenever the \"value\" property changes\n  })\n});\n```\n\nAlso available as `Function.prototype.observes` if prototype extensions are\nenabled.",
+      "line": 241,
+      "description": "Specify a method that observes property changes.\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { observer } from '@ember/object';\n\nexport default EmberObject.extend({\n  valueObserver: observer('value', function() {\n    // Executes whenever the \"value\" property changes\n  })\n});\n```\n\nWhile observers are still supported, there are [plans to deprecate them](https://github.com/emberjs/rfcs/pull/1115)\nSee the [in-progress deprecation guide](https://github.com/ember-learn/deprecation-app/pull/1407) \nfor guidance on how to avoid using observers.",
       "itemtype": "method",
       "name": "observer",
       "params": [
@@ -16031,7 +16031,7 @@
     {
       "file": "packages/@ember/object/observable.ts",
       "line": 250,
-      "description": "Adds an observer on a property.\n\nThis is the core method used to register an observer for a property.\n\nOnce you call this method, any time the key's value is set, your observer\nwill be notified. Note that the observers are triggered any time the\nvalue is set, regardless of whether it has actually changed. Your\nobserver should be prepared to handle that.\n\nThere are two common invocation patterns for `.addObserver()`:\n\n- Passing two arguments:\n  - the name of the property to observe (as a string)\n  - the function to invoke (an actual function)\n- Passing three arguments:\n  - the name of the property to observe (as a string)\n  - the target object (will be used to look up and invoke a\n    function on)\n  - the name of the function to invoke on the target object\n    (as a string).\n\n```app/components/my-component.js\nimport Component from '@ember/component';\n\nexport default Component.extend({\n  init() {\n    this._super(...arguments);\n\n    // the following are equivalent:\n\n    // using three arguments\n    this.addObserver('foo', this, 'fooDidChange');\n\n    // using two arguments\n    this.addObserver('foo', (...args) => {\n      this.fooDidChange(...args);\n    });\n  },\n\n  fooDidChange() {\n    // your custom logic code\n  }\n});\n```\n\n### Observer Methods\n\nObserver methods have the following signature:\n\n```app/components/my-component.js\nimport Component from '@ember/component';\n\nexport default Component.extend({\n  init() {\n    this._super(...arguments);\n    this.addObserver('foo', this, 'fooDidChange');\n  },\n\n  fooDidChange(sender, key, value, rev) {\n    // your code\n  }\n});\n```\n\nThe `sender` is the object that changed. The `key` is the property that\nchanges. The `value` property is currently reserved and unused. The `rev`\nis the last property revision of the object when it changed, which you can\nuse to detect if the key value has really changed or not.\n\nUsually you will not need the value or revision parameters at\nthe end. In this case, it is common to write observer methods that take\nonly a sender and key value as parameters or, if you aren't interested in\nany of these values, to write an observer that has no parameters at all.",
+      "description": "Adds an observer on a property.\n\nThis is the core method used to register an observer for a property.\n\nOnce you call this method, any time the key's value is set, your observer\nwill be notified. Note that the observers are triggered any time the\nvalue is set, regardless of whether it has actually changed. Your\nobserver should be prepared to handle that.\n\nThere are two common invocation patterns for `.addObserver()`:\n\n- Passing two arguments:\n  - the name of the property to observe (as a string)\n  - the function to invoke (an actual function)\n- Passing three arguments:\n  - the name of the property to observe (as a string)\n  - the target object (will be used to look up and invoke a\n    function on)\n  - the name of the function to invoke on the target object\n    (as a string).\n\n```app/components/my-component.js\nimport Component from '@ember/component';\n\nexport default Component.extend({\n  init() {\n    this._super(...arguments);\n\n    // the following are equivalent:\n\n    // using three arguments\n    this.addObserver('foo', this, 'fooDidChange');\n\n    // using two arguments\n    this.addObserver('foo', (...args) => {\n      this.fooDidChange(...args);\n    });\n  },\n\n  fooDidChange() {\n    // your custom logic code\n  }\n});\n```\n\n### Observer Methods\n\nObserver methods have the following signature:\n\n```app/components/my-component.js\nimport Component from '@ember/component';\n\nexport default Component.extend({\n  init() {\n    this._super(...arguments);\n    this.addObserver('foo', this, 'fooDidChange');\n  },\n\n  fooDidChange(sender, key, value, rev) {\n    // your code\n  }\n});\n```\n\nThe `sender` is the object that changed. The `key` is the property that\nchanges. The `value` property is currently reserved and unused. The `rev`\nis the last property revision of the object when it changed, which you can\nuse to detect if the key value has really changed or not.\n\nUsually you will not need the value or revision parameters at\nthe end. In this case, it is common to write observer methods that take\nonly a sender and key value as parameters or, if you aren't interested in\nany of these values, to write an observer that has no parameters at all.\n\nWhile observers are still supported, there are [plans to deprecate them](https://github.com/emberjs/rfcs/pull/1115)\nSee the [in-progress deprecation guide](https://github.com/ember-learn/deprecation-app/pull/1407)\nfor guidance on how to avoid using observers.",
       "itemtype": "method",
       "name": "addObserver",
       "params": [
@@ -16067,7 +16067,7 @@
     },
     {
       "file": "packages/@ember/object/observable.ts",
-      "line": 336,
+      "line": 340,
       "description": "Remove an observer you have previously registered on this object. Pass\nthe same key, target, and method you passed to `addObserver()` and your\ntarget will no longer receive notifications.",
       "itemtype": "method",
       "name": "removeObserver",
@@ -16104,7 +16104,7 @@
     },
     {
       "file": "packages/@ember/object/observable.ts",
-      "line": 357,
+      "line": 361,
       "description": "Set the value of a property to the current value plus some amount.\n\n```javascript\nperson.incrementProperty('age');\nteam.incrementProperty('score', 2);\n```",
       "itemtype": "method",
       "name": "incrementProperty",
@@ -16131,7 +16131,7 @@
     },
     {
       "file": "packages/@ember/object/observable.ts",
-      "line": 374,
+      "line": 378,
       "description": "Set the value of a property to the current value minus some amount.\n\n```javascript\nplayer.decrementProperty('lives');\norc.decrementProperty('health', 5);\n```",
       "itemtype": "method",
       "name": "decrementProperty",
@@ -16158,7 +16158,7 @@
     },
     {
       "file": "packages/@ember/object/observable.ts",
-      "line": 391,
+      "line": 395,
       "description": "Set the value of a boolean property to the opposite of its\ncurrent value.\n\n```javascript\nstarship.toggleProperty('warpDriveEngaged');\n```",
       "itemtype": "method",
       "name": "toggleProperty",
@@ -16180,7 +16180,7 @@
     },
     {
       "file": "packages/@ember/object/observable.ts",
-      "line": 406,
+      "line": 410,
       "description": "Returns the cached value of a computed property, if it exists.\nThis allows you to inspect the value of a computed property\nwithout accidentally invoking it if it is intended to be\ngenerated lazily.",
       "itemtype": "method",
       "name": "cacheFor",
@@ -16202,7 +16202,7 @@
     },
     {
       "file": "packages/@ember/object/observable.ts",
-      "line": 436,
+      "line": 440,
       "description": "Begins a grouping of property changes.\n\nYou can use this method to group property changes so that notifications\nwill not be sent until the changes are finished. If you plan to make a\nlarge number of changes to an object at one time, you should call this\nmethod at the beginning of the changes to begin deferring change\nnotifications. When you are done making changes, call\n`endPropertyChanges()` to deliver the deferred change notifications and end\ndeferring.",
       "itemtype": "method",
       "name": "beginPropertyChanges",
@@ -16217,7 +16217,7 @@
     },
     {
       "file": "packages/@ember/object/observable.ts",
-      "line": 456,
+      "line": 460,
       "description": "Ends a grouping of property changes.\n\nYou can use this method to group property changes so that notifications\nwill not be sent until the changes are finished. If you plan to make a\nlarge number of changes to an object at one time, you should call\n`beginPropertyChanges()` at the beginning of the changes to defer change\nnotifications. When you are done making changes, call this method to\ndeliver the deferred change notifications and end deferring.",
       "itemtype": "method",
       "name": "endPropertyChanges",
@@ -16232,7 +16232,7 @@
     },
     {
       "file": "packages/@ember/object/observable.ts",
-      "line": 500,
+      "line": 504,
       "description": "Returns `true` if the object currently has observers registered for a\nparticular key. You can use this method to potentially defer performing\nan expensive action until someone begins observing a particular property\non the object.",
       "itemtype": "method",
       "name": "hasObserverFor",
@@ -18065,7 +18065,7 @@
     {
       "file": "packages/@ember/routing/route.ts",
       "line": 1104,
-      "description": "A hook you can implement to convert the URL into the model for\nthis route.\n\n```app/router.js\n// ...\n\nRouter.map(function() {\n  this.route('post', { path: '/posts/:post_id' });\n});\n\nexport default Router;\n```\n\nNote that for routes with dynamic segments, this hook is not always\nexecuted. If the route is entered through a transition (e.g. when\nusing the `link-to` Handlebars helper or the `transitionTo` method\nof routes), and a model context is already provided this hook\nis not called.\n\nA model context does not include a primitive string or number,\nwhich does cause the model hook to be called.\n\nRoutes without dynamic segments will always execute the model hook.\n\n```javascript\n// no dynamic segment, model hook always called\nthis.router.transitionTo('posts');\n\n// model passed in, so model hook not called\nthePost = store.findRecord('post', 1);\nthis.router.transitionTo('post', thePost);\n\n// integer passed in, model hook is called\nthis.router.transitionTo('post', 1);\n\n// model id passed in, model hook is called\n// useful for forcing the hook to execute\nthePost = store.findRecord('post', 1);\nthis.router.transitionTo('post', thePost.id);\n```\n\nThis hook follows the asynchronous/promise semantics\ndescribed in the documentation for `beforeModel`. In particular,\nif a promise returned from `model` fails, the error will be\nhandled by the `error` hook on `Route`.\n\nNote that the legacy behavior of automatically defining a model\nhook when a dynamic segment ending in `_id` is present is\n[deprecated](https://deprecations.emberjs.com/v5.x#toc_deprecate-implicit-route-model).\nYou should explicitly define a model hook whenever any segments are\npresent.\n\nExample\n\n```app/routes/post.js\nimport Route from '@ember/routing/route';\nimport { service } from '@ember/service';\n\nexport default class PostRoute extends Route {\n  @service store;\n\n  model(params) {\n    return this.store.findRecord('post', params.post_id);\n  }\n}\n```",
+      "description": "A hook you can implement to convert the URL into the model for\nthis route.\n\n```app/router.js\n// ...\n\nRouter.map(function() {\n  this.route('post', { path: '/posts/:post_id' });\n});\n\nexport default Router;\n```\n\nNote that for routes with dynamic segments, this hook is not always\nexecuted. If the route is entered through a transition (e.g. when\nusing the `link-to` helper or the `transitionTo` method\nof routes), and a model context is already provided this hook\nis not called.\n\nA model context does not include a primitive string or number,\nwhich does cause the model hook to be called.\n\nRoutes without dynamic segments will always execute the model hook.\n\n```javascript\n// no dynamic segment, model hook always called\nthis.router.transitionTo('posts');\n\n// model passed in, so model hook not called\nthePost = store.findRecord('post', 1);\nthis.router.transitionTo('post', thePost);\n\n// integer passed in, model hook is called\nthis.router.transitionTo('post', 1);\n\n// model id passed in, model hook is called\n// useful for forcing the hook to execute\nthePost = store.findRecord('post', 1);\nthis.router.transitionTo('post', thePost.id);\n```\n\nThis hook follows the asynchronous/promise semantics\ndescribed in the documentation for `beforeModel`. In particular,\nif a promise returned from `model` fails, the error will be\nhandled by the `error` hook on `Route`.\n\nNote that the legacy behavior of automatically defining a model\nhook when a dynamic segment ending in `_id` is present is\n[deprecated](https://deprecations.emberjs.com/v5.x#toc_deprecate-implicit-route-model).\nYou should explicitly define a model hook whenever any segments are\npresent.\n\nExample\n\n```app/routes/post.js\nimport Route from '@ember/routing/route';\nimport { service } from '@ember/service';\n\nexport default class PostRoute extends Route {\n  @service store;\n\n  model(params) {\n    return this.store.findRecord('post', params.post_id);\n  }\n}\n```",
       "itemtype": "method",
       "name": "model",
       "params": [
@@ -18337,7 +18337,7 @@
     {
       "file": "packages/@ember/routing/router-service.ts",
       "line": 90,
-      "description": "Transition the application into another route. The route may\nbe either a single route or route path:\n\nCalling `transitionTo` from the Router service will cause default query parameter values to be included in the URL.\nThis behavior is different from calling `transitionTo` on a route or `transitionToRoute` on a controller.\nSee the [Router Service RFC](https://github.com/emberjs/rfcs/blob/master/text/0095-router-service.md#query-parameter-semantics) for more info.\n\nIn the following example we use the Router service to navigate to a route with a\nspecific model from a Component in the first action, and in the second we trigger\na query-params only transition.\n\n```app/components/example.js\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nexport default class extends Component {\n  @service router;\n\n  @action\n  goToComments(post) {\n    this.router.transitionTo('comments', post);\n  }\n\n  @action\n  fetchMoreComments(latestComment) {\n    this.router.transitionTo({\n      queryParams: { commentsAfter: latestComment }\n    });\n  }\n}\n```",
+      "description": "Transition the application into another route. The route may\nbe either a single route or route path:\n\nCalling `transitionTo` from the Router service will cause default query parameter values to be included in the URL.\nThis behavior is different from calling `transitionTo` on a route or `transitionToRoute` on a controller.\nSee the [Router Service RFC](https://github.com/emberjs/rfcs/blob/master/text/0095-router-service.md#query-parameter-semantics) for more info.\n\nIn the following example we use the Router service to navigate to a route with a\nspecific model from a Component in the first action, and in the second we trigger\na query-params only transition.\n\n```app/components/example.gjs\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nexport default class extends Component {\n  @service router;\n\n  @action\n  goToComments(post) {\n    this.router.transitionTo('comments', post);\n  }\n\n  @action\n  fetchMoreComments(latestComment) {\n    this.router.transitionTo({\n      queryParams: { commentsAfter: latestComment }\n    });\n  }\n}\n```",
       "itemtype": "method",
       "name": "transitionTo",
       "params": [
@@ -18405,7 +18405,7 @@
     {
       "file": "packages/@ember/routing/router-service.ts",
       "line": 190,
-      "description": "Generate a URL based on the supplied route name and optionally a model. The\nURL is returned as a string that can be used for any purpose.\n\nIn this example, the URL for the `author.books` route for a given author\nis copied to the clipboard.\n\n```app/templates/application.hbs\n<CopyLink @author={{hash id=\"tomster\" name=\"Tomster\"}} />\n```\n\n```app/components/copy-link.js\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\nimport { action } from '@ember/object';\n\nexport default class CopyLinkComponent extends Component {\n  @service router;\n  @service clipboard;\n\n  @action\n  copyBooksURL() {\n    if (this.author) {\n      const url = this.router.urlFor('author.books', this.args.author);\n      this.clipboard.set(url);\n      // Clipboard now has /author/tomster/books\n    }\n  }\n}\n```\n\nJust like with `transitionTo` and `replaceWith`, `urlFor` can also handle\nquery parameters.\n\n```app/templates/application.hbs\n<CopyLink @author={{hash id=\"tomster\" name=\"Tomster\"}} />\n```\n\n```app/components/copy-link.js\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\nimport { action } from '@ember/object';\n\nexport default class CopyLinkComponent extends Component {\n  @service router;\n  @service clipboard;\n\n  @action\n  copyOnlyEmberBooksURL() {\n    if (this.author) {\n      const url = this.router.urlFor('author.books', this.author, {\n        queryParams: { filter: 'emberjs' }\n      });\n      this.clipboard.set(url);\n      // Clipboard now has /author/tomster/books?filter=emberjs\n    }\n  }\n}\n```",
+      "description": "Generate a URL based on the supplied route name and optionally a model. The\nURL is returned as a string that can be used for any purpose.\n\nIn this example, the URL for the `author.books` route for a given author\nis copied to the clipboard.\n\n```app/templates/application.gjs\nimport CopyLink from '../components/copy-link';\n  \n<template>\n  <CopyLink @author={{hash id=\"tomster\" name=\"Tomster\"}} />\n</template>\n```\n\n```app/components/copy-link.gjs\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\nimport { action } from '@ember/object';\n\nexport default class CopyLinkComponent extends Component {\n  @service router;\n  @service clipboard;\n\n  @action\n  copyBooksURL() {\n    if (this.author) {\n      const url = this.router.urlFor('author.books', this.args.author);\n      this.clipboard.set(url);\n      // Clipboard now has /author/tomster/books\n    }\n  }\n}\n```\n\nJust like with `transitionTo` and `replaceWith`, `urlFor` can also handle\nquery parameters.\n\n```app/templates/application.gjs\nimport CopyLink from '../components/copy-link';\n\n<template>\n  <CopyLink @author={{hash id=\"tomster\" name=\"Tomster\"}} />\n</template>\n```\n\n```app/components/copy-link.gjs\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\nimport { action } from '@ember/object';\n\nexport default class CopyLinkComponent extends Component {\n  @service router;\n  @service clipboard;\n\n  @action\n  copyOnlyEmberBooksURL() {\n    if (this.author) {\n      const url = this.router.urlFor('author.books', this.author, {\n        queryParams: { filter: 'emberjs' }\n      });\n      this.clipboard.set(url);\n      // Clipboard now has /author/tomster/books?filter=emberjs\n    }\n  }\n}\n```",
       "itemtype": "method",
       "name": "urlFor",
       "params": [
@@ -18437,8 +18437,8 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 266,
-      "description": "Returns `true` if `routeName/models/queryParams` is the active route, where `models` and `queryParams` are optional.\nSee [model](api/ember/release/classes/Route/methods/model?anchor=model) and\n[queryParams](/api/ember/3.7/classes/Route/properties/queryParams?anchor=queryParams) for more information about these arguments.\n\nIn the following example, `isActive` will return `true` if the current route is `/posts`.\n\n```app/components/posts.js\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class extends Component {\n  @service router;\n\n  displayComments() {\n    return this.router.isActive('posts');\n  }\n});\n```\n\nThe next example includes a dynamic segment, and will return `true` if the current route is `/posts/1`,\nassuming the post has an id of 1:\n\n```app/components/posts.js\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class extends Component {\n  @service router;\n\n  displayComments(post) {\n    return this.router.isActive('posts', post.id);\n  }\n});\n```\n\nWhere `post.id` is the id of a specific post, which is represented in the route as /posts/[post.id].\nIf `post.id` is equal to 1, then isActive will return true if the current route is /posts/1, and false if the route is anything else.",
+      "line": 274,
+      "description": "Returns `true` if `routeName/models/queryParams` is the active route, where `models` and `queryParams` are optional.\nSee [model](api/ember/release/classes/Route/methods/model?anchor=model) and\n[queryParams](/api/ember/3.7/classes/Route/properties/queryParams?anchor=queryParams) for more information about these arguments.\n\nIn the following example, `isActive` will return `true` if the current route is `/posts`.\n\n```app/components/posts.gjs\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class extends Component {\n  @service router;\n\n  displayComments() {\n    return this.router.isActive('posts');\n  }\n});\n```\n\nThe next example includes a dynamic segment, and will return `true` if the current route is `/posts/1`,\nassuming the post has an id of 1:\n\n```app/components/posts.gjs\nimport Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nexport default class extends Component {\n  @service router;\n\n  displayComments(post) {\n    return this.router.isActive('posts', post.id);\n  }\n});\n```\n\nWhere `post.id` is the id of a specific post, which is represented in the route as /posts/[post.id].\nIf `post.id` is equal to 1, then isActive will return true if the current route is /posts/1, and false if the route is anything else.",
       "itemtype": "method",
       "name": "isActive",
       "params": [
@@ -18470,8 +18470,8 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 371,
-      "description": "Takes a string URL and returns a `RouteInfo` for the leafmost route represented\nby the URL. Returns `null` if the URL is not recognized. This method expects to\nreceive the actual URL as seen by the browser including the app's `rootURL`.\n\nSee [RouteInfo](/ember/release/classes/RouteInfo) for more info.\n\nIn the following example `recognize` is used to verify if a path belongs to our\napplication before transitioning to it.\n\n```\nimport Component from '@ember/component';\nimport { service } from '@ember/service';\n\nexport default class extends Component {\n  @service router;\n  path = '/';\n\n  click() {\n    if (this.router.recognize(this.path)) {\n      this.router.transitionTo(this.path);\n    }\n  }\n}\n```",
+      "line": 379,
+      "description": "Takes a string URL and returns a `RouteInfo` for the leafmost route represented\nby the URL. Returns `null` if the URL is not recognized. This method expects to\nreceive the actual URL as seen by the browser including the app's `rootURL`.\n\nSee [RouteInfo](/ember/release/classes/RouteInfo) for more info.\n\nIn the following example `recognize` is used to verify if a path belongs to our\napplication before transitioning to it.\n\n```js\nimport Component from '@ember/component';\nimport { service } from '@ember/service';\n\nexport default class extends Component {\n  @service router;\n  path = '/';\n\n  click() {\n    if (this.router.recognize(this.path)) {\n      this.router.transitionTo(this.path);\n    }\n  }\n}\n```",
       "itemtype": "method",
       "name": "recognize",
       "params": [
@@ -18492,7 +18492,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 412,
+      "line": 420,
       "description": "Takes a string URL and returns a promise that resolves to a\n`RouteInfoWithAttributes` for the leafmost route represented by the URL.\nThe promise rejects if the URL is not recognized or an unhandled exception\nis encountered. This method expects to receive the actual URL as seen by\nthe browser including the app's `rootURL`.",
       "itemtype": "method",
       "name": "recognizeAndLoad",
@@ -18514,7 +18514,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 434,
+      "line": 442,
       "description": "You can register a listener for events emitted by this service with `.on()`:\n\n```app/routes/contact-form.js\nimport Route from '@ember/routing';\nimport { service } from '@ember/service';\n\nexport default class extends Route {\n  @service router;\n\n  activate() {\n    this.router.on('routeWillChange', (transition) => {\n      if (!transition.to.find(route => route.name === this.routeName)) {\n        alert(\"Please save or cancel your changes.\");\n        transition.abort();\n      }\n    })\n  }\n}\n```",
       "itemtype": "method",
       "name": "on",
@@ -18537,7 +18537,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 461,
+      "line": 469,
       "description": "You can unregister a listener for events emitted by this service with `.off()`:\n\n```app/routes/contact-form.js\nimport Route from '@ember/routing';\nimport { service } from '@ember/service';\n\nexport default class ContactFormRoute extends Route {\n  @service router;\n\n  callback = (transition) => {\n    if (!transition.to.find(route => route.name === this.routeName)) {\n      alert('Please save or cancel your changes.');\n      transition.abort();\n    }\n  };\n\n  activate() {\n    this.router.on('routeWillChange', this.callback);\n  }\n\n  deactivate() {\n    this.router.off('routeWillChange', this.callback);\n  }\n}\n```",
       "itemtype": "method",
       "name": "off",
@@ -18560,7 +18560,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 494,
+      "line": 502,
       "description": "The `routeWillChange` event is fired at the beginning of any\nattempted transition with a `Transition` object as the sole\nargument. This action can be used for aborting, redirecting,\nor decorating the transition from the currently active routes.\n\nA good example is preventing navigation when a form is\nhalf-filled out:\n\n```app/routes/contact-form.js\nimport Route from '@ember/routing';\nimport { service } from '@ember/service';\n\nexport default class extends Route {\n  @service router;\n\n  activate() {\n    this.router.on('routeWillChange', (transition) => {\n      if (!transition.to.find(route => route.name === this.routeName)) {\n        alert(\"Please save or cancel your changes.\");\n        transition.abort();\n      }\n    })\n  }\n}\n```\n\nThe `routeWillChange` event fires whenever a new route is chosen as the desired target of a transition. This includes `transitionTo`, `replaceWith`, all redirection for any reason including error handling, and abort. Aborting implies changing the desired target back to where you already were. Once a transition has completed, `routeDidChange` fires.",
       "itemtype": "event",
       "name": "routeWillChange",
@@ -18578,7 +18578,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 528,
+      "line": 536,
       "description": "The `routeDidChange` event only fires once a transition has settled.\nThis includes aborts and error substates. Like the `routeWillChange` event\nit receives a Transition as the sole argument.\n\nA good example is sending some analytics when the route has transitioned:\n\n```app/routes/contact-form.js\nimport Route from '@ember/routing';\nimport { service } from '@ember/service';\n\nexport default class extends Route {\n  @service router;\n\n  activate() {\n    this.router.on('routeDidChange', (transition) => {\n      ga.send('pageView', {\n        current: transition.to.name,\n        from: transition.from.name\n      });\n    })\n  }\n}\n```\n\n`routeDidChange` will be called after any `Route`'s\n[didTransition](/ember/release/classes/Route/events/didTransition?anchor=didTransition)\naction has been fired.\nThe updates of properties\n[currentURL](/ember/release/classes/RouterService/properties/currentURL?anchor=currentURL),\n[currentRouteName](/ember/release/classes/RouterService/properties/currentURL?anchor=currentRouteName)\nand\n[currentRoute](/ember/release/classes/RouterService/properties/currentURL?anchor=currentRoute)\nare completed at the time `routeDidChange` is called.",
       "itemtype": "event",
       "name": "routeDidChange",
@@ -18596,7 +18596,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 568,
+      "line": 576,
       "description": "Refreshes all currently active routes, doing a full transition.\nIf a route name is provided and refers to a currently active route,\nit will refresh only that route and its descendents.\nReturns a promise that will be resolved once the refresh is complete.\nAll resetController, beforeModel, model, afterModel, redirect, and setupController\nhooks will be called again. You will get new data from the model hook.",
       "itemtype": "method",
       "name": "refresh",
@@ -18618,7 +18618,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 596,
+      "line": 604,
       "description": "Name of the current route.\n\n This property represents the logical name of the route,\n which is dot separated.\n For the following router:\n\n ```app/router.js\n Router.map(function() {\n   this.route('about');\n   this.route('blog', function () {\n     this.route('post', { path: ':post_id' });\n   });\n });\n ```\n\n It will return:\n\n * `index` when you visit `/`\n * `about` when you visit `/about`\n * `blog.index` when you visit `/blog`\n * `blog.post` when you visit `/blog/some-post-id`",
       "itemtype": "property",
       "name": "currentRouteName",
@@ -18630,7 +18630,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 626,
+      "line": 634,
       "description": "Current URL for the application.\n\n  This property represents the URL path for this route.\n  For the following router:\n\n ```app/router.js\n Router.map(function() {\n   this.route('about');\n   this.route('blog', function () {\n     this.route('post', { path: ':post_id' });\n   });\n });\n ```\n\n It will return:\n\n * `/` when you visit `/`\n * `/about` when you visit `/about`\n * `/blog` when you visit `/blog`\n * `/blog/some-post-id` when you visit `/blog/some-post-id`",
       "itemtype": "property",
       "name": "currentURL",
@@ -18642,7 +18642,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 655,
+      "line": 663,
       "description": "The `location` property returns what implementation of the `location` API\nyour application is using, which determines what type of URL is being used.\n\nSee [Location](/ember/release/classes/Location) for more information.\n\nTo force a particular `location` API implementation to be used in your\napplication you can set a location type on your `config/environment`.\nFor example, to set the `history` type:\n\n```config/environment.js\n'use strict';\n\nmodule.exports = function(environment) {\n  let ENV = {\n    modulePrefix: 'router-service',\n    environment,\n    rootURL: '/',\n    locationType: 'history',\n    ...\n  }\n}\n```\n\nThe following location types are available by default:\n`hash`, `history`, `none`.\n\nSee [HashLocation](/ember/release/classes/HashLocation).\nSee [HistoryLocation](/ember/release/classes/HistoryLocation).\nSee [NoneLocation](/ember/release/classes/NoneLocation).",
       "itemtype": "property",
       "name": "location",
@@ -18657,7 +18657,7 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 694,
+      "line": 702,
       "description": "The `rootURL` property represents the URL of the root of\nthe application, '/' by default.\nThis prefix is assumed on all routes defined on this app.\n\nIf you change the `rootURL` in your environment configuration\nlike so:\n\n```config/environment.js\n'use strict';\n\nmodule.exports = function(environment) {\n  let ENV = {\n    modulePrefix: 'router-service',\n    environment,\n    rootURL: '/my-root',\n  …\n  }\n]\n```\n\nThis property will return `/my-root`.",
       "itemtype": "property",
       "name": "rootURL",
@@ -18669,8 +18669,8 @@
     },
     {
       "file": "packages/@ember/routing/router-service.ts",
-      "line": 724,
-      "description": "The `currentRoute` property contains metadata about the current leaf route.\nIt returns a `RouteInfo` object that has information like the route name,\nparams, query params and more.\n\nSee [RouteInfo](/ember/release/classes/RouteInfo) for more info.\n\nThis property is guaranteed to change whenever a route transition\nhappens (even when that transition only changes parameters\nand doesn't change the active route).\n\nUsage example:\n```app/components/header.js\n  import Component from '@glimmer/component';\n  import { service } from '@ember/service';\n  import { notEmpty } from '@ember/object/computed';\n\n  export default class extends Component {\n    @service router;\n\n    @notEmpty('router.currentRoute.child') isChildRoute;\n  });\n```",
+      "line": 732,
+      "description": "The `currentRoute` property contains metadata about the current leaf route.\nIt returns a `RouteInfo` object that has information like the route name,\nparams, query params and more.\n\nSee [RouteInfo](/ember/release/classes/RouteInfo) for more info.\n\nThis property is guaranteed to change whenever a route transition\nhappens (even when that transition only changes parameters\nand doesn't change the active route).\n\nUsage example:\n```app/components/header.gjs\n  import Component from '@glimmer/component';\n  import { service } from '@ember/service';\n  import { notEmpty } from '@ember/object/computed';\n\n  export default class extends Component {\n    @service router;\n\n    @notEmpty('router.currentRoute.child') isChildRoute;\n  });\n```",
       "itemtype": "property",
       "name": "currentRoute",
       "type": "RouteInfo",
@@ -22000,7 +22000,7 @@
     {
       "file": "packages/@glimmer/runtime/lib/helpers/array.ts",
       "line": 8,
-      "description": "Use the `{{array}}` helper to create an array to pass as an option to your\ncomponents.\n\n```handlebars\n<MyComponent @people={{array\n  'Tom Dale'\n  'Yehuda Katz'\n  this.myOtherPerson}}\n/>\n```\n or\n```handlebars\n{{my-component people=(array\n  'Tom Dale'\n  'Yehuda Katz'\n  this.myOtherPerson)\n}}\n```\n\nWould result in an object such as:\n\n```js\n['Tom Dale', 'Yehuda Katz', this.get('myOtherPerson')]\n```\n\nWhere the 3rd item in the array is bound to updates of the `myOtherPerson` property.",
+      "description": "Use the `{{array}}` helper to create an array to pass as an option to your\ncomponents.\n\n```handlebars\n<MyComponent @people={{array\n  'Tom Dale'\n  'Yehuda Katz'\n  this.myOtherPerson}}\n/>\n```\n or\n```handlebars\n{{yield people=(array\n  'Tom Dale'\n  'Yehuda Katz'\n  this.myOtherPerson)\n}}\n```\n\nWould result in an object such as:\n\n```js\n['Tom Dale', 'Yehuda Katz', this.get('myOtherPerson')]\n```\n\nWhere the 3rd item in the array is bound to updates of the `myOtherPerson` property.",
       "itemtype": "method",
       "name": "array",
       "params": [
@@ -22022,7 +22022,7 @@
     {
       "file": "packages/@glimmer/runtime/lib/helpers/concat.ts",
       "line": 18,
-      "description": "Concatenates the given arguments into a string.\n\nExample:\n\n```handlebars\n{{some-component name=(concat firstName \" \" lastName)}}\n\n{{! would pass name=\"<first name value> <last name value>\" to the component}}\n```\n\nor for angle bracket invocation, you actually don't need concat at all.\n\n```handlebars\n<SomeComponent @name=\"{{firstName}} {{lastName}}\" />\n```",
+      "description": "Concatenates the given arguments into a string.\n\nExample:\n\n\n```gjs\nimport { concat } from '@ember/helper';\n\n<template>\n{{yield (concat firstName \" \" lastName)}}\n\n{{! would yield name=\"<first name value> <last name value>\" to the component}}\n</template>\n```\n\nor for angle bracket invocation, you actually don't need concat at all.\n\n```handlebars\n<SomeComponent @name=\"{{firstName}} {{lastName}}\" />\n```",
       "access": "public",
       "tagname": "",
       "itemtype": "method",
@@ -22040,7 +22040,7 @@
     {
       "file": "packages/@glimmer/runtime/lib/helpers/fn.ts",
       "line": 18,
-      "description": "The `fn` helper allows you to ensure a function that you are passing off\nto another component, helper, or modifier has access to arguments that are\navailable in the template.\n\nFor example, if you have an `each` helper looping over a number of items, you\nmay need to pass a function that expects to receive the item as an argument\nto a component invoked within the loop. Here's how you could use the `fn`\nhelper to pass both the function and its arguments together:\n\n  ```app/templates/components/items-listing.hbs\n{{#each @items as |item|}}\n  <DisplayItem @item=item @select={{fn this.handleSelected item}} />\n{{/each}}\n```\n\n```app/components/items-list.js\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class ItemsList extends Component {\n  handleSelected = (item) => {\n    // ...snip...\n  }\n}\n```\n\nIn this case the `display-item` component will receive a normal function\nthat it can invoke. When it invokes the function, the `handleSelected`\nfunction will receive the `item` and any arguments passed, thanks to the\n`fn` helper.\n\nLet's take look at what that means in a couple circumstances:\n\n- When invoked as `this.args.select()` the `handleSelected` function will\n  receive the `item` from the loop as its first and only argument.\n- When invoked as `this.args.select('foo')` the `handleSelected` function\n  will receive the `item` from the loop as its first argument and the\n  string `'foo'` as its second argument.\n\nIn the example above, we used an arrow function to ensure that\n`handleSelected` is properly bound to the `items-list`, but let's explore what\nhappens if we left out the arrow function:\n\n```app/components/items-list.js\nimport Component from '@glimmer/component';\n\nexport default class ItemsList extends Component {\n  handleSelected(item) {\n    // ...snip...\n  }\n}\n```\n\nIn this example, when `handleSelected` is invoked inside the `display-item`\ncomponent, it will **not** have access to the component instance. In other\nwords, it will have no `this` context, so please make sure your functions\nare bound (via an arrow function or other means) before passing into `fn`!\n\nSee also [partial application](https://en.wikipedia.org/wiki/Partial_application).",
+      "description": "The `fn` helper allows you to ensure a function that you are passing off\nto another component, helper, or modifier has access to arguments that are\navailable in the template.\n\nFor example, if you have an `each` helper looping over a number of items, you\nmay need to pass a function that expects to receive the item as an argument\nto a component invoked within the loop. Here's how you could use the `fn`\nhelper to pass both the function and its arguments together:\n\n```app/components/items-listing.gjs\nimport DisplayItem from './display-item';\n  \n<template>\n  {{#each @items as |item|}}\n    <DisplayItem @item=item @select={{fn this.handleSelected item}} />\n  {{/each}}\n</template>\n```\n\n```app/components/items-list.gjs\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class ItemsList extends Component {\n  handleSelected = (item) => {\n    // ...snip...\n  }\n}\n```\n\nIn this case the `DisplayItem` component will receive a normal function\nthat it can invoke. When it invokes the function, the `handleSelected`\nfunction will receive the `item` and any arguments passed, thanks to the\n`fn` helper.\n\nLet's take look at what that means in a couple circumstances:\n\n- When invoked as `this.args.select()` the `handleSelected` function will\n  receive the `item` from the loop as its first and only argument.\n- When invoked as `this.args.select('foo')` the `handleSelected` function\n  will receive the `item` from the loop as its first argument and the\n  string `'foo'` as its second argument.\n\nIn the example above, we used an arrow function to ensure that\n`handleSelected` is properly bound to the `items-list`, but let's explore what\nhappens if we left out the arrow function:\n\n```app/components/items-list.gjs\nimport Component from '@glimmer/component';\n\nexport default class ItemsList extends Component {\n  handleSelected(item) {\n    // ...snip...\n  }\n}\n```\n\nIn this example, when `handleSelected` is invoked inside the `display-item`\ncomponent, it will **not** have access to the component instance. In other\nwords, it will have no `this` context, so please make sure your functions\nare bound (via an arrow function or other means) before passing into `fn`!\n\nSee also [partial application](https://en.wikipedia.org/wiki/Partial_application).\n\n`fn` is built-in and does not require any additional imports.",
       "itemtype": "method",
       "name": "fn",
       "access": "public",
@@ -22051,7 +22051,7 @@
     {
       "file": "packages/@glimmer/runtime/lib/helpers/get.ts",
       "line": 12,
-      "description": "Dynamically look up a property on an object. The second argument to `{{get}}`\nshould have a string value, although it can be bound.\n\nFor example, these two usages are equivalent:\n\n```app/components/developer-detail.js\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class extends Component {\n  @tracked developer = {\n    name: \"Sandi Metz\",\n    language: \"Ruby\"\n  }\n}\n```\n\n```handlebars\n{{this.developer.name}}\n{{get this.developer \"name\"}}\n```\n\nIf there were several facts about a person, the `{{get}}` helper can dynamically\npick one:\n\n```app/templates/application.hbs\n<DeveloperDetail @factName=\"language\" />\n```\n\n```handlebars\n{{get this.developer @factName}}\n```\n\nFor a more complex example, this template would allow the user to switch\nbetween showing the user's height and weight with a click:\n\n```app/components/developer-detail.js\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class extends Component {\n  @tracked developer = {\n    name: \"Sandi Metz\",\n    language: \"Ruby\"\n  }\n\n  @tracked currentFact = 'name'\n\n  showFact = (fact) => {\n    this.currentFact = fact;\n  }\n}\n```\n\n```app/components/developer-detail.js\n{{get this.developer this.currentFact}}\n\n<button {{on 'click' (fn this.showFact \"name\")}}>Show name</button>\n<button {{on 'click' (fn this.showFact \"language\")}}>Show language</button>\n```\n\nThe `{{get}}` helper can also respect mutable values itself. For example:\n\n```app/components/developer-detail.js\n<Input @value={{mut (get this.person this.currentFact)}} />\n\n<button {{on 'click' (fn this.showFact \"name\")}}>Show name</button>\n<button {{on 'click' (fn this.showFact \"language\")}}>Show language</button>\n```\n\nWould allow the user to swap what fact is being displayed, and also edit\nthat fact via a two-way mutable binding.",
+      "description": "Dynamically look up a property on an object. The second argument to `{{get}}`\nshould have a string value, although it can be bound.\n\nFor example, these two usages are equivalent:\n\n```app/components/developer-detail.gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { get } from '@ember/object';\n\nexport default class extends Component {\n  @tracked developer = {\n    name: \"Sandi Metz\",\n    language: \"Ruby\"\n  }\n  \n  <template>\n    {{this.developer.name}}\n    {{get this.developer \"name\"}}\n  </template>\n}\n```\n\nIf there were several facts about a person, the `{{get}}` helper can dynamically\npick one:\n\n```app/templates/application.gjs\n<template>\n  <DeveloperDetail @factName=\"language\" />\n</template>\n```\n\n```handlebars\n{{get this.developer @factName}}\n```\n\nFor a more complex example, this template would allow the user to switch\nbetween showing the user's height and weight with a click:\n\n```app/components/developer-detail.gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { get } from '@ember/object';\n  \nexport default class extends Component {\n  @tracked developer = {\n    name: \"Sandi Metz\",\n    language: \"Ruby\"\n  }\n\n  @tracked currentFact = 'name'\n\n  showFact = (fact) => {\n    this.currentFact = fact;\n  }\n  \n  <template>\n    {{get this.developer this.currentFact}}\n\n    <button {{on 'click' (fn this.showFact \"name\")}}>Show name</button>\n    <button {{on 'click' (fn this.showFact \"language\")}}>Show language</button>\n  </template>\n}\n```",
       "access": "public",
       "tagname": "",
       "itemtype": "method",
@@ -22076,7 +22076,7 @@
     {
       "file": "packages/@glimmer/runtime/lib/helpers/hash.ts",
       "line": 8,
-      "description": "Use the `{{hash}}` helper to create a hash to pass as an option to your\ncomponents. This is specially useful for contextual components where you can\njust yield a hash:\n\n```handlebars\n{{yield (hash\n   name='Sarah'\n   title=office\n)}}\n```\n\nWould result in an object such as:\n\n```js\n{ name: 'Sarah', title: this.get('office') }\n```\n\nWhere the `title` is bound to updates of the `office` property.\n\nNote that the hash is an empty object with no prototype chain, therefore\ncommon methods like `toString` are not available in the resulting hash.\nIf you need to use such a method, you can use the `call` or `apply`\napproach:\n\n```js\nfunction toString(obj) {\n  return Object.prototype.toString.apply(obj);\n}\n```",
+      "description": "Use the `{{hash}}` helper to create a hash to pass as an option to your\ncomponents. This is especially useful for contextual components where you can\njust yield a hash:\n\n```handlebars\n{{yield (hash\n   name='Sarah'\n   title=office\n)}}\n```\n\nWould result in an object such as:\n\n```js\n{ name: 'Sarah', title: this.get('office') }\n```\n\nWhere the `title` is bound to updates of the `office` property.\n\nNote that the hash is an empty object with no prototype chain, therefore\ncommon methods like `toString` are not available in the resulting hash.\nIf you need to use such a method, you can use the `call` or `apply`\napproach:\n\n```js\nfunction toString(obj) {\n  return Object.prototype.toString.apply(obj);\n}\n```",
       "itemtype": "method",
       "name": "hash",
       "params": [
@@ -22119,7 +22119,7 @@
     {
       "file": "packages/@glimmer/runtime/lib/modifiers/on.ts",
       "line": 249,
-      "description": "The `{{on}}` modifier lets you easily add event listeners (it uses\n[EventTarget.addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\ninternally).\n\nFor example, if you'd like to run a function on your component when a `<button>`\nin the components template is clicked you might do something like:\n\n```app/components/like-post.hbs\n<button {{on 'click' this.saveLike}}>Like this post!</button>\n```\n\n```app/components/like-post.js\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class LikePostComponent extends Component {\n  saveLike = () => {\n    // someone likes your post!\n    // better send a request off to your server...\n  }\n}\n```\n\n### Arguments\n\n`{{on}}` accepts two positional arguments, and a few named arguments.\n\nThe positional arguments are:\n\n- `event` -- the name to use when calling `addEventListener`\n- `callback` -- the function to be passed to `addEventListener`\n\nThe named arguments are:\n\n- capture -- a `true` value indicates that events of this type will be dispatched\n  to the registered listener before being dispatched to any EventTarget beneath it\n  in the DOM tree.\n- once -- indicates that the listener should be invoked at most once after being\n  added. If true, the listener would be automatically removed when invoked.\n- passive -- if `true`, indicates that the function specified by listener will never\n  call preventDefault(). If a passive listener does call preventDefault(), the user\n  agent will do nothing other than generate a console warning. See\n  [Improving scrolling performance with passive listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners)\n  to learn more.\n\nThe callback function passed to `{{on}}` will receive any arguments that are passed\nto the event handler. Most commonly this would be the `event` itself.\n\nIf you would like to pass additional arguments to the function you should use\nthe `{{fn}}` helper.\n\nFor example, in our example case above if you'd like to pass in the post that\nwas being liked when the button is clicked you could do something like:\n\n```app/components/like-post.hbs\n<button {{on 'click' (fn this.saveLike @post)}}>Like this post!</button>\n```\n\nIn this case, the `saveLike` function will receive two arguments: the click event\nand the value of `@post`.\n\n### Function Context\n\nIn the example above, we used an arrow function to ensure that `likePost` is\nproperly bound to the `items-list`, but let's explore what happens if we\nleft out the arrow function:\n\n```app/components/like-post.js\nimport Component from '@glimmer/component';\n\nexport default class LikePostComponent extends Component {\n  saveLike() {\n    // ...snip...\n  }\n}\n```\n\nIn this example, when the button is clicked `saveLike` will be invoked,\nit will **not** have access to the component instance. In other\nwords, it will have no `this` context, so please make sure your functions\nare bound (via an arrow function or other means) before passing into `on`!",
+      "description": "The `{{on}}` modifier lets you easily add event listeners (it uses\n[EventTarget.addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\ninternally).\n\nFor example, if you'd like to run a function on your component when a `<button>`\nin the components template is clicked you might do something like:\n\n```app/components/like-post.gjs\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class LikePostComponent extends Component {\n  saveLike = () => {\n    // someone likes your post!\n    // better send a request off to your server...\n  }\n  \n  <template>\n    <button {{on 'click' this.saveLike}}>Like this post!</button>\n  </template>\n}\n```\n\n### Arguments\n\n`{{on}}` accepts two positional arguments, and a few named arguments.\n\nThe positional arguments are:\n\n- `event` -- the name to use when calling `addEventListener`\n- `callback` -- the function to be passed to `addEventListener`\n\nThe named arguments are:\n\n- capture -- a `true` value indicates that events of this type will be dispatched\n  to the registered listener before being dispatched to any EventTarget beneath it\n  in the DOM tree.\n- once -- indicates that the listener should be invoked at most once after being\n  added. If true, the listener would be automatically removed when invoked.\n- passive -- if `true`, indicates that the function specified by listener will never\n  call preventDefault(). If a passive listener does call preventDefault(), the user\n  agent will do nothing other than generate a console warning. See\n  [Improving scrolling performance with passive listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners)\n  to learn more.\n\nThe callback function passed to `{{on}}` will receive any arguments that are passed\nto the event handler. Most commonly this would be the `event` itself.\n\nIf you would like to pass additional arguments to the function you should use\nthe `{{fn}}` helper.\n\nFor example, in our example case above if you'd like to pass in the post that\nwas being liked when the button is clicked you could do something like:\n\n```app/components/like-post.hbs\n<button {{on 'click' (fn this.saveLike @post)}}>Like this post!</button>\n```\n\nIn this case, the `saveLike` function will receive two arguments: the click event\nand the value of `@post`.\n\n### Function Context\n\nIn the example above, we used an arrow function to ensure that `likePost` is\nproperly bound to the `items-list`, but let's explore what happens if we\nleft out the arrow function:\n\n```app/components/like-post.gjs\nimport Component from '@glimmer/component';\n\nexport default class LikePostComponent extends Component {\n  saveLike() {\n    // ...snip...\n  }\n}\n```\n\nIn this example, when the button is clicked `saveLike` will be invoked,\nit will **not** have access to the component instance. In other\nwords, it will have no `this` context, so please make sure your functions\nare bound (via an arrow function or other means) before passing into `on`!",
       "itemtype": "method",
       "name": "on",
       "access": "public",
@@ -22827,7 +22827,7 @@
     {
       "file": "packages/@glimmer/syntax/dist/es/index.js",
       "line": 9480,
-      "description": "Parses and traverses a given handlebars html template to extract all template locals\nreferenced that could possible come from the parent scope. Can exclude known keywords\noptionally.",
+      "description": "Parses and traverses a given template to extract all template locals\nreferenced that could possible come from the parent scope. Can exclude known keywords\noptionally.",
       "class": "@glimmer/tracking",
       "module": "@glimmer/component"
     },
@@ -24222,7 +24222,7 @@
     {
       "file": "packages/@glimmer/syntax/lib/get-template-locals.ts",
       "line": 84,
-      "description": "Parses and traverses a given handlebars html template to extract all template locals\nreferenced that could possible come from the parent scope. Can exclude known keywords\noptionally.",
+      "description": "Parses and traverses a given template to extract all template locals\nreferenced that could possible come from the parent scope. Can exclude known keywords\noptionally.",
       "class": "@glimmer/tracking",
       "module": "@glimmer/component"
     },
@@ -24248,7 +24248,7 @@
     {
       "file": "packages/@glimmer/tracking/index.ts",
       "line": 17,
-      "description": "Marks a property as tracked. By default, values that are rendered in Ember app\ntemplates are _static_, meaning that updates to them won't cause the\napplication to rerender. Marking a property as tracked means that when that\nproperty changes, any templates that used that property, directly or\nindirectly, will rerender. For instance, consider this component:\n\n```handlebars\n<div>Count: {{this.count}}</div>\n<div>Times Ten: {{this.timesTen}}</div>\n<div>\n  <button {{on \"click\" this.plusOne}}>\n    Plus One\n  </button>\n</div>\n```\n\n```javascript\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport default class CounterComponent extends Component {\n  @tracked count = 0;\n\n  get timesTen() {\n    return this.count * 10;\n  }\n\n  @action\n  plusOne() {\n    this.count += 1;\n  }\n}\n```\n\nBoth the `{{this.count}}` and the `{{this.timesTen}}` properties in the\ntemplate will update whenever the button is clicked. Any tracked properties\nthat are used in any way to calculate a value that is used in the template\nwill cause a rerender when updated - this includes through method calls and\nother means:\n\n```javascript\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nclass Entry {\n  @tracked name;\n  @tracked phoneNumber;\n\n  constructor(name, phoneNumber) {\n    this.name = name;\n    this.phoneNumber = phoneNumber;\n  }\n}\n\nexport default class PhoneBookComponent extends Component {\n  entries = [\n    new Entry('Pizza Palace', 5551234),\n    new Entry('1st Street Cleaners', 5554321),\n    new Entry('Plants R Us', 5552468),\n  ];\n\n  // Any usage of this property will update whenever any of the names in the\n  // entries arrays are updated\n  get names() {\n    return this.entries.map(e => e.name);\n  }\n\n  // Any usage of this property will update whenever any of the numbers in the\n  // entries arrays are updated\n  get numbers() {\n    return this.getFormattedNumbers();\n  }\n\n  getFormattedNumbers() {\n    return this.entries\n      .map(e => e.phoneNumber)\n      .map(number => {\n        let numberString = '' + number;\n\n        return numberString.slice(0, 3) + '-' + numberString.slice(3);\n      });\n  }\n}\n```\n\nIt's important to note that setting tracked properties will always trigger an\nupdate, even if the property is set to the same value as it was before.\n\n```js\nlet entry = new Entry('Pizza Palace', 5551234);\n// if entry was used when rendering, this would cause a rerender, even though\n// the name is being set to the same value as it was before\nentry.name = entry.name;\n```\n\n`tracked` can also be used with the classic Ember object model in a similar\nmanner to classic computed properties:\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nconst Entry = EmberObject.extend({\n  name: tracked(),\n  phoneNumber: tracked()\n});\n```\n\nOften this is unnecessary, but to ensure robust auto-tracking behavior it is\nadvisable to mark tracked state appropriately wherever possible.\nThis form of `tracked` also accepts an optional configuration object\ncontaining either an initial `value` or an `initializer` function (but not\nboth).\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nconst Entry = EmberObject.extend({\n  name: tracked({ value: 'Zoey' }),\n  favoriteSongs: tracked({\n    initializer: () => ['Raspberry Beret', 'Time After Time']\n  })\n});\n```",
+      "description": "Marks a property as tracked. By default, values that are rendered in Ember app\ntemplates are _static_, meaning that updates to them won't cause the\napplication to rerender. Marking a property as tracked means that when that\nproperty changes, any templates that used that property, directly or\nindirectly, will rerender. For instance, consider this component:\n\n```gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nexport default class CounterComponent extends Component {\n  @tracked count = 0;\n\n  get timesTen() {\n    return this.count * 10;\n  }\n\n  @action\n  plusOne() {\n    this.count += 1;\n  }\n  \n  <template>\n    <div>Count: {{this.count}}</div>\n    <div>Times Ten: {{this.timesTen}}</div>\n    <div>\n      <button {{on \"click\" this.plusOne}}>\n        Plus One\n      </button>\n    </div>\n  </template>\n}\n```\n\nBoth the `{{this.count}}` and the `{{this.timesTen}}` properties in the\ntemplate will update whenever the button is clicked. Any tracked properties\nthat are used in any way to calculate a value that is used in the template\nwill cause a rerender when updated - this includes through method calls and\nother means:\n\n```gjs\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nclass Entry {\n  @tracked name;\n  @tracked phoneNumber;\n\n  constructor(name, phoneNumber) {\n    this.name = name;\n    this.phoneNumber = phoneNumber;\n  }\n}\n\nexport default class PhoneBookComponent extends Component {\n  entries = [\n    new Entry('Pizza Palace', 5551234),\n    new Entry('1st Street Cleaners', 5554321),\n    new Entry('Plants R Us', 5552468),\n  ];\n\n  // Any usage of this property will update whenever any of the names in the\n  // entries arrays are updated\n  get names() {\n    return this.entries.map(e => e.name);\n  }\n\n  // Any usage of this property will update whenever any of the numbers in the\n  // entries arrays are updated\n  get numbers() {\n    return this.getFormattedNumbers();\n  }\n\n  getFormattedNumbers() {\n    return this.entries\n      .map(e => e.phoneNumber)\n      .map(number => {\n        let numberString = '' + number;\n\n        return numberString.slice(0, 3) + '-' + numberString.slice(3);\n      });\n  }\n}\n```\n\nIt's important to note that setting tracked properties will always trigger an\nupdate, even if the property is set to the same value as it was before.\n\n```js\nlet entry = new Entry('Pizza Palace', 5551234);\n// if entry was used when rendering, this would cause a rerender, even though\n// the name is being set to the same value as it was before\nentry.name = entry.name;\n```\n\n`tracked` can also be used with the classic Ember object model in a similar\nmanner to classic computed properties:\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nconst Entry = EmberObject.extend({\n  name: tracked(),\n  phoneNumber: tracked()\n});\n```\n\nOften this is unnecessary, but to ensure robust auto-tracking behavior it is\nadvisable to mark tracked state appropriately wherever possible.\nThis form of `tracked` also accepts an optional configuration object\ncontaining either an initial `value` or an `initializer` function (but not\nboth).\n\n```javascript\nimport EmberObject from '@ember/object';\nimport { tracked } from '@glimmer/tracking';\n\nconst Entry = EmberObject.extend({\n  name: tracked({ value: 'Zoey' }),\n  favoriteSongs: tracked({\n    initializer: () => ['Raspberry Beret', 'Time After Time']\n  })\n});\n```",
       "itemtype": "method",
       "name": "tracked",
       "static": 1,
@@ -24548,7 +24548,7 @@
     },
     {
       "message": "unknown tag: note",
-      "line": " packages/@ember/-internals/glimmer/lib/helper.ts:313"
+      "line": " packages/@ember/-internals/glimmer/lib/helper.ts:325"
     },
     {
       "message": "unknown tag: decorator",
@@ -24736,11 +24736,11 @@
     },
     {
       "message": "Missing item type\nThe HTML class attribute.",
-      "line": " packages/@ember/-internals/glimmer/lib/components/input.ts:167"
+      "line": " packages/@ember/-internals/glimmer/lib/components/input.ts:171"
     },
     {
       "message": "Missing item type\nThe HTML type attribute.",
-      "line": " packages/@ember/-internals/glimmer/lib/components/input.ts:178"
+      "line": " packages/@ember/-internals/glimmer/lib/components/input.ts:182"
     },
     {
       "message": "Missing item type\nThe default HTML id attribute. We don't really _need_ one, this is just\nadded for compatibility as it's hard to tell if people rely on it being\npresent, and it doens't really hurt.\n\nHowever, don't rely on this internally, like passing it to `getElementId`.\nThis can be (and often is) overriden by passing an `id` attribute on the\ninvocation, which shadows this default id via `...attributes`.",
@@ -24792,11 +24792,11 @@
     },
     {
       "message": "Missing item type",
-      "line": " packages/@ember/-internals/glimmer/lib/helper.ts:123"
+      "line": " packages/@ember/-internals/glimmer/lib/helper.ts:135"
     },
     {
       "message": "Missing item type\nThe type of a function-based helper.",
-      "line": " packages/@ember/-internals/glimmer/lib/helper.ts:313"
+      "line": " packages/@ember/-internals/glimmer/lib/helper.ts:325"
     },
     {
       "message": "Missing item type\nDestroys the render tree and removes all rendered content from the element rendered into",
@@ -25144,47 +25144,47 @@
     },
     {
       "message": "Missing item type\nThe final definition of NativeArray removes all native methods. This is the list of removed methods\nwhen run in Chrome 106.",
-      "line": " packages/@ember/array/index.ts:1911"
+      "line": " packages/@ember/array/index.ts:1915"
     },
     {
       "message": "Missing item type\nThese additional items must be redefined since `Omit` causes methods that return `this` to return the\ntype at the time of the Omit.",
-      "line": " packages/@ember/array/index.ts:1928"
+      "line": " packages/@ember/array/index.ts:1932"
     },
     {
       "message": "Missing item type\nRemove all elements from the array. This is useful if you\nwant to reuse an existing array without having to recreate it.",
-      "line": " packages/@ember/array/index.ts:1952"
+      "line": " packages/@ember/array/index.ts:1956"
     },
     {
       "message": "Missing item type\nThis will use the primitive `replace()` method to insert an object at the\nspecified index.",
-      "line": " packages/@ember/array/index.ts:1957"
+      "line": " packages/@ember/array/index.ts:1961"
     },
     {
       "message": "Missing item type\nRemove an object at the specified index using the `replace()` primitive\nmethod. You can pass either a single index, or a start and a length.",
-      "line": " packages/@ember/array/index.ts:1962"
+      "line": " packages/@ember/array/index.ts:1966"
     },
     {
       "message": "Missing item type\nAdd the objects in the passed numerable to the end of the array. Defers\nnotifying observers of the change until all objects are added.",
-      "line": " packages/@ember/array/index.ts:1967"
+      "line": " packages/@ember/array/index.ts:1971"
     },
     {
       "message": "Missing item type\nAdds the named objects to the beginning of the array. Defers notifying\nobservers until all objects have been added.",
-      "line": " packages/@ember/array/index.ts:1972"
+      "line": " packages/@ember/array/index.ts:1976"
     },
     {
       "message": "Missing item type\nReverse objects in the array. Works just like `reverse()` but it is\nKVO-compliant.",
-      "line": " packages/@ember/array/index.ts:1977"
+      "line": " packages/@ember/array/index.ts:1981"
     },
     {
       "message": "Missing item type\nReplace all the receiver's content with content of the argument.\nIf argument is an empty array receiver will be cleared.",
-      "line": " packages/@ember/array/index.ts:1982"
+      "line": " packages/@ember/array/index.ts:1986"
     },
     {
       "message": "Missing item type\nRemoves each object in the passed array from the receiver.",
-      "line": " packages/@ember/array/index.ts:2004"
+      "line": " packages/@ember/array/index.ts:2008"
     },
     {
       "message": "Missing item type\nAdds each object in the passed enumerable to the receiver.",
-      "line": " packages/@ember/array/index.ts:2025"
+      "line": " packages/@ember/array/index.ts:2029"
     },
     {
       "message": "Missing item type",
@@ -25255,28 +25255,28 @@
       "line": " packages/@ember/engine/instance.ts:132"
     },
     {
-      "message": "Missing item type\nUsing the `{{hash}}` helper, you can pass objects directly from the template\nas an argument to your components.\n\n```\nimport { hash } from '@ember/helper';\n\n<template>\n  {{#each-in (hash givenName='Jen' familyName='Weber') as |key value|}}\n    <p>{{key}}: {{value}}</p>\n  {{/each-in}}\n</template>\n```\n\n**NOTE:** this example uses the experimental `<template>` feature, which is\nthe only place you need to import `hash` to use it (it is a built-in when\nwriting standalone `.hbs` files).",
+      "message": "Missing item type\nUsing the `{{hash}}` helper, you can pass objects directly from the template\nas an argument to your components.\n\n```\n<template>\n  {{#each-in (hash givenName='Jen' familyName='Weber') as |key value|}}\n    <p>{{key}}: {{value}}</p>\n  {{/each-in}}\n</template>\n```",
       "line": " packages/@ember/helper/index.ts:346"
     },
     {
-      "message": "Missing item type\nUsing the `{{array}}` helper, you can pass arrays directly from the template\nas an argument to your components.\n\n```js\nimport { array } from '@ember/helper';\n\n<template>\n  <ul>\n  {{#each (array 'Tom Dale' 'Yehuda Katz' @anotherPerson) as |person|}}\n    <li>{{person}}</li>\n  {{/each}}\n  </ul>\n</template>\n\n**NOTE:** this example uses the experimental `<template>` feature, which is\nthe only place you need to import `array` to use it (it is a built-in when\nwriting standalone `.hbs` files).\n```",
-      "line": " packages/@ember/helper/index.ts:367"
+      "message": "Missing item type\nUsing the `{{array}}` helper, you can pass arrays directly from the template\nas an argument to your components.\n\n```js\n\n<template>\n  <ul>\n  {{#each (array 'Tom Dale' 'Yehuda Katz' @anotherPerson) as |person|}}\n    <li>{{person}}</li>\n  {{/each}}\n  </ul>\n</template>\n```",
+      "line": " packages/@ember/helper/index.ts:361"
     },
     {
-      "message": "Missing item type\nThe `{{concat}}` helper makes it easy to dynamically send a number of\nparameters to a component or helper as a single parameter in the format of a\nconcatenated string.\n\nFor example:\n\n```js\nimport { concat } from '@ember/helper';\n\n<template>\n  {{get @foo (concat \"item\" @index)}}\n</template>\n```\n\nThis will display the result of `@foo.item1` when `index` is `1`, and\n`this.foo.item2` when `index` is `2`, etc.\n\n**NOTE:** this example uses the experimental `<template>` feature, which is\nthe only place you need to import `concat` to use it (it is a built-in when\nwriting standalone `.hbs` files).",
-      "line": " packages/@ember/helper/index.ts:390"
+      "message": "Missing item type\nThe `{{concat}}` helper makes it easy to dynamically send a number of\nparameters to a component or helper as a single parameter in the format of a\nconcatenated string.\n\nFor example:\n\n```js\nimport { concat } from '@ember/helper';\n\n<template>\n  {{get @foo (concat \"item\" @index)}}\n</template>\n```\n\nThis will display the result of `@foo.item1` when `index` is `1`, and\n`this.foo.item2` when `index` is `2`, etc.",
+      "line": " packages/@ember/helper/index.ts:379"
     },
     {
-      "message": "Missing item type\nThe `{{get}}` helper makes it easy to dynamically look up a property on an\nobject or an element in an array. The second argument to `{{get}}` can be a\nstring or a number, depending on the object being accessed.\n\nTo access a property on an object with a string key:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @someObject \"objectKey\"}}\n</template>\n```\n\nTo access the first element in an array:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @someArray 0}}\n</template>\n```\n\nTo access a property on an object with a dynamic key:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @address @field}}\n</template>\n```\n\nThis will display the result of `@foo.item1` when `index` is `1`, and\n`this.foo.item2` when `index` is `2`, etc.\n\n**NOTE:** this example uses the experimental `<template>` feature, which is\nthe only place you need to import `concat` to use it (it is a built-in when\nwriting standalone `.hbs` files).",
-      "line": " packages/@ember/helper/index.ts:415"
+      "message": "Missing item type\nThe `{{get}}` helper makes it easy to dynamically look up a property on an\nobject or an element in an array. The second argument to `{{get}}` can be a\nstring or a number, depending on the object being accessed.\n\nTo access a property on an object with a string key:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @someObject \"objectKey\"}}\n</template>\n```\n\nTo access the first element in an array:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @someArray 0}}\n</template>\n```\n\nTo access a property on an object with a dynamic key:\n\n```js\nimport { get } from '@ember/helper';\n\n<template>\n  {{get @address @field}}\n</template>\n```\n\nThis will display the result of `@foo.item1` when `index` is `1`, and\n`this.foo.item2` when `index` is `2`, etc.",
+      "line": " packages/@ember/helper/index.ts:400"
     },
     {
       "message": "Missing item type\n`{{fn}}` is a helper that receives a function and some arguments, and returns\na new function that combines. This allows you to pass parameters along to\nfunctions in your templates:\n\n```js\nimport { fn } from '@ember/helper';\n\nfunction showAlert(message) {\n  alert(`The message is: '${message}'`);\n}\n\n<template>\n  <button type=\"button\" {{on \"click\" (fn showAlert \"Hello!\")}}>\n    Click me!\n  </button>\n</template>\n```",
-      "line": " packages/@ember/helper/index.ts:460"
+      "line": " packages/@ember/helper/index.ts:441"
     },
     {
       "message": "Missing item type\nUse the {{uniqueId}} helper to generate a unique ID string suitable for use as\nan ID attribute in the DOM.\n\nEach invocation of {{uniqueId}} will return a new, unique ID string.\nYou can use the `let` helper to create an ID that can be reused within a template.\n\n```js\nimport { uniqueId } from '@ember/helper';\n\n<template>\n  {{#let (uniqueId) as |emailId|}}\n    <label for={{emailId}}>Email address</label>\n    <input id={{emailId}} type=\"email\" />\n  {{/let}}\n</template>\n```",
-      "line": " packages/@ember/helper/index.ts:597"
+      "line": " packages/@ember/helper/index.ts:578"
     },
     {
       "message": "Missing item type",
@@ -26639,7 +26639,7 @@
       "line": " packages/@glimmer/syntax/dist/es/index.js:9467"
     },
     {
-      "message": "Missing item type\nParses and traverses a given handlebars html template to extract all template locals\nreferenced that could possible come from the parent scope. Can exclude known keywords\noptionally.",
+      "message": "Missing item type\nParses and traverses a given template to extract all template locals\nreferenced that could possible come from the parent scope. Can exclude known keywords\noptionally.",
       "line": " packages/@glimmer/syntax/dist/es/index.js:9480"
     },
     {
@@ -27411,7 +27411,7 @@
       "line": " packages/@glimmer/syntax/lib/get-template-locals.ts:65"
     },
     {
-      "message": "Missing item type\nParses and traverses a given handlebars html template to extract all template locals\nreferenced that could possible come from the parent scope. Can exclude known keywords\noptionally.",
+      "message": "Missing item type\nParses and traverses a given template to extract all template locals\nreferenced that could possible come from the parent scope. Can exclude known keywords\noptionally.",
       "line": " packages/@glimmer/syntax/lib/get-template-locals.ts:84"
     },
     {