diff --git a/showcase/tests/integration/modifiers/hds-anchored-position-test.js b/showcase/tests/integration/modifiers/hds-anchored-position-test.js
index 73460b9fd90..48e923b0ddb 100644
--- a/showcase/tests/integration/modifiers/hds-anchored-position-test.js
+++ b/showcase/tests/integration/modifiers/hds-anchored-position-test.js
@@ -120,15 +120,19 @@ module(
       assert.deepEqual(floatingUIOptions.middleware[3].name, 'test');
       assert.deepEqual(floatingUIOptions.middleware[3].options, { abc: 1234 });
     });
-    test('returns the `arrowElement` provided as an option', async function (assert) {
+    test('returns the `arrow` provided as an option', async function (assert) {
       const floatingUIOptions = getFloatingUIOptions({
         // notice: this in reality should be a DOM element, but we found a string works as well for this type of test
-        arrowElement: 'test1234',
-        arrowPadding: 1234,
+        arrowOptions: {
+          element: 'test1234',
+          selector: '#test1234',
+          padding: 1234,
+        },
       });
       assert.deepEqual(floatingUIOptions.middleware[1].name, 'arrow');
       assert.deepEqual(floatingUIOptions.middleware[1].options, {
         element: 'test1234',
+        selector: '#test1234',
         padding: 1234,
       });
     });
@@ -200,7 +204,7 @@ module('Integration | Modifier | hds-anchored-position', function (hooks) {
     }
   });
 
-  test('render "anchor/floating" elements with default `options`', async function (assert) {
+  test('render "anchor/floating/arrow" elements with default `options`', async function (assert) {
     await render(hbs`
       <div id="wrapper">
         <div id="anchor">anchor</div>
@@ -210,7 +214,7 @@ module('Integration | Modifier | hds-anchored-position', function (hooks) {
     this.anchorElement = document.getElementById('anchor');
     this.floatingElement = document.getElementById('floating');
     this.arrowElement = document.getElementById('arrow');
-    this.floatingOptions = { arrow: this.arrowElement };
+    this.floatingOptions = { arrowOptions: { element: this.arrowElement } };
     // apply the modifier to the testing elements (after the rendering)
     await anchoredElementModifier(
       this.floatingElement, // element the modifier is attached to
@@ -231,7 +235,7 @@ module('Integration | Modifier | hds-anchored-position', function (hooks) {
     );
   });
 
-  test('render "anchor/floating" elements with custom options', async function (assert) {
+  test('render "anchor/floating/arrow" elements with custom options', async function (assert) {
     await render(hbs`
       <div id="wrapper">
         <div id="anchor">anchor</div>
@@ -245,7 +249,7 @@ module('Integration | Modifier | hds-anchored-position', function (hooks) {
       placement: 'bottom-start',
       strategy: 'fixed',
       offsetOptions: 20,
-      arrow: this.arrowElement,
+      arrowOptions: { element: this.arrowElement },
     };
     // apply the modifier to the elements (after the rendering)
     await anchoredElementModifier(
@@ -271,7 +275,7 @@ module('Integration | Modifier | hds-anchored-position', function (hooks) {
     await render(hbs`
       <div id="wrapper">
         <div id="anchor">anchor</div>
-        <div id="floating" {{hds-anchored-position '#anchor' placement='bottom-start' strategy='fixed' offsetOptions=20 arrow='#arrow' }}><div id="arrow"></div>floating</div>
+        <div id="floating" {{hds-anchored-position '#anchor' placement='bottom-start' strategy='fixed' offsetOptions=20 arrowOptions=(hash selector='#arrow') }}><div id="arrow"></div>floating</div>
       </div>
     `);
     this.anchorElement = document.getElementById('anchor');