Gaurav0 · Oct 30, 2026 · Oct 30, 2026
diff --git a/addon/components/bs-carousel/slide.hbs b/addon/components/bs-carousel/slide.hbs
@@ -1,7 +1,7 @@
 <div
   class="{{if (macroCondition (macroGetOwnConfig "isNotBS3")) "carousel-item"}} {{if (macroCondition (macroGetOwnConfig "isBS3")) "item"}} {{if this.active "active"}} {{if (macroCondition (macroGetOwnConfig "isNotBS3")) (if this.left "carousel-item-left")}} {{if (macroCondition (macroGetOwnConfig "isBS3")) (if this.left "left")}} {{if (macroCondition (macroGetOwnConfig "isNotBS3")) (if this.next "carousel-item-next")}} {{if (macroCondition (macroGetOwnConfig "isBS3")) (if this.next "next")}} {{if (macroCondition (macroGetOwnConfig "isNotBS3")) (if this.prev "carousel-item-prev")}} {{if (macroCondition (macroGetOwnConfig "isBS3")) (if this.prev "prev")}} {{if (macroCondition (macroGetOwnConfig "isNotBS3")) (if this.right "carousel-item-right")}} {{if (macroCondition (macroGetOwnConfig "isBS3")) (if this.right "right")}}"
   ...attributes
-  {{create-ref "mainNode"}}
+  {{this.trackMainNode}}
 >
   {{yield}}
 </div>
diff --git a/addon/components/bs-carousel/slide.js b/addon/components/bs-carousel/slide.js
@@ -6,7 +6,7 @@ import { next } from '@ember/runloop';
 import overrideableCP from 'ember-bootstrap/utils/cp/overrideable';
 import { addObserver } from '@ember/object/observers';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
-import { ref } from 'ember-ref-bucket';
+import trackElement from 'ember-bootstrap/utils/track-element';
 
 /**
   A visible user-defined slide.
@@ -26,7 +26,9 @@ export default class CarouselSlide extends Component.extend(ComponentChild) {
    * @type null | HTMLElement
    * @private
    */
-  @ref('mainNode') _element = null;
+  _element = null;
+
+  trackMainNode = trackElement(this, '_element');
 
   /**
    * Defines slide visibility.

diff --git a/addon/components/bs-collapse.hbs b/addon/components/bs-collapse.hbs
@@ -1,7 +1,7 @@
 <div
   class="{{if this.collapse "collapse"}} {{if this.transitioning "collapsing"}} {{if this.showContent (if (macroCondition (macroGetOwnConfig "isNotBS3")) "show" "in")}}"
   ...attributes
-  {{create-ref "mainNode"}}
+  {{this.trackMainNode}}
   {{style this.cssStyle}}
   {{did-update this._onCollapsedChange this.collapsed}}
   {{did-update this._updateCollapsedSize this.collapsedSize}}

diff --git a/addon/components/bs-collapse.js b/addon/components/bs-collapse.js
@@ -4,7 +4,7 @@ import { isNone } from '@ember/utils';
 import { next } from '@ember/runloop';
 import transitionEnd from 'ember-bootstrap/utils/transition-end';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
-import { ref } from 'ember-ref-bucket';
+import trackElement from 'ember-bootstrap/utils/track-element';
 import arg from '../utils/decorators/arg';
 import { tracked } from '@glimmer/tracking';
 
@@ -36,7 +36,9 @@ export default class Collapse extends Component {
    * @type null | HTMLElement
    * @private
    */
-  @ref('mainNode') _element = null;
+  _element = null;
+
+  trackMainNode = trackElement(this, '_element');
 
   /**
    * Collapsed/expanded state

diff --git a/addon/components/bs-contextual-help.js b/addon/components/bs-contextual-help.js
@@ -10,7 +10,7 @@ import Ember from 'ember';
 import arg from '../utils/decorators/arg';
 import { tracked } from '@glimmer/tracking';
 import { getParentView } from '../utils/dom';
-import { ref } from 'ember-ref-bucket';
+import trackElement from 'ember-bootstrap/utils/track-element';
 
 const HOVERSTATE_NONE = 'none';
 const HOVERSTATE_IN = 'in';
@@ -350,7 +350,9 @@ export default class ContextualHelp extends Component {
    * @readonly
    * @private
    */
