[SCF-2416] [Part 3] Upgrade build dependencies and drop polyfills

addon/components/bs-alert.js

@@ -36,10 +36,6 @@ import arg from 'ember-bootstrap/utils/decorators/arg';
   The header is rendered using a `<h4>` element by default. You can customize
   that one by setting `@headerTag` argument of `<BsAlert>`.
 
-  Using named block syntax as shown above may require to install
-  [ember-named-blocks-polyfill](https://github.com/ember-polyfills/ember-named-blocks-polyfill)
-  in your project depending on the Ember version used.
-
   *Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.*
 
   @class Alert

addon/components/bs-collapse.js

@@ -2,7 +2,6 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { isNone } from '@ember/utils';
 import { next } from '@ember/runloop';
-import { camelize } from '@ember/string';
 import transitionEnd from 'ember-bootstrap/utils/transition-end';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 import { ref } from 'ember-ref-bucket';
@@ -223,7 +222,8 @@ export default class Collapse extends Component {
 
     let collapseElement = this._element;
     let prefix = action === 'show' ? 'scroll' : 'offset';
-    let measureProperty = camelize(`${prefix}-${this.collapseDimension}`);
+    let dimension = this.collapseDimension;
+    let measureProperty = `${prefix}${dimension.charAt(0).toUpperCase()}${dimension.slice(1)}`;
     return collapseElement[measureProperty];
   }
 

ember-cli-build.js

@@ -18,9 +18,6 @@ module.exports = function (defaults) {
 
   const options = {
     'ember-bootstrap': {},
-    'ember-cli-babel': {
-      includePolyfill: !!process.env.BABELPOLYFILL,
-    },
     autoImport: {
       forbidEval: true,
     },

package.json

@@ -69,25 +69,23 @@
     "mocha/js-yaml": "^4.3.2"
   },
   "dependencies": {
+    "@babel/core": "^7.29.0",
     "@ember/render-modifiers": "^2.1.0",
-    "@ember/string": "^3.1.1",
     "@embroider/macros": "^1.8.3",
     "@embroider/util": "^1.13.3",
     "broccoli-debug": "^0.6.3",
     "broccoli-funnel": "^3.0.6",
     "broccoli-merge-trees": "^4.2.0",
     "chalk": "^4.1.1",
-    "ember-auto-import": "^2.2.0",
-    "ember-cli-babel": "^7.26.10",
+    "ember-auto-import": "^2.6.3",
+    "ember-cli-babel": "^8.3.2",
     "ember-cli-build-config-editor": "0.5.1",
-    "ember-cli-htmlbars": "^5.7.2",
+    "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-version-checker": "^5.1.2",
     "ember-concurrency": "^2.1.2",
     "ember-decorators": "^6.1.0",
     "ember-element-helper": "^0.7.1",
     "ember-focus-trap": "^1.0.0",
-    "ember-in-element-polyfill": "^1.0.1",
-    "ember-named-blocks-polyfill": "^0.2.4",
     "ember-on-helper": "^0.1.0",
     "ember-popper-modifier": "^3.0.0",
     "ember-ref-bucket": "^4.1.0",
@@ -104,7 +102,6 @@
     "tracked-toolbox": "^1.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0-0",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-proposal-decorators": "^7.23.2",
     "@ember/optional-features": "^2.0.0",

tests/integration/components/bs-collapse-test.js

@@ -100,6 +100,36 @@ module('Integration | Component | bs-collapse', function (hooks) {
     assert.dom('.collapse').hasAttribute('style', '');
   });
 
+  test('expanding measures the scroll height of the content', async function (assert) {
+    this.set('collapsed', true);
+    await render(
+      hbs`<BsCollapse @transitionDuration={{200}} @collapsed={{this.collapsed}}><div id="content"></div></BsCollapse>`
+    );
+    this.element.querySelector('#content').style.height = '50px';
+    this.set('collapsed', false);
+
+    await waitFor('.collapsing[style*=height]');
+    await delay(100);
+
+    assert.dom('.collapsing').hasAttribute('style', 'height: 50px;');
+  });
+
+  test('expanding with @collapseDimension="width" measures the scroll width of the content', async function (assert) {
+    this.set('collapsed', true);
+    await render(
+      hbs`<BsCollapse @collapseDimension="width" @transitionDuration={{200}} @collapsed={{this.collapsed}}><div id="content"></div></BsCollapse>`
+    );
+    let content = this.element.querySelector('#content');
+    content.style.width = '300px';
+    content.style.height = '10px';
+    this.set('collapsed', false);
+
+    await waitFor('.collapsing[style*=width]');
+    await delay(100);
+
+    assert.dom('.collapsing').hasAttribute('style', 'width: 300px;');
+  });
+
   test('it passes accessibility checks', async function (assert) {
     await render(hbs`<button type="button">Test</button><BsCollapse><p>Just some content</p></BsCollapse>`);