diff --git a/.stylelintrc b/.stylelintrc
index ed957aa8af..8fa0d8ebfe 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -5,7 +5,7 @@
     "declaration-block-semicolon-newline-after": "always-multi-line",
     "block-opening-brace-space-before": "always-multi-line",
     "declaration-block-single-line-max-declarations": 3,
-    "selector-class-pattern": "mapboxgl-[a-z-]+",
+    "selector-class-pattern": "maplibregl-[a-z-]+",
     "at-rule-no-unknown": [true, {
       "ignoreAtRules": ["svg-load"]
     }]
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ab34bf098..6eb6aed894 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,16 @@
 ### Features and improvements
 
 - *...Add new stuff here...*
+
+### 🐞 Bug fixes
+
+- *...Add fixed bugs here...*
+
+## 1.15.0
+
+### Features and improvements
+
+- ** Breaking Change: ** Rename css classes ((#83)[https://github.com/maplibre/maplibre-gl-js/issues/83])
 - Added custom protocol support to allow overriding ajax calls ((#29)[https://github.com/maplibre/maplibre-gl-js/issues/29])
 - Added setTransformRequest to map (#159)
 - Publish @maplibre/maplibre-gl-style-spec v14.0.0 on NPM (#149)
@@ -16,7 +26,6 @@
 
 ### 🐞 Bug fixes
 
-- *...Add fixed bugs here...*
 - Prevented attribution button from submiting form (#178)
 
 ## 1.14.0
diff --git a/README.md b/README.md
index 533c9c8fdb..157f16dde5 100644
--- a/README.md
+++ b/README.md
@@ -12,10 +12,13 @@ If you depend on mapbox-gl directly, simply replace `mapbox-gl` with `maplibre-g
   }
 ```
 
-And replace ```mapboxgl``` with ```maplibregl``` in your JavaScript code:
+And replace ```mapboxgl``` with ```maplibregl``` in your JavaScript/HTML/CSS code:
 ```diff
 -    var map = new mapboxgl.Map({
 +    var map = new maplibregl.Map({
+
+-    <button class="mapboxgl-ctrl">
++    <button class="maplibregl-ctrl">
 ```
 
 Want an example? [Try out MapLibre GL on CodePen](https://codepen.io/klokan/pen/WNoZRyx) and have a look at ones in the official [MapLibre GL JS Documentation](https://maplibre.org/maplibre-gl-js-docs/example/).
diff --git a/build/rollup_plugins.js b/build/rollup_plugins.js
index 5a8fe2e5e5..156ac68176 100644
--- a/build/rollup_plugins.js
+++ b/build/rollup_plugins.js
@@ -11,7 +11,7 @@ import {createFilter} from 'rollup-pluginutils';
 import strip from '@rollup/plugin-strip';
 
 // Common set of plugins/transformations shared across different rollup
-// builds (main mapboxgl bundle, style-spec package, benchmarks bundle)
+// builds (main maplibre bundle, style-spec package, benchmarks bundle)
 
 export const plugins = (minified, production) => [
     flow(),
diff --git a/debug/chinese.html b/debug/chinese.html
index 1cdc281223..c2ed534d2e 100644
--- a/debug/chinese.html
+++ b/debug/chinese.html
@@ -9,7 +9,7 @@
         body { margin: 0; padding: 0; }
         html, body, #map { height: 100%; }
 
-        .mapboxgl-marker {
+        .maplibregl-marker {
             width: 10px;
             height: 10px;
             background: red;
diff --git a/debug/events.html b/debug/events.html
index 11dac832f0..23c124e9f4 100644
--- a/debug/events.html
+++ b/debug/events.html
@@ -37,7 +37,7 @@
     transition-duration: 200ms;
 }
 
-#map.blur .mapboxgl-canvas-container {
+#map.blur .maplibregl-canvas-container {
     opacity: 0.6;
     -webkit-filter: blur(2px);
     filter: blur(2px);
diff --git a/package.json b/package.json
index 43bbfa369a..2a3859900b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "1.14.1-rc.2",
+  "version": "1.15.0",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
diff --git a/src/css/maplibre-gl.css b/src/css/maplibre-gl.css
index 297b49e071..683ccec056 100644
--- a/src/css/maplibre-gl.css
+++ b/src/css/maplibre-gl.css
@@ -1,23 +1,23 @@
-.mapboxgl-map {
+.maplibregl-map {
     font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
     overflow: hidden;
     position: relative;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.mapboxgl-canvas {
+.maplibregl-canvas {
     position: absolute;
     left: 0;
     top: 0;
 }
 
-.mapboxgl-map:-webkit-full-screen {
+.maplibregl-map:-webkit-full-screen {
     width: 100%;
     height: 100%;
 }
 
-.mapboxgl-canvas-container.mapboxgl-interactive,
-.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+.maplibregl-canvas-container.maplibregl-interactive,
+.maplibregl-ctrl-group button.maplibregl-ctrl-compass {
     cursor: -webkit-grab;
     cursor: -moz-grab;
     cursor: grab;
@@ -27,71 +27,71 @@
     user-select: none;
 }
 
-.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer {
     cursor: pointer;
 }
 
-.mapboxgl-canvas-container.mapboxgl-interactive:active,
-.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+.maplibregl-canvas-container.maplibregl-interactive:active,
+.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active {
     cursor: -webkit-grabbing;
     cursor: -moz-grabbing;
     cursor: grabbing;
 }
 
-.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
-.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,
+.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas {
     touch-action: pan-x pan-y;
 }
 
-.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
-.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+.maplibregl-canvas-container.maplibregl-touch-drag-pan,
+.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas {
     touch-action: pinch-zoom;
 }
 
-.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
-.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,
+.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas {
     touch-action: none;
 }
 
-.mapboxgl-ctrl-top-left,
-.mapboxgl-ctrl-top-right,
-.mapboxgl-ctrl-bottom-left,
-.mapboxgl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }
-.mapboxgl-ctrl-top-left     { top: 0; left: 0; }
-.mapboxgl-ctrl-top-right    { top: 0; right: 0; }
-.mapboxgl-ctrl-bottom-left  { bottom: 0; left: 0; }
-.mapboxgl-ctrl-bottom-right { right: 0; bottom: 0; }
+.maplibregl-ctrl-top-left,
+.maplibregl-ctrl-top-right,
+.maplibregl-ctrl-bottom-left,
+.maplibregl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }
+.maplibregl-ctrl-top-left     { top: 0; left: 0; }
+.maplibregl-ctrl-top-right    { top: 0; right: 0; }
+.maplibregl-ctrl-bottom-left  { bottom: 0; left: 0; }
+.maplibregl-ctrl-bottom-right { right: 0; bottom: 0; }
 
-.mapboxgl-ctrl {
+.maplibregl-ctrl {
     clear: both;
     pointer-events: auto;
 
     /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */
     transform: translate(0, 0);
 }
-.mapboxgl-ctrl-top-left .mapboxgl-ctrl     { margin: 10px 0 0 10px; float: left; }
-.mapboxgl-ctrl-top-right .mapboxgl-ctrl    { margin: 10px 10px 0 0; float: right; }
-.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl  { margin: 0 0 10px 10px; float: left; }
-.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 10px 10px 0; float: right; }
+.maplibregl-ctrl-top-left .maplibregl-ctrl     { margin: 10px 0 0 10px; float: left; }
+.maplibregl-ctrl-top-right .maplibregl-ctrl    { margin: 10px 10px 0 0; float: right; }
+.maplibregl-ctrl-bottom-left .maplibregl-ctrl  { margin: 0 0 10px 10px; float: left; }
+.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 10px 10px 0; float: right; }
 
-.mapboxgl-ctrl-group {
+.maplibregl-ctrl-group {
     border-radius: 4px;
     background: #fff;
 }
 
-.mapboxgl-ctrl-group:not(:empty) {
+.maplibregl-ctrl-group:not(:empty) {
     -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
 
 @media (-ms-high-contrast: active) {
-    .mapboxgl-ctrl-group:not(:empty) {
+    .maplibregl-ctrl-group:not(:empty) {
         box-shadow: 0 0 0 2px ButtonText;
     }
 }
 
-.mapboxgl-ctrl-group button {
+.maplibregl-ctrl-group button {
     width: 29px;
     height: 29px;
     display: block;
@@ -103,11 +103,11 @@
     cursor: pointer;
 }
 
-.mapboxgl-ctrl-group button + button {
+.maplibregl-ctrl-group button + button {
     border-top: 1px solid #ddd;
 }
 
-.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button .maplibregl-ctrl-icon {
     display: block;
     width: 100%;
     height: 100%;
@@ -116,120 +116,120 @@
 }
 
 @media (-ms-high-contrast: active) {
-    .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl-icon {
         background-color: transparent;
     }
 
-    .mapboxgl-ctrl-group button + button {
+    .maplibregl-ctrl-group button + button {
         border-top: 1px solid ButtonText;
     }
 }
 
 /* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
-.mapboxgl-ctrl button::-moz-focus-inner {
+.maplibregl-ctrl button::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
 
-.mapboxgl-ctrl-attrib-button:focus,
-.mapboxgl-ctrl-group button:focus {
+.maplibregl-ctrl-attrib-button:focus,
+.maplibregl-ctrl-group button:focus {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
 
-.mapboxgl-ctrl button:disabled {
+.maplibregl-ctrl button:disabled {
     cursor: not-allowed;
 }
 
-.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon {
     opacity: 0.25;
 }
 
-.mapboxgl-ctrl button:not(:disabled):hover {
+.maplibregl-ctrl button:not(:disabled):hover {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
-.mapboxgl-ctrl-group button:focus:focus-visible {
+.maplibregl-ctrl-group button:focus:focus-visible {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
 
-.mapboxgl-ctrl-group button:focus:not(:focus-visible) {
+.maplibregl-ctrl-group button:focus:not(:focus-visible) {
     box-shadow: none;
 }
 
-.mapboxgl-ctrl-group button:focus:first-child {
+.maplibregl-ctrl-group button:focus:first-child {
     border-radius: 4px 4px 0 0;
 }
 
-.mapboxgl-ctrl-group button:focus:last-child {
+.maplibregl-ctrl-group button:focus:last-child {
     border-radius: 0 0 4px 4px;
 }
 
-.mapboxgl-ctrl-group button:focus:only-child {
+.maplibregl-ctrl-group button:focus:only-child {
     border-radius: inherit;
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #333);
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #333);
 }
 
 @media (-ms-high-contrast: active) {
-    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #fff);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #fff);
     }
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #000);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #000);
     }
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #333);
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-shrink.svg');
 }
 
 @media (-ms-high-contrast: active) {
-    .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #fff);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-shrink.svg', fill: #fff);
     }
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #000);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-shrink.svg', fill: #000);
     }
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
     background-image: svg-load('svg/maplibregl-ctrl-compass.svg', fill: #333);
 }
 
 @media (-ms-high-contrast: active) {
-    .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
         @svg-load ctrl-compass-white url(svg/maplibregl-ctrl-compass.svg) {
             fill: #fff;
             #south { fill: #999; }
@@ -240,7 +240,7 @@
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
         background-image: svg-load('svg/maplibregl-ctrl-compass.svg', fill: #000);
     }
 }
@@ -297,100 +297,100 @@
     #dot { display: none; }
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate);
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-disabled);
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-active);
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-active-error);
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-background);
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon {
     background-image: svg-inline(ctrl-geolocate-background-error);
 }
 
-.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon {
-    -webkit-animation: mapboxgl-spin 2s infinite linear;
-    -moz-animation: mapboxgl-spin 2s infinite linear;
-    -o-animation: mapboxgl-spin 2s infinite linear;
-    -ms-animation: mapboxgl-spin 2s infinite linear;
-    animation: mapboxgl-spin 2s infinite linear;
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon {
+    -webkit-animation: maplibregl-spin 2s infinite linear;
+    -moz-animation: maplibregl-spin 2s infinite linear;
+    -o-animation: maplibregl-spin 2s infinite linear;
+    -ms-animation: maplibregl-spin 2s infinite linear;
+    animation: maplibregl-spin 2s infinite linear;
 }
 
 @media (-ms-high-contrast: active) {
-    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-white);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-disabled-white);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-active);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-active-error);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-background);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-background-error);
     }
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-black);
     }
 
-    .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon {
+    .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
         background-image: svg-inline(ctrl-geolocate-disabled-black);
     }
 }
 
-@-webkit-keyframes mapboxgl-spin {
+@-webkit-keyframes maplibregl-spin {
     0% { -webkit-transform: rotate(0deg); }
     100% { -webkit-transform: rotate(360deg); }
 }
 
-@-moz-keyframes mapboxgl-spin {
+@-moz-keyframes maplibregl-spin {
     0% { -moz-transform: rotate(0deg); }
     100% { -moz-transform: rotate(360deg); }
 }
 
-@-o-keyframes mapboxgl-spin {
+@-o-keyframes maplibregl-spin {
     0% { -o-transform: rotate(0deg); }
     100% { -o-transform: rotate(360deg); }
 }
 
-@-ms-keyframes mapboxgl-spin {
+@-ms-keyframes maplibregl-spin {
     0% { -ms-transform: rotate(0deg); }
     100% { -ms-transform: rotate(360deg); }
 }
 
-@keyframes mapboxgl-spin {
+@keyframes maplibregl-spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
 
-a.mapboxgl-ctrl-logo {
+a.maplibregl-ctrl-logo {
     width: 88px;
     height: 23px;
     margin: 0 0 -4px -4px;
@@ -401,12 +401,12 @@ a.mapboxgl-ctrl-logo {
     background-image: svg-load('svg/maplibregl-ctrl-logo.svg');
 }
 
-a.mapboxgl-ctrl-logo.mapboxgl-compact {
+a.maplibregl-ctrl-logo.maplibregl-compact {
     width: 14px;
 }
 
 @media (-ms-high-contrast: active) {
-    a.mapboxgl-ctrl-logo {
+    a.maplibregl-ctrl-logo {
         @svg-load ctrl-logo-white url(svg/maplibregl-ctrl-logo.svg) {
             #outline { opacity: 1; }
             #fill { opacity: 1; }
@@ -418,7 +418,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 }
 
 @media (-ms-high-contrast: black-on-white) {
-    a.mapboxgl-ctrl-logo {
+    a.maplibregl-ctrl-logo {
         @svg-load ctrl-logo-black url(svg/maplibregl-ctrl-logo.svg) {
             #outline { opacity: 1; fill: #fff; stroke: #fff; }
             #fill { opacity: 1; fill: #000; }
@@ -428,14 +428,14 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     }
 }
 
-.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
+.maplibregl-ctrl.maplibregl-ctrl-attrib {
     padding: 0 5px;
     background-color: rgba(255, 255, 255, 0.5);
     margin: 0;
 }
 
 @media screen {
-    .mapboxgl-ctrl-attrib.mapboxgl-compact {
+    .maplibregl-ctrl-attrib.maplibregl-compact {
         min-height: 20px;
         padding: 2px 24px 2px 0;
         margin: 10px;
@@ -444,22 +444,22 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         border-radius: 12px;
     }
 
-    .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
+    .maplibregl-ctrl-attrib.maplibregl-compact-show {
         padding: 2px 28px 2px 8px;
         visibility: visible;
     }
 
-    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
-    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show {
+    .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact-show,
+    .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact-show {
         padding: 2px 8px 2px 28px;
         border-radius: 12px;
     }
 
-    .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner {
+    .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner {
         display: none;
     }
 
-    .mapboxgl-ctrl-attrib-button {
+    .maplibregl-ctrl-attrib-button {
         display: none;
         cursor: pointer;
         position: absolute;
@@ -475,74 +475,74 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
         border: 0;
     }
 
-    .mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button,
-    .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button {
+    .maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button,
+    .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button {
         left: 0;
     }
 
-    .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,
-    .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner {
+    .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,
+    .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
         display: block;
     }
 
-    .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button {
+    .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
         background-color: rgba(0, 0, 0, 0.05);
     }
 
-    .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+    .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact::after {
         bottom: 0;
         right: 0;
     }
 
-    .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+    .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact::after {
         top: 0;
         right: 0;
     }
 
-    .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+    .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact::after {
         top: 0;
         left: 0;
     }
 
-    .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+    .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact::after {
         bottom: 0;
         left: 0;
     }
 }
 
 @media screen and (-ms-high-contrast: active) {
-    .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+    .maplibregl-ctrl-attrib.maplibregl-compact::after {
         background-image: svg-load('svg/maplibregl-ctrl-attrib.svg', fill=#fff);
     }
 }
 
 @media screen and (-ms-high-contrast: black-on-white) {
-    .mapboxgl-ctrl-attrib.mapboxgl-compact::after {
+    .maplibregl-ctrl-attrib.maplibregl-compact::after {
         background-image: svg-load('svg/maplibregl-ctrl-attrib.svg');
     }
 }
 
-.mapboxgl-ctrl-attrib a {
+.maplibregl-ctrl-attrib a {
     color: rgba(0, 0, 0, 0.75);
     text-decoration: none;
 }
 
-.mapboxgl-ctrl-attrib a:hover {
+.maplibregl-ctrl-attrib a:hover {
     color: inherit;
     text-decoration: underline;
 }
 
 /* stylelint-disable-next-line selector-class-pattern */
-.mapboxgl-ctrl-attrib .mapbox-improve-map {
+.maplibregl-ctrl-attrib .mapbox-improve-map {
     font-weight: bold;
     margin-left: 2px;
 }
 
-.mapboxgl-attrib-empty {
+.maplibregl-attrib-empty {
     display: none;
 }
 
-.mapboxgl-ctrl-scale {
+.maplibregl-ctrl-scale {
     background-color: rgba(255, 255, 255, 0.75);
     font-size: 10px;
     border-width: medium 2px 2px;
@@ -553,7 +553,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     box-sizing: border-box;
 }
 
-.mapboxgl-popup {
+.maplibregl-popup {
     position: absolute;
     top: 0;
     left: 0;
@@ -563,45 +563,45 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     pointer-events: none;
 }
 
-.mapboxgl-popup-anchor-top,
-.mapboxgl-popup-anchor-top-left,
-.mapboxgl-popup-anchor-top-right {
+.maplibregl-popup-anchor-top,
+.maplibregl-popup-anchor-top-left,
+.maplibregl-popup-anchor-top-right {
     -webkit-flex-direction: column;
     flex-direction: column;
 }
 
-.mapboxgl-popup-anchor-bottom,
-.mapboxgl-popup-anchor-bottom-left,
-.mapboxgl-popup-anchor-bottom-right {
+.maplibregl-popup-anchor-bottom,
+.maplibregl-popup-anchor-bottom-left,
+.maplibregl-popup-anchor-bottom-right {
     -webkit-flex-direction: column-reverse;
     flex-direction: column-reverse;
 }
 
-.mapboxgl-popup-anchor-left {
+.maplibregl-popup-anchor-left {
     -webkit-flex-direction: row;
     flex-direction: row;
 }
 
-.mapboxgl-popup-anchor-right {
+.maplibregl-popup-anchor-right {
     -webkit-flex-direction: row-reverse;
     flex-direction: row-reverse;
 }
 
-.mapboxgl-popup-tip {
+.maplibregl-popup-tip {
     width: 0;
     height: 0;
     border: 10px solid transparent;
     z-index: 1;
 }
 
-.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-top .maplibregl-popup-tip {
     -webkit-align-self: center;
     align-self: center;
     border-top: none;
     border-bottom-color: #fff;
 }
 
-.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
     -webkit-align-self: flex-start;
     align-self: flex-start;
     border-top: none;
@@ -609,7 +609,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     border-bottom-color: #fff;
 }
 
-.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
     -webkit-align-self: flex-end;
     align-self: flex-end;
     border-top: none;
@@ -617,14 +617,14 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     border-bottom-color: #fff;
 }
 
-.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
     -webkit-align-self: center;
     align-self: center;
     border-bottom: none;
     border-top-color: #fff;
 }
 
-.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
     -webkit-align-self: flex-start;
     align-self: flex-start;
     border-bottom: none;
@@ -632,7 +632,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     border-top-color: #fff;
 }
 
-.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
     -webkit-align-self: flex-end;
     align-self: flex-end;
     border-bottom: none;
@@ -640,21 +640,21 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     border-top-color: #fff;
 }
 
-.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-left .maplibregl-popup-tip {
     -webkit-align-self: center;
     align-self: center;
     border-left: none;
     border-right-color: #fff;
 }
 
-.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
+.maplibregl-popup-anchor-right .maplibregl-popup-tip {
     -webkit-align-self: center;
     align-self: center;
     border-right: none;
     border-left-color: #fff;
 }
 
-.mapboxgl-popup-close-button {
+.maplibregl-popup-close-button {
     position: absolute;
     right: 0;
     top: 0;
@@ -664,11 +664,11 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     background-color: transparent;
 }
 
-.mapboxgl-popup-close-button:hover {
+.maplibregl-popup-close-button:hover {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
-.mapboxgl-popup-content {
+.maplibregl-popup-content {
     position: relative;
     background: #fff;
     border-radius: 3px;
@@ -677,67 +677,67 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     pointer-events: auto;
 }
 
-.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
+.maplibregl-popup-anchor-top-left .maplibregl-popup-content {
     border-top-left-radius: 0;
 }
 
-.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
+.maplibregl-popup-anchor-top-right .maplibregl-popup-content {
     border-top-right-radius: 0;
 }
 
-.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
+.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content {
     border-bottom-left-radius: 0;
 }
 
-.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
+.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content {
     border-bottom-right-radius: 0;
 }
 
-.mapboxgl-popup-track-pointer {
+.maplibregl-popup-track-pointer {
     display: none;
 }
 
-.mapboxgl-popup-track-pointer * {
+.maplibregl-popup-track-pointer * {
     pointer-events: none;
     user-select: none;
 }
 
-.mapboxgl-map:hover .mapboxgl-popup-track-pointer {
+.maplibregl-map:hover .maplibregl-popup-track-pointer {
     display: flex;
 }
 
-.mapboxgl-map:active .mapboxgl-popup-track-pointer {
+.maplibregl-map:active .maplibregl-popup-track-pointer {
     display: none;
 }
 
-.mapboxgl-marker {
+.maplibregl-marker {
     position: absolute;
     top: 0;
     left: 0;
     will-change: transform;
 }
 
-.mapboxgl-user-location-dot {
+.maplibregl-user-location-dot {
     background-color: #1da1f2;
     width: 15px;
     height: 15px;
     border-radius: 50%;
 }
 
-.mapboxgl-user-location-dot::before {
+.maplibregl-user-location-dot::before {
     background-color: #1da1f2;
     content: '';
     width: 15px;
     height: 15px;
     border-radius: 50%;
     position: absolute;
-    -webkit-animation: mapboxgl-user-location-dot-pulse 2s infinite;
-    -moz-animation: mapboxgl-user-location-dot-pulse 2s infinite;
-    -ms-animation: mapboxgl-user-location-dot-pulse 2s infinite;
-    animation: mapboxgl-user-location-dot-pulse 2s infinite;
+    -webkit-animation: maplibregl-user-location-dot-pulse 2s infinite;
+    -moz-animation: maplibregl-user-location-dot-pulse 2s infinite;
+    -ms-animation: maplibregl-user-location-dot-pulse 2s infinite;
+    animation: maplibregl-user-location-dot-pulse 2s infinite;
 }
 
-.mapboxgl-user-location-dot::after {
+.maplibregl-user-location-dot::after {
     border-radius: 50%;
     border: 2px solid #fff;
     content: '';
@@ -750,46 +750,46 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
 }
 
-@-webkit-keyframes mapboxgl-user-location-dot-pulse {
+@-webkit-keyframes maplibregl-user-location-dot-pulse {
     0%   { -webkit-transform: scale(1); opacity: 1; }
     70%  { -webkit-transform: scale(3); opacity: 0; }
     100% { -webkit-transform: scale(1); opacity: 0; }
 }
 
-@-ms-keyframes mapboxgl-user-location-dot-pulse {
+@-ms-keyframes maplibregl-user-location-dot-pulse {
     0%   { -ms-transform: scale(1); opacity: 1; }
     70%  { -ms-transform: scale(3); opacity: 0; }
     100% { -ms-transform: scale(1); opacity: 0; }
 }
 
-@keyframes mapboxgl-user-location-dot-pulse {
+@keyframes maplibregl-user-location-dot-pulse {
     0%   { transform: scale(1); opacity: 1; }
     70%  { transform: scale(3); opacity: 0; }
     100% { transform: scale(1); opacity: 0; }
 }
 
-.mapboxgl-user-location-dot-stale {
+.maplibregl-user-location-dot-stale {
     background-color: #aaa;
 }
 
-.mapboxgl-user-location-dot-stale::after {
+.maplibregl-user-location-dot-stale::after {
     display: none;
 }
 
-.mapboxgl-user-location-accuracy-circle {
+.maplibregl-user-location-accuracy-circle {
     background-color: #1da1f233;
     width: 1px;
     height: 1px;
     border-radius: 100%;
 }
 
-.mapboxgl-crosshair,
-.mapboxgl-crosshair .mapboxgl-interactive,
-.mapboxgl-crosshair .mapboxgl-interactive:active {
+.maplibregl-crosshair,
+.maplibregl-crosshair .maplibregl-interactive,
+.maplibregl-crosshair .maplibregl-interactive:active {
     cursor: crosshair;
 }
 
-.mapboxgl-boxzoom {
+.maplibregl-boxzoom {
     position: absolute;
     top: 0;
     left: 0;
diff --git a/src/ui/anchor.js b/src/ui/anchor.js
index 78b2bc2b99..158d46c0d0 100644
--- a/src/ui/anchor.js
+++ b/src/ui/anchor.js
@@ -26,7 +26,7 @@ export const anchorTranslate: {[_: Anchor]: string} = {
 export function applyAnchorClass(element: HTMLElement, anchor: Anchor, prefix: string) {
     const classList = element.classList;
     for (const key in anchorTranslate) {
-        classList.remove(`mapboxgl-${prefix}-anchor-${key}`);
+        classList.remove(`maplibregl-${prefix}-anchor-${key}`);
     }
-    classList.add(`mapboxgl-${prefix}-anchor-${anchor}`);
+    classList.add(`maplibregl-${prefix}-anchor-${anchor}`);
 }
diff --git a/src/ui/control/attribution_control.js b/src/ui/control/attribution_control.js
index 141b65a47b..3c5c554154 100644
--- a/src/ui/control/attribution_control.js
+++ b/src/ui/control/attribution_control.js
@@ -54,16 +54,16 @@ class AttributionControl {
         const compact = this.options && this.options.compact;
 
         this._map = map;
-        this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-attrib');
-        this._compactButton = DOM.create('button', 'mapboxgl-ctrl-attrib-button', this._container);
+        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-attrib');
+        this._compactButton = DOM.create('button', 'maplibregl-ctrl-attrib-button', this._container);
         this._compactButton.addEventListener('click', this._toggleAttribution);
         this._compactButton.type = 'button';
         this._setElementTitle(this._compactButton, 'ToggleAttribution');
-        this._innerContainer = DOM.create('div', 'mapboxgl-ctrl-attrib-inner', this._container);
+        this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner', this._container);
         this._innerContainer.setAttribute('role', 'list');
 
         if (compact) {
-            this._container.classList.add('mapboxgl-compact');
+            this._container.classList.add('maplibregl-compact');
         }
 
         this._updateAttributions();
@@ -100,11 +100,11 @@ class AttributionControl {
     }
 
     _toggleAttribution() {
-        if (this._container.classList.contains('mapboxgl-compact-show')) {
-            this._container.classList.remove('mapboxgl-compact-show');
+        if (this._container.classList.contains('maplibregl-compact-show')) {
+            this._container.classList.remove('maplibregl-compact-show');
             this._compactButton.setAttribute('aria-pressed', 'false');
         } else {
-            this._container.classList.add('mapboxgl-compact-show');
+            this._container.classList.add('maplibregl-compact-show');
             this._compactButton.setAttribute('aria-pressed', 'true');
         }
     }
@@ -192,9 +192,9 @@ class AttributionControl {
 
         if (attributions.length) {
             this._innerContainer.innerHTML = attribHTML;
-            this._container.classList.remove('mapboxgl-attrib-empty');
+            this._container.classList.remove('maplibregl-attrib-empty');
         } else {
-            this._container.classList.add('mapboxgl-attrib-empty');
+            this._container.classList.add('maplibregl-attrib-empty');
         }
         // remove old DOM node from _editLink
         this._editLink = null;
@@ -202,9 +202,9 @@ class AttributionControl {
 
     _updateCompact() {
         if (this._map.getCanvasContainer().offsetWidth <= 640) {
-            this._container.classList.add('mapboxgl-compact');
+            this._container.classList.add('maplibregl-compact');
         } else {
-            this._container.classList.remove('mapboxgl-compact', 'mapboxgl-compact-show');
+            this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show');
         }
     }
 
diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js
index ddfc978a8c..fc719b42d5 100644
--- a/src/ui/control/fullscreen_control.js
+++ b/src/ui/control/fullscreen_control.js
@@ -58,7 +58,7 @@ class FullscreenControl {
     onAdd(map: Map) {
         this._map = map;
         if (!this._container) this._container = this._map.getContainer();
-        this._controlContainer = DOM.create('div', `mapboxgl-ctrl mapboxgl-ctrl-group`);
+        this._controlContainer = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group`);
         if (this._checkFullscreenSupport()) {
             this._setupUI();
         } else {
@@ -84,8 +84,8 @@ class FullscreenControl {
     }
 
     _setupUI() {
-        const button = this._fullscreenButton = DOM.create('button', (`mapboxgl-ctrl-fullscreen`), this._controlContainer);
-        DOM.create('span', `mapboxgl-ctrl-icon`, button).setAttribute('aria-hidden', true);
+        const button = this._fullscreenButton = DOM.create('button', (`maplibregl-ctrl-fullscreen`), this._controlContainer);
+        DOM.create('span', `maplibregl-ctrl-icon`, button).setAttribute('aria-hidden', true);
         button.type = 'button';
         this._updateTitle();
         this._fullscreenButton.addEventListener('click', this._onClickFullscreen);
@@ -115,8 +115,8 @@ class FullscreenControl {
 
         if ((fullscreenElement === this._container) !== this._fullscreen) {
             this._fullscreen = !this._fullscreen;
-            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-shrink`);
-            this._fullscreenButton.classList.toggle(`mapboxgl-ctrl-fullscreen`);
+            this._fullscreenButton.classList.toggle(`maplibregl-ctrl-shrink`);
+            this._fullscreenButton.classList.toggle(`maplibregl-ctrl-fullscreen`);
             this._updateTitle();
         }
     }
diff --git a/src/ui/control/geolocate_control.js b/src/ui/control/geolocate_control.js
index f4e5cc05e0..fa4bf1e992 100644
--- a/src/ui/control/geolocate_control.js
+++ b/src/ui/control/geolocate_control.js
@@ -127,7 +127,7 @@ class GeolocateControl extends Evented {
 
     onAdd(map: Map) {
         this._map = map;
-        this._container = DOM.create('div', `mapboxgl-ctrl mapboxgl-ctrl-group`);
+        this._container = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group`);
         checkGeolocationSupport(this._setupUI);
         return this._container;
     }
@@ -177,21 +177,21 @@ class GeolocateControl extends Evented {
         switch (this._watchState) {
         case 'WAITING_ACTIVE':
             this._watchState = 'ACTIVE_ERROR';
-            this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active');
-            this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-active-error');
+            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error');
             break;
         case 'ACTIVE_LOCK':
             this._watchState = 'ACTIVE_ERROR';
-            this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active');
-            this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-active-error');
-            this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-waiting');
+            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
             // turn marker grey
             break;
         case 'BACKGROUND':
             this._watchState = 'BACKGROUND_ERROR';
-            this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background');
-            this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background-error');
-            this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-waiting');
+            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error');
+            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
             // turn marker grey
             break;
         case 'ACTIVE_ERROR':
@@ -234,16 +234,16 @@ class GeolocateControl extends Evented {
             case 'ACTIVE_LOCK':
             case 'ACTIVE_ERROR':
                 this._watchState = 'ACTIVE_LOCK';
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active-error');
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-active');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active');
                 break;
             case 'BACKGROUND':
             case 'BACKGROUND_ERROR':
                 this._watchState = 'BACKGROUND';
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background-error');
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background');
                 break;
             default:
                 assert(false, `Unexpected watchState ${this._watchState}`);
@@ -262,7 +262,7 @@ class GeolocateControl extends Evented {
         }
 
         if (this.options.showUserLocation) {
-            this._dotElement.classList.remove('mapboxgl-user-location-dot-stale');
+            this._dotElement.classList.remove('maplibregl-user-location-dot-stale');
         }
 
         this.fire(new Event('geolocate', position));
@@ -334,11 +334,11 @@ class GeolocateControl extends Evented {
             if (error.code === 1) {
                 // PERMISSION_DENIED
                 this._watchState = 'OFF';
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active-error');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background-error');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error');
                 this._geolocateButton.disabled = true;
                 const title = this._map._getUIString('GeolocateControl.LocationNotAvailable');
                 this._geolocateButton.title = title;
@@ -359,7 +359,7 @@ class GeolocateControl extends Evented {
         }
 
         if (this._watchState !== 'OFF' && this.options.showUserLocation) {
-            this._dotElement.classList.add('mapboxgl-user-location-dot-stale');
+            this._dotElement.classList.add('maplibregl-user-location-dot-stale');
         }
 
         this.fire(new Event('error', error));
@@ -374,8 +374,8 @@ class GeolocateControl extends Evented {
 
     _setupUI(supported: boolean) {
         this._container.addEventListener('contextmenu', (e: MouseEvent) => e.preventDefault());
-        this._geolocateButton = DOM.create('button', `mapboxgl-ctrl-geolocate`, this._container);
-        DOM.create('span', `mapboxgl-ctrl-icon`, this._geolocateButton).setAttribute('aria-hidden', true);
+        this._geolocateButton = DOM.create('button', `maplibregl-ctrl-geolocate`, this._container);
+        DOM.create('span', `maplibregl-ctrl-icon`, this._geolocateButton).setAttribute('aria-hidden', true);
         this._geolocateButton.type = 'button';
 
         if (supported === false) {
@@ -397,11 +397,11 @@ class GeolocateControl extends Evented {
 
         // when showUserLocation is enabled, keep the Geolocate button disabled until the device location marker is setup on the map
         if (this.options.showUserLocation) {
-            this._dotElement = DOM.create('div', 'mapboxgl-user-location-dot');
+            this._dotElement = DOM.create('div', 'maplibregl-user-location-dot');
 
             this._userLocationDotMarker = new Marker(this._dotElement);
 
-            this._circleElement = DOM.create('div', 'mapboxgl-user-location-accuracy-circle');
+            this._circleElement = DOM.create('div', 'maplibregl-user-location-accuracy-circle');
             this._accuracyCircleMarker = new Marker({element: this._circleElement, pitchAlignment: 'map'});
 
             if (this.options.trackUserLocation) this._watchState = 'OFF';
@@ -421,8 +421,8 @@ class GeolocateControl extends Evented {
                 const fromResize = event.originalEvent && event.originalEvent.type === 'resize';
                 if (!event.geolocateSource && this._watchState === 'ACTIVE_LOCK' && !fromResize) {
                     this._watchState = 'BACKGROUND';
-                    this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background');
-                    this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active');
+                    this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background');
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
 
                     this.fire(new Event('trackuserlocationend'));
                 }
@@ -470,17 +470,17 @@ class GeolocateControl extends Evented {
                 numberOfWatches--;
                 noTimeout = false;
                 this._watchState = 'OFF';
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active-error');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background');
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background-error');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error');
 
                 this.fire(new Event('trackuserlocationend'));
                 break;
             case 'BACKGROUND':
                 this._watchState = 'ACTIVE_LOCK';
-                this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background');
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background');
                 // set camera to last known location
                 if (this._lastKnownPosition) this._updateCamera(this._lastKnownPosition);
 
@@ -493,22 +493,22 @@ class GeolocateControl extends Evented {
             // incoming state setup
             switch (this._watchState) {
             case 'WAITING_ACTIVE':
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-active');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active');
                 break;
             case 'ACTIVE_LOCK':
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-active');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active');
                 break;
             case 'ACTIVE_ERROR':
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-active-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error');
                 break;
             case 'BACKGROUND':
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background');
                 break;
             case 'BACKGROUND_ERROR':
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error');
                 break;
             case 'OFF':
                 break;
@@ -523,7 +523,7 @@ class GeolocateControl extends Evented {
             } else if (this._geolocationWatchID === undefined) {
                 // enable watchPosition since watchState is not OFF and there is no watchPosition already running
 
-                this._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-waiting');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting');
                 this._geolocateButton.setAttribute('aria-pressed', 'true');
 
                 numberOfWatches++;
@@ -555,7 +555,7 @@ class GeolocateControl extends Evented {
         window.navigator.geolocation.clearWatch(this._geolocationWatchID);
 
         this._geolocationWatchID = (undefined: any);
-        this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-waiting');
+        this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting');
         this._geolocateButton.setAttribute('aria-pressed', 'false');
 
         if (this.options.showUserLocation) {
diff --git a/src/ui/control/logo_control.js b/src/ui/control/logo_control.js
index bf3d46ee67..d2a2e25461 100644
--- a/src/ui/control/logo_control.js
+++ b/src/ui/control/logo_control.js
@@ -24,8 +24,8 @@ class LogoControl {
 
     onAdd(map: Map) {
         this._map = map;
-        this._container = DOM.create('div', 'mapboxgl-ctrl');
-        const anchor = DOM.create('a', 'mapboxgl-ctrl-logo');
+        this._container = DOM.create('div', 'maplibregl-ctrl');
+        const anchor = DOM.create('a', 'maplibregl-ctrl-logo');
         anchor.target = "_blank";
         anchor.rel = "noopener nofollow";
         anchor.href = "https://maplibre.org/";
@@ -78,9 +78,9 @@ class LogoControl {
         if (containerChildren.length) {
             const anchor = containerChildren[0];
             if (this._map.getCanvasContainer().offsetWidth < 250) {
-                anchor.classList.add('mapboxgl-compact');
+                anchor.classList.add('maplibregl-compact');
             } else {
-                anchor.classList.remove('mapboxgl-compact');
+                anchor.classList.remove('maplibregl-compact');
             }
         }
     }
diff --git a/src/ui/control/navigation_control.js b/src/ui/control/navigation_control.js
index b56263fccc..2d4cff670f 100644
--- a/src/ui/control/navigation_control.js
+++ b/src/ui/control/navigation_control.js
@@ -46,7 +46,7 @@ class NavigationControl {
     constructor(options: Options) {
         this.options = extend({}, defaultOptions, options);
 
-        this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-group');
+        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group');
         this._container.addEventListener('contextmenu', (e) => e.preventDefault());
 
         if (this.options.showZoom) {
@@ -54,23 +54,23 @@ class NavigationControl {
                 '_setButtonTitle',
                 '_updateZoomButtons'
             ], this);
-            this._zoomInButton = this._createButton('mapboxgl-ctrl-zoom-in', (e) => this._map.zoomIn({}, {originalEvent: e}));
-            DOM.create('span', `mapboxgl-ctrl-icon`, this._zoomInButton).setAttribute('aria-hidden', true);
-            this._zoomOutButton = this._createButton('mapboxgl-ctrl-zoom-out', (e) => this._map.zoomOut({}, {originalEvent: e}));
-            DOM.create('span', `mapboxgl-ctrl-icon`, this._zoomOutButton).setAttribute('aria-hidden', true);
+            this._zoomInButton = this._createButton('maplibregl-ctrl-zoom-in', (e) => this._map.zoomIn({}, {originalEvent: e}));
+            DOM.create('span', `maplibregl-ctrl-icon`, this._zoomInButton).setAttribute('aria-hidden', true);
+            this._zoomOutButton = this._createButton('maplibregl-ctrl-zoom-out', (e) => this._map.zoomOut({}, {originalEvent: e}));
+            DOM.create('span', `maplibregl-ctrl-icon`, this._zoomOutButton).setAttribute('aria-hidden', true);
         }
         if (this.options.showCompass) {
             bindAll([
                 '_rotateCompassArrow'
             ], this);
-            this._compass = this._createButton('mapboxgl-ctrl-compass', (e) => {
+            this._compass = this._createButton('maplibregl-ctrl-compass', (e) => {
                 if (this.options.visualizePitch) {
                     this._map.resetNorthPitch({}, {originalEvent: e});
                 } else {
                     this._map.resetNorth({}, {originalEvent: e});
                 }
             });
-            this._compassIcon = DOM.create('span', 'mapboxgl-ctrl-icon', this._compass);
+            this._compassIcon = DOM.create('span', 'maplibregl-ctrl-icon', this._compass);
             this._compassIcon.setAttribute('aria-hidden', true);
         }
     }
diff --git a/src/ui/control/scale_control.js b/src/ui/control/scale_control.js
index 6fdd0fd0de..5823023050 100644
--- a/src/ui/control/scale_control.js
+++ b/src/ui/control/scale_control.js
@@ -57,7 +57,7 @@ class ScaleControl {
 
     onAdd(map: Map) {
         this._map = map;
-        this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-scale', map.getContainer());
+        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-scale', map.getContainer());
 
         this._map.on('move', this._onMove);
         this._onMove();
diff --git a/src/ui/handler/box_zoom.js b/src/ui/handler/box_zoom.js
index be8415ab7e..b331c8e255 100644
--- a/src/ui/handler/box_zoom.js
+++ b/src/ui/handler/box_zoom.js
@@ -95,8 +95,8 @@ class BoxZoomHandler {
         this._lastPos = pos;
 
         if (!this._box) {
-            this._box = DOM.create('div', 'mapboxgl-boxzoom', this._container);
-            this._container.classList.add('mapboxgl-crosshair');
+            this._box = DOM.create('div', 'maplibregl-boxzoom', this._container);
+            this._container.classList.add('maplibregl-crosshair');
             this._fireEvent('boxzoomstart', e);
         }
 
@@ -145,7 +145,7 @@ class BoxZoomHandler {
     reset() {
         this._active = false;
 
-        this._container.classList.remove('mapboxgl-crosshair');
+        this._container.classList.remove('maplibregl-crosshair');
 
         if (this._box) {
             DOM.remove(this._box);
diff --git a/src/ui/handler/shim/drag_pan.js b/src/ui/handler/shim/drag_pan.js
index 2b55e42539..fbc4c63027 100644
--- a/src/ui/handler/shim/drag_pan.js
+++ b/src/ui/handler/shim/drag_pan.js
@@ -53,7 +53,7 @@ export default class DragPanHandler {
         this._inertiaOptions = options || {};
         this._mousePan.enable();
         this._touchPan.enable();
-        this._el.classList.add('mapboxgl-touch-drag-pan');
+        this._el.classList.add('maplibregl-touch-drag-pan');
     }
 
     /**
@@ -65,7 +65,7 @@ export default class DragPanHandler {
     disable() {
         this._mousePan.disable();
         this._touchPan.disable();
-        this._el.classList.remove('mapboxgl-touch-drag-pan');
+        this._el.classList.remove('maplibregl-touch-drag-pan');
     }
 
     /**
diff --git a/src/ui/handler/shim/touch_zoom_rotate.js b/src/ui/handler/shim/touch_zoom_rotate.js
index b1cbe4ea7b..5162c77969 100644
--- a/src/ui/handler/shim/touch_zoom_rotate.js
+++ b/src/ui/handler/shim/touch_zoom_rotate.js
@@ -46,7 +46,7 @@ export default class TouchZoomRotateHandler {
         this._touchZoom.enable(options);
         if (!this._rotationDisabled) this._touchRotate.enable(options);
         this._tapDragZoom.enable();
-        this._el.classList.add('mapboxgl-touch-zoom-rotate');
+        this._el.classList.add('maplibregl-touch-zoom-rotate');
     }
 
     /**
@@ -59,7 +59,7 @@ export default class TouchZoomRotateHandler {
         this._touchZoom.disable();
         this._touchRotate.disable();
         this._tapDragZoom.disable();
-        this._el.classList.remove('mapboxgl-touch-zoom-rotate');
+        this._el.classList.remove('maplibregl-touch-zoom-rotate');
     }
 
     /**
diff --git a/src/ui/map.js b/src/ui/map.js
index a53fb39e6e..59271e9b2f 100755
--- a/src/ui/map.js
+++ b/src/ui/map.js
@@ -2284,14 +2284,14 @@ class Map extends Camera {
 
     _setupContainer() {
         const container = this._container;
-        container.classList.add('mapboxgl-map');
+        container.classList.add('maplibregl-map');
 
         const canvasContainer = this._canvasContainer = DOM.create('div', 'mapboxgl-canvas-container', container);
         if (this._interactive) {
-            canvasContainer.classList.add('mapboxgl-interactive');
+            canvasContainer.classList.add('maplibregl-interactive');
         }
 
-        this._canvas = DOM.create('canvas', 'mapboxgl-canvas', canvasContainer);
+        this._canvas = DOM.create('canvas', 'maplibregl-canvas', canvasContainer);
         this._canvas.addEventListener('webglcontextlost', this._contextLost, false);
         this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false);
         this._canvas.setAttribute('tabindex', '0');
@@ -2301,10 +2301,10 @@ class Map extends Camera {
         const dimensions = this._containerDimensions();
         this._resizeCanvas(dimensions[0], dimensions[1]);
 
-        const controlContainer = this._controlContainer = DOM.create('div', 'mapboxgl-control-container', container);
+        const controlContainer = this._controlContainer = DOM.create('div', 'maplibregl-control-container', container);
         const positions = this._controlPositions = {};
         ['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach((positionName) => {
-            positions[positionName] = DOM.create('div', `mapboxgl-ctrl-${positionName}`, controlContainer);
+            positions[positionName] = DOM.create('div', `maplibregl-ctrl-${positionName}`, controlContainer);
         });
 
         this._container.addEventListener('scroll', this._onMapScroll, false);
@@ -2592,7 +2592,7 @@ class Map extends Camera {
         if (extension) extension.loseContext();
         removeNode(this._canvasContainer);
         removeNode(this._controlContainer);
-        this._container.classList.remove('mapboxgl-map');
+        this._container.classList.remove('maplibregl-map');
 
         PerformanceUtils.clearMetrics();
 
@@ -2763,7 +2763,7 @@ function removeNode(node) {
  *
  * Controls must implement `onAdd` and `onRemove`, and must own an
  * element, which is often a `div` element. To use Mapbox GL JS's
- * default control styling, add the `mapboxgl-ctrl` class to your control's
+ * default control styling, add the `maplibregl-ctrl` class to your control's
  * node.
  *
  * @interface IControl
@@ -2773,7 +2773,7 @@ function removeNode(node) {
  *     onAdd(map) {
  *         this._map = map;
  *         this._container = document.createElement('div');
- *         this._container.className = 'mapboxgl-ctrl';
+ *         this._container.className = 'maplibregl-ctrl';
  *         this._container.textContent = 'Hello, world';
  *         return this._container;
  *     }
@@ -2790,7 +2790,7 @@ function removeNode(node) {
  * HelloWorldControl.prototype.onAdd = function(map) {
  *     this._map = map;
  *     this._container = document.createElement('div');
- *     this._container.className = 'mapboxgl-ctrl';
+ *     this._container.className = 'maplibregl-ctrl';
  *     this._container.textContent = 'Hello, world';
  *     return this._container;
  * };
diff --git a/src/ui/marker.js b/src/ui/marker.js
index fda4f94f24..7fe8adaf8f 100644
--- a/src/ui/marker.js
+++ b/src/ui/marker.js
@@ -219,7 +219,7 @@ export default class Marker extends Evented {
             this._offset = Point.convert(options && options.offset || [0, 0]);
         }
 
-        this._element.classList.add('mapboxgl-marker');
+        this._element.classList.add('maplibregl-marker');
         this._element.addEventListener('dragstart', (e: DragEvent) => {
             e.preventDefault();
         });
diff --git a/src/ui/popup.js b/src/ui/popup.js
index 00ec853c11..435c826535 100644
--- a/src/ui/popup.js
+++ b/src/ui/popup.js
@@ -148,9 +148,9 @@ export default class Popup extends Evented {
             this._map.on('mousemove', this._onMouseMove);
             this._map.on('mouseup', this._onMouseUp);
             if (this._container) {
-                this._container.classList.add('mapboxgl-popup-track-pointer');
+                this._container.classList.add('maplibregl-popup-track-pointer');
             }
-            this._map._canvasContainer.classList.add('mapboxgl-track-pointer');
+            this._map._canvasContainer.classList.add('maplibregl-track-pointer');
         } else {
             this._map.on('move', this._update);
         }
@@ -270,9 +270,9 @@ export default class Popup extends Evented {
             this._map.on('move', this._update);
             this._map.off('mousemove', this._onMouseMove);
             if (this._container) {
-                this._container.classList.remove('mapboxgl-popup-track-pointer');
+                this._container.classList.remove('maplibregl-popup-track-pointer');
             }
-            this._map._canvasContainer.classList.remove('mapboxgl-track-pointer');
+            this._map._canvasContainer.classList.remove('maplibregl-track-pointer');
         }
 
         return this;
@@ -297,9 +297,9 @@ export default class Popup extends Evented {
             this._map.on('mousemove', this._onMouseMove);
             this._map.on('drag', this._onDrag);
             if (this._container) {
-                this._container.classList.add('mapboxgl-popup-track-pointer');
+                this._container.classList.add('maplibregl-popup-track-pointer');
             }
-            this._map._canvasContainer.classList.add('mapboxgl-track-pointer');
+            this._map._canvasContainer.classList.add('maplibregl-track-pointer');
         }
 
         return this;
@@ -419,7 +419,7 @@ export default class Popup extends Evented {
                 }
             }
         } else {
-            this._content = DOM.create('div', 'mapboxgl-popup-content', this._container);
+            this._content = DOM.create('div', 'maplibregl-popup-content', this._container);
         }
 
         // The close button should be the last tabbable element inside the popup for a good keyboard UX.
@@ -491,7 +491,7 @@ export default class Popup extends Evented {
 
     _createCloseButton() {
         if (this.options.closeButton) {
-            this._closeButton = DOM.create('button', 'mapboxgl-popup-close-button', this._content);
+            this._closeButton = DOM.create('button', 'maplibregl-popup-close-button', this._content);
             this._closeButton.type = 'button';
             this._closeButton.setAttribute('aria-label', 'Close popup');
             this._closeButton.innerHTML = '&#215;';
@@ -517,8 +517,8 @@ export default class Popup extends Evented {
         if (!this._map || !hasPosition || !this._content) { return; }
 
         if (!this._container) {
-            this._container = DOM.create('div', 'mapboxgl-popup', this._map.getContainer());
-            this._tip       = DOM.create('div', 'mapboxgl-popup-tip', this._container);
+            this._container = DOM.create('div', 'maplibregl-popup', this._map.getContainer());
+            this._tip       = DOM.create('div', 'maplibregl-popup-tip', this._container);
             this._container.appendChild(this._content);
             if (this.options.className) {
                 this.options.className.split(' ').forEach(name =>
@@ -526,7 +526,7 @@ export default class Popup extends Evented {
             }
 
             if (this._trackPointer) {
-                this._container.classList.add('mapboxgl-popup-track-pointer');
+                this._container.classList.add('maplibregl-popup-track-pointer');
             }
         }
 
diff --git a/test/browser/util/browser.js b/test/browser/util/browser.js
index 4907167454..997e0f1b10 100644
--- a/test/browser/util/browser.js
+++ b/test/browser/util/browser.js
@@ -50,7 +50,7 @@ async function getMapCanvas(url) {
         }
     });
 
-    return browser.driver.findElement(By.className('mapboxgl-canvas'));
+    return browser.driver.findElement(By.className('maplibregl-canvas'));
 }
 
 let server = null;
diff --git a/test/unit/ui/control/attribution.test.js b/test/unit/ui/control/attribution.test.js
index 99cd411ea5..9fc9316e41 100644
--- a/test/unit/ui/control/attribution.test.js
+++ b/test/unit/ui/control/attribution.test.js
@@ -24,7 +24,7 @@ test('AttributionControl appears in bottom-right by default', (t) => {
     const map = createMap(t);
     map.addControl(new AttributionControl());
 
-    t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-attrib').length, 1);
+    t.equal(map.getContainer().querySelectorAll('.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib').length, 1);
     t.end();
 });
 
@@ -32,7 +32,7 @@ test('AttributionControl appears in the position specified by the position optio
     const map = createMap(t);
     map.addControl(new AttributionControl(), 'top-left');
 
-    t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib').length, 1);
+    t.equal(map.getContainer().querySelectorAll('.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib').length, 1);
     t.end();
 });
 
@@ -47,7 +47,7 @@ test('AttributionControl appears in compact mode if compact option is used', (t)
 
     const container = map.getContainer();
 
-    t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib.mapboxgl-compact').length, 1);
+    t.equal(container.querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact').length, 1);
     map.removeControl(attributionControl);
 
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true});
@@ -56,7 +56,7 @@ test('AttributionControl appears in compact mode if compact option is used', (t)
     });
 
     map.addControl(attributionControl);
-    t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib:not(.mapboxgl-compact)').length, 1);
+    t.equal(container.querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)').length, 1);
     t.end();
 });
 
@@ -67,12 +67,12 @@ test('AttributionControl appears in compact mode if container is less then 640 p
 
     const container = map.getContainer();
 
-    t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib:not(.mapboxgl-compact)').length, 1);
+    t.equal(container.querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)').length, 1);
 
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true});
     map.resize();
 
-    t.equal(container.querySelectorAll('.mapboxgl-ctrl-attrib.mapboxgl-compact').length, 1);
+    t.equal(container.querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact').length, 1);
     t.end();
 });
 
@@ -83,17 +83,17 @@ test('AttributionControl compact mode control toggles attribution', (t) => {
     }));
 
     const container = map.getContainer();
-    const toggle = container.querySelector('.mapboxgl-ctrl-attrib-button');
+    const toggle = container.querySelector('.maplibregl-ctrl-attrib-button');
 
-    t.equal(container.querySelectorAll('.mapboxgl-compact-show').length, 0);
+    t.equal(container.querySelectorAll('.maplibregl-compact-show').length, 0);
 
     simulate.click(toggle);
 
-    t.equal(container.querySelectorAll('.mapboxgl-compact-show').length, 1);
+    t.equal(container.querySelectorAll('.maplibregl-compact-show').length, 1);
 
     simulate.click(toggle);
 
-    t.equal(container.querySelectorAll('.mapboxgl-compact-show').length, 0);
+    t.equal(container.querySelectorAll('.maplibregl-compact-show').length, 0);
 
     t.end();
 });
@@ -164,7 +164,7 @@ test('AttributionControl is hidden if empty', (t) => {
 
     const checkEmptyFirst = () => {
         t.equal(attribution._innerContainer.innerHTML, '');
-        t.equal(container.querySelectorAll('.mapboxgl-attrib-empty').length, 1, 'includes empty class when no attribution strings are provided');
+        t.equal(container.querySelectorAll('.maplibregl-attrib-empty').length, 1, 'includes empty class when no attribution strings are provided');
 
         map.addSource('2', {type: 'geojson', data: {type: 'FeatureCollection', features: []}, attribution: 'Hello World'});
         map.addLayer({id: '2', type: 'fill', source: '2'});
@@ -172,7 +172,7 @@ test('AttributionControl is hidden if empty', (t) => {
 
     const checkNotEmptyLater = () => {
         t.equal(attribution._innerContainer.innerHTML, 'Hello World');
-        t.equal(container.querySelectorAll('.mapboxgl-attrib-empty').length, 0, 'removes empty class when source with attribution is added');
+        t.equal(container.querySelectorAll('.maplibregl-attrib-empty').length, 0, 'removes empty class when source with attribution is added');
         t.end();
     };
 
diff --git a/test/unit/ui/control/fullscreen.test.js b/test/unit/ui/control/fullscreen.test.js
index c7d52aa63c..880f499956 100644
--- a/test/unit/ui/control/fullscreen.test.js
+++ b/test/unit/ui/control/fullscreen.test.js
@@ -10,7 +10,7 @@ test('FullscreenControl appears when fullscreen is enabled', (t) => {
     const fullscreen = new FullscreenControl();
     map.addControl(fullscreen);
 
-    t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-fullscreen').length, 1);
+    t.equal(map.getContainer().querySelectorAll('.maplibregl-ctrl-fullscreen').length, 1);
     t.end();
 });
 
@@ -23,7 +23,7 @@ test('FullscreenControl does not appear when fullscreen is not enabled', (t) =>
     const fullscreen = new FullscreenControl();
     map.addControl(fullscreen);
 
-    t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-fullscreen').length, 0);
+    t.equal(map.getContainer().querySelectorAll('.maplibregl-ctrl-fullscreen').length, 0);
     t.equal(consoleWarn.getCall(0).args[0], 'This device does not support fullscreen mode.');
     t.end();
 });
diff --git a/test/unit/ui/control/geolocate.test.js b/test/unit/ui/control/geolocate.test.js
index 6888edd87c..7d2b2c8413 100644
--- a/test/unit/ui/control/geolocate.test.js
+++ b/test/unit/ui/control/geolocate.test.js
@@ -266,12 +266,12 @@ test('GeolocateControl watching map updates recenter on location with dot', (t)
 
         t.deepEqual(lngLatAsFixed(map.getCenter(), 4), {lat: 10, lng: 20}, 'map centered on location after 1st update');
         t.ok(geolocate._userLocationDotMarker._map, 'userLocation dot marker on map');
-        t.false(geolocate._userLocationDotMarker._element.classList.contains('mapboxgl-user-location-dot-stale'), 'userLocation does not have stale class');
+        t.false(geolocate._userLocationDotMarker._element.classList.contains('maplibregl-user-location-dot-stale'), 'userLocation does not have stale class');
         map.once('moveend', () => {
             t.deepEqual(lngLatAsFixed(map.getCenter(), 4), {lat: 40, lng: 50}, 'map centered on location after 2nd update');
             geolocate.once('error', () => {
                 t.ok(geolocate._userLocationDotMarker._map, 'userLocation dot  marker on map');
-                t.ok(geolocate._userLocationDotMarker._element.classList.contains('mapboxgl-user-location-dot-stale'), 'userLocation has stale class');
+                t.ok(geolocate._userLocationDotMarker._element.classList.contains('maplibregl-user-location-dot-stale'), 'userLocation has stale class');
                 t.end();
             });
             geolocation.changeError({code: 2, message: 'position unavaliable'});
diff --git a/test/unit/ui/control/logo.test.js b/test/unit/ui/control/logo.test.js
index 0b271b4a6c..10a1fa529e 100644
--- a/test/unit/ui/control/logo.test.js
+++ b/test/unit/ui/control/logo.test.js
@@ -43,7 +43,7 @@ test('LogoControl appears in bottom-left by default', (t) => {
     const map = createMap(t);
     map.on('load', () => {
         t.equal(map.getContainer().querySelectorAll(
-            '.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-logo'
+            '.maplibregl-ctrl-bottom-left .maplibregl-ctrl-logo'
         ).length, 1);
         t.end();
     });
@@ -53,7 +53,7 @@ test('LogoControl appears in the position specified by the position option', (t)
     const map = createMap(t, 'top-left');
     map.on('load', () => {
         t.equal(map.getContainer().querySelectorAll(
-            '.mapboxgl-ctrl-top-left .mapboxgl-ctrl-logo'
+            '.maplibregl-ctrl-top-left .maplibregl-ctrl-logo'
         ).length, 1);
         t.end();
     });
@@ -62,7 +62,7 @@ test('LogoControl appears in the position specified by the position option', (t)
 test('LogoControl is not displayed when the mapbox_logo property is false', (t) => {
     const map = createMap(t, 'top-left', false);
     map.on('load', () => {
-        t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-top-left > .mapboxgl-ctrl')[0].style.display, 'none');
+        t.equal(map.getContainer().querySelectorAll('.maplibregl-ctrl-top-left > .maplibregl-ctrl')[0].style.display, 'none');
         t.end();
     });
 });
@@ -77,11 +77,11 @@ test('LogoControl is not added more than once', (t) => {
         ]
     });
     map.on('load', () => {
-        t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-logo').length, 1, 'first LogoControl');
+        t.equal(map.getContainer().querySelectorAll('.maplibregl-ctrl-logo').length, 1, 'first LogoControl');
         map.addSource('source2', source);
         map.on('sourcedata', (e) => {
             if (e.isSourceLoaded && e.sourceId === 'source2' && e.sourceDataType === 'metadata') {
-                t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-logo').length, 1, 'only one LogoControl is added with multiple sources');
+                t.equal(map.getContainer().querySelectorAll('.maplibregl-ctrl-logo').length, 1, 'only one LogoControl is added with multiple sources');
                 t.end();
             }
         });
@@ -94,11 +94,11 @@ test('LogoControl appears in compact mode if container is less then 250 pixel wi
 
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 255, configurable: true});
     map.resize();
-    t.equal(container.querySelectorAll('.mapboxgl-ctrl-logo:not(.mapboxgl-compact)').length, 1);
+    t.equal(container.querySelectorAll('.maplibregl-ctrl-logo:not(.maplibregl-compact)').length, 1);
 
     Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 245, configurable: true});
     map.resize();
-    t.equal(container.querySelectorAll('.mapboxgl-ctrl-logo.mapboxgl-compact').length, 1);
+    t.equal(container.querySelectorAll('.maplibregl-ctrl-logo.maplibregl-compact').length, 1);
 
     t.end();
 });
@@ -108,7 +108,7 @@ test('LogoControl has `rel` nooper and nofollow', (t) => {
 
     map.on('load', () => {
         const container = map.getContainer();
-        const logo = container.querySelector('.mapboxgl-ctrl-logo');
+        const logo = container.querySelector('.maplibregl-ctrl-logo');
 
         t.equal(logo.rel, 'noopener nofollow');
 
diff --git a/test/unit/ui/control/scale.test.js b/test/unit/ui/control/scale.test.js
index 6197bec03c..504f7457a9 100644
--- a/test/unit/ui/control/scale.test.js
+++ b/test/unit/ui/control/scale.test.js
@@ -7,7 +7,7 @@ test('ScaleControl appears in bottom-left by default', (t) => {
     const map = createMap(t);
     map.addControl(new ScaleControl());
 
-    t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-scale').length, 1);
+    t.equal(map.getContainer().querySelectorAll('.maplibregl-ctrl-bottom-left .maplibregl-ctrl-scale').length, 1);
     t.end();
 });
 
@@ -15,14 +15,14 @@ test('ScaleControl appears in the position specified by the position option', (t
     const map = createMap(t);
     map.addControl(new ScaleControl(), 'top-left');
 
-    t.equal(map.getContainer().querySelectorAll('.mapboxgl-ctrl-top-left .mapboxgl-ctrl-scale').length, 1);
+    t.equal(map.getContainer().querySelectorAll('.maplibregl-ctrl-top-left .maplibregl-ctrl-scale').length, 1);
     t.end();
 });
 
 test('ScaleControl should change unit of distance after calling setUnit', (t) => {
     const map = createMap(t);
     const scale = new ScaleControl();
-    const selector = '.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-scale';
+    const selector = '.maplibregl-ctrl-bottom-left .maplibregl-ctrl-scale';
     map.addControl(scale);
 
     let contents = map.getContainer().querySelector(selector).innerHTML;
@@ -38,7 +38,7 @@ test('ScaleControl should respect the maxWidth regardless of the unit and actual
     const map = createMap(t);
     const maxWidth = 100;
     const scale = new ScaleControl({maxWidth, unit: 'nautical'});
-    const selector = '.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-scale';
+    const selector = '.maplibregl-ctrl-bottom-left .maplibregl-ctrl-scale';
     map.addControl(scale);
     map.setZoom(12.5);
 
diff --git a/test/unit/ui/handler/touch_zoom_rotate.test.js b/test/unit/ui/handler/touch_zoom_rotate.test.js
index 090fb3b9af..ae3ece5035 100644
--- a/test/unit/ui/handler/touch_zoom_rotate.test.js
+++ b/test/unit/ui/handler/touch_zoom_rotate.test.js
@@ -165,7 +165,7 @@ test('TouchZoomRotateHandler starts zoom immediately when rotation disabled', (t
 test('TouchZoomRotateHandler adds css class used for disabling default touch behavior in some browsers', (t) => {
     const map = createMap(t);
 
-    const className = 'mapboxgl-touch-zoom-rotate';
+    const className = 'maplibregl-touch-zoom-rotate';
     t.ok(map.getCanvasContainer().classList.contains(className));
     map.touchZoomRotate.disable();
     t.notOk(map.getCanvasContainer().classList.contains(className));
diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js
index fbfbc5b33d..b8b80bf35a 100644
--- a/test/unit/ui/marker.test.js
+++ b/test/unit/ui/marker.test.js
@@ -76,7 +76,7 @@ test('Marker#addTo adds the marker element to the canvas container', (t) => {
         .setLngLat([-77.01866, 38.888])
         .addTo(map);
 
-    t.equal(map.getCanvasContainer().querySelectorAll('.mapboxgl-marker').length, 1);
+    t.equal(map.getCanvasContainer().querySelectorAll('.maplibregl-marker').length, 1);
 
     map.remove();
     t.end();
@@ -220,7 +220,7 @@ test('Marker anchor defaults to center', (t) => {
         .setLngLat([0, 0])
         .addTo(map);
 
-    t.ok(marker.getElement().classList.contains('mapboxgl-marker-anchor-center'));
+    t.ok(marker.getElement().classList.contains('maplibregl-marker-anchor-center'));
     t.match(marker.getElement().style.transform, /translate\(-50%,-50%\)/);
 
     map.remove();
@@ -233,7 +233,7 @@ test('Marker anchors as specified by the anchor option', (t) => {
         .setLngLat([0, 0])
         .addTo(map);
 
-    t.ok(marker.getElement().classList.contains('mapboxgl-marker-anchor-top'));
+    t.ok(marker.getElement().classList.contains('maplibregl-marker-anchor-top'));
     t.match(marker.getElement().style.transform, /translate\(-50%,0\)/);
 
     map.remove();
@@ -296,35 +296,35 @@ test('Popup anchors around default Marker', (t) => {
     Object.defineProperty(marker.getPopup()._container, 'offsetHeight', {value: 100});
 
     // marker should default to above since it has enough space
-    t.ok(marker.getPopup()._container.classList.contains('mapboxgl-popup-anchor-bottom'), 'popup anchors above marker');
+    t.ok(marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom'), 'popup anchors above marker');
 
     // move marker to the top forcing the popup to below
     marker.setLngLat(map.unproject([mapHeight / 2, markerTop]));
-    t.ok(marker.getPopup()._container.classList.contains('mapboxgl-popup-anchor-top'), 'popup anchors below marker');
+    t.ok(marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top'), 'popup anchors below marker');
 
     // move marker to the right forcing the popup to the left
     marker.setLngLat(map.unproject([mapHeight - markerRight, mapHeight / 2]));
-    t.ok(marker.getPopup()._container.classList.contains('mapboxgl-popup-anchor-right'), 'popup anchors left of marker');
+    t.ok(marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-right'), 'popup anchors left of marker');
 
     // move marker to the left forcing the popup to the right
     marker.setLngLat(map.unproject([markerRight, mapHeight / 2]));
-    t.ok(marker.getPopup()._container.classList.contains('mapboxgl-popup-anchor-left'), 'popup anchors right of marker');
+    t.ok(marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-left'), 'popup anchors right of marker');
 
     // move marker to the top left forcing the popup to the bottom right
     marker.setLngLat(map.unproject([markerRight, markerTop]));
-    t.ok(marker.getPopup()._container.classList.contains('mapboxgl-popup-anchor-top-left'), 'popup anchors bottom right of marker');
+    t.ok(marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-left'), 'popup anchors bottom right of marker');
 
     // move marker to the top right forcing the popup to the bottom left
     marker.setLngLat(map.unproject([mapHeight - markerRight, markerTop]));
-    t.ok(marker.getPopup()._container.classList.contains('mapboxgl-popup-anchor-top-right'), 'popup anchors bottom left of marker');
+    t.ok(marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-right'), 'popup anchors bottom left of marker');
 
     // move marker to the bottom left forcing the popup to the top right
     marker.setLngLat(map.unproject([markerRight, mapHeight]));
-    t.ok(marker.getPopup()._container.classList.contains('mapboxgl-popup-anchor-bottom-left'), 'popup anchors top right of marker');
+    t.ok(marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-left'), 'popup anchors top right of marker');
 
     // move marker to the bottom right forcing the popup to the top left
     marker.setLngLat(map.unproject([mapHeight - markerRight, mapHeight]));
-    t.ok(marker.getPopup()._container.classList.contains('mapboxgl-popup-anchor-bottom-right'), 'popup anchors top left of marker');
+    t.ok(marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-right'), 'popup anchors top left of marker');
 
     t.end();
 });
diff --git a/test/unit/ui/popup.test.js b/test/unit/ui/popup.test.js
index 0863c75bcf..0100fa9f2b 100644
--- a/test/unit/ui/popup.test.js
+++ b/test/unit/ui/popup.test.js
@@ -17,7 +17,7 @@ function createMap(t, options) {
     return globalCreateMap(t, {container});
 }
 
-test('Popup#getElement returns a .mapboxgl-popup element', (t) => {
+test('Popup#getElement returns a .maplibregl-popup element', (t) => {
     const map = createMap(t);
     const popup = new Popup()
         .setText('Test')
@@ -25,11 +25,11 @@ test('Popup#getElement returns a .mapboxgl-popup element', (t) => {
         .addTo(map);
 
     t.ok(popup.isOpen());
-    t.ok(popup.getElement().classList.contains('mapboxgl-popup'));
+    t.ok(popup.getElement().classList.contains('maplibregl-popup'));
     t.end();
 });
 
-test('Popup#addTo adds a .mapboxgl-popup element', (t) => {
+test('Popup#addTo adds a .maplibregl-popup element', (t) => {
     const map = createMap(t);
     const popup = new Popup()
         .setText('Test')
@@ -37,7 +37,7 @@ test('Popup#addTo adds a .mapboxgl-popup element', (t) => {
         .addTo(map);
 
     t.ok(popup.isOpen());
-    t.equal(map.getContainer().querySelectorAll('.mapboxgl-popup').length, 1);
+    t.equal(map.getContainer().querySelectorAll('.maplibregl-popup').length, 1);
     t.end();
 });
 
@@ -74,7 +74,7 @@ test('Popup closes on close button click events', (t) => {
         .setLngLat([0, 0])
         .addTo(map);
 
-    simulate.click(map.getContainer().querySelector('.mapboxgl-popup-close-button'));
+    simulate.click(map.getContainer().querySelector('.maplibregl-popup-close-button'));
 
     t.ok(!popup.isOpen());
     t.end();
@@ -88,7 +88,7 @@ test('Popup has no close button if closeButton option is false', (t) => {
         .setLngLat([0, 0])
         .addTo(map);
 
-    t.equal(popup.getElement().querySelectorAll('.mapboxgl-popup-close-button').length, 0);
+    t.equal(popup.getElement().querySelectorAll('.maplibregl-popup-close-button').length, 0);
     t.end();
 });
 
@@ -167,7 +167,7 @@ test('Popup content can be set via setHTML', (t) => {
         .addTo(map)
         .setHTML("<span>Test</span>");
 
-    t.equal(popup.getElement().querySelector('.mapboxgl-popup-content').innerHTML, "<span>Test</span>");
+    t.equal(popup.getElement().querySelector('.maplibregl-popup-content').innerHTML, "<span>Test</span>");
     t.end();
 });
 
@@ -217,7 +217,7 @@ test('Popup content can be set via setDOMContent', (t) => {
         .addTo(map)
         .setDOMContent(content);
 
-    t.equal(popup.getElement().querySelector('.mapboxgl-popup-content').firstChild, content);
+    t.equal(popup.getElement().querySelector('.maplibregl-popup-content').firstChild, content);
     t.end();
 });
 
@@ -369,7 +369,7 @@ test('Popup anchors as specified by the anchor option', (t) => {
         .setText('Test')
         .addTo(map);
 
-    t.ok(popup.getElement().classList.contains('mapboxgl-popup-anchor-top-left'));
+    t.ok(popup.getElement().classList.contains('maplibregl-popup-anchor-top-left'));
     t.end();
 });
 
@@ -401,7 +401,7 @@ test('Popup anchors as specified by the anchor option', (t) => {
         t.stub(map, 'project').returns(point);
         popup.setLngLat([0, 0]);
 
-        t.ok(popup.getElement().classList.contains(`mapboxgl-popup-anchor-${anchor}`));
+        t.ok(popup.getElement().classList.contains(`maplibregl-popup-anchor-${anchor}`));
         t.end();
     });
 
@@ -437,7 +437,7 @@ test('Popup automatically anchors to top if its bottom offset would push it off-
     t.stub(map, 'project').returns(point);
     popup.setLngLat([0, 0]);
 
-    t.ok(popup.getElement().classList.contains('mapboxgl-popup-anchor-top'));
+    t.ok(popup.getElement().classList.contains('maplibregl-popup-anchor-top'));
     t.end();
 });
 
@@ -506,7 +506,7 @@ test('Popup can be removed and added again (#1477)', (t) => {
         .remove()
         .addTo(map);
 
-    t.equal(map.getContainer().querySelectorAll('.mapboxgl-popup').length, 1);
+    t.equal(map.getContainer().querySelectorAll('.maplibregl-popup').length, 1);
     t.end();
 });
 
@@ -519,7 +519,7 @@ test('Popup#addTo is idempotent (#1811)', (t) => {
         .addTo(map)
         .addTo(map);
 
-    t.equal(popup.getElement().querySelector('.mapboxgl-popup-content').textContent, 'Test');
+    t.equal(popup.getElement().querySelector('.maplibregl-popup-content').textContent, 'Test');
     t.end();
 });
 
@@ -533,7 +533,7 @@ test('Popup#remove is idempotent (#2395)', (t) => {
         .remove()
         .remove();
 
-    t.equal(map.getContainer().querySelectorAll('.mapboxgl-popup').length, 0);
+    t.equal(map.getContainer().querySelectorAll('.maplibregl-popup').length, 0);
     t.end();
 });
 
@@ -590,7 +590,7 @@ test('Pointer-tracked popup is tagged with right class', (t) => {
         .trackPointer()
         .addTo(map);
 
-    t.equal(popup._container.classList.value.includes('mapboxgl-popup-track-pointer'), true);
+    t.equal(popup._container.classList.value.includes('maplibregl-popup-track-pointer'), true);
     t.end();
 });
 
@@ -602,7 +602,7 @@ test('Pointer-tracked popup with content set later is tagged with right class ',
 
     popup.setText("Test");
 
-    t.equal(popup._container.classList.value.includes('mapboxgl-popup-track-pointer'), true);
+    t.equal(popup._container.classList.value.includes('maplibregl-popup-track-pointer'), true);
     t.end();
 });
 
@@ -614,7 +614,7 @@ test('Pointer-tracked popup that is set afterwards is tagged with right class ',
     popup.setText("Test");
     popup.trackPointer();
 
-    t.equal(popup._container.classList.value.includes('mapboxgl-popup-track-pointer'), true);
+    t.equal(popup._container.classList.value.includes('maplibregl-popup-track-pointer'), true);
     t.end();
 });
 
@@ -627,7 +627,7 @@ test('Pointer-tracked popup can be repositioned with setLngLat', (t) => {
         .addTo(map);
 
     t.deepEqual(popup._pos, map.project([0, 0]));
-    t.equal(popup._container.classList.value.includes('mapboxgl-popup-track-pointer'), false);
+    t.equal(popup._container.classList.value.includes('maplibregl-popup-track-pointer'), false);
     t.end();
 });
 
@@ -638,7 +638,7 @@ test('Positioned popup lacks pointer-tracking class', (t) => {
         .setLngLat([0, 0])
         .addTo(map);
 
-    t.equal(popup._container.classList.value.includes('mapboxgl-popup-track-pointer'), false);
+    t.equal(popup._container.classList.value.includes('maplibregl-popup-track-pointer'), false);
     t.end();
 });