From 952f145d34c94ec5b45b1c51a11855fa3ba19e7a Mon Sep 17 00:00:00 2001
From: Josemar Luedke <jluedke@underline.com>
Date: Fri, 25 Sep 2026 10:59:58 -0700
Subject: [PATCH 1/4] refactor(forms): replace get() from @ember/object with
 getPath

RFC 1234 deprecates the EmberObject object model. The standalone get()
function is not in its table, but it is the likeliest next target.

- getConfigOption: keys are flat, so plain property access is enough.
- Field#fieldValue: needs dotted paths, so it now uses a small getPath
  helper that reads own properties only and refuses __proto__,
  constructor and prototype segments, since field names can come from
  untrusted schemas. The unsafe-key list moves to -private/unsafe-keys
  so nested-data and getPath share it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/frontile/src/-private/get-config.ts  |  3 +-
 packages/frontile/src/-private/unsafe-keys.ts | 30 ++++++++++
 .../frontile/src/components/forms/field.gts   |  6 +-
 packages/frontile/src/utils/get-path.ts       | 28 +++++++++
 packages/frontile/src/utils/nested-data.ts    | 33 +---------
 .../tests/unit/forms/utils/get-path-test.ts   | 60 +++++++++++++++++++
 6 files changed, 124 insertions(+), 36 deletions(-)
 create mode 100644 packages/frontile/src/-private/unsafe-keys.ts
 create mode 100644 packages/frontile/src/utils/get-path.ts
 create mode 100644 test-app/tests/unit/forms/utils/get-path-test.ts

