From 6be5c263b822a44f7d3e71b183c9c8f2bb19362a Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Tue, 18 Aug 2026 17:33:28 +0800
Subject: [PATCH] Replace ember-radio-button with a native implementation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drops the prerelease dependency. `ember-radio-button` was pinned to
3.0.0-beta.1 because its last stable release, 2.0.1, references the
removed `Ember` global and throws on Ember 5 — and the package has not
been updated in four years.

Adds `radio-button` and `radio-button-input` to the addon, keeping the
component names, arguments and rendered DOM identical to the upstream
addon, including the `ember-radio-button` label class that existing
stylesheets target. The two call sites — modal/layouts/option-prompt and
custom-field/input — are unchanged, and their tests pass untouched.

The full surface is preserved: @value, @groupValue, @changed, @name,
@disabled, @required, @autofocus, @tabindex, @radioClass, @radioId,
@classNames (string or array), @checkedClass, @ariaLabelledby and
@ariaDescribedby; block form wraps the input in a label, inline form
renders the input alone. Selection is compared with `isEqual` and
reported through `once`, both as upstream, so equality semantics and
callback timing are unchanged.

radio-button.hbs carries a scoped template-lint disable for
no-autofocus-attribute and no-positive-tabindex. Both rules target an
author hardcoding those values; here they are pass-through bindings, and
removing them would change the component's argument list.

20 tests, both components at 100% coverage. 4964 tests pass, 0 skips.
`pnpm run build` exits 0.
---
 addon/components/radio-button-input.hbs       |   1 +
 addon/components/radio-button-input.js        |  33 +++
 addon/components/radio-button.hbs             |  40 ++++
 addon/components/radio-button.js              |  51 +++++
 app/components/radio-button-input.js          |   1 +
 app/components/radio-button.js                |   1 +
 package.json                                  |   1 -
 pnpm-lock.yaml                                |  28 ---
 .../components/radio-button-test.js           | 210 ++++++++++++++++++
 9 files changed, 337 insertions(+), 29 deletions(-)
 create mode 100644 addon/components/radio-button-input.hbs
 create mode 100644 addon/components/radio-button-input.js
 create mode 100644 addon/components/radio-button.hbs
 create mode 100644 addon/components/radio-button.js
 create mode 100644 app/components/radio-button-input.js
 create mode 100644 app/components/radio-button.js
 create mode 100644 tests/integration/components/radio-button-test.js

