data-web-awesome instead of data-webawesome

docs/pages/getting-started/installation.md

@@ -100,8 +100,8 @@ Some components rely on assets (icons, images, etc.) and Web Awesome needs to kn
 However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Web Awesome, you'll need to set the base path. You can do this one of two ways.
 
 ```html
-<!-- Option 1: the data-webawesome attribute -->
-<script src="bundle.js" data-webawesome="/path/to/shoelace/%NPMDIR%"></script>
+<!-- Option 1: the data-web-awesome attribute -->
+<script src="bundle.js" data-web-awesome="/path/to/shoelace/%NPMDIR%"></script>
 
 <!-- Option 2: the setBasePath() method -->
 <script src="bundle.js"></script>
@@ -144,7 +144,7 @@ Here's an example that loads only the button component. Again, if you're not usi
 ```html
 <link rel="stylesheet" href="/path/to/shoelace/%NPMDIR%/themes/default.css" />
 
-<script type="module" data-webawesome="/path/to/shoelace/%NPMDIR%">
+<script type="module" data-web-awesome="/path/to/shoelace/%NPMDIR%">
   import '@shoelace-style/shoelace/%NPMDIR%/components/button/button.js';
 
   // <wa-button> is ready to use!

docs/pages/resources/changelog.md

@@ -1324,7 +1324,7 @@ The component API remains the same except for the changes noted below. Thanks fo
 - 🚨 BREAKING: moved the base stylesheet from `dist/shoelace.css` to `dist/themes/base.css`
 - 🚨 BREAKING: moved `icons` into `assets/icons` to make future assets easier to colocate
 - 🚨 BREAKING: changed `getSymbol` property in `<wa-rating>` to `symbol` (it now accepts a string or a function that returns an icon name)
-- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-webawesome` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
+- 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-web-awesome` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
 - Fixed `min` and `max` types in `<wa-input>` to allow numbers and strings [#330]
 - Fixed a bug where `<wa-checkbox>`, `<wa-radio>`, and `<wa-switch>` controls would shrink with long labels [#325]
 - Fixed a bug in `<wa-select>` where the dropdown menu wouldn't reposition when the box resized [#340]

src/utilities/base-path.ts

@@ -10,11 +10,11 @@ export function setBasePath(path: string) {
  *
  * The base path is used to load assets such as icons and images, so it needs to be set for components to work properly.
  * By default, this script will look for a script ending in webawesome.js or autoloader.js and set the base path to the
- * directory that contains that file. To override this behavior, you can add the data-webawesome attribute to any script
+ * directory that contains that file. To override this behavior, you can add the data-web-awesome attribute to any script
  * on the page (it probably makes the most sense to attach it to the Web Awesome script, but it could also be on a
  * bundle). The value can be a local folder or it can point to a CORS-enabled endpoint such as a CDN.
  *
- *   <script src="bundle.js" data-webawesome="/custom/base/path"></script>
+ *   <script src="bundle.js" data-web-awesome="/custom/base/path"></script>
  *
  * Alternatively, you can set the base path manually using the exported setBasePath() function.
  *
@@ -23,11 +23,11 @@ export function setBasePath(path: string) {
 export function getBasePath(subpath = '') {
   if (!basePath) {
     const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[];
-    const configScript = scripts.find(script => script.hasAttribute('data-webawesome'));
+    const configScript = scripts.find(script => script.hasAttribute('data-web-awesome'));
 
     if (configScript) {
-      // Use the data-webawesome attribute
-      setBasePath(configScript.getAttribute('data-webawesome')!);
+      // Use the data-web-awesome attribute
+      setBasePath(configScript.getAttribute('data-web-awesome')!);
     } else {
       const fallbackScript = scripts.find(s => {
         return /webawesome(\.min)?\.js($|\?)/.test(s.src) || /autoloader(\.min)?\.js($|\?)/.test(s.src);