diff --git a/packages/frontile/src/-private/get-config.ts b/packages/frontile/src/-private/get-config.ts
index 1afd488e6..6382161b8 100644
--- a/packages/frontile/src/-private/get-config.ts
+++ b/packages/frontile/src/-private/get-config.ts
@@ -1,4 +1,3 @@
-import { get } from '@ember/object';
 import type { DefaultConfig } from './types';
 
 export function getConfigOption<T extends keyof DefaultConfig>(
@@ -6,7 +5,7 @@ export function getConfigOption<T extends keyof DefaultConfig>(
   key: T,
   defaultValue: NonNullable<DefaultConfig[T]>
 ): NonNullable<DefaultConfig[T]> {
-  const value = get(config, key);
+  const value = config[key];
 
   if (value === undefined) {
     return defaultValue;
diff --git a/packages/frontile/src/-private/unsafe-keys.ts b/packages/frontile/src/-private/unsafe-keys.ts
new file mode 100644
index 000000000..f26c9c164
--- /dev/null
+++ b/packages/frontile/src/-private/unsafe-keys.ts
@@ -0,0 +1,30 @@
+/**
+ * Path segments that are refused as object keys.
+ *
+ * Field names come from the `name` attribute of the form's controls, which an
+ * app may render from a server-supplied schema, a CMS, or URL state — so they
+ * are untrusted input.
+ *
+ * `__proto__` is the real vector: `isPlainObject(Object.prototype)` is `true`,
+ * so when `unflattenData`'s walk reached a `__proto__` segment it accepted
+ * `Object.prototype` as an already-existing nested object instead of creating a
+ * fresh one, and the final assignment wrote onto every object in the
+ * application.
+ *
+ * `constructor` and `prototype` do not reach `Object.prototype` through that
+ * walk as it is written — `current['constructor']` is a function, which
+ * `isPlainObject` rejects, so the walk shadows it with a fresh own key. They
+ * are refused anyway, as defense in depth: it keeps form data from shadowing
+ * those names, and it means a later change to the walk (or an intermediate that
+ * is a plain object with a `constructor` of its own) cannot quietly turn them
+ * into live vectors.
+ */
+const UNSAFE_KEYS = ['__proto__', 'constructor', 'prototype'];
+
+/**
+ * Checks a single path segment. Callers refuse the whole entry rather than
+ * substituting a safe key, so no partially-built path is left behind.
+ */
+export function isUnsafeKey(key: string): boolean {
+  return UNSAFE_KEYS.includes(key);
+}
diff --git a/packages/frontile/src/components/forms/field.gts b/packages/frontile/src/components/forms/field.gts
index 3992c0592..a5e097024 100644
--- a/packages/frontile/src/components/forms/field.gts
+++ b/packages/frontile/src/components/forms/field.gts
@@ -1,7 +1,8 @@
 import Component from '@glimmer/component';
 import { hash } from '@ember/helper';
-import { action, get } from '@ember/object';
+import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
+import { getPath } from '../../utils/get-path';
 import Checkbox from './checkbox';
 import CheckboxGroup from './checkbox-group';
 import DateInput from './date-input';
@@ -159,12 +160,11 @@ class Field<
   /**
    * Returns the current value for the field from formData.
    * Supports both flat and dotted field names (e.g., 'email' or 'profile.email').
-   * Uses Ember's get() which handles both flat keys and dotted paths.
    */
   get fieldValue() {
     if (!this.args.formData) return undefined;
 
-    return get(this.args.formData, this.args.name);
+    return getPath(this.args.formData, this.args.name);
   }
 
   /**
diff --git a/packages/frontile/src/utils/get-path.ts b/packages/frontile/src/utils/get-path.ts
new file mode 100644
index 000000000..9d2808758
--- /dev/null
+++ b/packages/frontile/src/utils/get-path.ts
@@ -0,0 +1,28 @@
+import { isUnsafeKey } from '../-private/unsafe-keys';
+
+/**
+ * Reads a dotted path (`'profile.email'`) from plain data, returning
+ * `undefined` as soon as a segment is missing or lands on a non-object.
+ *
+ * Replaces `get` from `@ember/object` for form data. Only own properties are
+ * read, and unsafe segments (`__proto__`, `constructor`, `prototype`) are
+ * refused, because field names can come from untrusted schemas.
+ */
+export function getPath(data: unknown, path: string): unknown {
+  let current: unknown = data;
+
+  for (const key of path.split('.')) {
+    if (
+      current === null ||
+      typeof current !== 'object' ||
+      isUnsafeKey(key) ||
+      !Object.prototype.hasOwnProperty.call(current, key)
+    ) {
+      return undefined;
+    }
+
+    current = (current as Record<string, unknown>)[key];
+  }
+
+  return current;
+}
diff --git a/packages/frontile/src/utils/nested-data.ts b/packages/frontile/src/utils/nested-data.ts
index 85a4529e3..bac448666 100644
--- a/packages/frontile/src/utils/nested-data.ts
+++ b/packages/frontile/src/utils/nested-data.ts
@@ -3,6 +3,8 @@
  * These functions convert between nested objects and flat dotted-path notation.
  */
 
+import { isUnsafeKey } from '../-private/unsafe-keys';
+
 /**
  * `File` and `FileList` are browser globals. `FileList` in particular has no
  * counterpart in Node, so a bare `value instanceof FileList` is a hard
@@ -28,37 +30,6 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   );
 }
 
-/**
- * Path segments that are refused as object keys.
- *
- * Field names come from the `name` attribute of the form's controls, which an
- * app may render from a server-supplied schema, a CMS, or URL state — so they
- * are untrusted input.
- *
- * `__proto__` is the real vector: `isPlainObject(Object.prototype)` is `true`,
- * so when the walk below reached a `__proto__` segment it accepted
- * `Object.prototype` as an already-existing nested object instead of creating a
- * fresh one, and the final assignment wrote onto every object in the
- * application.
- *
- * `constructor` and `prototype` do not reach `Object.prototype` through the
- * walk as it is written — `current['constructor']` is a function, which
- * `isPlainObject` rejects, so the walk shadows it with a fresh own key. They
- * are refused anyway, as defense in depth: it keeps form data from shadowing
- * those names, and it means a later change to the walk (or an intermediate that
- * is a plain object with a `constructor` of its own) cannot quietly turn them
- * into live vectors.
- */
-const UNSAFE_KEYS = ['__proto__', 'constructor', 'prototype'];
-
-/**
- * Checks a single path segment. Callers refuse the whole entry rather than
- * substituting a safe key, so no partially-built path is left behind.
- */
-function isUnsafeKey(key: string): boolean {
-  return UNSAFE_KEYS.includes(key);
-}
-
 /**
  * Checks whether a dotted path is safe to materialize. A single unsafe segment
  * anywhere in the path poisons the whole path, so the entry is refused wholesale
diff --git a/test-app/tests/unit/forms/utils/get-path-test.ts b/test-app/tests/unit/forms/utils/get-path-test.ts
new file mode 100644
index 000000000..7748c354d
--- /dev/null
+++ b/test-app/tests/unit/forms/utils/get-path-test.ts
@@ -0,0 +1,60 @@
+import { module, test } from 'qunit';
+import { getPath } from 'frontile/utils/get-path';
+
+module('Unit | Forms | Utils | getPath', function () {
+  test('reads a flat key', function (assert) {
+    assert.strictEqual(
+      getPath({ email: 'a@example.com' }, 'email'),
+      'a@example.com'
+    );
+  });
+
+  test('reads a dotted path through nested objects', function (assert) {
+    const data = { user: { profile: { email: 'a@example.com' } } };
+
+    assert.strictEqual(getPath(data, 'user.profile.email'), 'a@example.com');
+    assert.deepEqual(getPath(data, 'user.profile'), { email: 'a@example.com' });
+  });
+
+  test('returns falsy leaf values as-is', function (assert) {
+    const data = { a: { zero: 0, off: false, empty: '', nothing: null } };
+
+    assert.strictEqual(getPath(data, 'a.zero'), 0);
+    assert.false(getPath(data, 'a.off'));
+    assert.strictEqual(getPath(data, 'a.empty'), '');
+    assert.strictEqual(getPath(data, 'a.nothing'), null);
+  });
+
+  test('returns undefined for a missing key or intermediate', function (assert) {
+    const data = { user: { name: 'Ada' } };
+
+    assert.strictEqual(getPath(data, 'missing'), undefined);
+    assert.strictEqual(getPath(data, 'user.missing'), undefined);
+    assert.strictEqual(getPath(data, 'missing.deeper.still'), undefined);
+  });
+
+  test('returns undefined when an intermediate is null or a primitive', function (assert) {
+    const data = { user: null, count: 3 } as Record<string, unknown>;
+
+    assert.strictEqual(getPath(data, 'user.name'), undefined);
+    assert.strictEqual(getPath(data, 'count.toFixed'), undefined);
+  });
+
+  test('reads array indices', function (assert) {
+    assert.strictEqual(getPath({ tags: ['a', 'b'] }, 'tags.1'), 'b');
+  });
+
+  test('refuses unsafe segments instead of reaching the prototype', function (assert) {
+    const data = { user: { name: 'Ada' } };
+
+    assert.strictEqual(getPath(data, '__proto__'), undefined);
+    assert.strictEqual(getPath(data, 'user.__proto__'), undefined);
+    assert.strictEqual(getPath(data, 'constructor'), undefined);
+    assert.strictEqual(getPath(data, 'user.constructor.prototype'), undefined);
+  });
+
+  test('does not read inherited properties', function (assert) {
+    assert.strictEqual(getPath({}, 'toString'), undefined);
+    assert.strictEqual(getPath({ a: {} }, 'a.hasOwnProperty'), undefined);
+  });
+});

From a72362caf78bb7c6210f0c8db0c1111af9267f80 Mon Sep 17 00:00:00 2001
From: Josemar Luedke <jluedke@underline.com>
Date: Fri, 25 Sep 2026 11:04:18 -0700
Subject: [PATCH 2/4] refactor: replace @action with arrow-function class
 fields in packages

Follows RFC 1045, which stops teaching @action in favour of arrow
functions assigned to class fields. The co-located component docs are
converted too, because Docfy renders their code fences as live demos and
they are what consumers copy.

No action is overridden through super, and no class-field initializer
reads an action declared below it, so the conversion is behaviour-
preserving; changeset-form's validate overrides stay working because
base and subclasses are both fields.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/changeset-form/fields/base.ts  |   6 +-
 .../changeset-form/fields/checkbox-group.gts  |   9 +-
 .../changeset-form/fields/checkbox.gts        |   9 +-
 .../changeset-form/fields/input.gts           |   5 +-
 .../changeset-form/fields/radio-group.gts     |   6 +-
 .../changeset-form/fields/radio.gts           |   6 +-
 .../changeset-form/fields/select.gts          |  21 ++-
 .../changeset-form/fields/textarea.gts        |   5 +-
 .../src/components/changeset-form/index.gts   |  13 +-
 .../components/form-checkbox-demo/usage.md    |   5 +-
 .../form-checkbox-group-demo/usage.md         |   9 +-
 .../src/components/form-checkbox-group.gts    |   5 +-
 .../src/components/form-checkbox.gts          |   5 +-
 .../src/components/form-field/checkbox.gts    |   5 +-
 .../src/components/form-field/input.gts       |   9 +-
 .../src/components/form-field/radio.gts       |   5 +-
 .../src/components/form-field/textarea.gts    |   9 +-
 .../src/components/form-input-demo/hint.md    |   5 +-
 .../components/form-input-demo/no-label.md    |   5 +-
 .../src/components/form-input-demo/simple.md  |   5 +-
 .../components/form-input-demo/with-button.md |   9 +-
 .../src/components/form-input.gts             |   9 +-
 .../src/components/form-radio-demo/usage.md   |   5 +-
 .../components/form-radio-group-demo/usage.md |   5 +-
 .../src/components/form-radio-group.gts       |   5 +-
 .../src/components/form-radio.gts             |   5 +-
 .../components/form-select-demo/multiple.md   |   5 +-
 .../src/components/form-select-demo/usage.md  |   5 +-
 .../src/components/form-select.gts            |  25 ++-
 .../components/form-textarea-demo/usage.md    |   5 +-
 packages/frontile/src/-private/timer.ts       |  13 +-
 .../src/components/buttons/button-group.md    |   6 +-
 .../src/components/buttons/close-button.gts   |   9 +-
 .../src/components/buttons/toggle-button.md   |  12 +-
 .../src/components/collections/dropdown.md    | 109 +++++--------
 .../src/components/collections/listbox.md     |  64 +++-----
 .../components/collections/listbox/item.gts   |  11 +-
 .../components/collections/simple-table.md    |  11 +-
 .../src/components/collections/table.md       |  19 +--
 .../components/collections/table/checkbox.gts |   5 +-
 .../collections/table/column-visibility.gts   |   6 +-
 .../src/components/forms/checkbox-group.md    |  38 ++---
 .../src/components/forms/checkbox.gts         |   9 +-
 .../frontile/src/components/forms/checkbox.md |  22 +--
 .../frontile/src/components/forms/field.gts   |  16 +-
 .../frontile/src/components/forms/field.md    |   6 +-
 .../frontile/src/components/forms/form.gts    |  29 ++--
 .../src/components/forms/input-otp.gts        |  21 ++-
 .../frontile/src/components/forms/input.gts   |  17 +--
 .../src/components/forms/native-select.gts    |  11 +-
 .../frontile/src/components/forms/radio.gts   |   9 +-
 .../frontile/src/components/forms/select.md   |  11 +-
 .../frontile/src/components/forms/switch.md   |  11 +-
 .../src/components/forms/textarea.gts         |  13 +-
 .../src/components/overlays/drawer.md         | 144 ++++++++----------
 .../frontile/src/components/overlays/modal.md | 104 ++++++-------
 .../src/components/overlays/overlay.gts       |  19 +--
 .../src/components/overlays/overlay.md        |  96 ++++++------
 .../src/components/utilities/avatar.gts       |   6 +-
 59 files changed, 442 insertions(+), 630 deletions(-)

diff --git a/packages/changeset-form/src/components/changeset-form/fields/base.ts b/packages/changeset-form/src/components/changeset-form/fields/base.ts
index d8dd35a76..24dc60f62 100644
--- a/packages/changeset-form/src/components/changeset-form/fields/base.ts
+++ b/packages/changeset-form/src/components/changeset-form/fields/base.ts
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import type { BufferedChangeset } from 'ember-changeset/types';
 import { assert } from '@ember/debug';
-import { action } from '@ember/object';
 import { later } from '@ember/runloop';
 import type Owner from '@ember/owner';
 
@@ -66,8 +65,7 @@ export default class ChangesetFormFieldsBase<
     }, []);
   }
 
-  @action
-  async validate(): Promise<void> {
+  validate = async (): Promise<void> => {
     later(
       this,
       () => {
@@ -75,5 +73,5 @@ export default class ChangesetFormFieldsBase<
       },
       1
     );
-  }
+  };
 }
diff --git a/packages/changeset-form/src/components/changeset-form/fields/checkbox-group.gts b/packages/changeset-form/src/components/changeset-form/fields/checkbox-group.gts
index 86ffa8957..94bee54f2 100644
--- a/packages/changeset-form/src/components/changeset-form/fields/checkbox-group.gts
+++ b/packages/changeset-form/src/components/changeset-form/fields/checkbox-group.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
-import { action } from '@ember/object';
 import ChangesetFormFieldsCheckbox from './checkbox';
 import FormCheckboxGroup, {
   type FormCheckboxGroupArgs
@@ -70,19 +69,19 @@ export default class ChangesetFormFieldsCheckboxGroup extends Component<Changese
     }, []);
   }
 
-  @action async validate(): Promise<void> {
+  validate = async (): Promise<void> => {
     if (this.args.groupName) {
       await this.args.changeset.validate(this.args.groupName);
     }
-  }
+  };
 
-  @action handleChange(value: unknown, event: Event): void {
+  handleChange = (value: unknown, event: Event): void => {
     this.validate();
 
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
-  }
+  };
 
   <template>
     <FormCheckboxGroup
diff --git a/packages/changeset-form/src/components/changeset-form/fields/checkbox.gts b/packages/changeset-form/src/components/changeset-form/fields/checkbox.gts
index abeb4e677..5ebfa3a4f 100644
--- a/packages/changeset-form/src/components/changeset-form/fields/checkbox.gts
+++ b/packages/changeset-form/src/components/changeset-form/fields/checkbox.gts
@@ -1,5 +1,4 @@
 import Base, { type BaseArgs, type BaseSignature } from './base';
-import { action } from '@ember/object';
 import FormCheckbox, {
   type FormCheckboxArgs
 } from '@frontile/forms-legacy/components/form-checkbox';
@@ -56,11 +55,11 @@ export default class ChangesetFormFieldsCheckbox extends Base<ChangesetFormField
     }, []);
   }
 
-  @action async validate(): Promise<void> {
+  validate = async (): Promise<void> => {
     await this.args.changeset.validate(this.fullFieldName);
-  }
+  };
 
-  @action async handleChange(value: boolean, event: Event): Promise<void> {
+  handleChange = async (value: boolean, event: Event): Promise<void> => {
     this.args.changeset.set(this.fullFieldName, value);
 
     await this.validate();
@@ -72,7 +71,7 @@ export default class ChangesetFormFieldsCheckbox extends Base<ChangesetFormField
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
-  }
+  };
 
   <template>
     <FormCheckbox
diff --git a/packages/changeset-form/src/components/changeset-form/fields/input.gts b/packages/changeset-form/src/components/changeset-form/fields/input.gts
index 68c0b95e8..6675694aa 100644
--- a/packages/changeset-form/src/components/changeset-form/fields/input.gts
+++ b/packages/changeset-form/src/components/changeset-form/fields/input.gts
@@ -1,5 +1,4 @@
 import Base, { type BaseArgs, type BaseSignature } from './base';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import FormInput, {
   type FormInputArgs
@@ -19,13 +18,13 @@ export default class ChangesetFormFieldsInput extends Base<
   ChangesetFormFieldsInputSignature,
   string | undefined
 > {
-  @action handleInput(value: string, event: InputEvent): void {
+  handleInput = (value: string, event: InputEvent): void => {
     this.args.changeset.set(this.args.fieldName, value);
 
     if (typeof this.args.onInput === 'function') {
       this.args.onInput(value, event);
     }
-  }
+  };
 
   <template>
     <FormInput
diff --git a/packages/changeset-form/src/components/changeset-form/fields/radio-group.gts b/packages/changeset-form/src/components/changeset-form/fields/radio-group.gts
index e7b1523c3..2105bee50 100644
--- a/packages/changeset-form/src/components/changeset-form/fields/radio-group.gts
+++ b/packages/changeset-form/src/components/changeset-form/fields/radio-group.gts
@@ -1,5 +1,4 @@
 import Base, { type BaseArgs, type BaseSignature } from './base';
-import { action } from '@ember/object';
 import type { FormRadioSignature } from '@frontile/forms-legacy/components/form-radio';
 import FormRadioGroup, {
   type FormRadioGroupArgs
@@ -21,8 +20,7 @@ export default class ChangesetFormFieldsRadioGroup extends Base<
   ChangesetFormFieldsRadioGroupSignature,
   string | boolean | number | undefined
 > {
-  @action
-  async handleChange(value: unknown, event: Event): Promise<void> {
+  handleChange = async (value: unknown, event: Event): Promise<void> => {
     event.preventDefault();
 
     this.args.changeset.set(this.args.fieldName, value);
@@ -31,7 +29,7 @@ export default class ChangesetFormFieldsRadioGroup extends Base<
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
-  }
+  };
 
   <template>
     <FormRadioGroup
diff --git a/packages/changeset-form/src/components/changeset-form/fields/radio.gts b/packages/changeset-form/src/components/changeset-form/fields/radio.gts
index ebf03de12..2a8ab8709 100644
--- a/packages/changeset-form/src/components/changeset-form/fields/radio.gts
+++ b/packages/changeset-form/src/components/changeset-form/fields/radio.gts
@@ -1,5 +1,4 @@
 import Base, { type BaseArgs, type BaseSignature } from './base';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import FormRadio, {
   type FormRadioArgs
@@ -16,8 +15,7 @@ export interface ChangesetFormFieldsRadioSignature extends BaseSignature {
 }
 
 export default class ChangesetFormFieldsRadio extends Base<ChangesetFormFieldsRadioSignature> {
-  @action
-  async handleChange(value: unknown, event: Event): Promise<void> {
+  handleChange = async (value: unknown, event: Event): Promise<void> => {
     event.preventDefault();
 
     this.args.changeset.set(this.args.fieldName, value);
@@ -26,7 +24,7 @@ export default class ChangesetFormFieldsRadio extends Base<ChangesetFormFieldsRa
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
-  }
+  };
 
   <template>
     <FormRadio
diff --git a/packages/changeset-form/src/components/changeset-form/fields/select.gts b/packages/changeset-form/src/components/changeset-form/fields/select.gts
index 1db216e76..8e3a6e651 100644
--- a/packages/changeset-form/src/components/changeset-form/fields/select.gts
+++ b/packages/changeset-form/src/components/changeset-form/fields/select.gts
@@ -1,5 +1,4 @@
 import Base, { type BaseArgs, type BaseSignature } from './base';
-import { action } from '@ember/object';
 import FormSelect, {
   type FormSelectArgs
 } from '@frontile/forms-legacy/components/form-select';
@@ -20,37 +19,37 @@ export interface ChangesetFormFieldsSelectSignature extends BaseSignature {
 }
 
 export default class ChangesetFormFieldsSelect extends Base<ChangesetFormFieldsSelectSignature> {
-  @action
-  async handleChange(
+  handleChange = async (
     selection: unknown,
     select: unknown,
     event?: Event
-  ): Promise<void> {
+  ): Promise<void> => {
     this.args.changeset.set(this.args.fieldName, selection);
     await this.validate();
 
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(selection, select, event);
     }
-  }
+  };
 
-  @action
-  async handleFocusOut(select: unknown, event: FocusEvent): Promise<void> {
+  handleFocusOut = async (
+    select: unknown,
+    event: FocusEvent
+  ): Promise<void> => {
     await this.validate();
 
     if (typeof this.args.onFocusOut === 'function') {
       this.args.onFocusOut(select, event);
     }
-  }
+  };
 
-  @action
-  async handleClose(select: unknown, event: Event): Promise<void> {
+  handleClose = async (select: unknown, event: Event): Promise<void> => {
     await this.validate();
 
     if (typeof this.args.onClose === 'function') {
       this.args.onClose(select, event);
     }
-  }
+  };
 
   <template>
     {{! @glint-nocheck: need to fix powerselect types}}
diff --git a/packages/changeset-form/src/components/changeset-form/fields/textarea.gts b/packages/changeset-form/src/components/changeset-form/fields/textarea.gts
index bbc8d4db9..7d3a8d874 100644
--- a/packages/changeset-form/src/components/changeset-form/fields/textarea.gts
+++ b/packages/changeset-form/src/components/changeset-form/fields/textarea.gts
@@ -1,5 +1,4 @@
 import Base, { type BaseArgs, type BaseSignature } from './base';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import FormTextarea from '@frontile/forms-legacy/components/form-textarea';
 import { type FormInputArgs } from '@frontile/forms-legacy/components/form-input';
@@ -21,13 +20,13 @@ export default class ChangesetFormFieldsTextarea extends Base<
   ChangesetFormFieldsTextareaSignature,
   string | undefined
 > {
-  @action handleInput(value: string, event: InputEvent): void {
+  handleInput = (value: string, event: InputEvent): void => {
     this.args.changeset.set(this.args.fieldName, value);
 
     if (typeof this.args.onInput === 'function') {
       this.args.onInput(value, event);
     }
-  }
+  };
 
   <template>
     <FormTextarea
diff --git a/packages/changeset-form/src/components/changeset-form/index.gts b/packages/changeset-form/src/components/changeset-form/index.gts
index fd08dc5a4..b7f4eb85a 100644
--- a/packages/changeset-form/src/components/changeset-form/index.gts
+++ b/packages/changeset-form/src/components/changeset-form/index.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { next } from '@ember/runloop';
 import { hash, fn } from '@ember/helper';
@@ -106,11 +105,10 @@ class ChangesetForm extends Component<ChangesetFormSignature> {
     }
   }
 
-  @action
-  async handleSubmit(
+  handleSubmit = async (
     changeset: BufferedChangeset,
     event: Event
-  ): Promise<void> {
+  ): Promise<void> => {
     event.preventDefault();
     await changeset.validate();
 
@@ -130,10 +128,9 @@ class ChangesetForm extends Component<ChangesetFormSignature> {
     if (typeof this.args.onSubmit === 'function') {
       this.args.onSubmit(result.data, event);
     }
-  }
+  };
 
-  @action
-  handleReset(changeset: BufferedChangeset, event: Event): void {
+  handleReset = (changeset: BufferedChangeset, event: Event): void => {
     event.preventDefault();
     this.hasSubmitted = false;
 
@@ -141,7 +138,7 @@ class ChangesetForm extends Component<ChangesetFormSignature> {
     if (typeof this.args.onReset === 'function') {
       this.args.onReset(data, event);
     }
-  }
+  };
 
   <template>
     <form
diff --git a/packages/forms-legacy/src/components/form-checkbox-demo/usage.md b/packages/forms-legacy/src/components/form-checkbox-demo/usage.md
index 70716247a..48b792117 100644
--- a/packages/forms-legacy/src/components/form-checkbox-demo/usage.md
+++ b/packages/forms-legacy/src/components/form-checkbox-demo/usage.md
@@ -18,13 +18,12 @@ order: 1
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked value = false;
 
-  @action setValue(value) {
+  setValue = (value) => {
     this.value = value;
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-checkbox-group-demo/usage.md b/packages/forms-legacy/src/components/form-checkbox-group-demo/usage.md
index 7996f2a2c..3e66b3a2b 100644
--- a/packages/forms-legacy/src/components/form-checkbox-group-demo/usage.md
+++ b/packages/forms-legacy/src/components/form-checkbox-group-demo/usage.md
@@ -29,7 +29,6 @@ order: 1
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked isChecked = false;
@@ -43,12 +42,12 @@ export default class DemoComponent extends Component {
     }
   }
 
-  @action setIsChecked(value) {
+  setIsChecked = (value) => {
     this.isChecked = value;
-  }
+  };
 
-  @action setIsChecked2(value) {
+  setIsChecked2 = (value) => {
     this.isChecked2 = value;
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-checkbox-group.gts b/packages/forms-legacy/src/components/form-checkbox-group.gts
index 1b77b0f1a..4a0ca0e29 100644
--- a/packages/forms-legacy/src/components/form-checkbox-group.gts
+++ b/packages/forms-legacy/src/components/form-checkbox-group.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import FormCheckbox from './form-checkbox';
 import { useStyles } from '@frontile/theme';
@@ -64,13 +63,13 @@ export default class FormCheckboxGroup extends Component<FormCheckboxGroupSignat
     }
   }
 
-  @action handleChange(value: unknown, event: Event): void {
+  handleChange = (value: unknown, event: Event): void => {
     this.shouldShowErrorFeedback = true;
 
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
-  }
+  };
 
   get classes() {
     const { formCheckboxGroup } = useStyles();
diff --git a/packages/forms-legacy/src/components/form-checkbox.gts b/packages/forms-legacy/src/components/form-checkbox.gts
index 23d1a73a0..c71a38348 100644
--- a/packages/forms-legacy/src/components/form-checkbox.gts
+++ b/packages/forms-legacy/src/components/form-checkbox.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { useStyles } from '@frontile/theme';
 import FormField from './form-field';
 
@@ -44,7 +43,7 @@ export interface FormCheckboxSignature {
 }
 
 export default class FormCheckbox extends Component<FormCheckboxSignature> {
-  @action handleChange(value: boolean, event: Event): void {
+  handleChange = (value: boolean, event: Event): void => {
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
@@ -52,7 +51,7 @@ export default class FormCheckbox extends Component<FormCheckboxSignature> {
     if (typeof this.args._parentOnChange === 'function') {
       this.args._parentOnChange(value, event);
     }
-  }
+  };
 
   get classes() {
     const { formCheckbox } = useStyles();
diff --git a/packages/forms-legacy/src/components/form-field/checkbox.gts b/packages/forms-legacy/src/components/form-field/checkbox.gts
index 84f5cd54d..0f9035ccf 100644
--- a/packages/forms-legacy/src/components/form-field/checkbox.gts
+++ b/packages/forms-legacy/src/components/form-field/checkbox.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { useStyles } from '@frontile/theme';
 
@@ -24,7 +23,7 @@ export default class FormFieldCheckbox extends Component<FormFieldCheckboxSignat
     return !!this.args.checked;
   }
 
-  @action handleChange(event: Event): void {
+  handleChange = (event: Event): void => {
     event.preventDefault();
 
     const value = !this.args.checked;
@@ -32,7 +31,7 @@ export default class FormFieldCheckbox extends Component<FormFieldCheckboxSignat
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
-  }
+  };
 
   get classes() {
     const { checkbox } = useStyles();
diff --git a/packages/forms-legacy/src/components/form-field/input.gts b/packages/forms-legacy/src/components/form-field/input.gts
index e4be41267..621138cd5 100644
--- a/packages/forms-legacy/src/components/form-field/input.gts
+++ b/packages/forms-legacy/src/components/form-field/input.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { useStyles } from '@frontile/theme';
 
@@ -30,23 +29,23 @@ export default class FormFieldInput extends Component<FormFieldInputSignature> {
     return 'text';
   }
 
-  @action handleOnInput(event: Event): void {
+  handleOnInput = (event: Event): void => {
     if (typeof this.args.onInput === 'function') {
       this.args.onInput(
         (event.target as HTMLInputElement).value,
         event as InputEvent
       );
     }
-  }
+  };
 
-  @action handleOnChange(event: Event): void {
+  handleOnChange = (event: Event): void => {
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(
         (event.target as HTMLInputElement).value,
         event as InputEvent
       );
     }
-  }
+  };
 
   get classes() {
     const { input } = useStyles();
diff --git a/packages/forms-legacy/src/components/form-field/radio.gts b/packages/forms-legacy/src/components/form-field/radio.gts
index d1125dca4..1629bdeac 100644
--- a/packages/forms-legacy/src/components/form-field/radio.gts
+++ b/packages/forms-legacy/src/components/form-field/radio.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { useStyles } from '@frontile/theme';
 
@@ -25,13 +24,13 @@ export default class FormFieldRadio extends Component<FormFieldRadioSignature> {
     return this.args.checked === this.args.value;
   }
 
-  @action handleChange(event: Event): void {
+  handleChange = (event: Event): void => {
     event.preventDefault();
 
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(this.args.value, event);
     }
-  }
+  };
 
   get classes() {
     const { radio } = useStyles();
diff --git a/packages/forms-legacy/src/components/form-field/textarea.gts b/packages/forms-legacy/src/components/form-field/textarea.gts
index 086345c8d..7de8c35cf 100644
--- a/packages/forms-legacy/src/components/form-field/textarea.gts
+++ b/packages/forms-legacy/src/components/form-field/textarea.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { useStyles } from '@frontile/theme';
 
@@ -22,23 +21,23 @@ export interface FormFieldTextareaSignature {
 }
 
 export default class FormFieldTextarea extends Component<FormFieldTextareaSignature> {
-  @action handleOnInput(event: Event): void {
+  handleOnInput = (event: Event): void => {
     if (typeof this.args.onInput === 'function') {
       this.args.onInput(
         (event.target as HTMLInputElement).value,
         event as InputEvent
       );
     }
-  }
+  };
 
-  @action handleOnChange(event: Event): void {
+  handleOnChange = (event: Event): void => {
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(
         (event.target as HTMLInputElement).value,
         event as InputEvent
       );
     }
-  }
+  };
 
   get classes() {
     const { textarea } = useStyles();
diff --git a/packages/forms-legacy/src/components/form-input-demo/hint.md b/packages/forms-legacy/src/components/form-input-demo/hint.md
index 60d8ae807..06e1abebf 100644
--- a/packages/forms-legacy/src/components/form-input-demo/hint.md
+++ b/packages/forms-legacy/src/components/form-input-demo/hint.md
@@ -22,13 +22,12 @@ You can pass `@hint` to the component to add hint content.
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked value = '';
 
-  @action setValue(value) {
+  setValue = (value) => {
     this.value = value;
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-input-demo/no-label.md b/packages/forms-legacy/src/components/form-input-demo/no-label.md
index e952b3e83..47bb87543 100644
--- a/packages/forms-legacy/src/components/form-input-demo/no-label.md
+++ b/packages/forms-legacy/src/components/form-input-demo/no-label.md
@@ -21,13 +21,12 @@ If you don't want the label then simply leave it out of the component tag:
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked value = '';
 
-  @action setValue(value) {
+  setValue = (value) => {
     this.value = value;
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-input-demo/simple.md b/packages/forms-legacy/src/components/form-input-demo/simple.md
index b109abdc2..7a7e65e76 100644
--- a/packages/forms-legacy/src/components/form-input-demo/simple.md
+++ b/packages/forms-legacy/src/components/form-input-demo/simple.md
@@ -22,7 +22,6 @@ The most common use case is a plain text input with validation:
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked value = '';
@@ -35,8 +34,8 @@ export default class DemoComponent extends Component {
     }
   }
 
-  @action setValue(value) {
+  setValue = (value) => {
     this.value = value;
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-input-demo/with-button.md b/packages/forms-legacy/src/components/form-input-demo/with-button.md
index e9f202a7c..eb2b7c126 100644
--- a/packages/forms-legacy/src/components/form-input-demo/with-button.md
+++ b/packages/forms-legacy/src/components/form-input-demo/with-button.md
@@ -40,18 +40,17 @@ This is an example of how to implement an input with a button next to it.
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked value = '';
   @tracked validationErrors = [];
   @tracked isValid = false;
 
-  @action setValue(value) {
+  setValue = (value) => {
     this.value = value;
-  }
+  };
 
-  @action validate() {
+  validate = () => {
     if (/^$/.test(this.value)) {
       this.validationErrors = ['Incorrect Code Applied'];
       this.isValid = false;
@@ -59,6 +58,6 @@ export default class DemoComponent extends Component {
       this.validationErrors = [];
       this.isValid = true;
     }
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-input.gts b/packages/forms-legacy/src/components/form-input.gts
index 4706f200d..8276c3370 100644
--- a/packages/forms-legacy/src/components/form-input.gts
+++ b/packages/forms-legacy/src/components/form-input.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { concat } from '@ember/helper';
 import { on } from '@ember/modifier';
@@ -85,21 +84,21 @@ export class FormInputBase<
     }
   }
 
-  @action handleFocusIn(event: FocusEvent): void {
+  handleFocusIn = (event: FocusEvent): void => {
     this.shouldShowErrorFeedback = false;
 
     if (typeof this.args.onFocusIn === 'function') {
       this.args.onFocusIn(event);
     }
-  }
+  };
 
-  @action handleFocusOut(event: FocusEvent): void {
+  handleFocusOut = (event: FocusEvent): void => {
     this.shouldShowErrorFeedback = true;
 
     if (typeof this.args.onFocusOut === 'function') {
       this.args.onFocusOut(event);
     }
-  }
+  };
 }
 
 export default class FormInput extends FormInputBase<FormInputSignature> {
diff --git a/packages/forms-legacy/src/components/form-radio-demo/usage.md b/packages/forms-legacy/src/components/form-radio-demo/usage.md
index fa4de4a38..70a09902f 100644
--- a/packages/forms-legacy/src/components/form-radio-demo/usage.md
+++ b/packages/forms-legacy/src/components/form-radio-demo/usage.md
@@ -27,13 +27,12 @@ order: 1
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked value = '';
 
-  @action setValue(value) {
+  setValue = (value) => {
     this.value = value;
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-radio-group-demo/usage.md b/packages/forms-legacy/src/components/form-radio-group-demo/usage.md
index 1d2d76c2f..34a40fda3 100644
--- a/packages/forms-legacy/src/components/form-radio-group-demo/usage.md
+++ b/packages/forms-legacy/src/components/form-radio-group-demo/usage.md
@@ -23,7 +23,6 @@ order: 1
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked value = '';
@@ -36,8 +35,8 @@ export default class DemoComponent extends Component {
     }
   }
 
-  @action setValue(value) {
+  setValue = (value) => {
     this.value = value;
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-radio-group.gts b/packages/forms-legacy/src/components/form-radio-group.gts
index dbe1cab3b..6fdc97d9e 100644
--- a/packages/forms-legacy/src/components/form-radio-group.gts
+++ b/packages/forms-legacy/src/components/form-radio-group.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { concat } from '@ember/helper';
 import FormRadio from './form-radio';
@@ -67,13 +66,13 @@ export default class FormRadioGroup extends Component<FormRadioGroupSignature> {
     }
   }
 
-  @action handleChange(value: unknown, event: Event): void {
+  handleChange = (value: unknown, event: Event): void => {
     this.shouldShowErrorFeedback = true;
 
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
-  }
+  };
 
   get classes() {
     const { formRadioGroup } = useStyles();
diff --git a/packages/forms-legacy/src/components/form-radio.gts b/packages/forms-legacy/src/components/form-radio.gts
index 87c59765d..7fec8f247 100644
--- a/packages/forms-legacy/src/components/form-radio.gts
+++ b/packages/forms-legacy/src/components/form-radio.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import FormField from './form-field';
 import { useStyles } from '@frontile/theme';
 
@@ -48,7 +47,7 @@ export interface FormRadioSignature {
 }
 
 export default class FormRadio extends Component<FormRadioSignature> {
-  @action handleChange(value: unknown, event: Event): void {
+  handleChange = (value: unknown, event: Event): void => {
     event.preventDefault();
 
     if (typeof this.args.onChange === 'function') {
@@ -58,7 +57,7 @@ export default class FormRadio extends Component<FormRadioSignature> {
     if (typeof this.args._parentOnChange === 'function') {
       this.args._parentOnChange(value, event);
     }
-  }
+  };
 
   get isChecked(): boolean {
     return this.args.checked == this.args.value;
diff --git a/packages/forms-legacy/src/components/form-select-demo/multiple.md b/packages/forms-legacy/src/components/form-select-demo/multiple.md
index 1d274f075..137e96581 100644
--- a/packages/forms-legacy/src/components/form-select-demo/multiple.md
+++ b/packages/forms-legacy/src/components/form-select-demo/multiple.md
@@ -30,7 +30,6 @@ just pass `@isMultiple={{true}}` to the component.
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked selectedCountries;
@@ -53,8 +52,8 @@ export default class DemoComponent extends Component {
     }
   }
 
-  @action setCountry(value) {
+  setCountry = (value) => {
     this.selectedCountries = value;
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-select-demo/usage.md b/packages/forms-legacy/src/components/form-select-demo/usage.md
index 68e0f29bd..efe1510d9 100644
--- a/packages/forms-legacy/src/components/form-select-demo/usage.md
+++ b/packages/forms-legacy/src/components/form-select-demo/usage.md
@@ -30,7 +30,6 @@ Single Select.
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked country;
@@ -53,8 +52,8 @@ export default class DemoComponent extends Component {
     }
   }
 
-  @action setCountry(value) {
+  setCountry = (value) => {
     this.country = value;
-  }
+  };
 }
 ```
diff --git a/packages/forms-legacy/src/components/form-select.gts b/packages/forms-legacy/src/components/form-select.gts
index 91a09f9f9..8dc59ca2c 100644
--- a/packages/forms-legacy/src/components/form-select.gts
+++ b/packages/forms-legacy/src/components/form-select.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import PowerSelect, {
   type PowerSelectArgs
@@ -76,25 +75,25 @@ export default class FormSelect extends Component<FormSelectSignature> {
     }
   }
 
-  @action handleOpen(select: Select, event: Event): void {
+  handleOpen = (select: Select, event: Event): void => {
     this.isOpen = true;
     this.shouldShowErrorFeedback = false;
 
     if (typeof this.args.onOpen === 'function') {
       this.args.onOpen(select, event);
     }
-  }
+  };
 
-  @action handleClose(select: Select, event: Event): void {
+  handleClose = (select: Select, event: Event): void => {
     this.isOpen = false;
     this.shouldShowErrorFeedback = true;
 
     if (typeof this.args.onClose === 'function') {
       this.args.onClose(select, event);
     }
-  }
+  };
 
-  @action handleFocusIn(select: Select, event: FocusEvent): void {
+  handleFocusIn = (select: Select, event: FocusEvent): void => {
     this.shouldShowErrorFeedback = false;
 
     if (typeof this.args.onFocusIn === 'function') {
@@ -105,9 +104,9 @@ export default class FormSelect extends Component<FormSelectSignature> {
     if (typeof this.args.onFocus === 'function') {
       this.args.onFocus(select, event);
     }
-  }
+  };
 
-  @action handleFocusOut(select: Select, event: FocusEvent): void {
+  handleFocusOut = (select: Select, event: FocusEvent): void => {
     if (!this.isOpen) {
       this.shouldShowErrorFeedback = true;
     }
@@ -120,16 +119,12 @@ export default class FormSelect extends Component<FormSelectSignature> {
     if (typeof this.args.onBlur === 'function') {
       this.args.onBlur(select, event);
     }
-  }
+  };
 
-  @action handleChange(
-    selection: unknown,
-    select: Select,
-    event?: Event
-  ): void {
+  handleChange = (selection: unknown, select: Select, event?: Event): void => {
     this.shouldShowErrorFeedback = true;
     this.args.onChange(selection, select, event);
-  }
+  };
 
   get classes() {
     const { formSelect } = useStyles();
diff --git a/packages/forms-legacy/src/components/form-textarea-demo/usage.md b/packages/forms-legacy/src/components/form-textarea-demo/usage.md
index fd58c8212..39dc0f741 100644
--- a/packages/forms-legacy/src/components/form-textarea-demo/usage.md
+++ b/packages/forms-legacy/src/components/form-textarea-demo/usage.md
@@ -20,7 +20,6 @@ order: 1
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DemoComponent extends Component {
   @tracked value = '';
@@ -33,8 +32,8 @@ export default class DemoComponent extends Component {
     }
   }
 
-  @action setValue(value) {
+  setValue = (value) => {
     this.value = value;
-  }
+  };
 }
 ```
diff --git a/packages/frontile/src/-private/timer.ts b/packages/frontile/src/-private/timer.ts
index 2ef208786..13c3b10c1 100644
--- a/packages/frontile/src/-private/timer.ts
+++ b/packages/frontile/src/-private/timer.ts
@@ -1,7 +1,6 @@
 import { tracked } from '@glimmer/tracking';
 import { later, cancel } from '@ember/runloop';
 import type { Timer as EmberTimer } from '@ember/runloop';
-import { action } from '@ember/object';
 
 export default class Timer {
   @tracked remaining: number;
@@ -17,15 +16,15 @@ export default class Timer {
     this.setup();
   }
 
-  @action clear(): void {
+  clear = (): void => {
     this.isRunning = false;
 
     if (this.timer) {
       cancel(this.timer);
     }
-  }
+  };
 
-  @action pause(): void {
+  pause = (): void => {
     // Pausing an already paused timer would subtract the elapsed time twice,
     // eventually driving `remaining` to zero or below.
     if (!this.isRunning) {
@@ -34,9 +33,9 @@ export default class Timer {
 
     this.clear();
     this.remaining = Math.max(0, this.remaining - (Date.now() - this.start));
-  }
+  };
 
-  @action resume(): void {
+  resume = (): void => {
     // Already counting down; resuming again would restart the remaining time.
     if (this.isRunning) {
       return;
@@ -44,7 +43,7 @@ export default class Timer {
 
     this.clear();
     this.setup();
-  }
+  };
 
   private setup(): void {
     this.start = Date.now();
diff --git a/packages/frontile/src/components/buttons/button-group.md b/packages/frontile/src/components/buttons/button-group.md
index c6e5796ce..2d9548c12 100644
--- a/packages/frontile/src/components/buttons/button-group.md
+++ b/packages/frontile/src/components/buttons/button-group.md
@@ -32,7 +32,6 @@ import { ButtonGroup } from 'frontile';
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { ButtonGroup } from 'frontile';
 
@@ -44,11 +43,10 @@ export default class Example extends Component {
     third: false
   };
 
-  @action
-  onChange(ty: keyof typeof this.isSelected, value: boolean): void {
+  onChange = (ty: keyof typeof this.isSelected, value: boolean): void => {
     this.isSelected[ty] = value;
     this.isSelected = { ...this.isSelected };
-  }
+  };
 
   <template>
     <ButtonGroup
diff --git a/packages/frontile/src/components/buttons/close-button.gts b/packages/frontile/src/components/buttons/close-button.gts
index 163aa6e7a..a50fc89c8 100644
--- a/packages/frontile/src/components/buttons/close-button.gts
+++ b/packages/frontile/src/components/buttons/close-button.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { deprecate } from '@ember/debug';
@@ -113,17 +112,17 @@ class CloseButton extends Component<CloseButtonSignature> {
     this.isPressed = isPressed;
   };
 
-  @action handlePress(event: PressEvent): void {
+  handlePress = (event: PressEvent): void => {
     if (typeof this.args.onPress === 'function') {
       this.args.onPress(event);
     }
-  }
+  };
 
-  @action handleClick(event: Event): void {
+  handleClick = (event: Event): void => {
     if (typeof this.args.onClick === 'function') {
       this.args.onClick(event);
     }
-  }
+  };
 
   <template>
     <button
diff --git a/packages/frontile/src/components/buttons/toggle-button.md b/packages/frontile/src/components/buttons/toggle-button.md
index 92df69978..981b78134 100644
--- a/packages/frontile/src/components/buttons/toggle-button.md
+++ b/packages/frontile/src/components/buttons/toggle-button.md
@@ -24,7 +24,6 @@ import { ToggleButton } from 'frontile';
 ```gts preview
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { ToggleButton } from 'frontile';
 import { StarIcon } from 'site/components/icons';
 
@@ -32,10 +31,9 @@ export default class Example extends Component {
   @tracked
   isSelected = false;
 
-  @action
-  onChange(value: boolean): void {
+  onChange = (value: boolean): void => {
     this.isSelected = value;
-  }
+  };
 
   <template>
     <ToggleButton
@@ -54,7 +52,6 @@ export default class Example extends Component {
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { ToggleButton } from 'frontile';
 
@@ -70,11 +67,10 @@ export default class Example extends Component {
     danger: false
   };
 
-  @action
-  onChange(ty: keyof typeof this.isSelected, value: boolean): void {
+  onChange = (ty: keyof typeof this.isSelected, value: boolean): void => {
     this.isSelected[ty] = value;
     this.isSelected = { ...this.isSelected };
-  }
+  };
 
   <template>
     {{#each-in this.isSelected as |key val|}}
diff --git a/packages/frontile/src/components/collections/dropdown.md b/packages/frontile/src/components/collections/dropdown.md
index e21ca2761..529b2aa15 100644
--- a/packages/frontile/src/components/collections/dropdown.md
+++ b/packages/frontile/src/components/collections/dropdown.md
@@ -21,7 +21,6 @@ A feature-rich action menu showcasing icons, descriptions, shortcuts, dividers,
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 import {
   ViewIcon,
@@ -34,11 +33,10 @@ import {
 } from 'site/components/icons';
 
 export default class BasicDropdown extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action triggered:', key);
-  }
+  };
 
   <template>
     <Dropdown as |d|>
@@ -118,15 +116,13 @@ Add descriptions and keyboard shortcuts to menu items for better UX.
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class DropdownWithDetails extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action:', key);
-  }
+  };
 
   <template>
     <Dropdown as |d|>
@@ -169,18 +165,16 @@ Enable single or multiple selection mode for choosing options.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class SelectableDropdown extends Component {
   @tracked selectedKeys = ['bold'];
 
-  @action
-  handleSelectionChange(keys: Set<string>) {
+  handleSelectionChange = (keys: Set<string>) => {
     this.selectedKeys = Array.from(keys);
     // eslint-disable-next-line
     console.log('Selected:', this.selectedKeys);
-  }
+  };
 
   <template>
     <div class='demo-stack items-center'>
@@ -215,15 +209,13 @@ Customize the trigger button appearance.
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class TriggerStyles extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action:', key);
-  }
+  };
 
   <template>
     <div class='flex gap-2 flex-wrap'>
@@ -286,7 +278,6 @@ Control where the menu appears relative to the trigger.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Dropdown, ButtonGroup } from 'frontile';
 
@@ -304,16 +295,14 @@ export default class MenuPositioning extends Component {
     'right'
   ];
 
-  @action
-  setPlacement(placement: string) {
+  setPlacement = (placement: string) => {
     this.placement = placement;
-  }
+  };
 
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action:', key);
-  }
+  };
 
   isSelected = (p: string) => {
     return p === this.placement;
@@ -358,17 +347,15 @@ Disable specific menu items.
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class DisabledItems extends Component {
   disabledKeys = ['share', 'delete'];
 
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action:', key);
-  }
+  };
 
   <template>
     <Dropdown as |d|>
@@ -399,18 +386,16 @@ Prevent the menu from closing when items are selected.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class KeepOpenDropdown extends Component {
   @tracked filters = ['recent'];
 
-  @action
-  handleSelectionChange(keys: Set<string>) {
+  handleSelectionChange = (keys: Set<string>) => {
     this.filters = Array.from(keys);
     // eslint-disable-next-line
     console.log('Filters:', this.filters);
-  }
+  };
 
   <template>
     <div class='demo-stack items-center'>
@@ -445,15 +430,13 @@ Organize menu items into logical groups.
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class SectionedDropdown extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action:', key);
-  }
+  };
 
   <template>
     <Dropdown as |d|>
@@ -483,26 +466,22 @@ Use individual click handlers for specific items.
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class CustomHandlers extends Component {
-  @action
-  handleEdit() {
+  handleEdit = () => {
     alert('Edit clicked');
-  }
+  };
 
-  @action
-  handleDelete() {
+  handleDelete = () => {
     if (confirm('Are you sure you want to delete?')) {
       alert('Deleted!');
     }
-  }
+  };
 
-  @action
-  handleDownload() {
+  handleDownload = () => {
     alert('Downloading...');
-  }
+  };
 
   <template>
     <Dropdown as |d|>
@@ -536,23 +515,20 @@ Control the backdrop appearance behind the dropdown menu.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Dropdown, ButtonGroup } from 'frontile';
 
 export default class DropdownBackdrop extends Component {
   @tracked backdrop = 'none';
 
-  @action
-  setBackdrop(type: string) {
+  setBackdrop = (type: string) => {
     this.backdrop = type;
-  }
+  };
 
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action:', key);
-  }
+  };
 
   isActiveBackdrop = (type: string) => {
     return this.backdrop === type;
@@ -607,21 +583,18 @@ Execute a callback when the dropdown closes.
 
 ```gts preview
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class DropdownWithCallback extends Component {
-  @action
-  handleDidClose() {
+  handleDidClose = () => {
     // eslint-disable-next-line
     console.log('Dropdown closed');
-  }
+  };
 
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action:', key);
-  }
+  };
 
   <template>
     <Dropdown @didClose={{this.handleDidClose}} as |d|>
@@ -647,15 +620,13 @@ close with <kbd>←</kbd> or <kbd>Esc</kbd>.
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class SubmenuDropdown extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action triggered:', key);
-  }
+  };
 
   <template>
     <Dropdown as |d|>
@@ -692,15 +663,13 @@ Submenus nest to any depth: a `Sub`'s `Menu` yields `Sub` again.
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class NestedSubmenuDropdown extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action triggered:', key);
-  }
+  };
 
   <template>
     <Dropdown as |d|>
@@ -739,15 +708,13 @@ on screen.
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class SiblingSubmenuDropdown extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action triggered:', key);
-  }
+  };
 
   <template>
     <Dropdown as |d|>
diff --git a/packages/frontile/src/components/collections/listbox.md b/packages/frontile/src/components/collections/listbox.md
index 30c04f253..8c3279c82 100644
--- a/packages/frontile/src/components/collections/listbox.md
+++ b/packages/frontile/src/components/collections/listbox.md
@@ -23,7 +23,6 @@ A simple listbox with single selection mode.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Listbox } from 'frontile';
 
 export default class BasicListbox extends Component {
@@ -40,10 +39,9 @@ export default class BasicListbox extends Component {
     'zebra'
   ];
 
-  @action
-  onSelectionChange(keys: string[]) {
+  onSelectionChange = (keys: string[]) => {
     this.selectedKeys = keys;
-  }
+  };
 
   <template>
     <div class='demo-stack items-center'>
@@ -73,7 +71,6 @@ Enable users to select multiple items from the list.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Listbox } from 'frontile';
 
 export default class MultipleSelection extends Component {
@@ -90,10 +87,9 @@ export default class MultipleSelection extends Component {
     'zebra'
   ];
 
-  @action
-  onSelectionChange(keys: string[]) {
+  onSelectionChange = (keys: string[]) => {
     this.selectedKeys = keys;
-  }
+  };
 
   <template>
     <div class='demo-stack items-center'>
@@ -125,7 +121,6 @@ Define items explicitly with icons, descriptions, and shortcuts.
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Listbox } from 'frontile';
 import {
   ViewIcon,
@@ -137,11 +132,10 @@ import {
 export default class StaticItems extends Component {
   disabledKeys = ['delete'];
 
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action:', key);
-  }
+  };
 
   <template>
     <div class='w-[280px] border px-1 py-2 rounded border-neutral-subtle'>
@@ -195,15 +189,13 @@ Use selection mode "none" for action menus where items trigger actions rather th
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Listbox } from 'frontile';
 
 export default class ActionMenu extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     alert(`Action triggered: ${key}`);
-  }
+  };
 
   <template>
     <div class='w-[260px] border px-1 py-2 rounded border-neutral-subtle'>
@@ -234,7 +226,6 @@ Control the visual style with the `@variant` argument.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Listbox, ButtonGroup } from 'frontile';
 
@@ -244,15 +235,13 @@ export default class Variants extends Component {
 
   options = ['option1', 'option2', 'option3', 'option4'];
 
-  @action
-  setVariant(variant: string) {
+  setVariant = (variant: string) => {
     this.variant = variant;
-  }
+  };
 
-  @action
-  onSelectionChange(keys: string[]) {
+  onSelectionChange = (keys: string[]) => {
     this.selectedKeys = keys;
-  }
+  };
 
   isSelected = (type: string) => {
     return this.variant === type;
@@ -329,7 +318,6 @@ Prevent interaction with specific items using `@disabledKeys`.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Listbox } from 'frontile';
 
 export default class DisabledItems extends Component {
@@ -339,10 +327,9 @@ export default class DisabledItems extends Component {
 
   features = ['feature1', 'feature2', 'feature3', 'feature4', 'feature5'];
 
-  @action
-  onSelectionChange(keys: string[]) {
+  onSelectionChange = (keys: string[]) => {
     this.selectedKeys = keys;
-  }
+  };
 
   <template>
     <div class='demo-stack items-center'>
@@ -372,7 +359,6 @@ Render complex objects with custom templates.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Listbox } from 'frontile';
 
 export default class CustomItems extends Component {
@@ -405,10 +391,9 @@ export default class CustomItems extends Component {
     }
   ];
 
-  @action
-  onSelectionChange(keys: string[]) {
+  onSelectionChange = (keys: string[]) => {
     this.selectedKeys = keys;
-  }
+  };
 
   <template>
     <div class='demo-stack items-center'>
@@ -448,15 +433,13 @@ Organize items into logical groups using dividers.
 
 ```gts preview
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Listbox } from 'frontile';
 
 export default class WithDividers extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Action:', key);
-  }
+  };
 
   <template>
     <div class='w-[260px] border px-1 py-2 rounded border-neutral-subtle'>
@@ -486,7 +469,6 @@ Control whether users can deselect all items.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Listbox, Button } from 'frontile';
 
 export default class EmptySelection extends Component {
@@ -495,15 +477,13 @@ export default class EmptySelection extends Component {
 
   options = ['option1', 'option2', 'option3'];
 
-  @action
-  toggleAllowEmpty() {
+  toggleAllowEmpty = () => {
     this.allowEmpty = !this.allowEmpty;
-  }
+  };
 
-  @action
-  onSelectionChange(keys: string[]) {
+  onSelectionChange = (keys: string[]) => {
     this.selectedKeys = keys;
-  }
+  };
 
   <template>
     <div class='demo-stack items-center'>
diff --git a/packages/frontile/src/components/collections/listbox/item.gts b/packages/frontile/src/components/collections/listbox/item.gts
index e108dcc22..6b0eb7033 100644
--- a/packages/frontile/src/components/collections/listbox/item.gts
+++ b/packages/frontile/src/components/collections/listbox/item.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked, cached } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { on } from '@ember/modifier';
 import { useStyles } from '@frontile/theme';
@@ -143,13 +142,11 @@ class ListboxItem extends Component<ListboxItemSignature> {
     return this.args.key;
   }
 
-  @action
-  onRegister(item: ListItem) {
+  onRegister = (item: ListItem) => {
     this.listItem = item;
-  }
+  };
 
-  @action
-  onClick(): void {
+  onClick = (): void => {
     if (this.listItem?.isDisabled) {
       return;
     }
@@ -165,7 +162,7 @@ class ListboxItem extends Component<ListboxItemSignature> {
     if (typeof this.args.onClick === 'function') {
       this.args.onClick();
     }
-  }
+  };
 
   /**
    * A roving tabindex: the manager nominates one option as the composite's tab
diff --git a/packages/frontile/src/components/collections/simple-table.md b/packages/frontile/src/components/collections/simple-table.md
index 9c100cce1..59db7ef70 100644
--- a/packages/frontile/src/components/collections/simple-table.md
+++ b/packages/frontile/src/components/collections/simple-table.md
@@ -605,7 +605,6 @@ import Component from '@glimmer/component';
 import { SimpleTable } from 'frontile';
 import { Select } from 'frontile';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { Button } from 'frontile';
 
@@ -639,15 +638,13 @@ export default class DemoComponent extends Component {
     { key: 'danger', name: 'Danger' }
   ];
 
-  @action
-  toggleLoading() {
+  toggleLoading = () => {
     this.isLoading = !this.isLoading;
-  }
+  };
 
-  @action
-  updateLoadingColor(color) {
+  updateLoadingColor = (color) => {
     this.loadingColor = color;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide'>
diff --git a/packages/frontile/src/components/collections/table.md b/packages/frontile/src/components/collections/table.md
index e3dca2529..8c89b28a5 100644
--- a/packages/frontile/src/components/collections/table.md
+++ b/packages/frontile/src/components/collections/table.md
@@ -405,7 +405,6 @@ Show loading indicators while data is being fetched:
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Table, type ColumnConfig } from 'frontile';
 import { products, type Product } from 'site/components/table-demo-data';
 import { Button } from 'frontile';
@@ -429,13 +428,13 @@ export default class DemoComponent extends Component {
     { key: 'danger', name: 'Danger' }
   ];
 
-  @action toggleLoading() {
+  toggleLoading = () => {
     this.isLoading = !this.isLoading;
-  }
+  };
 
-  @action updateLoadingColor(color: string) {
+  updateLoadingColor = (color: string) => {
     this.loadingColor = color;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide'>
@@ -603,7 +602,6 @@ Use the `loading` named block for custom indicators:
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Table, type ColumnConfig } from 'frontile';
 import { products, type Product } from 'site/components/table-demo-data';
 import { Button } from 'frontile';
@@ -618,9 +616,9 @@ export default class DemoComponent extends Component {
     { key: 'category', name: 'Category' }
   ] as const satisfies ColumnConfig<Product>[];
 
-  @action toggleLoading() {
+  toggleLoading = () => {
     this.isLoading = !this.isLoading;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide'>
@@ -1345,7 +1343,6 @@ Customize the selection highlight color with `@selectionColor`. Available colors
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Table, type ColumnConfig } from 'frontile';
 import { type User } from 'site/components/table-demo-data';
 import { Select } from 'frontile';
@@ -1378,9 +1375,9 @@ export default class DemoComponent extends Component {
     this.selectedKeys = keys;
   };
 
-  @action updateSelectionColor(color: string) {
+  updateSelectionColor = (color: string) => {
     this.selectionColor = color;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide'>
diff --git a/packages/frontile/src/components/collections/table/checkbox.gts b/packages/frontile/src/components/collections/table/checkbox.gts
index 310db0ee4..572f77251 100644
--- a/packages/frontile/src/components/collections/table/checkbox.gts
+++ b/packages/frontile/src/components/collections/table/checkbox.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { modifier } from 'ember-modifier';
 import {
@@ -32,7 +31,7 @@ class Checkbox extends Component<CheckboxSignature> {
     return !!this.args.checked;
   }
 
-  @action handleChange(event: Event): void {
+  handleChange = (event: Event): void => {
     if (this.args.disabled) {
       return;
     }
@@ -43,7 +42,7 @@ class Checkbox extends Component<CheckboxSignature> {
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
-  }
+  };
 
   get classes() {
     const { checkbox } = useStyles();
diff --git a/packages/frontile/src/components/collections/table/column-visibility.gts b/packages/frontile/src/components/collections/table/column-visibility.gts
index c031143c9..fce656a03 100644
--- a/packages/frontile/src/components/collections/table/column-visibility.gts
+++ b/packages/frontile/src/components/collections/table/column-visibility.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { useStyles } from '@frontile/theme';
 import { Dropdown } from '../dropdown';
 import {
@@ -50,8 +49,7 @@ export default class ColumnVisibility<T> extends Component<
     return this.columns.map((column: Column<T>) => column.key);
   }
 
-  @action
-  handleSelectionChange(selectedKeys: string[]) {
+  handleSelectionChange = (selectedKeys: string[]) => {
     this.columns.forEach((column: Column<T>) => {
       if (selectedKeys.includes(column.key)) {
         if (!isVisible(column)) {
@@ -63,7 +61,7 @@ export default class ColumnVisibility<T> extends Component<
         }
       }
     });
-  }
+  };
 
   <template>
     <Dropdown @closeOnItemSelect={{false}} ...attributes>
diff --git a/packages/frontile/src/components/forms/checkbox-group.md b/packages/frontile/src/components/forms/checkbox-group.md
index d8af8355e..db1fa7fc2 100644
--- a/packages/frontile/src/components/forms/checkbox-group.md
+++ b/packages/frontile/src/components/forms/checkbox-group.md
@@ -40,7 +40,6 @@ You can control individual checkbox states by providing `@checked` and handling
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { CheckboxGroup } from 'frontile';
 
@@ -59,8 +58,7 @@ export default class ControlledCheckboxGroup extends Component {
   }
 
   // Single reusable handler for checkbox changes
-  @action
-  handleCheckboxChange(value: string, checked: boolean) {
+  handleCheckboxChange = (value: string, checked: boolean) => {
     const current = this.formData.interests || [];
 
     if (checked) {
@@ -68,7 +66,7 @@ export default class ControlledCheckboxGroup extends Component {
     } else {
       this.formData = { ...this.formData, interests: current.filter((v) => v !== value) };
     }
-  }
+  };
 
   get selectedCount() {
     return this.formData.interests?.length ?? 0;
@@ -138,7 +136,6 @@ This example demonstrates the recommended pattern for using CheckboxGroup with t
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Form, CheckboxGroup, type FormResultData } from 'frontile';
 import { Button } from 'frontile';
@@ -166,8 +163,7 @@ export default class ValidatedCheckboxGroup extends Component {
   };
 
   // Single reusable handler for checkbox changes
-  @action
-  handleCheckboxChange(value: string, checked: boolean) {
+  handleCheckboxChange = (value: string, checked: boolean) => {
     const current = this.formData.notificationMethods || [];
 
     if (checked) {
@@ -175,18 +171,16 @@ export default class ValidatedCheckboxGroup extends Component {
     } else {
       this.formData.notificationMethods = current.filter((v) => v !== value);
     }
-  }
+  };
 
-  @action
-  handleFormChange(data: FormResultData<Schema>) {
+  handleFormChange = (data: FormResultData<Schema>) => {
     this.formData = data.data;
-  }
+  };
 
-  @action
-  handleFormSubmit(data: FormResultData<Schema>) {
+  handleFormSubmit = (data: FormResultData<Schema>) => {
     this.submitMessage = 'Preferences saved successfully!';
     console.log('Submitted data:', data.data);
-  }
+  };
 
   <template>
     <div class='demo-stack'>
@@ -258,7 +252,6 @@ This example shows CheckboxGroup with the Form validation system, combining mult
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Form, CheckboxGroup, type FormResultData } from 'frontile';
 import { Button } from 'frontile';
@@ -294,8 +287,7 @@ export default class CompleteFormWithCheckbox extends Component {
   };
 
   // Single reusable handler for any checkbox group
-  @action
-  handleCheckboxChange(field: 'interests' | 'newsletters', value: string, checked: boolean) {
+  handleCheckboxChange = (field: 'interests' | 'newsletters', value: string, checked: boolean) => {
     const current = this.formData[field] || [];
 
     if (checked) {
@@ -303,18 +295,16 @@ export default class CompleteFormWithCheckbox extends Component {
     } else {
       this.formData[field] = current.filter((v) => v !== value);
     }
-  }
+  };
 
-  @action
-  handleFormChange(data: FormResultData<Schema>) {
+  handleFormChange = (data: FormResultData<Schema>) => {
     this.formData = data.data;
-  }
+  };
 
-  @action
-  handleFormSubmit(data: FormResultData<Schema>) {
+  handleFormSubmit = (data: FormResultData<Schema>) => {
     this.submitMessage = 'Registration submitted successfully!';
     console.log('Form submitted:', data.data);
-  }
+  };
 
   <template>
     <div class='demo-stack'>
diff --git a/packages/frontile/src/components/forms/checkbox.gts b/packages/frontile/src/components/forms/checkbox.gts
index ed4a81a51..91311b694 100644
--- a/packages/frontile/src/components/forms/checkbox.gts
+++ b/packages/frontile/src/components/forms/checkbox.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { FormControl, type FormControlSharedArgs } from './form-control';
 import {
@@ -55,7 +54,7 @@ class Checkbox extends Component<CheckboxSignature> {
     return !!this.args.checked;
   }
 
-  @action handleChange(event: Event): void {
+  handleChange = (event: Event): void => {
     event.preventDefault();
 
     const value = !this.args.checked;
@@ -63,11 +62,11 @@ class Checkbox extends Component<CheckboxSignature> {
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(value, event);
     }
-  }
+  };
 
-  @action handleBlur(): void {
+  handleBlur = (): void => {
     this.args.onBlur?.();
-  }
+  };
 
   get classes() {
     const { checkbox } = useStyles();
diff --git a/packages/frontile/src/components/forms/checkbox.md b/packages/frontile/src/components/forms/checkbox.md
index 37ff11ad4..617ee7fe6 100644
--- a/packages/frontile/src/components/forms/checkbox.md
+++ b/packages/frontile/src/components/forms/checkbox.md
@@ -356,7 +356,6 @@ Checkbox integrates with the Form validation system, providing automatic error d
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Form, type FormResultData } from 'frontile';
 import { Button } from 'frontile';
 import { array } from '@ember/helper';
@@ -378,16 +377,14 @@ export default class ValidatedCheckbox extends Component {
   };
   @tracked submitMessage = '';
 
-  @action
-  handleFormChange(data: FormResultData<Schema>) {
+  handleFormChange = (data: FormResultData<Schema>) => {
     this.formData = data.data;
-  }
+  };
 
-  @action
-  handleFormSubmit(data: FormResultData<Schema>) {
+  handleFormSubmit = (data: FormResultData<Schema>) => {
     this.submitMessage = 'Terms accepted successfully!';
     console.log('Form submitted:', data.data);
-  }
+  };
 
   <template>
     <div class='demo-stack'>
@@ -501,7 +498,6 @@ A registration form with an Input field, a required checkbox, and an optional ch
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Form, type FormResultData } from 'frontile';
 import { Button } from 'frontile';
 import { array } from '@ember/helper';
@@ -531,16 +527,14 @@ export default class CompleteFormWithCheckbox extends Component {
   };
   @tracked submitMessage = '';
 
-  @action
-  handleFormChange(data: FormResultData<Schema>) {
+  handleFormChange = (data: FormResultData<Schema>) => {
     this.formData = data.data;
-  }
+  };
 
-  @action
-  handleFormSubmit(data: FormResultData<Schema>) {
+  handleFormSubmit = (data: FormResultData<Schema>) => {
     this.submitMessage = 'Account created successfully!';
     console.log('Form submitted:', data.data);
-  }
+  };
 
   <template>
     <div class='demo-stack'>
diff --git a/packages/frontile/src/components/forms/field.gts b/packages/frontile/src/components/forms/field.gts
index a5e097024..c697cc972 100644
--- a/packages/frontile/src/components/forms/field.gts
+++ b/packages/frontile/src/components/forms/field.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { hash } from '@ember/helper';
-import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
 import { getPath } from '../../utils/get-path';
 import Checkbox from './checkbox';
@@ -177,33 +176,30 @@ class Field<
   /**
    * Validates the field on change if change validation is enabled.
    */
-  @action
-  handleChange() {
+  handleChange = () => {
     if (this.validateOn?.includes('change')) {
       this.validateField();
     }
-  }
+  };
 
   /**
    * Validates the field on input if input validation is enabled.
    * Debounces validation to avoid excessive validation calls on every keystroke.
    */
-  @action
-  handleInput() {
+  handleInput = () => {
     if (this.validateOn?.includes('input')) {
       debounce(this, this.validateField, 300);
     }
-  }
+  };
 
   /**
    * Validates the field on blur if blur validation is enabled.
    */
-  @action
-  handleBlur() {
+  handleBlur = () => {
     if (this.validateOn.includes('blur')) {
       this.validateField();
     }
-  }
+  };
 
   <template>
     {{! @glint-nocheck component generics (radio, radio-group, select) trigger:  type instantiation is excessively deep and possibly infinite }}
diff --git a/packages/frontile/src/components/forms/field.md b/packages/frontile/src/components/forms/field.md
index 6e10cb175..364579e43 100644
--- a/packages/frontile/src/components/forms/field.md
+++ b/packages/frontile/src/components/forms/field.md
@@ -30,7 +30,6 @@ The Field component is yielded from the Form component when validation is config
 
 ```gts preview collapsible
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { Form, type FormResultData } from 'frontile';
 import { Button } from 'frontile';
@@ -63,11 +62,10 @@ export default class BasicFieldExample extends Component {
     console.log('Form submitted:', result);
   };
 
-  @action
-  changeEmail() {
+  changeEmail = () => {
     this.formData.email = 'test@test.com';
     this.formData = this.formData;
-  }
+  };
 
   <template>
     <div class='demo-stack'>
diff --git a/packages/frontile/src/components/forms/form.gts b/packages/frontile/src/components/forms/form.gts
index 48dfd6c19..53f966422 100644
--- a/packages/frontile/src/components/forms/form.gts
+++ b/packages/frontile/src/components/forms/form.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { ref } from '../../utils/ref';
@@ -275,8 +274,10 @@ class Form<T = FormDataCompiled> extends Component<FormSignature<T>> {
    * @param name - The name of the field to validate.
    * @returns A promise that resolves to errors for the field, if any.
    */
-  @action
-  async validateField(data: T, name: string): Promise<FormErrors | undefined> {
+  validateField = async (
+    data: T,
+    name: string
+  ): Promise<FormErrors | undefined> => {
     if (!this.args.schema && !this.args.validate) {
       return;
     }
@@ -297,7 +298,7 @@ class Form<T = FormDataCompiled> extends Component<FormSignature<T>> {
       const { [name]: _, ...rest } = this.errors;
       this.errors = rest;
     }
-  }
+  };
 
   /**
    * Computes which fields have changed from their initial values.
@@ -359,8 +360,7 @@ class Form<T = FormDataCompiled> extends Component<FormSignature<T>> {
    * Calls the `onChange` callback with the current form data if provided.
    * Automatically unflattens dotted field names to nested structure.
    */
-  @action
-  handleInput(event: Event) {
+  handleInput = (event: Event) => {
     const form = event.currentTarget;
     if (form instanceof HTMLFormElement) {
       let data = dataFrom(event) as T;
@@ -370,7 +370,7 @@ class Form<T = FormDataCompiled> extends Component<FormSignature<T>> {
       this.uncontrolledData = data;
       this.args.onChange?.(resultData, event);
     }
-  }
+  };
 
   /**
    * Handles the `submit` event on the form element.
@@ -378,8 +378,7 @@ class Form<T = FormDataCompiled> extends Component<FormSignature<T>> {
    * with the current form data. Manages the `isLoading` state during the
    * submission process. Automatically unflattens dotted field names to nested structure.
    */
-  @action
-  async handleSubmit(event: SubmitEvent) {
+  handleSubmit = async (event: SubmitEvent) => {
     event.preventDefault();
     const form = event.currentTarget;
     if (form instanceof HTMLFormElement) {
@@ -408,7 +407,7 @@ class Form<T = FormDataCompiled> extends Component<FormSignature<T>> {
         this.isLoading = false;
       }
     }
-  }
+  };
 
   /**
    * Handles the `reset` event on the form element.
@@ -416,8 +415,7 @@ class Form<T = FormDataCompiled> extends Component<FormSignature<T>> {
    * Restores the form data to its initial state.
    * Calls `onChange` if the form is controlled to let parent update state.
    */
-  @action
-  handleReset(event: Event) {
+  handleReset = (event: Event) => {
     this.errors = {};
     this.dirty = new Set();
 
@@ -434,17 +432,16 @@ class Form<T = FormDataCompiled> extends Component<FormSignature<T>> {
     } else {
       this.uncontrolledData = undefined;
     }
-  }
+  };
 
   /**
    * Resets the form to its initial state.
    * This method calls the native form reset() to clear all form controls,
    * triggering a `reset` event that is handled in `handleReset`.
    */
-  @action
-  reset() {
+  reset = () => {
     this.element?.current?.reset();
-  }
+  };
 
   <template>
     {{! @glint-nocheck component generics (field) trigger:  type instantiation is excessively deep and possibly infinite }}
diff --git a/packages/frontile/src/components/forms/input-otp.gts b/packages/frontile/src/components/forms/input-otp.gts
index f051be49f..91b1201e0 100644
--- a/packages/frontile/src/components/forms/input-otp.gts
+++ b/packages/frontile/src/components/forms/input-otp.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { cached, tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { warn } from '@ember/debug';
 import { next } from '@ember/runloop';
@@ -435,13 +434,13 @@ class InputOtp extends Component<InputOtpSignature> {
     }
   }
 
-  @action handleOnInput(event: Event): void {
+  handleOnInput = (event: Event): void => {
     this.syncValue(event, 'input');
-  }
+  };
 
-  @action handleOnChange(event: Event): void {
+  handleOnChange = (event: Event): void => {
     this.syncValue(event, 'change');
-  }
+  };
 
   /**
    * Maps the input's text caret onto discrete cells. A collapsed caret sits
@@ -449,7 +448,7 @@ class InputOtp extends Component<InputOtpSignature> {
    * one-character range makes exactly one cell active and makes typing
    * overwrite rather than insert.
    */
-  @action onSelectionChange(): void {
+  onSelectionChange = (): void => {
     const input = this.inputRef.current;
     if (!input || document.activeElement !== input) {
       return;
@@ -525,9 +524,9 @@ class InputOtp extends Component<InputOtpSignature> {
     }
 
     this.prevSelection = [input.selectionStart, input.selectionEnd];
-  }
+  };
 
-  @action handleFocus(): void {
+  handleFocus = (): void => {
     this.isFocused = true;
 
     const input = this.inputRef.current;
@@ -539,15 +538,15 @@ class InputOtp extends Component<InputOtpSignature> {
     const start = Math.min(input.value.length, this.length - 1);
     input.setSelectionRange(start, input.value.length);
     this.onSelectionChange();
-  }
+  };
 
-  @action handleOnBlur(): void {
+  handleOnBlur = (): void => {
     this.isFocused = false;
     this.selectionStart = null;
     this.selectionEnd = null;
     this.prevSelection = [null, null];
     this.args.onBlur?.();
-  }
+  };
 
   <template>
     <FormControl
diff --git a/packages/frontile/src/components/forms/input.gts b/packages/frontile/src/components/forms/input.gts
index 1668a79a3..4a64aeed0 100644
--- a/packages/frontile/src/components/forms/input.gts
+++ b/packages/frontile/src/components/forms/input.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import {
   useStyles,
@@ -140,7 +139,7 @@ class Input extends Component<InputSignature> {
     return 'text';
   }
 
-  @action handleOnInput(event: Event): void {
+  handleOnInput = (event: Event): void => {
     const value = (event.target as HTMLInputElement).value;
     this.elementValue = value;
 
@@ -149,9 +148,9 @@ class Input extends Component<InputSignature> {
     } else {
       this.uncontrolledValue = value;
     }
-  }
+  };
 
-  @action handleOnChange(event: Event): void {
+  handleOnChange = (event: Event): void => {
     const value = (event.target as HTMLInputElement).value;
     this.elementValue = value;
 
@@ -160,13 +159,13 @@ class Input extends Component<InputSignature> {
     } else {
       this.uncontrolledValue = value;
     }
-  }
+  };
 
-  @action handleOnBlur(): void {
+  handleOnBlur = (): void => {
     this.args.onBlur?.();
-  }
+  };
 
-  @action clearValue(): void {
+  clearValue = (): void => {
     // Clear the element first: a parent that owns the value may derive it from
     // the DOM (as `<Form>` does via FormData), in which case notifying it
     // before the element is empty would just hand back the stale value.
@@ -184,7 +183,7 @@ class Input extends Component<InputSignature> {
 
     this.inputRef.current?.focus();
     triggerFormInputEvent(this.inputRef.current);
-  }
+  };
 
   get isClearable(): boolean {
     if (
diff --git a/packages/frontile/src/components/forms/native-select.gts b/packages/frontile/src/components/forms/native-select.gts
index ed39ce4f4..7ab66437b 100644
--- a/packages/frontile/src/components/forms/native-select.gts
+++ b/packages/frontile/src/components/forms/native-select.gts
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { hash } from '@ember/helper';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { assert } from '@ember/debug';
 import type Owner from '@ember/owner';
@@ -251,8 +250,7 @@ class NativeSelect<T = unknown> extends Component<NativeSelectSignature<T>> {
     return this.args.selectionMode === 'multiple';
   }
 
-  @action
-  handleOnChange(event: Event) {
+  handleOnChange = (event: Event) => {
     const selectElement = event.target as HTMLSelectElement;
     let newSelectedKeys: string[] = [];
 
@@ -274,7 +272,7 @@ class NativeSelect<T = unknown> extends Component<NativeSelectSignature<T>> {
     }
 
     this.handleSelectionChange(newSelectedKeys);
-  }
+  };
 
   <template>
     <FormControl
@@ -447,10 +445,9 @@ class NativeSelectItem extends Component<SelectItemSignature> {
     return this.args.key;
   }
 
-  @action
-  onRegister(item: ListItem) {
+  onRegister = (item: ListItem) => {
     this.listItem = item;
-  }
+  };
 
   <template>
     <option
diff --git a/packages/frontile/src/components/forms/radio.gts b/packages/frontile/src/components/forms/radio.gts
index ed3017db8..739dea075 100644
--- a/packages/frontile/src/components/forms/radio.gts
+++ b/packages/frontile/src/components/forms/radio.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { FormControl, type FormControlSharedArgs } from './form-control';
 import {
@@ -64,17 +63,17 @@ class Radio<T extends string | boolean | number> extends Component<
     return this.args.checkedValue === this.args.value;
   }
 
-  @action handleChange(event: Event): void {
+  handleChange = (event: Event): void => {
     event.preventDefault();
 
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(this.args.value, event);
     }
-  }
+  };
 
-  @action handleBlur(): void {
+  handleBlur = (): void => {
     this.args.onBlur?.();
-  }
+  };
 
   get classes() {
     const { radio } = useStyles();
diff --git a/packages/frontile/src/components/forms/select.md b/packages/frontile/src/components/forms/select.md
index 61507602b..435abcea5 100644
--- a/packages/frontile/src/components/forms/select.md
+++ b/packages/frontile/src/components/forms/select.md
@@ -118,7 +118,6 @@ interaction later than on a single one.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { array } from '@ember/helper';
 import { Form, type FormResultData } from 'frontile';
 import { Button } from 'frontile';
@@ -164,17 +163,15 @@ export default class SelectFormValidation extends Component {
   };
   @tracked submitMessage = '';
 
-  @action
-  handleFormChange(data: FormResultData<Schema>) {
+  handleFormChange = (data: FormResultData<Schema>) => {
     this.formData = data.data;
     this.submitMessage = '';
-  }
+  };
 
-  @action
-  handleFormSubmit(data: FormResultData<Schema>) {
+  handleFormSubmit = (data: FormResultData<Schema>) => {
     this.submitMessage = 'Form submitted successfully!';
     console.log('Submitted data:', data.data);
-  }
+  };
 
   <template>
     <div class='demo-stack'>
diff --git a/packages/frontile/src/components/forms/switch.md b/packages/frontile/src/components/forms/switch.md
index 462ff517b..0bc357967 100644
--- a/packages/frontile/src/components/forms/switch.md
+++ b/packages/frontile/src/components/forms/switch.md
@@ -85,7 +85,6 @@ The Switch component integrates with the Form validation system, providing autom
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Form, type FormResultData } from 'frontile';
 import { Button } from 'frontile';
 import { array } from '@ember/helper';
@@ -115,16 +114,14 @@ export default class ValidatedSwitch extends Component {
   };
   @tracked submitMessage = '';
 
-  @action
-  handleFormChange(data: FormResultData<Schema>) {
+  handleFormChange = (data: FormResultData<Schema>) => {
     this.formData = data.data;
-  }
+  };
 
-  @action
-  handleFormSubmit(data: FormResultData<Schema>) {
+  handleFormSubmit = (data: FormResultData<Schema>) => {
     this.submitMessage = 'Registration successful!';
     console.log('Form submitted:', data.data);
-  }
+  };
 
   <template>
     <div class='demo-stack'>
diff --git a/packages/frontile/src/components/forms/textarea.gts b/packages/frontile/src/components/forms/textarea.gts
index c70334cdb..397231f29 100644
--- a/packages/frontile/src/components/forms/textarea.gts
+++ b/packages/frontile/src/components/forms/textarea.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { FormControl, type FormControlSharedArgs } from './form-control';
 import {
@@ -62,27 +61,27 @@ interface TextareaSignature {
 }
 
 class Textarea extends Component<TextareaSignature> {
-  @action handleOnInput(event: Event): void {
+  handleOnInput = (event: Event): void => {
     if (typeof this.args.onInput === 'function') {
       this.args.onInput(
         (event.target as HTMLInputElement).value,
         event as InputEvent
       );
     }
-  }
+  };
 
-  @action handleOnChange(event: Event): void {
+  handleOnChange = (event: Event): void => {
     if (typeof this.args.onChange === 'function') {
       this.args.onChange(
         (event.target as HTMLInputElement).value,
         event as InputEvent
       );
     }
-  }
+  };
 
-  @action handleOnBlur(): void {
+  handleOnBlur = (): void => {
     this.args.onBlur?.();
-  }
+  };
 
   get classes() {
     const { textarea } = useStyles();
diff --git a/packages/frontile/src/components/overlays/drawer.md b/packages/frontile/src/components/overlays/drawer.md
index 5097a1d0b..326199d61 100644
--- a/packages/frontile/src/components/overlays/drawer.md
+++ b/packages/frontile/src/components/overlays/drawer.md
@@ -24,16 +24,15 @@ A simple drawer that slides in from the right side.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
 
 export default class BasicDrawer extends Component {
   @tracked isOpen = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -79,7 +78,6 @@ selected.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
@@ -90,14 +88,14 @@ export default class DrawerVariants extends Component {
 
   variants = ['sectioned', 'flat'];
 
-  @action openDrawer(variant) {
+  openDrawer = (variant) => {
     this.selectedVariant = variant;
     this.isOpen = true;
-  }
+  };
 
-  @action closeDrawer() {
+  closeDrawer = () => {
     this.isOpen = false;
-  }
+  };
 
   <template>
     <div class='flex gap-2'>
@@ -135,7 +133,6 @@ The same switch works with the block form of `<d.Header>`, including an icon:
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
@@ -147,14 +144,14 @@ export default class DrawerVariantsIcon extends Component {
 
   variants = ['sectioned', 'flat'];
 
-  @action openDrawer(variant) {
+  openDrawer = (variant) => {
     this.selectedVariant = variant;
     this.isOpen = true;
-  }
+  };
 
-  @action closeDrawer() {
+  closeDrawer = () => {
     this.isOpen = false;
-  }
+  };
 
   <template>
     <div class='flex gap-2'>
@@ -202,16 +199,15 @@ the title when there isn't.
 ```gts preview
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
 
 export default class DrawerHeaderArgs extends Component {
   @tracked isOpen = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
   <template>
     <Button @size='sm' @onPress={{this.toggle}}>
@@ -235,7 +231,6 @@ export default class DrawerHeaderArgs extends Component {
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
 import { SettingsIcon } from 'site/components/icons';
@@ -243,9 +238,9 @@ import { SettingsIcon } from 'site/components/icons';
 export default class DrawerHeaderBlock extends Component {
   @tracked isOpen = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
   <template>
     <Button @size='sm' @onPress={{this.toggle}}>
@@ -278,20 +273,19 @@ Use the `:actions` named block to put controls beside the close button.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Drawer, Button } from 'frontile';
 
 export default class DrawerHeaderActions extends Component {
   @tracked isOpen = false;
   @tracked onlyStarred = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
-  @action toggleStarred() {
+  toggleStarred = () => {
     this.onlyStarred = !this.onlyStarred;
-  }
+  };
 
   <template>
     <Button @size='sm' @onPress={{this.toggle}}>Open Drawer</Button>
@@ -345,16 +339,15 @@ padding of its own, so a full-bleed element placed there spans the panel edge to
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Drawer, Button, Alert } from 'frontile';
 import { SettingsIcon } from 'site/components/icons';
 
 export default class DrawerWithBanner extends Component {
   @tracked isOpen = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
   <template>
     <Button @size='sm' @onPress={{this.toggle}}>Open Drawer</Button>
@@ -401,7 +394,6 @@ Drawers can slide in from any edge of the screen.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
@@ -437,14 +429,14 @@ export default class DrawerPlacements extends Component {
     }
   ];
 
-  @action openDrawer(placement) {
+  openDrawer = (placement) => {
     this.selectedPlacement = placement;
     this.isOpen = true;
-  }
+  };
 
-  @action closeDrawer() {
+  closeDrawer = () => {
     this.isOpen = false;
-  }
+  };
 
   get currentPlacement() {
     return this.placements.find(
@@ -485,7 +477,6 @@ Control the drawer size with the `@size` argument.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
@@ -534,14 +525,14 @@ export default class DrawerSizes extends Component {
     }
   ];
 
-  @action openDrawer(size) {
+  openDrawer = (size) => {
     this.selectedSize = size;
     this.isOpen = true;
-  }
+  };
 
-  @action closeDrawer() {
+  closeDrawer = () => {
     this.isOpen = false;
-  }
+  };
 
   get currentSizeOption() {
     return this.sizeOptions.find((option) => option.key === this.selectedSize);
@@ -593,7 +584,6 @@ first touch, so tapping or starting to scroll never has a false start.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
@@ -604,14 +594,14 @@ export default class DrawerDragBottom extends Component {
 
   variants = ['sectioned', 'flat'];
 
-  @action openDrawer(variant) {
+  openDrawer = (variant) => {
     this.selectedVariant = variant;
     this.isOpen = true;
-  }
+  };
 
-  @action closeDrawer() {
+  closeDrawer = () => {
     this.isOpen = false;
-  }
+  };
 
   <template>
     <div class='flex gap-2'>
@@ -643,16 +633,15 @@ export default class DrawerDragBottom extends Component {
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
 
 export default class DrawerDragRight extends Component {
   @tracked isOpen = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
   <template>
     <Button @size='sm' @onPress={{this.toggle}}>
@@ -685,7 +674,6 @@ Control the appearance of the backdrop behind the drawer.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
@@ -715,14 +703,14 @@ export default class DrawerBackdrops extends Component {
     }
   ];
 
-  @action openDrawer(backdrop) {
+  openDrawer = (backdrop) => {
     this.selectedBackdrop = backdrop;
     this.isOpen = true;
-  }
+  };
 
-  @action closeDrawer() {
+  closeDrawer = () => {
     this.isOpen = false;
-  }
+  };
 
   get currentBackdropOption() {
     return this.backdropOptions.find(
@@ -774,7 +762,6 @@ carry it forward for anatomy consumers styling or querying by `data-part`.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
 
@@ -783,17 +770,17 @@ export default class DrawerCloseButton extends Component {
   @tracked noCloseButtonOpen = false;
   @tracked customCloseOpen = false;
 
-  @action toggleNormal() {
+  toggleNormal = () => {
     this.normalOpen = !this.normalOpen;
-  }
+  };
 
-  @action toggleNoCloseButton() {
+  toggleNoCloseButton = () => {
     this.noCloseButtonOpen = !this.noCloseButtonOpen;
-  }
+  };
 
-  @action toggleCustomClose() {
+  toggleCustomClose = () => {
     this.customCloseOpen = !this.customCloseOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -861,7 +848,6 @@ A drawer that cannot be closed by normal means.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
 import { ProgressBar } from 'frontile';
@@ -871,11 +857,11 @@ export default class NonDismissibleDrawer extends Component {
   @tracked progress = 0;
   @tracked isProcessing = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
-  @action startProcess() {
+  startProcess = () => {
     this.isProcessing = true;
     this.progress = 0;
 
@@ -886,13 +872,13 @@ export default class NonDismissibleDrawer extends Component {
         this.isProcessing = false;
       }
     }, 500);
-  }
+  };
 
-  @action forceClose() {
+  forceClose = () => {
     this.isProcessing = false;
     this.progress = 0;
     this.toggle();
-  }
+  };
 
   get allowClosing() {
     return !this.isProcessing;
@@ -983,7 +969,6 @@ A practical example showing a form inside a drawer.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
 import { Input, Textarea } from 'frontile';
@@ -995,11 +980,11 @@ export default class DrawerForm extends Component {
   @tracked email = '';
   @tracked message = '';
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
-  @action handleSubmit(event) {
+  handleSubmit = (event) => {
     event.preventDefault();
     // Handle form submission
     console.log('Form submitted:', {
@@ -1008,19 +993,19 @@ export default class DrawerForm extends Component {
       message: this.message
     });
     this.toggle();
-  }
+  };
 
-  @action updateName(value) {
+  updateName = (value) => {
     this.name = value;
-  }
+  };
 
-  @action updateEmail(value) {
+  updateEmail = (value) => {
     this.email = value;
-  }
+  };
 
-  @action updateMessage(value) {
+  updateMessage = (value) => {
     this.message = value;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -1082,7 +1067,6 @@ A drawer used for navigation with a list of links.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Drawer } from 'frontile';
 import { Button } from 'frontile';
@@ -1092,14 +1076,14 @@ import { Divider } from 'frontile';
 export default class NavigationDrawer extends Component {
   @tracked isOpen = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
-  @action navigateTo(page) {
+  navigateTo = (page) => {
     console.log('Navigate to:', page);
     this.toggle();
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
diff --git a/packages/frontile/src/components/overlays/modal.md b/packages/frontile/src/components/overlays/modal.md
index 887b4f23c..be60ba734 100644
--- a/packages/frontile/src/components/overlays/modal.md
+++ b/packages/frontile/src/components/overlays/modal.md
@@ -23,16 +23,15 @@ A simple modal with header, body, and footer sections.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Modal } from 'frontile';
 import { Button } from 'frontile';
 
 export default class BasicModal extends Component {
   @tracked isOpen = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -72,7 +71,6 @@ Control the modal size with the `@size` argument.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Modal } from 'frontile';
 import { Button } from 'frontile';
@@ -125,14 +123,14 @@ export default class ModalSizes extends Component {
     }
   ];
 
-  @action openModal(size) {
+  openModal = (size) => {
     this.selectedSize = size;
     this.isOpen = true;
-  }
+  };
 
-  @action closeModal() {
+  closeModal = () => {
     this.isOpen = false;
-  }
+  };
 
   get currentSizeOption() {
     return this.sizeOptions.find((option) => option.key === this.selectedSize);
@@ -175,7 +173,6 @@ vertically.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Modal } from 'frontile';
 import { Button } from 'frontile';
 
@@ -183,13 +180,13 @@ export default class ModalPositioning extends Component {
   @tracked standardOpen = false;
   @tracked centeredOpen = false;
 
-  @action toggleStandard() {
+  toggleStandard = () => {
     this.standardOpen = !this.standardOpen;
-  }
+  };
 
-  @action toggleCentered() {
+  toggleCentered = () => {
     this.centeredOpen = !this.centeredOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -243,7 +240,6 @@ Control the appearance of the backdrop behind the modal.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { Modal } from 'frontile';
 import { Button } from 'frontile';
@@ -273,14 +269,14 @@ export default class ModalBackdrops extends Component {
     }
   ];
 
-  @action openModal(backdrop) {
+  openModal = (backdrop) => {
     this.selectedBackdrop = backdrop;
     this.isOpen = true;
-  }
+  };
 
-  @action closeModal() {
+  closeModal = () => {
     this.isOpen = false;
-  }
+  };
 
   get currentBackdropOption() {
     return this.backdropOptions.find(
@@ -327,7 +323,6 @@ A practical example showing a confirmation dialog pattern.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Modal, Button, Spinner } from 'frontile';
 
 export default class ConfirmationDialog extends Component {
@@ -335,17 +330,17 @@ export default class ConfirmationDialog extends Component {
   @tracked isDeleting = false;
   @tracked result = '';
 
-  @action openDialog() {
+  openDialog = () => {
     this.isOpen = true;
     this.result = '';
-  }
+  };
 
-  @action cancel() {
+  cancel = () => {
     this.isOpen = false;
     this.result = 'Action cancelled';
-  }
+  };
 
-  @action async confirm() {
+  confirm = async () => {
     this.isDeleting = true;
 
     // Simulate async operation
@@ -354,7 +349,7 @@ export default class ConfirmationDialog extends Component {
     this.isDeleting = false;
     this.isOpen = false;
     this.result = 'Item deleted successfully';
-  }
+  };
 
   get allowClosing() {
     return !this.isDeleting;
@@ -425,7 +420,6 @@ A modal containing a complete form with validation.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Modal } from 'frontile';
 import { Button } from 'frontile';
 import { Input, Textarea, Select } from 'frontile';
@@ -446,27 +440,27 @@ export default class FormModal extends Component {
     { key: 'other', label: 'Other' }
   ];
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
-  @action updateName(value) {
+  updateName = (value) => {
     this.name = value;
-  }
+  };
 
-  @action updateEmail(value) {
+  updateEmail = (value) => {
     this.email = value;
-  }
+  };
 
-  @action updateCategory(key) {
+  updateCategory = (key) => {
     this.category = key;
-  }
+  };
 
-  @action updateMessage(value) {
+  updateMessage = (value) => {
     this.message = value;
-  }
+  };
 
-  @action async handleSubmit(event) {
+  handleSubmit = async (event) => {
     event.preventDefault();
 
     if (!this.name || !this.email || !this.message) {
@@ -488,14 +482,14 @@ export default class FormModal extends Component {
     this.isSubmitting = false;
     this.resetForm();
     this.toggle();
-  }
+  };
 
-  @action resetForm() {
+  resetForm = () => {
     this.name = '';
     this.email = '';
     this.category = null;
     this.message = '';
-  }
+  };
 
   get isValid() {
     return this.name && this.email && this.message;
@@ -596,7 +590,6 @@ carry it forward for anatomy consumers styling or querying by `data-part`.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Modal } from 'frontile';
 import { Button } from 'frontile';
 
@@ -605,17 +598,17 @@ export default class ModalCloseButton extends Component {
   @tracked noCloseButtonOpen = false;
   @tracked customCloseOpen = false;
 
-  @action toggleNormal() {
+  toggleNormal = () => {
     this.normalOpen = !this.normalOpen;
-  }
+  };
 
-  @action toggleNoCloseButton() {
+  toggleNoCloseButton = () => {
     this.noCloseButtonOpen = !this.noCloseButtonOpen;
-  }
+  };
 
-  @action toggleCustomClose() {
+  toggleCustomClose = () => {
     this.customCloseOpen = !this.customCloseOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -691,7 +684,6 @@ Example showing modals that can open other modals.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Modal } from 'frontile';
 import { Button } from 'frontile';
 
@@ -700,23 +692,23 @@ export default class NestedModals extends Component {
   @tracked secondModalOpen = false;
   @tracked thirdModalOpen = false;
 
-  @action toggleFirst() {
+  toggleFirst = () => {
     this.firstModalOpen = !this.firstModalOpen;
-  }
+  };
 
-  @action toggleSecond() {
+  toggleSecond = () => {
     this.secondModalOpen = !this.secondModalOpen;
-  }
+  };
 
-  @action toggleThird() {
+  toggleThird = () => {
     this.thirdModalOpen = !this.thirdModalOpen;
-  }
+  };
 
-  @action closeAll() {
+  closeAll = () => {
     this.thirdModalOpen = false;
     this.secondModalOpen = false;
     this.firstModalOpen = false;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
diff --git a/packages/frontile/src/components/overlays/overlay.gts b/packages/frontile/src/components/overlays/overlay.gts
index 438ff5933..adf15394f 100644
--- a/packages/frontile/src/components/overlays/overlay.gts
+++ b/packages/frontile/src/components/overlays/overlay.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { cached, tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { later } from '@ember/runloop';
 import { on } from '@ember/modifier';
 import { cssTransition } from 'ember-css-transitions';
@@ -355,7 +354,7 @@ class Overlay extends Component<OverlaySignature> {
     }
   }
 
-  @action handleContentClick(event: MouseEvent): void {
+  handleContentClick = (event: MouseEvent): void => {
     if (
       this.args.closeOnOutsideClick !== false &&
       this.args.closeOnOverlayElementClick !== false &&
@@ -367,9 +366,9 @@ class Overlay extends Component<OverlaySignature> {
       this.handleClose();
     }
     this.mouseDownContentElement = null;
-  }
+  };
 
-  @action handleOutsideClick(e: Event): void {
+  handleOutsideClick = (e: Event): void => {
     if (
       this.args.closeOnOutsideClick !== false &&
       this.contentElement &&
@@ -379,23 +378,21 @@ class Overlay extends Component<OverlaySignature> {
       this.handleClose();
       e.preventDefault();
     }
-  }
+  };
 
-  @action
-  handleContentMouseDown(event: MouseEvent): void {
+  handleContentMouseDown = (event: MouseEvent): void => {
     if (this.args.closeOnOverlayElementClick !== false) {
       this.mouseDownContentElement = event.target;
     }
-  }
+  };
 
-  @action
-  handleKeyDown(event: KeyboardEvent): void {
+  handleKeyDown = (event: KeyboardEvent): void => {
     if (event.key === 'Escape' && this.args.closeOnEscapeKey !== false) {
       this.handleClose();
       event.preventDefault();
       event.stopImmediatePropagation();
     }
-  }
+  };
 
   setupContent = modifier((el: HTMLDivElement) => {
     let transitionDuration = this.args.transitionDuration || 200;
diff --git a/packages/frontile/src/components/overlays/overlay.md b/packages/frontile/src/components/overlays/overlay.md
index 33e41616b..276b8730d 100644
--- a/packages/frontile/src/components/overlays/overlay.md
+++ b/packages/frontile/src/components/overlays/overlay.md
@@ -22,16 +22,15 @@ The most basic usage of the Overlay component.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Overlay } from 'frontile';
 import { Button } from 'frontile';
 
 export default class BasicOverlay extends Component {
   @tracked isOpen = false;
 
-  @action toggle() {
+  toggle = () => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -66,7 +65,6 @@ Control the appearance of the backdrop behind the overlay.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Overlay } from 'frontile';
 import { Button } from 'frontile';
 
@@ -75,17 +73,17 @@ export default class BackdropTypes extends Component {
   @tracked blurredOpen = false;
   @tracked noneOpen = false;
 
-  @action toggleFaded() {
+  toggleFaded = () => {
     this.fadedOpen = !this.fadedOpen;
-  }
+  };
 
-  @action toggleBlurred() {
+  toggleBlurred = () => {
     this.blurredOpen = !this.blurredOpen;
-  }
+  };
 
-  @action toggleNone() {
+  toggleNone = () => {
     this.noneOpen = !this.noneOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -148,7 +146,6 @@ By default, overlays are rendered in a portal. You can render them in-place inst
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Overlay } from 'frontile';
 import { Button } from 'frontile';
 
@@ -156,13 +153,13 @@ export default class RenderInPlace extends Component {
   @tracked portalOpen = false;
   @tracked inPlaceOpen = false;
 
-  @action togglePortal() {
+  togglePortal = () => {
     this.portalOpen = !this.portalOpen;
-  }
+  };
 
-  @action toggleInPlace() {
+  toggleInPlace = () => {
     this.inPlaceOpen = !this.inPlaceOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -217,7 +214,6 @@ Control when and how the overlay can be closed.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Overlay } from 'frontile';
 import { Button } from 'frontile';
 
@@ -227,27 +223,27 @@ export default class CustomCloseBehavior extends Component {
   @tracked noOutsideClickOpen = false;
   @tracked confirmCloseOpen = false;
 
-  @action toggleNormal() {
+  toggleNormal = () => {
     this.normalOpen = !this.normalOpen;
-  }
+  };
 
-  @action toggleNoEscape() {
+  toggleNoEscape = () => {
     this.noEscapeOpen = !this.noEscapeOpen;
-  }
+  };
 
-  @action toggleNoOutsideClick() {
+  toggleNoOutsideClick = () => {
     this.noOutsideClickOpen = !this.noOutsideClickOpen;
-  }
+  };
 
-  @action toggleConfirmClose() {
+  toggleConfirmClose = () => {
     this.confirmCloseOpen = !this.confirmCloseOpen;
-  }
+  };
 
-  @action handleConfirmClose() {
+  handleConfirmClose = () => {
     if (confirm('Are you sure you want to close this overlay?')) {
       this.confirmCloseOpen = false;
     }
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -322,7 +318,6 @@ Demonstrate focus trapping and restoration features.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Overlay } from 'frontile';
 import { Button } from 'frontile';
 import { Input } from 'frontile';
@@ -331,13 +326,13 @@ export default class FocusManagement extends Component {
   @tracked focusTrapOpen = false;
   @tracked noFocusTrapOpen = false;
 
-  @action toggleFocusTrap() {
+  toggleFocusTrap = () => {
     this.focusTrapOpen = !this.focusTrapOpen;
-  }
+  };
 
-  @action toggleNoFocusTrap() {
+  toggleNoFocusTrap = () => {
     this.noFocusTrapOpen = !this.noFocusTrapOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -406,7 +401,6 @@ Customize overlay animations and transition duration.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Overlay } from 'frontile';
 import { Button } from 'frontile';
 
@@ -415,17 +409,17 @@ export default class AnimationsAndTransitions extends Component {
   @tracked slowOpen = false;
   @tracked noAnimationOpen = false;
 
-  @action toggleFast() {
+  toggleFast = () => {
     this.fastOpen = !this.fastOpen;
-  }
+  };
 
-  @action toggleSlow() {
+  toggleSlow = () => {
     this.slowOpen = !this.slowOpen;
-  }
+  };
 
-  @action toggleNoAnimation() {
+  toggleNoAnimation = () => {
     this.noAnimationOpen = !this.noAnimationOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -495,7 +489,6 @@ either way, and so does closing.
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Overlay } from 'frontile';
 import { Button } from 'frontile';
 
@@ -503,21 +496,21 @@ export default class OverlaysThatStartOpen extends Component {
   @tracked showAnimated = false;
   @tracked showImmediate = false;
 
-  @action mountAnimated() {
+  mountAnimated = () => {
     this.showAnimated = true;
-  }
+  };
 
-  @action mountImmediate() {
+  mountImmediate = () => {
     this.showImmediate = true;
-  }
+  };
 
-  @action closeAnimated() {
+  closeAnimated = () => {
     this.showAnimated = false;
-  }
+  };
 
-  @action closeImmediate() {
+  closeImmediate = () => {
     this.showImmediate = false;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
@@ -568,7 +561,6 @@ The Overlay component has two different click-to-close mechanisms that work toge
 ```gts preview collapsible
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Overlay } from 'frontile';
 import { Button } from 'frontile';
 
@@ -576,13 +568,13 @@ export default class OverlayElementClick extends Component {
   @tracked defaultOpen = false;
   @tracked disabledOpen = false;
 
-  @action toggleDefault() {
+  toggleDefault = () => {
     this.defaultOpen = !this.defaultOpen;
-  }
+  };
 
-  @action toggleDisabled() {
+  toggleDisabled = () => {
     this.disabledOpen = !this.disabledOpen;
-  }
+  };
 
   <template>
     <div class='demo-stack demo-stack--wide items-center'>
diff --git a/packages/frontile/src/components/utilities/avatar.gts b/packages/frontile/src/components/utilities/avatar.gts
index 8bbddecc5..ca0617120 100644
--- a/packages/frontile/src/components/utilities/avatar.gts
+++ b/packages/frontile/src/components/utilities/avatar.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import {
   useStyles,
@@ -111,10 +110,9 @@ class Avatar extends Component<AvatarSignature> {
     return Boolean(src) && src !== this.failedSrc;
   }
 
-  @action
-  handleImageError() {
+  handleImageError = () => {
     this.failedSrc = this.args.src;
-  }
+  };
 
   get initials() {
     const { name, firstName, lastName } = this.args;

From a55721e7b0e90d6b0e5ef5c147a0c41d033a2226 Mon Sep 17 00:00:00 2001
From: Josemar Luedke <jluedke@underline.com>
Date: Fri, 25 Sep 2026 11:08:42 -0700
Subject: [PATCH 3/4] refactor: replace @action with arrow-function class
 fields in docs, site and test-app

Same conversion as the packages, per RFC 1045. The guide docs' code
fences are live Docfy demos, so they now teach the arrow form.

The application route's didTransition keeps @action: it is a router
event, looked up in the route's actions hash, which an arrow field is
not part of.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/migrations/v0.18/changeset-form.md       | 16 ++++-----
 docs/theming/configuration/theme-switching.md |  6 ++--
 site/app/components/docfy/docfy-copy-page.gts | 36 ++++++++-----------
 site/app/components/docfy/docfy-header.gts    | 17 +++++----
 .../components/docfy/docfy-page-headings.gts  |  5 ++-
 .../docfy/docfy-sidebar-nav/content.gts       | 11 +++---
 .../docfy/docfy-sidebar-nav/index.gts         |  9 +++--
 .../components/docfy/docfy-theme-switcher.gts |  6 ++--
 site/app/components/homepage/code-panel.gts   |  6 ++--
 .../components/homepage/keyboard-proof.gts    | 11 +++---
 site/app/components/homepage/theme-lab.gts    |  6 ++--
 site/app/components/homepage/theme-seam.gts   | 21 +++++------
 .../theme-docs/color-palette-grid.gts         |  6 ++--
 site/app/components/version-dropdown.gts      |  6 ++--
 site/app/controllers/docs.ts                  |  5 ++-
 .../app/modifiers/docfy-intersect-headings.ts |  6 ++--
 site/app/templates/index.gts                  | 26 ++++++--------
 .../app/components/buttons/button-group.gts   |  6 ++--
 test-app/app/components/buttons/dropdown.gts  | 11 +++---
 test-app/app/components/buttons/listbox.gts   | 16 ++++-----
 .../app/components/buttons/toggle-button.gts  |  6 ++--
 .../components/forms-legacy/form-example.gts  | 15 ++++----
 test-app/app/components/forms/select.gts      | 21 +++++------
 .../app/components/overlays/demo-drawer.gts   | 21 ++++++-----
 .../app/components/overlays/demo-modal.gts    | 17 +++++----
 test-app/app/components/theme-switcher.gts    |  5 ++-
 26 files changed, 125 insertions(+), 192 deletions(-)

diff --git a/docs/migrations/v0.18/changeset-form.md b/docs/migrations/v0.18/changeset-form.md
index df1222e00..803bcd1b9 100644
--- a/docs/migrations/v0.18/changeset-form.md
+++ b/docs/migrations/v0.18/changeset-form.md
@@ -279,7 +279,6 @@ Key changes: manual binding and Select key-based selection.
 ```typescript
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class ChangesetFormComponent extends Component {
   @tracked hasSubmitted = false;
@@ -296,25 +295,22 @@ export default class ChangesetFormComponent extends Component {
     { key: 'ca', label: 'Canada' }
   ];
 
-  @action
-  updateField(changeset, fieldName, value) {
+  updateField = (changeset, fieldName, value) => {
     changeset.set(fieldName, value);
     changeset.validate(fieldName);
-  }
+  };
 
   // Select components use keys, need conversion for changeset
-  @action
-  updateCountry(changeset, selectedKey) {
+  updateCountry = (changeset, selectedKey) => {
     changeset.set('country', selectedKey);
     changeset.validate('country');
-  }
+  };
 
   getSelectedCountry(changeset) {
     return changeset.get('country') || null;
   }
 
-  @action
-  async handleSubmit(changeset, event) {
+  handleSubmit = async (changeset, event) => {
     event.preventDefault();
     await changeset.validate();
     this.hasSubmitted = true;
@@ -322,7 +318,7 @@ export default class ChangesetFormComponent extends Component {
     if (changeset.isValid) {
       await changeset.save({});
     }
-  }
+  };
 
   getFieldErrors(changeset, fieldName) {
     if (!this.hasSubmitted) return [];
diff --git a/docs/theming/configuration/theme-switching.md b/docs/theming/configuration/theme-switching.md
index 69e01d698..1a7d8af55 100644
--- a/docs/theming/configuration/theme-switching.md
+++ b/docs/theming/configuration/theme-switching.md
@@ -38,7 +38,6 @@ fight this site's own theme switcher.
 ```gts
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { Button } from 'frontile';
 
 export default class ThemeToggle extends Component {
@@ -54,12 +53,11 @@ export default class ThemeToggle extends Component {
     this.applyTheme();
   }
 
-  @action
-  toggleTheme(): void {
+  toggleTheme = (): void => {
     this.isDark = !this.isDark;
     this.applyTheme();
     localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
-  }
+  };
 
   applyTheme(): void {
     const html = document.documentElement;
diff --git a/site/app/components/docfy/docfy-copy-page.gts b/site/app/components/docfy/docfy-copy-page.gts
index 39353fbef..ddc626f87 100644
--- a/site/app/components/docfy/docfy-copy-page.gts
+++ b/site/app/components/docfy/docfy-copy-page.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { ButtonGroup, Dropdown } from 'frontile';
 import { currentOrigin } from 'site/utils/origin';
@@ -102,8 +101,7 @@ export default class DocfyCopyPage extends Component<DocfyCopyPageSignature> {
     }
   }
 
-  @action
-  async copyPage(): Promise<void> {
+  copyPage = async (): Promise<void> => {
     this.status = 'copying';
     try {
       const response = await fetch(this.mdUrl);
@@ -118,12 +116,11 @@ export default class DocfyCopyPage extends Component<DocfyCopyPageSignature> {
     } finally {
       this.resetAfterDelay();
     }
-  }
+  };
 
   // Copies the `.md` URL itself, rather than the page contents — handy for
   // pasting into an agent that will do its own fetching.
-  @action
-  async copyMarkdownUrl(): Promise<void> {
+  copyMarkdownUrl = async (): Promise<void> => {
     try {
       await navigator.clipboard.writeText(this.mdUrl);
       this.status = 'copied-url';
@@ -132,30 +129,26 @@ export default class DocfyCopyPage extends Component<DocfyCopyPageSignature> {
     } finally {
       this.resetAfterDelay();
     }
-  }
+  };
 
-  @action
-  openInChatGpt(): void {
+  openInChatGpt = (): void => {
     window.open(this.chatGptUrl, '_blank', 'noopener,noreferrer');
-  }
+  };
 
-  @action
-  openInClaude(): void {
+  openInClaude = (): void => {
     window.open(this.claudeUrl, '_blank', 'noopener,noreferrer');
-  }
+  };
 
-  @action
-  viewAsMarkdown(): void {
+  viewAsMarkdown = (): void => {
     window.open(this.mdUrl, '_blank', 'noopener,noreferrer');
-  }
+  };
 
   // The anchor keeps a real `href` so middle-click/ctrl-click/"copy link
   // address" work natively. A plain left-click is instead routed through
   // the Dropdown's onAction -> viewAsMarkdown (which also covers keyboard
   // activation, since a menuitem's Enter/Space never reaches this anchor) —
   // so a plain click must not navigate too, or it would open two tabs.
-  @action
-  guardAnchorClick(event: MouseEvent): void {
+  guardAnchorClick = (event: MouseEvent): void => {
     if (
       event.button === 0 &&
       !event.metaKey &&
@@ -173,10 +166,9 @@ export default class DocfyCopyPage extends Component<DocfyCopyPageSignature> {
       // otherwise open a second tab via viewAsMarkdown().
       event.stopPropagation();
     }
-  }
+  };
 
-  @action
-  handleMenuAction(key: string): void {
+  handleMenuAction = (key: string): void => {
     if (key === 'copy-markdown-url') {
       void this.copyMarkdownUrl();
     } else if (key === 'view-as-markdown') {
@@ -186,7 +178,7 @@ export default class DocfyCopyPage extends Component<DocfyCopyPageSignature> {
     } else if (key === 'open-claude') {
       this.openInClaude();
     }
-  }
+  };
 
   <template>
     <div class="inline-flex" data-test-id="docfy-copy-page" ...attributes>
diff --git a/site/app/components/docfy/docfy-header.gts b/site/app/components/docfy/docfy-header.gts
index 13fcf2c45..1da60866d 100644
--- a/site/app/components/docfy/docfy-header.gts
+++ b/site/app/components/docfy/docfy-header.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { LinkTo } from '@ember/routing';
 import { Collapsible, VisuallyHidden } from 'frontile';
@@ -79,28 +78,28 @@ const PANEL_LINK =
 export default class DocfyHeader extends Component<DocfyHeaderSignature> {
   @tracked isMenuOpen = false;
 
-  @action toggleMenu(): void {
+  toggleMenu = (): void => {
     this.isMenuOpen = !this.isMenuOpen;
-  }
+  };
 
-  @action closeMenu(): void {
+  closeMenu = (): void => {
     this.isMenuOpen = false;
-  }
+  };
 
   /**
    * The panel holds nothing but links, so any click inside it is a navigation
    * and the panel should get out of the way. Keyed off the container rather
    * than each link so a link added later needs no wiring.
    */
-  @action handlePanelClick(): void {
+  handlePanelClick = (): void => {
     this.closeMenu();
-  }
+  };
 
-  @action handleKeydown(event: KeyboardEvent): void {
+  handleKeydown = (event: KeyboardEvent): void => {
     if (event.key === 'Escape') {
       this.closeMenu();
     }
-  }
+  };
 
   <template>
     <div class="sticky top-0 z-1">
diff --git a/site/app/components/docfy/docfy-page-headings.gts b/site/app/components/docfy/docfy-page-headings.gts
index ef6a4f692..f67ca8c0f 100644
--- a/site/app/components/docfy/docfy-page-headings.gts
+++ b/site/app/components/docfy/docfy-page-headings.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { DocfyOutput } from '@docfy/ember';
 
@@ -69,14 +68,14 @@ interface Signature {
 }
 
 export default class PageHeadings extends Component<Signature> {
-  @action onClick(evt: MouseEvent): void {
+  onClick = (evt: MouseEvent): void => {
     const href = (evt.target as HTMLElement).getAttribute('href');
     if (href) {
       const toElement = document.querySelector(href) as HTMLElement;
 
       scrollToElement(toElement);
     }
-  }
+  };
   <template>
     <div
       class="overflow-y-auto sticky top-28 max-h-screen-28 pt-12 pb-4 -mt-12 text-sm text-neutral-firm"
diff --git a/site/app/components/docfy/docfy-sidebar-nav/content.gts b/site/app/components/docfy/docfy-sidebar-nav/content.gts
index a4e516c72..8924b2c96 100644
--- a/site/app/components/docfy/docfy-sidebar-nav/content.gts
+++ b/site/app/components/docfy/docfy-sidebar-nav/content.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import { concat } from '@ember/helper';
@@ -83,8 +82,7 @@ export default class DocfySidebarNavContent extends Component<Signature> {
     this.expandedSections = sectionsToExpand;
   }
 
-  @action
-  toggleSection(sectionKey: string) {
+  toggleSection = (sectionKey: string) => {
     if (this.expandedSections.has(sectionKey)) {
       // If section is expanded, collapse it
       this.expandedSections.delete(sectionKey);
@@ -108,7 +106,7 @@ export default class DocfySidebarNavContent extends Component<Signature> {
       }
     }
     this.expandedSections = new Set(this.expandedSections);
-  }
+  };
 
   private isCurrentPageInSection(
     sectionKey: string,
@@ -137,10 +135,9 @@ export default class DocfySidebarNavContent extends Component<Signature> {
     return subChild?.pages?.[0]?.url ?? null;
   }
 
-  @action
-  isExpanded(sectionKey: string) {
+  isExpanded = (sectionKey: string) => {
     return this.expandedSections.has(sectionKey);
-  }
+  };
   <template>
     <div ...attributes>
       {{! template-lint-disable no-invalid-interactive }}
diff --git a/site/app/components/docfy/docfy-sidebar-nav/index.gts b/site/app/components/docfy/docfy-sidebar-nav/index.gts
index ce2f9ff26..048a80db7 100644
--- a/site/app/components/docfy/docfy-sidebar-nav/index.gts
+++ b/site/app/components/docfy/docfy-sidebar-nav/index.gts
@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
-import { action } from '@ember/object';
 import { VisuallyHidden } from 'frontile';
 import { Drawer } from 'frontile';
 import IconMenu from '~icons/lucide/menu';
@@ -18,11 +17,11 @@ interface Signature {
 export default class SidebarNav extends Component<Signature> {
   @tracked isOpen = false;
 
-  @action toggle(): void {
+  toggle = (): void => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
-  @action handleSidebarClick(event: Event): void {
+  handleSidebarClick = (event: Event): void => {
     if (this.isOpen) {
       const target = event.target as Element;
 
@@ -46,7 +45,7 @@ export default class SidebarNav extends Component<Signature> {
         this.toggle();
       }
     }
-  }
+  };
   <template>
     <button
       type="button"
diff --git a/site/app/components/docfy/docfy-theme-switcher.gts b/site/app/components/docfy/docfy-theme-switcher.gts
index fa00fc1df..1690566ba 100644
--- a/site/app/components/docfy/docfy-theme-switcher.gts
+++ b/site/app/components/docfy/docfy-theme-switcher.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { hash } from '@ember/helper';
 import { registerDestructor } from '@ember/destroyable';
 import { SegmentedControl, Tooltip } from 'frontile';
@@ -129,8 +128,7 @@ export default class DocfyThemeSwitcher extends Component<Signature> {
     return this.mode === 'dark';
   }
 
-  @action
-  selectMode(value: Mode): void {
+  selectMode = (value: Mode): void => {
     if (!isMode(value)) {
       return;
     }
@@ -138,7 +136,7 @@ export default class DocfyThemeSwitcher extends Component<Signature> {
     this.mode = value;
     writeStoredMode(value);
     this.applyClasses();
-  }
+  };
 
   applyClasses(): void {
     const root = document.documentElement;
diff --git a/site/app/components/homepage/code-panel.gts b/site/app/components/homepage/code-panel.gts
index f0e54381f..5786a347c 100644
--- a/site/app/components/homepage/code-panel.gts
+++ b/site/app/components/homepage/code-panel.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { htmlSafe } from '@ember/template';
 import { Button, Collapsible } from 'frontile';
 
@@ -49,10 +48,9 @@ export default class CodePanel extends Component<Signature> {
     return htmlSafe(this.args.html ?? '');
   }
 
-  @action
-  toggle(): void {
+  toggle = (): void => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
   <template>
     {{! Dark in both schemes via the --color-code-* tokens, lifted by a real
diff --git a/site/app/components/homepage/keyboard-proof.gts b/site/app/components/homepage/keyboard-proof.gts
index 3b9cc9755..92782a405 100644
--- a/site/app/components/homepage/keyboard-proof.gts
+++ b/site/app/components/homepage/keyboard-proof.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { Listbox } from 'frontile';
 
@@ -47,8 +46,7 @@ export default class KeyboardProof extends Component {
     return this.selectedKeys[0] ?? 'nothing';
   }
 
-  @action
-  handleKeyDown(event: KeyboardEvent): void {
+  handleKeyDown = (event: KeyboardEvent): void => {
     const described = NAMED_KEYS[event.key];
 
     if (described) {
@@ -56,12 +54,11 @@ export default class KeyboardProof extends Component {
     } else if (event.key.length === 1) {
       this.lastKey = `"${event.key}" → typeahead to a matching option`;
     }
-  }
+  };
 
-  @action
-  handleSelectionChange(keys: string[]): void {
+  handleSelectionChange = (keys: string[]): void => {
     this.selectedKeys = keys;
-  }
+  };
 
   <template>
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 items-start">
diff --git a/site/app/components/homepage/theme-lab.gts b/site/app/components/homepage/theme-lab.gts
index 529a212c6..ee395e441 100644
--- a/site/app/components/homepage/theme-lab.gts
+++ b/site/app/components/homepage/theme-lab.gts
@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import type { TOC } from '@ember/component/template-only';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { htmlSafe } from '@ember/template';
 import { Button, Chip, Field, ProgressBar, ToggleButton } from 'frontile';
@@ -152,10 +151,9 @@ export default class ThemeLab extends Component {
 
   @tracked activePreset: Preset = PRESETS[0]!;
 
-  @action
-  selectPreset(next: Preset): void {
+  selectPreset = (next: Preset): void => {
     this.activePreset = next;
-  }
+  };
 
   isActive = (key: string): boolean => key === this.activePreset.key;
 
diff --git a/site/app/components/homepage/theme-seam.gts b/site/app/components/homepage/theme-seam.gts
index f9a9c454c..1193f456a 100644
--- a/site/app/components/homepage/theme-seam.gts
+++ b/site/app/components/homepage/theme-seam.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { htmlSafe } from '@ember/template';
 import { on } from '@ember/modifier';
 import { VisuallyHidden } from 'frontile';
@@ -79,8 +78,7 @@ export default class ThemeSeam extends Component<Signature> {
     this.split = this.clamp(((clientX - rect.left) / rect.width) * 100);
   }
 
-  @action
-  handlePointerDown(event: PointerEvent): void {
+  handlePointerDown = (event: PointerEvent): void => {
     const handle = event.currentTarget as HTMLElement;
 
     this.dragging = true;
@@ -89,19 +87,17 @@ export default class ThemeSeam extends Component<Signature> {
     handle.focus();
     this.setFromClientX(handle, event.clientX);
     event.preventDefault();
-  }
+  };
 
-  @action
-  handlePointerMove(event: PointerEvent): void {
+  handlePointerMove = (event: PointerEvent): void => {
     if (!this.dragging) {
       return;
     }
 
     this.setFromClientX(event.currentTarget as HTMLElement, event.clientX);
-  }
+  };
 
-  @action
-  handlePointerUp(event: PointerEvent): void {
+  handlePointerUp = (event: PointerEvent): void => {
     const handle = event.currentTarget as HTMLElement;
 
     this.dragging = false;
@@ -110,10 +106,9 @@ export default class ThemeSeam extends Component<Signature> {
     if (handle.hasPointerCapture(event.pointerId)) {
       handle.releasePointerCapture(event.pointerId);
     }
-  }
+  };
 
-  @action
-  handleKeyDown(event: KeyboardEvent): void {
+  handleKeyDown = (event: KeyboardEvent): void => {
     const step = event.shiftKey ? 10 : 2;
     let next: number;
 
@@ -141,7 +136,7 @@ export default class ThemeSeam extends Component<Signature> {
 
     this.split = this.clamp(next);
     event.preventDefault();
-  }
+  };
 
   <template>
     {{! --seam-handle-size and --seam-split are read by the positioning
diff --git a/site/app/components/theme-docs/color-palette-grid.gts b/site/app/components/theme-docs/color-palette-grid.gts
index c0d9c48c1..542d533eb 100644
--- a/site/app/components/theme-docs/color-palette-grid.gts
+++ b/site/app/components/theme-docs/color-palette-grid.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import ColorSwatch from './color-swatch';
 import { CheckIcon } from '../icons';
 
@@ -35,8 +34,7 @@ export default class ColorPaletteGrid extends Component<ColorPaletteGridSignatur
     return colorLevels;
   }
 
-  @action
-  handleCopy(className: string) {
+  handleCopy = (className: string) => {
     this.copiedClass = className;
 
     if (this.copyTimeout) {
@@ -46,7 +44,7 @@ export default class ColorPaletteGrid extends Component<ColorPaletteGridSignatur
     this.copyTimeout = setTimeout(() => {
       this.copiedClass = null;
     }, 2000);
-  }
+  };
 
   willDestroy() {
     super.willDestroy();
diff --git a/site/app/components/version-dropdown.gts b/site/app/components/version-dropdown.gts
index 70d4e1d0b..3273e8953 100644
--- a/site/app/components/version-dropdown.gts
+++ b/site/app/components/version-dropdown.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown, VisuallyHidden } from 'frontile';
 import { currentDomain, stripScheme } from 'site/utils/origin';
 import { ChevronDownIcon } from './icons';
@@ -83,8 +82,7 @@ export default class VersionDropdown extends Component<VersionDropdownSignature>
     return version.note ? `${version.label} (${version.note})` : version.label;
   };
 
-  @action
-  onVersionSelect(key: string): void {
+  onVersionSelect = (key: string): void => {
     const version = this.versions.find((v) => v.key === key);
     if (!version) {
       return;
@@ -96,7 +94,7 @@ export default class VersionDropdown extends Component<VersionDropdownSignature>
     }
 
     window.location.href = version.url;
-  }
+  };
 
   <template>
     <div ...attributes>
diff --git a/site/app/controllers/docs.ts b/site/app/controllers/docs.ts
index 6cf6017b7..46dc24580 100644
--- a/site/app/controllers/docs.ts
+++ b/site/app/controllers/docs.ts
@@ -1,11 +1,10 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class DocsController extends Controller {
   @tracked currentHeadingId?: string;
 
-  @action setCurrentHeadingId(id: string): void {
+  setCurrentHeadingId = (id: string): void => {
     this.currentHeadingId = id;
-  }
+  };
 }
diff --git a/site/app/modifiers/docfy-intersect-headings.ts b/site/app/modifiers/docfy-intersect-headings.ts
index 47cdab86b..73ffa7b6f 100644
--- a/site/app/modifiers/docfy-intersect-headings.ts
+++ b/site/app/modifiers/docfy-intersect-headings.ts
@@ -3,7 +3,6 @@ import Modifier, {
   type PositionalArgs,
   type NamedArgs,
 } from 'ember-modifier';
-import { action } from '@ember/object';
 import { registerDestructor } from '@ember/destroyable';
 
 interface Heading {
@@ -39,8 +38,7 @@ export default class IntersectHeadingsModifier extends Modifier<Signature> {
   observer: IntersectionObserver | null = null;
   activeIndex: number = -1;
 
-  @action
-  handleObserver(elements: IntersectionObserverEntry[]): void {
+  handleObserver = (elements: IntersectionObserverEntry[]): void => {
     // Based on https://taylor.callsen.me/modern-navigation-menus-with-css-position-sticky-and-intersectionobservers/
 
     // current index must be memoized or tracked outside of function for comparison
@@ -93,7 +91,7 @@ export default class IntersectHeadingsModifier extends Modifier<Signature> {
         this.handler(this.headings[this.activeIndex] as string);
       }
     }
-  }
+  };
 
   observe(): void {
     if ('IntersectionObserver' in window) {
diff --git a/site/app/templates/index.gts b/site/app/templates/index.gts
index b28d23d77..a0ffd1f18 100644
--- a/site/app/templates/index.gts
+++ b/site/app/templates/index.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { hash } from '@ember/helper';
 import { NotificationCard, Notification } from 'frontile/notifications';
 import {
@@ -113,30 +112,25 @@ export default class IndexPage extends Component {
     { key: 'role', name: 'Role' },
   ] as const satisfies ColumnConfig<Member>[];
 
-  @action
-  openModal(): void {
+  openModal = (): void => {
     this.isModalOpen = true;
-  }
+  };
 
-  @action
-  closeModal(): void {
+  closeModal = (): void => {
     this.isModalOpen = false;
-  }
+  };
 
-  @action
-  openDrawer(): void {
+  openDrawer = (): void => {
     this.isDrawerOpen = true;
-  }
+  };
 
-  @action
-  closeDrawer(): void {
+  closeDrawer = (): void => {
     this.isDrawerOpen = false;
-  }
+  };
 
-  @action
-  setNotifyByEmail(value: boolean): void {
+  setNotifyByEmail = (value: boolean): void => {
     this.notifyByEmail = value;
-  }
+  };
 
   <template>
     <div class="bg-surface-app relative">
diff --git a/test-app/app/components/buttons/button-group.gts b/test-app/app/components/buttons/button-group.gts
index 19a9b8a91..4cfa67699 100644
--- a/test-app/app/components/buttons/button-group.gts
+++ b/test-app/app/components/buttons/button-group.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { ButtonGroup } from 'frontile';
 
@@ -12,11 +11,10 @@ export default class Example extends Component {
     third: false
   };
 
-  @action
-  onChange(ty: keyof typeof this.isSelected, value: boolean): void {
+  onChange = (ty: keyof typeof this.isSelected, value: boolean): void => {
     this.isSelected[ty] = value;
     this.isSelected = { ...this.isSelected };
-  }
+  };
 
   <template>
     <h2 class="text-2xl mt-6">
diff --git a/test-app/app/components/buttons/dropdown.gts b/test-app/app/components/buttons/dropdown.gts
index 8e132d348..19f742e15 100644
--- a/test-app/app/components/buttons/dropdown.gts
+++ b/test-app/app/components/buttons/dropdown.gts
@@ -1,18 +1,15 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 import { Dropdown } from 'frontile';
 
 export default class Example extends Component {
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Click on key', key);
-  }
+  };
 
-  @action
-  delete() {
+  delete = () => {
     alert('delete');
-  }
+  };
 
   <template>
     <Dropdown as |d|>
diff --git a/test-app/app/components/buttons/listbox.gts b/test-app/app/components/buttons/listbox.gts
index a39017568..ca10beb94 100644
--- a/test-app/app/components/buttons/listbox.gts
+++ b/test-app/app/components/buttons/listbox.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { array } from '@ember/helper';
 import { Listbox } from 'frontile';
 import { Divider } from 'frontile';
@@ -26,21 +25,18 @@ export default class Example extends Component {
   @tracked selectedKeys: string[] = [];
   @tracked selectedKeys2: string[] = [];
 
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Click on key', key);
-  }
+  };
 
-  @action
-  onSelectionChange(keys: string[]) {
+  onSelectionChange = (keys: string[]) => {
     this.selectedKeys = keys;
-  }
+  };
 
-  @action
-  onSelectionChange2(keys: string[]) {
+  onSelectionChange2 = (keys: string[]) => {
     this.selectedKeys2 = keys;
-  }
+  };
 
   <template>
     <div class="w-[260px] border px-1 py-2 rounded border-neutral-subtle mt-4">
diff --git a/test-app/app/components/buttons/toggle-button.gts b/test-app/app/components/buttons/toggle-button.gts
index 4f47c60c1..67ced3385 100644
--- a/test-app/app/components/buttons/toggle-button.gts
+++ b/test-app/app/components/buttons/toggle-button.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { ToggleButton } from 'frontile/buttons';
 
@@ -16,11 +15,10 @@ export default class Example extends Component<ExampleArgs> {
     danger: false
   };
 
-  @action
-  onChange(ty: keyof typeof this.isSelected, value: boolean): void {
+  onChange = (ty: keyof typeof this.isSelected, value: boolean): void => {
     this.isSelected[ty] = value;
     this.isSelected = { ...this.isSelected };
-  }
+  };
 
   <template>
     <h2 class="text-2xl mt-6">
diff --git a/test-app/app/components/forms-legacy/form-example.gts b/test-app/app/components/forms-legacy/form-example.gts
index 1908e6a4c..97cbeeabd 100644
--- a/test-app/app/components/forms-legacy/form-example.gts
+++ b/test-app/app/components/forms-legacy/form-example.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 
 import FormInput from '@frontile/forms-legacy/components/form-input';
@@ -85,18 +84,18 @@ export default class FormExample extends Component<FormExampleArgs> {
     return this.interests.includes('Entertainment');
   }
 
-  @action setCountry(value: unknown): void {
+  setCountry = (value: unknown): void => {
     this.country = value;
-  }
+  };
 
-  @action setField(
+  setField = (
     fieldName: 'firstName' | 'email' | 'accountType' | 'isInline' | 'size',
     value: string | boolean
-  ): void {
+  ): void => {
     this[fieldName] = value as never;
-  }
+  };
 
-  @action setInterest(interest: string, isChecked: boolean): void {
+  setInterest = (interest: string, isChecked: boolean): void => {
     if (isChecked) {
       this.interests = [...this.interests, interest];
     } else {
@@ -104,7 +103,7 @@ export default class FormExample extends Component<FormExampleArgs> {
         return element !== interest;
       });
     }
-  }
+  };
 
   <template>
     {{! @glint-nocheck }}
diff --git a/test-app/app/components/forms/select.gts b/test-app/app/components/forms/select.gts
index db3b80c17..631007eef 100644
--- a/test-app/app/components/forms/select.gts
+++ b/test-app/app/components/forms/select.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { array } from '@ember/helper';
 import { Select } from 'frontile';
 import { Divider } from 'frontile';
@@ -44,26 +43,22 @@ export default class Example extends Component {
   @tracked selectedKey2: string | null = 'elephant'; // Single selection
   @tracked selectedKey3: string | null = null; // Single selection
 
-  @action
-  onAction(key: string) {
+  onAction = (key: string) => {
     // eslint-disable-next-line
     console.log('Click on key', key);
-  }
+  };
 
-  @action
-  onSelectionChange(keys: string[]) {
+  onSelectionChange = (keys: string[]) => {
     this.selectedKeys = keys;
-  }
+  };
 
-  @action
-  onSelectionChange2(key: string | null) {
+  onSelectionChange2 = (key: string | null) => {
     this.selectedKey2 = key;
-  }
+  };
 
-  @action
-  onSelectionChange3(key: string | null) {
+  onSelectionChange3 = (key: string | null) => {
     this.selectedKey3 = key;
-  }
+  };
 
   <template>
     <Select
diff --git a/test-app/app/components/overlays/demo-drawer.gts b/test-app/app/components/overlays/demo-drawer.gts
index 189c99494..5b42a4652 100644
--- a/test-app/app/components/overlays/demo-drawer.gts
+++ b/test-app/app/components/overlays/demo-drawer.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { later } from '@ember/runloop';
 import { Button } from 'frontile';
 import { on } from '@ember/modifier';
@@ -18,23 +17,23 @@ export default class DemoDrawer extends Component {
   @tracked placement: DrawerSignature['Args']['placement'] = 'right';
   @tracked size: DrawerSignature['Args']['size'] = 'md';
 
-  @action toggleIsOpen(): void {
+  toggleIsOpen = (): void => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
-  @action toggleIsInPlaceOpen(): void {
+  toggleIsInPlaceOpen = (): void => {
     this.isInPlaceOpen = !this.isInPlaceOpen;
-  }
+  };
 
-  @action setPlacement(placement: string, _: Event): void {
+  setPlacement = (placement: string, _: Event): void => {
     this.placement = placement as DrawerSignature['Args']['placement'];
-  }
+  };
 
-  @action setSize(size: string): void {
+  setSize = (size: string): void => {
     this.size = size as DrawerSignature['Args']['size'];
-  }
+  };
 
-  @action save(): void {
+  save = (): void => {
     this.isLoading = true;
 
     later(
@@ -46,7 +45,7 @@ export default class DemoDrawer extends Component {
       },
       1000
     );
-  }
+  };
 
   <template>
     <div class="mt-10">
diff --git a/test-app/app/components/overlays/demo-modal.gts b/test-app/app/components/overlays/demo-modal.gts
index a611193e2..9c07fa581 100644
--- a/test-app/app/components/overlays/demo-modal.gts
+++ b/test-app/app/components/overlays/demo-modal.gts
@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { Button } from 'frontile';
 import { Modal } from 'frontile';
-import { action } from '@ember/object';
 import { later } from '@ember/runloop';
 import { on } from '@ember/modifier';
 import { RadioGroup } from 'frontile';
@@ -16,19 +15,19 @@ export default class DemoModal extends Component<DemoModalArgs> {
   @tracked isLoading = false;
   @tracked size: ModalSignature['Args']['size'] = 'lg';
 
-  @action toggleModal(): void {
+  toggleModal = (): void => {
     this.isOpen = !this.isOpen;
-  }
+  };
 
-  @action setSize(size: string): void {
+  setSize = (size: string): void => {
     this.size = size as ModalSignature['Args']['size'];
-  }
+  };
 
-  @action toggleInPlaceModal(): void {
+  toggleInPlaceModal = (): void => {
     this.isInPlaceOpen = !this.isInPlaceOpen;
-  }
+  };
 
-  @action save(): void {
+  save = (): void => {
     this.isLoading = true;
 
     later(
@@ -39,7 +38,7 @@ export default class DemoModal extends Component<DemoModalArgs> {
       },
       1000
     );
-  }
+  };
 
   <template>
     <div class="mt-6">
diff --git a/test-app/app/components/theme-switcher.gts b/test-app/app/components/theme-switcher.gts
index afb9aa459..7727532d1 100644
--- a/test-app/app/components/theme-switcher.gts
+++ b/test-app/app/components/theme-switcher.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 import { later } from '@ember/runloop';
 import type Owner from '@ember/owner';
 import { Button } from 'frontile';
@@ -43,7 +42,7 @@ export default class ThemeSwitcher extends Component<ThemeSwitcherSignature> {
     };
   }
 
-  @action toggleMode(): void {
+  toggleMode = (): void => {
     let newMode: string;
     if (this.prefersDark) {
       newMode = 'light';
@@ -54,7 +53,7 @@ export default class ThemeSwitcher extends Component<ThemeSwitcherSignature> {
     }
     localStorage.setItem('prefersMode', newMode);
     this.applyClasses();
-  }
+  };
 
   applyClasses(): void {
     const body = document.body;

From 40a0f04675d8d3a799f5b4368df6de5dbdb192ad Mon Sep 17 00:00:00 2001
From: Josemar Luedke <jluedke@underline.com>
Date: Fri, 25 Sep 2026 11:32:46 -0700
Subject: [PATCH 4/4] refactor(forms): move getPath into nested-data and read
 class instances

getPath is the read-side partner of flattenData/unflattenData, so it now
lives beside them and reuses the module's own isUnsafeKey. That removes
the separate get-path and -private/unsafe-keys modules, and puts the
prototype-pollution rationale back next to the walk it describes. It is
exported alongside the other nested-data helpers.

It also stops requiring own properties. @tracked fields and getters are
accessors on the prototype, so a class-instance formData rendered empty
fields; Ember's get() read them. Unsafe segments are still refused,
including an own __proto__ key such as JSON.parse produces.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/frontile/src/-private/unsafe-keys.ts | 30 -------
 .../frontile/src/components/forms/field.gts   |  2 +-
 .../frontile/src/utils/forms-utils-index.ts   |  1 +
 packages/frontile/src/utils/get-path.ts       | 28 ------
 packages/frontile/src/utils/nested-data.ts    | 63 +++++++++++++-
 .../tests/unit/forms/utils/get-path-test.ts   | 60 -------------
 .../unit/forms/utils/nested-data-test.ts      | 87 ++++++++++++++++++-
 7 files changed, 149 insertions(+), 122 deletions(-)
 delete mode 100644 packages/frontile/src/-private/unsafe-keys.ts
 delete mode 100644 packages/frontile/src/utils/get-path.ts
 delete mode 100644 test-app/tests/unit/forms/utils/get-path-test.ts

diff --git a/packages/frontile/src/-private/unsafe-keys.ts b/packages/frontile/src/-private/unsafe-keys.ts
deleted file mode 100644
index f26c9c164..000000000
--- a/packages/frontile/src/-private/unsafe-keys.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Path segments that are refused as object keys.
- *
- * Field names come from the `name` attribute of the form's controls, which an
- * app may render from a server-supplied schema, a CMS, or URL state — so they
- * are untrusted input.
- *
- * `__proto__` is the real vector: `isPlainObject(Object.prototype)` is `true`,
- * so when `unflattenData`'s walk reached a `__proto__` segment it accepted
- * `Object.prototype` as an already-existing nested object instead of creating a
- * fresh one, and the final assignment wrote onto every object in the
- * application.
- *
- * `constructor` and `prototype` do not reach `Object.prototype` through that
- * walk as it is written — `current['constructor']` is a function, which
- * `isPlainObject` rejects, so the walk shadows it with a fresh own key. They
- * are refused anyway, as defense in depth: it keeps form data from shadowing
- * those names, and it means a later change to the walk (or an intermediate that
- * is a plain object with a `constructor` of its own) cannot quietly turn them
- * into live vectors.
- */
-const UNSAFE_KEYS = ['__proto__', 'constructor', 'prototype'];
-
-/**
- * Checks a single path segment. Callers refuse the whole entry rather than
- * substituting a safe key, so no partially-built path is left behind.
- */
-export function isUnsafeKey(key: string): boolean {
-  return UNSAFE_KEYS.includes(key);
-}
diff --git a/packages/frontile/src/components/forms/field.gts b/packages/frontile/src/components/forms/field.gts
index c697cc972..5ccb42470 100644
--- a/packages/frontile/src/components/forms/field.gts
+++ b/packages/frontile/src/components/forms/field.gts
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { hash } from '@ember/helper';
 import { debounce } from '@ember/runloop';
-import { getPath } from '../../utils/get-path';
+import { getPath } from '../../utils/nested-data';
 import Checkbox from './checkbox';
 import CheckboxGroup from './checkbox-group';
 import DateInput from './date-input';
diff --git a/packages/frontile/src/utils/forms-utils-index.ts b/packages/frontile/src/utils/forms-utils-index.ts
index a58cfc769..3b2873d6c 100644
--- a/packages/frontile/src/utils/forms-utils-index.ts
+++ b/packages/frontile/src/utils/forms-utils-index.ts
@@ -25,6 +25,7 @@ export { triggerFormInputEvent };
 export {
   flattenData,
   unflattenData,
+  getPath,
   hasNestedData,
   deepEqual
 } from './nested-data';
diff --git a/packages/frontile/src/utils/get-path.ts b/packages/frontile/src/utils/get-path.ts
deleted file mode 100644
index 9d2808758..000000000
--- a/packages/frontile/src/utils/get-path.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { isUnsafeKey } from '../-private/unsafe-keys';
-
-/**
- * Reads a dotted path (`'profile.email'`) from plain data, returning
- * `undefined` as soon as a segment is missing or lands on a non-object.
- *
- * Replaces `get` from `@ember/object` for form data. Only own properties are
- * read, and unsafe segments (`__proto__`, `constructor`, `prototype`) are
- * refused, because field names can come from untrusted schemas.
- */
-export function getPath(data: unknown, path: string): unknown {
-  let current: unknown = data;
-
-  for (const key of path.split('.')) {
-    if (
-      current === null ||
-      typeof current !== 'object' ||
-      isUnsafeKey(key) ||
-      !Object.prototype.hasOwnProperty.call(current, key)
-    ) {
-      return undefined;
-    }
-
-    current = (current as Record<string, unknown>)[key];
-  }
-
-  return current;
-}
diff --git a/packages/frontile/src/utils/nested-data.ts b/packages/frontile/src/utils/nested-data.ts
index bac448666..b7058b5f1 100644
--- a/packages/frontile/src/utils/nested-data.ts
+++ b/packages/frontile/src/utils/nested-data.ts
@@ -3,8 +3,6 @@
  * These functions convert between nested objects and flat dotted-path notation.
  */
 
-import { isUnsafeKey } from '../-private/unsafe-keys';
-
 /**
  * `File` and `FileList` are browser globals. `FileList` in particular has no
  * counterpart in Node, so a bare `value instanceof FileList` is a hard
@@ -30,6 +28,37 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   );
 }
 
+/**
+ * Path segments that are refused as object keys.
+ *
+ * Field names come from the `name` attribute of the form's controls, which an
+ * app may render from a server-supplied schema, a CMS, or URL state — so they
+ * are untrusted input.
+ *
+ * `__proto__` is the real vector: `isPlainObject(Object.prototype)` is `true`,
+ * so when the walk below reached a `__proto__` segment it accepted
+ * `Object.prototype` as an already-existing nested object instead of creating a
+ * fresh one, and the final assignment wrote onto every object in the
+ * application.
+ *
+ * `constructor` and `prototype` do not reach `Object.prototype` through the
+ * walk as it is written — `current['constructor']` is a function, which
+ * `isPlainObject` rejects, so the walk shadows it with a fresh own key. They
+ * are refused anyway, as defense in depth: it keeps form data from shadowing
+ * those names, and it means a later change to the walk (or an intermediate that
+ * is a plain object with a `constructor` of its own) cannot quietly turn them
+ * into live vectors.
+ */
+const UNSAFE_KEYS = ['__proto__', 'constructor', 'prototype'];
+
+/**
+ * Checks a single path segment. Callers refuse the whole entry rather than
+ * substituting a safe key, so no partially-built path is left behind.
+ */
+function isUnsafeKey(key: string): boolean {
+  return UNSAFE_KEYS.includes(key);
+}
+
 /**
  * Checks whether a dotted path is safe to materialize. A single unsafe segment
  * anywhere in the path poisons the whole path, so the entry is refused wholesale
@@ -133,6 +162,36 @@ export function unflattenData<T = unknown>(
   return result as Record<string, T>;
 }
 
+/**
+ * Reads a dotted path (`'profile.email'`) from form data, returning
+ * `undefined` as soon as a segment is missing or lands on a non-object.
+ *
+ * The read-side counterpart of `unflattenData`, and refuses the same unsafe
+ * segments: field names are untrusted input, so `'__proto__'` must not reach
+ * `Object.prototype`.
+ *
+ * @example
+ * getPath({ profile: { email: 'john@example.com' } }, 'profile.email')
+ * // Returns: 'john@example.com'
+ *
+ * @param data - The data object to read from
+ * @param path - A flat key or dotted path
+ * @returns The value at `path`, or `undefined`
+ */
+export function getPath(data: unknown, path: string): unknown {
+  let current = data;
+
+  for (const key of path.split('.')) {
+    if (current === null || typeof current !== 'object' || isUnsafeKey(key)) {
+      return undefined;
+    }
+
+    current = (current as Record<string, unknown>)[key];
+  }
+
+  return current;
+}
+
 /**
  * Checks if the data structure contains any nested objects.
  * If true, we need to handle it as nested data.
diff --git a/test-app/tests/unit/forms/utils/get-path-test.ts b/test-app/tests/unit/forms/utils/get-path-test.ts
deleted file mode 100644
index 7748c354d..000000000
--- a/test-app/tests/unit/forms/utils/get-path-test.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { module, test } from 'qunit';
-import { getPath } from 'frontile/utils/get-path';
-
-module('Unit | Forms | Utils | getPath', function () {
-  test('reads a flat key', function (assert) {
-    assert.strictEqual(
-      getPath({ email: 'a@example.com' }, 'email'),
-      'a@example.com'
-    );
-  });
-
-  test('reads a dotted path through nested objects', function (assert) {
-    const data = { user: { profile: { email: 'a@example.com' } } };
-
-    assert.strictEqual(getPath(data, 'user.profile.email'), 'a@example.com');
-    assert.deepEqual(getPath(data, 'user.profile'), { email: 'a@example.com' });
-  });
-
-  test('returns falsy leaf values as-is', function (assert) {
-    const data = { a: { zero: 0, off: false, empty: '', nothing: null } };
-
-    assert.strictEqual(getPath(data, 'a.zero'), 0);
-    assert.false(getPath(data, 'a.off'));
-    assert.strictEqual(getPath(data, 'a.empty'), '');
-    assert.strictEqual(getPath(data, 'a.nothing'), null);
-  });
-
-  test('returns undefined for a missing key or intermediate', function (assert) {
-    const data = { user: { name: 'Ada' } };
-
-    assert.strictEqual(getPath(data, 'missing'), undefined);
-    assert.strictEqual(getPath(data, 'user.missing'), undefined);
-    assert.strictEqual(getPath(data, 'missing.deeper.still'), undefined);
-  });
-
-  test('returns undefined when an intermediate is null or a primitive', function (assert) {
-    const data = { user: null, count: 3 } as Record<string, unknown>;
-
-    assert.strictEqual(getPath(data, 'user.name'), undefined);
-    assert.strictEqual(getPath(data, 'count.toFixed'), undefined);
-  });
-
-  test('reads array indices', function (assert) {
-    assert.strictEqual(getPath({ tags: ['a', 'b'] }, 'tags.1'), 'b');
-  });
-
-  test('refuses unsafe segments instead of reaching the prototype', function (assert) {
-    const data = { user: { name: 'Ada' } };
-
-    assert.strictEqual(getPath(data, '__proto__'), undefined);
-    assert.strictEqual(getPath(data, 'user.__proto__'), undefined);
-    assert.strictEqual(getPath(data, 'constructor'), undefined);
-    assert.strictEqual(getPath(data, 'user.constructor.prototype'), undefined);
-  });
-
-  test('does not read inherited properties', function (assert) {
-    assert.strictEqual(getPath({}, 'toString'), undefined);
-    assert.strictEqual(getPath({ a: {} }, 'a.hasOwnProperty'), undefined);
-  });
-});
diff --git a/test-app/tests/unit/forms/utils/nested-data-test.ts b/test-app/tests/unit/forms/utils/nested-data-test.ts
index 10890fc29..2d8c22174 100644
--- a/test-app/tests/unit/forms/utils/nested-data-test.ts
+++ b/test-app/tests/unit/forms/utils/nested-data-test.ts
@@ -1,6 +1,13 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
-import { flattenData, unflattenData, hasNestedData, deepEqual } from 'frontile';
+import { tracked } from '@glimmer/tracking';
+import {
+  flattenData,
+  unflattenData,
+  getPath,
+  hasNestedData,
+  deepEqual
+} from 'frontile';
 
 module('Unit | Forms | Utils | nested-data', function (hooks) {
   setupTest(hooks);
@@ -409,6 +416,84 @@ module('Unit | Forms | Utils | nested-data', function (hooks) {
     });
   });
 
+  module('getPath', function () {
+    test('reads a flat key', function (assert) {
+      assert.strictEqual(
+        getPath({ email: 'a@example.com' }, 'email'),
+        'a@example.com'
+      );
+    });
+
+    test('reads a dotted path through nested objects', function (assert) {
+      const data = { user: { profile: { email: 'a@example.com' } } };
+
+      assert.strictEqual(getPath(data, 'user.profile.email'), 'a@example.com');
+      assert.deepEqual(getPath(data, 'user.profile'), {
+        email: 'a@example.com'
+      });
+    });
+
+    test('returns falsy leaf values as-is', function (assert) {
+      const data = { a: { zero: 0, off: false, empty: '', nothing: null } };
+
+      assert.strictEqual(getPath(data, 'a.zero'), 0);
+      assert.false(getPath(data, 'a.off'));
+      assert.strictEqual(getPath(data, 'a.empty'), '');
+      assert.strictEqual(getPath(data, 'a.nothing'), null);
+    });
+
+    test('returns undefined for a missing key or intermediate', function (assert) {
+      const data = { user: { name: 'Ada' } };
+
+      assert.strictEqual(getPath(data, 'missing'), undefined);
+      assert.strictEqual(getPath(data, 'user.missing'), undefined);
+      assert.strictEqual(getPath(data, 'missing.deeper.still'), undefined);
+    });
+
+    test('returns undefined when an intermediate is null or a primitive', function (assert) {
+      const data = { user: null, count: 3 } as Record<string, unknown>;
+
+      assert.strictEqual(getPath(data, 'user.name'), undefined);
+      assert.strictEqual(getPath(data, 'count.toFixed'), undefined);
+    });
+
+    test('reads array indices', function (assert) {
+      assert.strictEqual(getPath({ tags: ['a', 'b'] }, 'tags.1'), 'b');
+    });
+
+    test('refuses unsafe segments instead of reaching the prototype', function (assert) {
+      const data = { user: { name: 'Ada' } };
+
+      assert.strictEqual(getPath(data, '__proto__'), undefined);
+      assert.strictEqual(getPath(data, 'user.__proto__'), undefined);
+      assert.strictEqual(getPath(data, 'constructor'), undefined);
+      assert.strictEqual(
+        getPath(data, 'user.constructor.prototype'),
+        undefined
+      );
+    });
+
+    test('refuses an own __proto__ key, as JSON.parse produces', function (assert) {
+      const data = JSON.parse('{"__proto__": {"polluted": true}}') as object;
+
+      assert.strictEqual(getPath(data, '__proto__.polluted'), undefined);
+    });
+
+    test('reads @tracked fields and getters of class instances', function (assert) {
+      class Profile {
+        @tracked email = 'a@example.com';
+
+        get domain() {
+          return this.email.split('@')[1];
+        }
+      }
+      const data = { profile: new Profile() };
+
+      assert.strictEqual(getPath(data, 'profile.email'), 'a@example.com');
+      assert.strictEqual(getPath(data, 'profile.domain'), 'example.com');
+    });
+  });
+
   module('hasNestedData', function () {
     test('returns true for nested objects', function (assert) {
       const nested = {