-  @ref('overlayElement') overlayElement;
+  overlayElement;
+
+  trackOverlayElement = trackElement(this, 'overlayElement');
 
   /**
    * This action is called immediately when the tooltip/popover is about to be shown.

diff --git a/addon/components/bs-contextual-help/element.js b/addon/components/bs-contextual-help/element.js
@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 import arg from 'ember-bootstrap/utils/decorators/arg';
 import { tracked } from '@glimmer/tracking';
 import { getOwnConfig, macroCondition } from '@embroider/macros';
-import { trackedRef } from 'ember-ref-bucket';
+import trackElement from 'ember-bootstrap/utils/track-element';
 
 /**
  Internal (abstract) component for contextual help markup. Should not be used directly.
@@ -95,7 +95,9 @@ export default class ContextualHelpElement extends Component {
 
   offset = [0, 0];
 
-  @trackedRef('popperElement') popperElement;
+  @tracked popperElement;
+
+  trackPopperElement = trackElement(this, 'popperElement');
 
   /**
    * popper.js modifier config

diff --git a/addon/components/bs-dropdown.hbs b/addon/components/bs-dropdown.hbs
@@ -31,9 +31,9 @@
       )
     }}
     {{#if this.isOpen}}
-      {{on-document "keydown" this.handleKeyEvent}}
-      {{on-document "click" this.closeHandler capture=true}}
-      {{on-document "keyup" this.closeHandler}}
+      {{bs-on-document "keydown" this.handleKeyEvent}}
+      {{bs-on-document "click" this.closeHandler capture=true}}
+      {{bs-on-document "keyup" this.closeHandler}}
     {{/if}}
 
   </Tag>

diff --git a/addon/components/bs-dropdown/menu.hbs b/addon/components/bs-dropdown/menu.hbs
@@ -8,7 +8,7 @@
         {{popper-tooltip this.toggleElement this.popperOptions}}
         {{did-insert @registerChildElement "menu"}}
         {{will-destroy @unregisterChildElement "menu"}}
-        {{create-ref "menuElement"}}
+        {{this.trackMenuElement}}
       >
         {{yield
           (hash
@@ -28,7 +28,7 @@
           {{popper-tooltip this.toggleElement this.popperOptions}}
           {{did-insert @registerChildElement "menu"}}
           {{will-destroy @unregisterChildElement "menu"}}
-          {{create-ref "menuElement"}}
+          {{this.trackMenuElement}}
         >
           {{yield
             (hash
@@ -52,7 +52,7 @@
         {{popper-tooltip this.toggleElement this.popperOptions}}
         {{did-insert @registerChildElement "menu"}}
         {{will-destroy @unregisterChildElement "menu"}}
-        {{create-ref "menuElement"}}
+        {{this.trackMenuElement}}
       >
         {{yield
           (hash
@@ -72,7 +72,7 @@
           {{popper-tooltip this.toggleElement this.popperOptions}}
           {{did-insert @registerChildElement "menu"}}
           {{will-destroy @unregisterChildElement "menu"}}
-          {{create-ref "menuElement"}}
+          {{this.trackMenuElement}}
         >
           {{yield
             (hash

diff --git a/addon/components/bs-dropdown/menu.js b/addon/components/bs-dropdown/menu.js
@@ -5,7 +5,7 @@ import { next } from '@ember/runloop';
 import { getDestinationElement } from 'ember-bootstrap/utils/dom';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
-import { ref } from 'ember-ref-bucket';
+import trackElement from 'ember-bootstrap/utils/track-element';
 
 /**
  Component for the dropdown menu.
@@ -25,7 +25,9 @@ export default class DropdownMenu extends Component {
    * @type null | HTMLElement
    * @private
    */
-  @ref('menuElement') menuElement = null;
+  menuElement = null;
+
+  trackMenuElement = trackElement(this, 'menuElement');
 
   /**
    * @property ariaRole

diff --git a/addon/components/bs-form/element.hbs b/addon/components/bs-form/element.hbs
@@ -2,7 +2,7 @@
 <div
   class="{{if (macroCondition (macroGetOwnConfig "isNotBS5")) "form-group"}} {{if @disabled "disabled"}} {{if @required "is-required"}} {{if this.isValidating "is-validating"}} {{if (macroCondition (macroGetOwnConfig "isBS3")) this.validationClass}} {{if (macroCondition (macroGetOwnConfig "isBS3")) (if this.hasFeedback "has-feedback")}} {{if (macroCondition (macroGetOwnConfig "isBS3")) (bs-size-class "form-group" @size)}} {{if (macroCondition (macroGetOwnConfig "isNotBS3")) (if (bs-eq @formLayout "horizontal") (if (macroCondition (macroGetOwnConfig "isBS5")) "row mb-3" "row"))}}"
   ...attributes
-  {{create-ref "mainNode"}}
+  {{this.trackMainNode}}
   {{on "focusout" this.showValidationOnHandler}}
   {{on "change" this.showValidationOnHandler}}
   {{on "input" this.showValidationOnHandler}}

diff --git a/addon/components/bs-form/element.js b/addon/components/bs-form/element.js
@@ -8,7 +8,7 @@ import { getOwner } from '@ember/application';
 import FormGroup from 'ember-bootstrap/components/bs-form/group';
 import { getOwnConfig, macroCondition } from '@embroider/macros';
 import { guidFor } from '@ember/object/internals';
-import { ref } from 'ember-ref-bucket';
+import trackElement from 'ember-bootstrap/utils/track-element';
 import ControlInput from './element/control/input';
 import ControlCheckbox from './element/control/checkbox';
 import ControlTextarea from './element/control/textarea';
@@ -207,7 +207,9 @@ export default class FormElement extends FormGroup {
    * @type null | HTMLElement
    * @private
    */