diff --git a/addon/components/radio-button-input.hbs b/addon/components/radio-button-input.hbs
new file mode 100644
index 00000000..8ef143f3
--- /dev/null
+++ b/addon/components/radio-button-input.hbs
@@ -0,0 +1 @@
+<input ...attributes type="radio" checked={{@checked}} aria-checked={{this.checkedStr}} value={{@value}} {{on "change" this.change}} />
diff --git a/addon/components/radio-button-input.js b/addon/components/radio-button-input.js
new file mode 100644
index 00000000..56f2fa82
--- /dev/null
+++ b/addon/components/radio-button-input.js
@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { once } from '@ember/runloop';
+import { action } from '@ember/object';
+
+/**
+ * The `<input type="radio">` itself.
+ *
+ * A native replacement for `ember-radio-button`'s component of the same name, kept API- and
+ * DOM-identical so existing call sites and CSS are unaffected. See `radio-button.js`.
+ */
+export default class RadioButtonInputComponent extends Component {
+    /**
+     * `aria-checked` wants a string, and only when `checked` is genuinely boolean — an undefined
+     * `@checked` must leave the attribute off rather than render "undefined".
+     */
+    get checkedStr() {
+        const checked = this.args.checked;
+
+        if (typeof checked === 'boolean') {
+            return checked.toString();
+        }
+
+        return null;
+    }
+
+    @action change() {
+        if (this.args.groupValue !== this.args.value) {
+            // Scheduled rather than called directly: a radio group swaps two inputs in the same
+            // interaction, and `once` collapses that into a single report of the new value.
+            once(this.args, 'changed', this.args.value);
+        }
+    }
+}
diff --git a/addon/components/radio-button.hbs b/addon/components/radio-button.hbs
new file mode 100644
index 00000000..e0da2ace
--- /dev/null
+++ b/addon/components/radio-button.hbs
@@ -0,0 +1,40 @@
+{{! template-lint-disable no-autofocus-attribute no-positive-tabindex }}
+{{! Both rules exist to stop an author HARDCODING these. Here they are pass-through bindings —
+    the value is whatever the caller supplied, and dropping them would change the component's
+    argument list. `ember-radio-button`, which this replaces, forwarded both. }}
+{{#if (has-block)}}
+    <label class="ember-radio-button {{if this.checked this.checkedClass}} {{this.joinedClassNames}}" for={{@radioId}}>
+        <RadioButtonInput
+            class={{@radioClass}}
+            id={{@radioId}}
+            autofocus={{@autofocus}}
+            disabled={{@disabled}}
+            name={{@name}}
+            required={{@required}}
+            tabindex={{@tabindex}}
+            @groupValue={{@groupValue}}
+            @checked={{this.checked}}
+            @value={{@value}}
+            aria-labelledby={{@ariaLabelledby}}
+            aria-describedby={{@ariaDescribedby}}
+            @changed={{this.changed}}
+        />
+        {{yield}}
+    </label>
+{{else}}
+    <RadioButtonInput
+        class={{@radioClass}}
+        id={{@radioId}}
+        autofocus={{@autofocus}}
+        disabled={{@disabled}}
+        name={{@name}}
+        required={{@required}}
+        tabindex={{@tabindex}}
+        @groupValue={{@groupValue}}
+        @checked={{this.checked}}
+        @value={{@value}}
+        aria-labelledby={{@ariaLabelledby}}
+        aria-describedby={{@ariaDescribedby}}
+        @changed={{this.changed}}
+    />
+{{/if}}
diff --git a/addon/components/radio-button.js b/addon/components/radio-button.js
new file mode 100644
index 00000000..5aff5c56
--- /dev/null
+++ b/addon/components/radio-button.js
@@ -0,0 +1,51 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { isEqual } from '@ember/utils';
+
+/**
+ * A radio button bound to a group value.
+ *
+ * This is a native replacement for the `ember-radio-button` addon, which was pinned to a
+ * prerelease (3.0.0-beta.1) because its last stable release references the removed `Ember` global
+ * and throws on Ember 5. The component name, arguments and rendered DOM are identical, so call
+ * sites and stylesheets did not change.
+ *
+ * Arguments (all optional except `@value` and `@groupValue`):
+ *   @value        this button's value
+ *   @groupValue   the currently selected value; the button is checked when the two are equal
+ *   @changed      called with this button's value when it becomes selected
+ *   @name @disabled @required @autofocus @tabindex   forwarded to the input
+ *   @radioClass   class for the input, @radioId its id
+ *   @classNames   extra classes for the wrapping label (string or array)
+ *   @checkedClass class added to the label while checked, default "checked"
+ *   @ariaLabelledby @ariaDescribedby
+ *
+ * With a block it renders a `<label class="ember-radio-button">` wrapping the input and the block;
+ * without one, just the input.
+ */
+export default class RadioButtonComponent extends Component {
+    get joinedClassNames() {
+        const classNames = this.args.classNames;
+
+        if (classNames && classNames.length && classNames.join) {
+            return classNames.join(' ');
+        }
+
+        return classNames;
+    }
+
+    get checkedClass() {
+        return this.args.checkedClass || 'checked';
+    }
+
+    get checked() {
+        return isEqual(this.args.groupValue, this.args.value);
+    }
+
+    @action changed(newValue) {
+        // A closure action is optional.
+        if (this.args.changed) {
+            this.args.changed(newValue);
+        }
+    }
+}
diff --git a/app/components/radio-button-input.js b/app/components/radio-button-input.js
new file mode 100644
index 00000000..4073736d
--- /dev/null
+++ b/app/components/radio-button-input.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/radio-button-input';
diff --git a/app/components/radio-button.js b/app/components/radio-button.js
new file mode 100644
index 00000000..29d6e091
--- /dev/null
+++ b/app/components/radio-button.js
@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/radio-button';
diff --git a/package.json b/package.json
index 46607788..fcb1007a 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,6 @@
         "ember-on-helper": "^0.1.0",
         "ember-power-calendar": "^0.18.0",
         "ember-power-select": "8.6.2",
-        "ember-radio-button": "3.0.0-beta.1",
         "ember-ref-bucket": "^4.1.0",
         "ember-responsive": "^5.0.0",
         "ember-style-modifier": "^3.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d3780ea2..5de27a3c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -206,9 +206,6 @@ importers:
       ember-power-select:
         specifier: 8.6.2
         version: 8.6.2(2cb75f378d1c2bf43351a1c26ad79dd4)
-      ember-radio-button:
-        specifier: 3.0.0-beta.1
-        version: 3.0.0-beta.1(clean-css@5.3.3)(postcss@8.5.14)
       ember-ref-bucket:
         specifier: ^4.1.0
         version: 4.1.0(@babel/core@7.29.0)
@@ -4255,10 +4252,6 @@ packages:
       ember-source: '>=4.0.0'
       qunit: ^2.13.0
 
-  ember-radio-button@3.0.0-beta.1:
-    resolution: {integrity: sha512-KcSCXQHNosYRFB2t5GDpXQaHzu3A/UwoKgxVQ2XwV9n4xico7HqWReyt7s3OAMxRYmfZTxeQw7F5THawNd3SYA==}
-    engines: {node: 12.* || 14.* || >= 16}
-
   ember-ref-bucket@4.1.0:
     resolution: {integrity: sha512-oEUU2mDtuYuMM039U9YEqrrOCVHH6rQfvbFOmh3WxOVEgubmLVyKEpGgU4P/6j0B/JxTqqTwM3ULTQyDto8dKg==}
     engines: {node: 10.* || >= 12}
@@ -14252,27 +14245,6 @@ snapshots:
       - '@glint/template'
       - supports-color
 
-  ember-radio-button@3.0.0-beta.1(clean-css@5.3.3)(postcss@8.5.14):
-    dependencies:
-      ember-cli-babel: 7.26.11
-      ember-cli-htmlbars: 5.7.2
-      webpack: 5.106.2(clean-css@5.3.3)(postcss@8.5.14)
-    transitivePeerDependencies:
-      - '@minify-html/node'
-      - '@swc/core'
-      - '@swc/css'
-      - '@swc/html'
-      - clean-css
-      - cssnano
-      - csso
-      - esbuild
-      - html-minifier-terser
-      - lightningcss
-      - postcss
-      - supports-color
-      - uglify-js
-      - webpack-cli
-
   ember-ref-bucket@4.1.0(@babel/core@7.29.0):
     dependencies:
       ember-cli-babel: 7.26.11
diff --git a/tests/integration/components/radio-button-test.js b/tests/integration/components/radio-button-test.js
new file mode 100644
index 00000000..a55c4de2
--- /dev/null
+++ b/tests/integration/components/radio-button-test.js
@@ -0,0 +1,210 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render, click, find, findAll } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+const INPUT = 'input[type="radio"]';
+
+module('Integration | Component | radio-button', function (hooks) {
+    setupRenderingTest(hooks);
+
+    module('without a block', function () {
+        test('it renders a bare radio input', async function (assert) {
+            this.set('selected', 'b');
+
+            await render(hbs`<RadioButton @value="a" @groupValue={{this.selected}} />`);
+
+            assert.dom(INPUT).exists('the input renders');
+            assert.dom('label').doesNotExist('with no wrapping label');
+            assert.dom(INPUT).hasValue('a');
+            assert.dom(INPUT).isNotChecked('a value that is not the group value is unchecked');
+        });
+
+        test('it is checked when its value is the group value', async function (assert) {
+            this.set('selected', 'a');
+
+            await render(hbs`<RadioButton @value="a" @groupValue={{this.selected}} />`);
+
+            assert.dom(INPUT).isChecked();
+            assert.dom(INPUT).hasAttribute('aria-checked', 'true');
+        });
+
+        test('aria-checked is omitted when there is no group value to compare', async function (assert) {
+            await render(hbs`<RadioButton @value="a" />`);
+
+            assert.dom(INPUT).hasAttribute('aria-checked', 'false', 'an absent group value is simply not a match');
+        });
+    });
+
+    module('with a block', function () {
+        test('it wraps the input and the block in a label', async function (assert) {
+            this.set('selected', 'a');
+
+            await render(hbs`<RadioButton @value="a" @groupValue={{this.selected}} @radioId="opt-a">Option A</RadioButton>`);
+
+            assert.dom('label.ember-radio-button').exists('the label carries the base class');
+            assert.dom('label').hasAttribute('for', 'opt-a', 'and points at the input');
+            assert.dom('label').containsText('Option A', 'the block is rendered');
+            assert.dom(`label ${INPUT}`).exists('with the input inside it');
+        });
+
+        test('the label gains a checked class only while checked', async function (assert) {
+            this.set('selected', 'b');
+
+            await render(hbs`<RadioButton @value="a" @groupValue={{this.selected}}>A</RadioButton>`);
+            assert.dom('label').doesNotHaveClass('checked');
+
+            this.set('selected', 'a');
+            assert.dom('label').hasClass('checked', 'the default checked class is applied');
+        });
+
+        test('the checked class can be overridden', async function (assert) {
+            await render(hbs`<RadioButton @value="a" @groupValue="a" @checkedClass="is-selected">A</RadioButton>`);
+
+            assert.dom('label').hasClass('is-selected');
+            assert.dom('label').doesNotHaveClass('checked', 'the default is replaced, not added to');
+        });
+
+        test('extra class names are accepted as a string or an array', async function (assert) {
+            this.set('classNames', 'one two');
+            await render(hbs`<RadioButton @value="a" @groupValue="b" @classNames={{this.classNames}}>A</RadioButton>`);
+            assert.dom('label').hasClass('one');
+            assert.dom('label').hasClass('two');
+
+            this.set('classNames', ['three', 'four']);
+            assert.dom('label').hasClass('three', 'an array is joined');
+            assert.dom('label').hasClass('four');
+        });
+    });
+
+    module('reporting a selection', function () {
+        test('choosing an unselected button reports its value', async function (assert) {
+            const changes = [];
+            this.set('selected', 'a');
+            this.set('changed', (value) => changes.push(value));
+
+            await render(hbs`
+                <RadioButton @value="a" @groupValue={{this.selected}} @name="letter" @changed={{this.changed}} />
+                <RadioButton @value="b" @groupValue={{this.selected}} @name="letter" @changed={{this.changed}} />
+            `);
+
+            await click(findAll(INPUT)[1]);
+
+            assert.deepEqual(changes, ['b'], 'the newly selected value is reported once');
+        });
+
+        test('the already-selected button reports nothing', async function (assert) {
+            const changes = [];
+            this.set('changed', (value) => changes.push(value));
+
+            await render(hbs`<RadioButton @value="a" @groupValue="a" @name="letter" @changed={{this.changed}} />`);
+            await click(INPUT);
+
+            assert.deepEqual(changes, [], 're-selecting the current value is not a change');
+        });
+
+        test('a button with no changed handler is still selectable', async function (assert) {
+            await render(hbs`<RadioButton @value="a" @groupValue="b" @name="letter" />`);
+            await click(INPUT);
+
+            assert.dom(INPUT).isChecked('the handler is optional');
+        });
+
+        test('selection drives the group when the handler updates it', async function (assert) {
+            this.set('selected', 'a');
+            this.set('changed', (value) => this.set('selected', value));
+
+            await render(hbs`
+                <RadioButton @value="a" @groupValue={{this.selected}} @name="letter" @changed={{this.changed}}>A</RadioButton>
+                <RadioButton @value="b" @groupValue={{this.selected}} @name="letter" @changed={{this.changed}}>B</RadioButton>
+            `);
+
+            await click(findAll(INPUT)[1]);
+
+            assert.strictEqual(this.selected, 'b');
+            assert.deepEqual(
+                findAll('label').map((label) => label.classList.contains('checked')),
+                [false, true],
+                'the checked class follows the group value'
+            );
+        });
+    });
+
+    module('forwarded attributes', function () {
+        test('identity, class and input attributes reach the input', async function (assert) {
+            await render(hbs`<RadioButton @value="a" @groupValue="b" @radioId="opt-a" @radioClass="form-radio" @name="letter" @tabindex="3" @required={{true}} />`);
+
+            assert.dom(INPUT).hasAttribute('id', 'opt-a');
+            assert.dom(INPUT).hasClass('form-radio');
+            assert.dom(INPUT).hasAttribute('name', 'letter');
+            assert.dom(INPUT).hasAttribute('tabindex', '3');
+            assert.dom(INPUT).isRequired();
+        });
+
+        test('a disabled button cannot be chosen', async function (assert) {
+            const changes = [];
+            this.set('changed', (value) => changes.push(value));
+
+            await render(hbs`<RadioButton @value="a" @groupValue="b" @disabled={{true}} @changed={{this.changed}} />`);
+
+            assert.dom(INPUT).isDisabled();
+            assert.deepEqual(changes, [], 'nothing is reported');
+        });
+
+        test('aria relationships are forwarded', async function (assert) {
+            await render(hbs`<RadioButton @value="a" @groupValue="b" @ariaLabelledby="label-1" @ariaDescribedby="hint-1" />`);
+
+            assert.dom(INPUT).hasAttribute('aria-labelledby', 'label-1');
+            assert.dom(INPUT).hasAttribute('aria-describedby', 'hint-1');
+        });
+    });
+
+    test('non-string values are compared by identity', async function (assert) {
+        const alpha = { id: 1 };
+        const beta = { id: 2 };
+        this.setProperties({ alpha, beta, selected: alpha });
+
+        await render(hbs`
+            <RadioButton @value={{this.alpha}} @groupValue={{this.selected}} @name="obj" />
+            <RadioButton @value={{this.beta}} @groupValue={{this.selected}} @name="obj" />
+        `);
+
+        assert.true(find(INPUT).checked, 'the identical object matches');
+        assert.false(findAll(INPUT)[1].checked, 'a different object with the same shape does not');
+    });
+    // `<RadioButtonInput>` is re-exported too, so it can be used on its own. `<RadioButton>` always
+    // hands it a boolean `@checked`; a direct caller need not.
+    module('the input used on its own', function () {
+        test('a non-boolean checked leaves aria-checked off', async function (assert) {
+            await render(hbs`<RadioButtonInput @value="a" />`);
+
+            assert.dom(INPUT).exists();
+            assert.dom(INPUT).doesNotHaveAttribute('aria-checked', 'nothing is asserted about a state it was not given');
+        });
+
+        // Clicking an already-checked radio fires no change event, so the guard's other arm is
+        // only reachable when the input's checked state disagrees with the group value — which a
+        // direct caller can produce and the wrapper cannot.
+        test('a change on an input that already holds the group value reports nothing', async function (assert) {
+            const changes = [];
+            this.set('changed', (value) => changes.push(value));
+
+            await render(hbs`<RadioButtonInput @value="a" @groupValue="a" @checked={{false}} @changed={{this.changed}} />`);
+            await click(INPUT);
+
+            assert.dom(INPUT).isChecked('the click still selects it');
+            assert.deepEqual(changes, [], 'but there is no new value to report');
+        });
+
+        test('it reports a selection like the wrapper does', async function (assert) {
+            const changes = [];
+            this.set('changed', (value) => changes.push(value));
+
+            await render(hbs`<RadioButtonInput @value="a" @groupValue="b" @checked={{false}} @changed={{this.changed}} />`);
+            await click(INPUT);
+
+            assert.deepEqual(changes, ['a']);
+            assert.dom(INPUT).hasAttribute('aria-checked', 'false', 'a boolean checked is rendered');
+        });
+    });
+});