diff --git a/themes/contrib/olivero/js/comments.es6.js b/themes/contrib/olivero/js/comments.es6.js
index 46ce7f4..4385602 100644
--- a/themes/contrib/olivero/js/comments.es6.js
+++ b/themes/contrib/olivero/js/comments.es6.js
@@ -4,12 +4,12 @@
  */
 
 (Drupal => {
-  const indentedComments = document.querySelectorAll('.comments .indented');
+  const indentedComments = document.querySelectorAll('.js-comments .js-indented');
 
-  document.querySelectorAll('.comment').forEach(comment => {
+  document.querySelectorAll('.js-comment').forEach(comment => {
     if (
       comment.nextElementSibling != null &&
-      comment.nextElementSibling.matches('.indented')
+      comment.nextElementSibling.matches('.js-indented')
     ) {
       comment.classList.add('has-children');
     }
diff --git a/themes/contrib/olivero/js/comments.js b/themes/contrib/olivero/js/comments.js
index 5ceb483..e3437ee 100644
--- a/themes/contrib/olivero/js/comments.js
+++ b/themes/contrib/olivero/js/comments.js
@@ -6,10 +6,10 @@
 **/
 
 (function (Drupal) {
-  var indentedComments = document.querySelectorAll('.comments .indented');
+  var indentedComments = document.querySelectorAll('.js-comments .js-indented');
 
-  document.querySelectorAll('.comment').forEach(function (comment) {
-    if (comment.nextElementSibling != null && comment.nextElementSibling.matches('.indented')) {
+  document.querySelectorAll('.js-comment').forEach(function (comment) {
+    if (comment.nextElementSibling != null && comment.nextElementSibling.matches('.js-indented')) {
       comment.classList.add('has-children');
     }
   });
diff --git a/themes/contrib/olivero/js/debug.es6.js b/themes/contrib/olivero/js/debug.es6.js
index e5f68d5..40b880b 100644
--- a/themes/contrib/olivero/js/debug.es6.js
+++ b/themes/contrib/olivero/js/debug.es6.js
@@ -5,9 +5,9 @@
 
 (() => {
   function toggleLogo(isChecked) {
-    const headerInner = document.querySelector('.site-branding__inner');
+    const headerInner = document.querySelector('.js-site-branding__inner');
     if (headerInner) {
-      const currentLogo = headerInner.querySelector('.site-branding__logo');
+      const currentLogo = headerInner.querySelector('.js-site-branding__logo');
 
       if (isChecked) {
         const logoHTML = `
@@ -47,7 +47,7 @@
   }
 
   function toggleEditableSiteName(isChecked) {
-    const siteNameText = document.querySelector('.site-branding__name a');
+    const siteNameText = document.querySelector('.js-site-branding__name a');
     if (siteNameText) {
       siteNameText.contentEditable = isChecked;
 
@@ -122,7 +122,7 @@
     `;
     document.querySelector('body').appendChild(debugElement);
     document
-      .querySelector('.olivero-debug')
+      .querySelector('.js-olivero-debug')
       .addEventListener('change', handleChange);
 
     // Get values from sessionStorage, and make changes to DOM.
@@ -157,7 +157,7 @@
     }
 
     // Ensure that the initial value of the checkboxes matches what's in the DOM.
-    if (document.querySelector('.site-branding__logo')) {
+    if (document.querySelector('.js-site-branding__logo')) {
       document.getElementById('logo-toggle').checked = true;
     }
 
@@ -166,8 +166,8 @@
     }
 
     if (
-      document.querySelector('.site-branding__name a') &&
-      document.querySelector('.site-branding__name a').contentEditable ===
+      document.querySelector('.js-site-branding__name a') &&
+      document.querySelector('.js-site-branding__name a').contentEditable ===
         'true'
     ) {
       document.getElementById('edit-name-toggle').checked = true;
diff --git a/themes/contrib/olivero/js/debug.js b/themes/contrib/olivero/js/debug.js
index a2063a7..a6ef38f 100644
--- a/themes/contrib/olivero/js/debug.js
+++ b/themes/contrib/olivero/js/debug.js
@@ -7,9 +7,9 @@
 
 (function () {
   function toggleLogo(isChecked) {
-    var headerInner = document.querySelector('.site-branding__inner');
+    var headerInner = document.querySelector('.js-site-branding__inner');
     if (headerInner) {
-      var currentLogo = headerInner.querySelector('.site-branding__logo');
+      var currentLogo = headerInner.querySelector('.js-site-branding__logo');
 
       if (isChecked) {
         var logoHTML = '\n        <a href="/" rel="home" class="site-branding__logo">\n          <img src="/themes/contrib/olivero/logo.svg" alt="Home">\n        </a>';
@@ -46,7 +46,7 @@
   }
 
   function toggleEditableSiteName(isChecked) {
-    var siteNameText = document.querySelector('.site-branding__name a');
+    var siteNameText = document.querySelector('.js-site-branding__name a');
     if (siteNameText) {
       siteNameText.contentEditable = isChecked;
 
@@ -110,7 +110,7 @@
     debugElement.classList.add('olivero-debug');
     debugElement.innerHTML = '\n      <h2 class="visually-hidden">Theme debug options</h2>\n      <div><input id="logo-toggle" type="checkbox"><label for="logo-toggle">Logo</label></div>\n      <div><input id="edit-name-toggle" type="checkbox"><label for="edit-name-toggle">Editable Site Name</label></div>\n      <div><input id="rtl-toggle" type="checkbox"><label for="rtl-toggle">RTL</label></div>\n      <div><input id="nav-toggle" type="checkbox"><label for="nav-toggle">Always on mobile nav</label></div>\n      <div><input id="required-toggle" type="checkbox"><label for="required-toggle">Clear required attribute on form elements</label></div>\n      <div class="description">Disable debug in <a href="' + window.drupalSettings.path.baseUrl + 'admin/appearance/settings/olivero">Theme Settings</a>.</div>\n    ';
     document.querySelector('body').appendChild(debugElement);
-    document.querySelector('.olivero-debug').addEventListener('change', handleChange);
+    document.querySelector('.js-olivero-debug').addEventListener('change', handleChange);
 
     if (sessionStorage.getItem('olivero.debug.toggleLogo') != null) {
       toggleLogo(sessionStorage.getItem('olivero.debug.toggleLogo') === 'true');
@@ -132,7 +132,7 @@
       toggleAlwaysOnMobileNav(sessionStorage.getItem('olivero.debug.toggleAlwaysOnMobileNav') === 'true');
     }
 
-    if (document.querySelector('.site-branding__logo')) {
+    if (document.querySelector('.js-site-branding__logo')) {
       document.getElementById('logo-toggle').checked = true;
     }
 
@@ -140,7 +140,7 @@
       document.getElementById('required-toggle').checked = true;
     }
 
-    if (document.querySelector('.site-branding__name a') && document.querySelector('.site-branding__name a').contentEditable === 'true') {
+    if (document.querySelector('.js-site-branding__name a') && document.querySelector('.js-site-branding__name a').contentEditable === 'true') {
       document.getElementById('edit-name-toggle').checked = true;
     }
 
diff --git a/themes/contrib/olivero/js/messages.es6.js b/themes/contrib/olivero/js/messages.es6.js
index 7e5f274..4d3f722 100644
--- a/themes/contrib/olivero/js/messages.es6.js
+++ b/themes/contrib/olivero/js/messages.es6.js
@@ -4,10 +4,10 @@
  */
 
 (Drupal => {
-  const messages = document.querySelectorAll('.messages');
+  const messages = document.querySelectorAll('.js-messages');
 
   messages.forEach(el => {
-    const messageContainer = el.querySelector('.messages__container');
+    const messageContainer = el.querySelector('.js-messages__container');
 
     const closeBtnWrapper = document.createElement('div');
     closeBtnWrapper.setAttribute('class', 'messages__button');
diff --git a/themes/contrib/olivero/js/messages.js b/themes/contrib/olivero/js/messages.js
index 7b847c8..86cd03b 100644
--- a/themes/contrib/olivero/js/messages.js
+++ b/themes/contrib/olivero/js/messages.js
@@ -6,10 +6,10 @@
 **/
 
 (function (Drupal) {
-  var messages = document.querySelectorAll('.messages');
+  var messages = document.querySelectorAll('.js-messages');
 
   messages.forEach(function (el) {
-    var messageContainer = el.querySelector('.messages__container');
+    var messageContainer = el.querySelector('.js-messages__container');
 
     var closeBtnWrapper = document.createElement('div');
     closeBtnWrapper.setAttribute('class', 'messages__button');
diff --git a/themes/contrib/olivero/js/navigation.es6.js b/themes/contrib/olivero/js/navigation.es6.js
index 7aa92e5..ec31612 100644
--- a/themes/contrib/olivero/js/navigation.es6.js
+++ b/themes/contrib/olivero/js/navigation.es6.js
@@ -6,11 +6,11 @@
 (() => {
   const { isDesktopNav } = drupalSettings.olivero;
 
-  const mobileNavButton = document.querySelector('.mobile-nav-button');
+  const mobileNavButton = document.querySelector('.js-mobile-nav-button');
   const mobileNavWrapperId = 'header-nav';
   const mobileNavWrapper = document.getElementById(mobileNavWrapperId);
   const body = document.querySelector('body');
-  const overlay = document.querySelector('.overlay');
+  const overlay = document.querySelector('.js-overlay');
 
   const focusableNavElements = mobileNavWrapper.querySelectorAll(
     'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
diff --git a/themes/contrib/olivero/js/navigation.js b/themes/contrib/olivero/js/navigation.js
index 26d3b6a..d1b9e1c 100644
--- a/themes/contrib/olivero/js/navigation.js
+++ b/themes/contrib/olivero/js/navigation.js
@@ -9,11 +9,11 @@
   var isDesktopNav = drupalSettings.olivero.isDesktopNav;
 
 
-  var mobileNavButton = document.querySelector('.mobile-nav-button');
+  var mobileNavButton = document.querySelector('.js-mobile-nav-button');
   var mobileNavWrapperId = 'header-nav';
   var mobileNavWrapper = document.getElementById(mobileNavWrapperId);
   var body = document.querySelector('body');
-  var overlay = document.querySelector('.overlay');
+  var overlay = document.querySelector('.js-overlay');
 
   var focusableNavElements = mobileNavWrapper.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
   var firstFocusableEl = focusableNavElements[0];
diff --git a/themes/contrib/olivero/js/scripts.es6.js b/themes/contrib/olivero/js/scripts.es6.js
index 2b306f8..c99d888 100644
--- a/themes/contrib/olivero/js/scripts.es6.js
+++ b/themes/contrib/olivero/js/scripts.es6.js
@@ -13,7 +13,7 @@
 
   function isDesktopNav() {
     // @todo, I'm not sure we even need the .mobile-buttons container anymore.
-    const navButtons = document.querySelector('.mobile-buttons');
+    const navButtons = document.querySelector('.js-mobile-buttons');
     return (
       window.getComputedStyle(navButtons).getPropertyValue('display') === 'none'
     );
@@ -21,8 +21,8 @@
 
   drupalSettings.olivero.isDesktopNav = isDesktopNav;
 
-  const wideNavButton = document.querySelector('.nav-primary__button');
-  const siteHeaderFixable = document.querySelector('.site-header__fixable');
+  const wideNavButton = document.querySelector('.js-nav-primary__button');
+  const siteHeaderFixable = document.querySelector('.js-site-header__fixable');
 
   function wideNavIsOpen() {
     return wideNavButton.getAttribute('aria-expanded') === 'true';
@@ -50,7 +50,7 @@
     'IntersectionObserverEntry' in window &&
     'intersectionRatio' in window.IntersectionObserverEntry.prototype
   ) {
-    const fixables = document.querySelectorAll('.fixable');
+    const fixables = document.querySelectorAll('.js-fixable');
 
     function toggleDesktopNavVisibility(entries) {
       if (!isDesktopNav()) return;
@@ -85,7 +85,7 @@
     }
 
     function monitorNavPosition() {
-      const primaryNav = document.querySelector('.site-header');
+      const primaryNav = document.querySelector('.js-site-header');
       const options = {
         rootMargin: getRootMargin(),
         threshold: [0.999, 1],
@@ -107,11 +107,11 @@
     });
 
     siteHeaderFixable
-      .querySelector('.site-header__inner')
+      .querySelector('.js-site-header__inner')
       .addEventListener('focusin', showWideNav);
 
     // If skip link is clicked, ensure that the wide navigation closes so the header will not be covered up.
-    document.querySelector('.skip-link').addEventListener('click', hideWideNav);
+    document.querySelector('.js-skip-link').addEventListener('click', hideWideNav);
 
     monitorNavPosition();
   }
diff --git a/themes/contrib/olivero/js/scripts.js b/themes/contrib/olivero/js/scripts.js
index 6f7a824..fb8add2 100644
--- a/themes/contrib/olivero/js/scripts.js
+++ b/themes/contrib/olivero/js/scripts.js
@@ -12,14 +12,14 @@
   document.documentElement.classList.add('js');
 
   function isDesktopNav() {
-    var navButtons = document.querySelector('.mobile-buttons');
+    var navButtons = document.querySelector('.js-mobile-buttons');
     return window.getComputedStyle(navButtons).getPropertyValue('display') === 'none';
   }
 
   drupalSettings.olivero.isDesktopNav = isDesktopNav;
 
-  var wideNavButton = document.querySelector('.nav-primary__button');
-  var siteHeaderFixable = document.querySelector('.site-header__fixable');
+  var wideNavButton = document.querySelector('.js-nav-primary__button');
+  var siteHeaderFixable = document.querySelector('.js-site-header__fixable');
 
   function wideNavIsOpen() {
     return wideNavButton.getAttribute('aria-expanded') === 'true';
@@ -40,7 +40,7 @@
   }
 
   if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
-    var fixables = document.querySelectorAll('.fixable');
+    var fixables = document.querySelectorAll('.js-fixable');
 
     function toggleDesktopNavVisibility(entries) {
       if (!isDesktopNav()) return;
@@ -76,7 +76,7 @@
     }
 
     function monitorNavPosition() {
-      var primaryNav = document.querySelector('.site-header');
+      var primaryNav = document.querySelector('.js-site-header');
       var options = {
         rootMargin: getRootMargin(),
         threshold: [0.999, 1]
@@ -94,9 +94,9 @@
       }
     });
 
-    siteHeaderFixable.querySelector('.site-header__inner').addEventListener('focusin', showWideNav);
+    siteHeaderFixable.querySelector('.js-site-header__inner').addEventListener('focusin', showWideNav);
 
-    document.querySelector('.skip-link').addEventListener('click', hideWideNav);
+    document.querySelector('.js-skip-link').addEventListener('click', hideWideNav);
 
     monitorNavPosition();
   }
diff --git a/themes/contrib/olivero/js/search.es6.js b/themes/contrib/olivero/js/search.es6.js
index 33e47b3..74b94a4 100644
--- a/themes/contrib/olivero/js/search.es6.js
+++ b/themes/contrib/olivero/js/search.es6.js
@@ -4,8 +4,8 @@
  */
 
 (() => {
-  const searchWideButton = document.querySelector('.header-nav__search-button');
-  const searchWideWrapper = document.querySelector('.search-wide__wrapper');
+  const searchWideButton = document.querySelector('.js-header-nav__search-button');
+  const searchWideWrapper = document.querySelector('.js-search-wide__wrapper');
 
   function searchIsVisible() {
     return searchWideWrapper.classList.contains('is-active');
@@ -38,13 +38,13 @@
   document.addEventListener('click', e => {
     if (
       e.target.matches(
-        '.header-nav__search-button, .header-nav__search-button *',
+        '.js-header-nav__search-button, .js-header-nav__search-button *',
       )
     ) {
       toggleSearchVisibility(!searchIsVisible());
     } else if (
       searchIsVisible() &&
-      !e.target.matches('.search-wide__wrapper, .search-wide__wrapper *')
+      !e.target.matches('.js-search-wide__wrapper, .js-search-wide__wrapper *')
     ) {
       toggleSearchVisibility(false);
     }
diff --git a/themes/contrib/olivero/js/search.js b/themes/contrib/olivero/js/search.js
index c543e29..cd61607 100644
--- a/themes/contrib/olivero/js/search.js
+++ b/themes/contrib/olivero/js/search.js
@@ -6,8 +6,8 @@
 **/
 
 (function () {
-  var searchWideButton = document.querySelector('.header-nav__search-button');
-  var searchWideWrapper = document.querySelector('.search-wide__wrapper');
+  var searchWideButton = document.querySelector('.js-header-nav__search-button');
+  var searchWideWrapper = document.querySelector('.js-search-wide__wrapper');
 
   function searchIsVisible() {
     return searchWideWrapper.classList.contains('is-active');
@@ -38,9 +38,9 @@
   drupalSettings.olivero.toggleSearchVisibility = toggleSearchVisibility;
 
   document.addEventListener('click', function (e) {
-    if (e.target.matches('.header-nav__search-button, .header-nav__search-button *')) {
+    if (e.target.matches('.js-header-nav__search-button, .js-header-nav__search-button *')) {
       toggleSearchVisibility(!searchIsVisible());
-    } else if (searchIsVisible() && !e.target.matches('.search-wide__wrapper, .search-wide__wrapper *')) {
+    } else if (searchIsVisible() && !e.target.matches('.js-search-wide__wrapper, .js-search-wide__wrapper *')) {
       toggleSearchVisibility(false);
     }
   });
diff --git a/themes/contrib/olivero/js/second-level-navigation.es6.js b/themes/contrib/olivero/js/second-level-navigation.es6.js
index dc35d20..dfa642a 100644
--- a/themes/contrib/olivero/js/second-level-navigation.es6.js
+++ b/themes/contrib/olivero/js/second-level-navigation.es6.js
@@ -6,7 +6,7 @@
 (() => {
   const { isDesktopNav } = drupalSettings.olivero;
   const secondLevelNavMenus = document.querySelectorAll(
-    '.primary-nav__menu-item--has-children',
+    '.js-primary-nav__menu-item--has-children',
   );
 
   /**
@@ -17,7 +17,7 @@
    */
   function toggleSubNav(topLevelMenuITem, toState) {
     const button = topLevelMenuITem.querySelector(
-      '.primary-nav__button-toggle, .primary-nav__menu-link--button',
+      '.js-primary-nav__button-toggle, .js-primary-nav__menu-link--button',
     );
     const state =
       toState !== undefined
@@ -27,12 +27,12 @@
     if (state) {
       button.setAttribute('aria-expanded', 'true');
       topLevelMenuITem
-        .querySelector('.primary-nav__menu--level-2')
+        .querySelector('.js-primary-nav__menu--level-2')
         .classList.add('is-active');
     } else {
       button.setAttribute('aria-expanded', 'false');
       topLevelMenuITem
-        .querySelector('.primary-nav__menu--level-2')
+        .querySelector('.js-primary-nav__menu--level-2')
         .classList.remove('is-active');
     }
   }
@@ -42,7 +42,7 @@
   // Add hover and click event listeners onto each subnav parent and it's button.
   secondLevelNavMenus.forEach(el => {
     const button = el.querySelector(
-      '.primary-nav__button-toggle, .primary-nav__menu-link--button',
+      '.js-primary-nav__button-toggle, .js-primary-nav__menu-link--button',
     );
 
     button.removeAttribute('aria-hidden');
@@ -85,7 +85,7 @@
     let subNavsAreOpen = false;
 
     secondLevelNavMenus.forEach(el => {
-      const button = el.querySelector('.primary-nav__button-toggle');
+      const button = el.querySelector('.js-primary-nav__button-toggle');
       const state = button.getAttribute('aria-expanded') === 'true';
 
       if (state) {
diff --git a/themes/contrib/olivero/js/second-level-navigation.js b/themes/contrib/olivero/js/second-level-navigation.js
index 75155c4..6b2ddfd 100644
--- a/themes/contrib/olivero/js/second-level-navigation.js
+++ b/themes/contrib/olivero/js/second-level-navigation.js
@@ -8,25 +8,25 @@
 (function () {
   var isDesktopNav = drupalSettings.olivero.isDesktopNav;
 
-  var secondLevelNavMenus = document.querySelectorAll('.primary-nav__menu-item--has-children');
+  var secondLevelNavMenus = document.querySelectorAll('.js-primary-nav__menu-item--has-children');
 
   function toggleSubNav(topLevelMenuITem, toState) {
-    var button = topLevelMenuITem.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button');
+    var button = topLevelMenuITem.querySelector('.js-primary-nav__button-toggle, .js-primary-nav__menu-link--button');
     var state = toState !== undefined ? toState : button.getAttribute('aria-expanded') !== 'true';
 
     if (state) {
       button.setAttribute('aria-expanded', 'true');
-      topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.add('is-active');
+      topLevelMenuITem.querySelector('.js-primary-nav__menu--level-2').classList.add('is-active');
     } else {
       button.setAttribute('aria-expanded', 'false');
-      topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.remove('is-active');
+      topLevelMenuITem.querySelector('.js-primary-nav__menu--level-2').classList.remove('is-active');
     }
   }
 
   drupalSettings.olivero.toggleSubNav = toggleSubNav;
 
   secondLevelNavMenus.forEach(function (el) {
-    var button = el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button');
+    var button = el.querySelector('.js-primary-nav__button-toggle, .js-primary-nav__menu-link--button');
 
     button.removeAttribute('aria-hidden');
     button.removeAttribute('tabindex');
@@ -61,7 +61,7 @@
     var subNavsAreOpen = false;
 
     secondLevelNavMenus.forEach(function (el) {
-      var button = el.querySelector('.primary-nav__button-toggle');
+      var button = el.querySelector('.js-primary-nav__button-toggle');
       var state = button.getAttribute('aria-expanded') === 'true';
 
       if (state) {
diff --git a/themes/contrib/olivero/js/tabs.es6.js b/themes/contrib/olivero/js/tabs.es6.js
index 87800e1..be6ac36 100644
--- a/themes/contrib/olivero/js/tabs.es6.js
+++ b/themes/contrib/olivero/js/tabs.es6.js
@@ -5,12 +5,12 @@
 
 (Drupal => {
   function init(el) {
-    const tabs = el.querySelector('.tabs');
+    const tabs = el.querySelector('.js-tabs');
     const expandedClass = 'is-expanded';
-    const activeTab = tabs.querySelector('.is-active');
+    const activeTab = tabs.querySelector('.js-is-active');
 
     function isTabsMobileLayout() {
-      return tabs.querySelector('.tabs__trigger').clientHeight > 0;
+      return tabs.querySelector('.js-tabs__trigger').clientHeight > 0;
     }
 
     function handleTriggerClick(e) {
@@ -23,15 +23,15 @@
       }
     }
 
-    if (isTabsMobileLayout() && !activeTab.matches('.tabs__tab:first-child')) {
+    if (isTabsMobileLayout() && !activeTab.matches('.js-tabs__tab:first-child')) {
       const newActiveTab = activeTab.cloneNode(true);
-      const firstTab = tabs.querySelector('.tabs__tab:first-child');
+      const firstTab = tabs.querySelector('.js-tabs__tab:first-child');
       tabs.insertBefore(newActiveTab, firstTab);
       tabs.removeChild(activeTab);
     }
 
     tabs
-      .querySelector('.tabs__trigger')
+      .querySelector('.js-tabs__trigger')
       .addEventListener('click', handleTriggerClick);
   }
 
diff --git a/themes/contrib/olivero/js/tabs.js b/themes/contrib/olivero/js/tabs.js
index 9dda7c7..f5fe093 100644
--- a/themes/contrib/olivero/js/tabs.js
+++ b/themes/contrib/olivero/js/tabs.js
@@ -7,12 +7,12 @@
 
 (function (Drupal) {
   function init(el) {
-    var tabs = el.querySelector('.tabs');
+    var tabs = el.querySelector('.js-tabs');
     var expandedClass = 'is-expanded';
-    var activeTab = tabs.querySelector('.is-active');
+    var activeTab = tabs.querySelector('.js-is-active');
 
     function isTabsMobileLayout() {
-      return tabs.querySelector('.tabs__trigger').clientHeight > 0;
+      return tabs.querySelector('.js-tabs__trigger').clientHeight > 0;
     }
 
     function handleTriggerClick(e) {
@@ -25,14 +25,14 @@
       }
     }
 
-    if (isTabsMobileLayout() && !activeTab.matches('.tabs__tab:first-child')) {
+    if (isTabsMobileLayout() && !activeTab.matches('.js-tabs__tab:first-child')) {
       var newActiveTab = activeTab.cloneNode(true);
-      var firstTab = tabs.querySelector('.tabs__tab:first-child');
+      var firstTab = tabs.querySelector('.js-tabs__tab:first-child');
       tabs.insertBefore(newActiveTab, firstTab);
       tabs.removeChild(activeTab);
     }
 
-    tabs.querySelector('.tabs__trigger').addEventListener('click', handleTriggerClick);
+    tabs.querySelector('.js-tabs__trigger').addEventListener('click', handleTriggerClick);
   }
 
   Drupal.behaviors.tabs = {