-  @ref('mainNode') _element = null;
+  _element = null;
+
+  trackMainNode = trackElement(this, '_element');
 
   /**
    * Text to display within a `<label>` tag.

diff --git a/addon/components/bs-modal.hbs b/addon/components/bs-modal.hbs
@@ -2,14 +2,7 @@
 {{did-update this.handleVisibilityChanges @open}}
 
 {{#if this.inDom}}
-  {{!
-    ember-on-helper do not support FastBoot yet. This guard can be removed as
-    soon as ember-on-helper guards for FastBoot itself. It is tracked in this
-    GitHub issue: https://github.com/buschtoens/ember-on-helper/issues/3
-  }}
-  {{#unless this.isFastBoot}}
-    {{on-window "resize" this.adjustDialog}}
-  {{/unless}}
+  {{bs-on-window "resize" this.adjustDialog}}
 
   {{#let (component (ensure-safe-component (bs-default @dialogComponent (component "bs-modal/dialog")))
     onClose=this.close
@@ -27,7 +20,7 @@
     {{#if this._renderInPlace}}
       <Dialog
         class={{@class}}
-        {{create-ref "modalElement"}}
+        {{this.trackModalElement}}
         ...attributes
       >
         {{yield
@@ -42,14 +35,14 @@
       </Dialog>
       <div>
         {{#if this.shouldShowBackdrop}}
-          <div class="modal-backdrop {{if this._fade "fade"}} {{if this.showModal (if (macroCondition (macroGetOwnConfig "isNotBS3")) "show" "in")}}" {{create-ref "backdropElement"}}></div>
+          <div class="modal-backdrop {{if this._fade "fade"}} {{if this.showModal (if (macroCondition (macroGetOwnConfig "isNotBS3")) "show" "in")}}" {{this.trackBackdropElement}}></div>
         {{/if}}
       </div>
     {{else}}
       {{#in-element this.destinationElement insertBefore=null}}
         <Dialog
           class={{@class}}
-          {{create-ref "modalElement"}}
+          {{this.trackModalElement}}
           ...attributes
         >
           {{yield
@@ -64,7 +57,7 @@
         </Dialog>
         <div>
           {{#if this.shouldShowBackdrop}}
-            <div class="modal-backdrop {{if this._fade "fade"}} {{if this.showModal (if (macroCondition (macroGetOwnConfig "isNotBS3")) "show" "in")}}" {{create-ref "backdropElement"}}></div>
+            <div class="modal-backdrop {{if this._fade "fade"}} {{if this.showModal (if (macroCondition (macroGetOwnConfig "isNotBS3")) "show" "in")}}" {{this.trackBackdropElement}}></div>
           {{/if}}
         </div>
       {{/in-element}}

diff --git a/addon/components/bs-modal.js b/addon/components/bs-modal.js
@@ -10,7 +10,7 @@ import isFastBoot from 'ember-bootstrap/utils/is-fastboot';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 import arg from '../utils/decorators/arg';
 import { tracked } from '@glimmer/tracking';
-import { ref } from 'ember-ref-bucket';
+import trackElement from 'ember-bootstrap/utils/track-element';
 
 function nextRunloop() {
   return new Promise((resolve) => next(resolve));
@@ -301,7 +301,9 @@ export default class Modal extends Component {
    * @readonly
    * @private
    */
-  @ref('modalElement') modalElement;
+  @tracked modalElement;
+
+  trackModalElement = trackElement(this, 'modalElement');
 
   /**
    * The DOM element of the backdrop element.
@@ -311,14 +313,9 @@ export default class Modal extends Component {
    * @readonly
    * @private
    */
-  @ref('backdropElement') backdropElement;
+  backdropElement;
 
-  /**
-   * @type boolean
-   * @readonly
-   * @private
-   */
-  isFastBoot = isFastBoot(this);
+  trackBackdropElement = trackElement(this, 'backdropElement');
 
   /**
    * The action to be sent when the modal footer's submit button (if present) is pressed.

diff --git a/addon/components/bs-modal/dialog.hbs b/addon/components/bs-modal/dialog.hbs
@@ -9,7 +9,7 @@
   {{on "mouseup" this.handleMouseUp}}
   {{on "click" this.handleClick}}
   {{style paddingLeft=(concat @paddingLeft "px") paddingRight=(concat @paddingRight "px") display=(if @inDom "block" "")}}
-  {{create-ref "mainNode"}}
+  {{this.trackMainNode}}
   {{did-insert this.getOrSetTitleId}}
   {{did-insert this.setInitialFocus}}
 >

diff --git a/addon/components/bs-modal/dialog.js b/addon/components/bs-modal/dialog.js
@@ -3,7 +3,7 @@ import { isBlank } from '@ember/utils';
 import Component from '@glimmer/component';
 import { next } from '@ember/runloop';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
-import { ref } from 'ember-ref-bucket';
+import trackElement from 'ember-bootstrap/utils/track-element';
 import { tracked } from '@glimmer/tracking';
 
 /**
@@ -20,7 +20,9 @@ export default class ModalDialog extends Component {
    * @property id
    * @type null | HTMLElement
    */
-  @ref('mainNode') _element = null;
+  _element = null;
+
+  trackMainNode = trackElement(this, '_element');
 
   /**
    * Name of the size class

diff --git a/addon/components/bs-popover.hbs b/addon/components/bs-popover.hbs
@@ -15,7 +15,7 @@
       @viewportPadding={{this.viewportPadding}}
       @class={{@class}}
 
-      {{create-ref "overlayElement"}}
+      {{this.trackOverlayElement}}
       ...attributes
     >
       {{yield

diff --git a/addon/components/bs-popover/element.hbs b/addon/components/bs-popover/element.hbs
@@ -9,7 +9,7 @@
     role="tooltip"
     ...attributes
     {{popper-tooltip @popperTarget this.popperOptions}}
-    {{create-ref "popperElement"}}
+    {{this.trackPopperElement}}
   >
     <div class={{this.arrowClass}}></div>
     {{#if @title}}
@@ -29,7 +29,7 @@
       role="tooltip"
       ...attributes
       {{popper-tooltip @popperTarget this.popperOptions}}
-      {{create-ref "popperElement"}}
+      {{this.trackPopperElement}}
     >
       <div class={{this.arrowClass}}></div>
       {{#if @title}}

diff --git a/addon/components/bs-tab/pane.hbs b/addon/components/bs-tab/pane.hbs
@@ -2,7 +2,7 @@
   class="tab-pane {{if (macroCondition (macroGetOwnConfig "isNotBS3")) (if this.showContent "show")}} {{if (macroCondition (macroGetOwnConfig "isBS3")) (if this.showContent "in")}} {{if this.active "active"}} {{if this.usesTransition "fade"}}"
   role="tabpanel"
   ...attributes
-  {{create-ref "mainNode"}}
+  {{this.trackMainNode}}
 >
   {{yield}}
 </div>
diff --git a/addon/components/bs-tab/pane.js b/addon/components/bs-tab/pane.js
@@ -9,7 +9,7 @@ import usesTransition from 'ember-bootstrap/utils/cp/uses-transition';
 import defaultValue from 'ember-bootstrap/utils/default-decorator';
 import { guidFor } from '@ember/object/internals';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
-import { ref } from 'ember-ref-bucket';
+import trackElement from 'ember-bootstrap/utils/track-element';
 
 /**
  The tab pane of a tab component.
@@ -28,7 +28,9 @@ export default class TabPane extends Component.extend(ComponentChild) {
    * @property id
    * @type null | HTMLElement
    */
-  @ref('mainNode') _element = null;
+  _element = null;
+
+  trackMainNode = trackElement(this, '_element');
   /**
    * @property id
    * @type string
@@ -145,7 +147,7 @@ export default class TabPane extends Component.extend(ComponentChild) {
   show() {
     if (this.usesTransition) {
       if (!this._element) {
-        // _element is initially set by `{{create-ref}}` which happens in next run loop, so can be undefined here.
+        // _element is initially set by `{{this.trackMainNode}}`, which runs after render, so can be undefined here.
         this.setProperties({
           active: true,
           showContent: true,

diff --git a/addon/components/bs-tooltip.hbs b/addon/components/bs-tooltip.hbs
@@ -14,7 +14,7 @@
       @viewportPadding={{this.viewportPadding}}
       @class={{@class}}
 
-      {{create-ref "overlayElement"}}
+      {{this.trackOverlayElement}}
       ...attributes
     >
       {{#if (has-block)}}