chore: format files

examples/usa.html

@@ -66,8 +66,8 @@ <h2>USA Demo</h2>
     <div id="map_demo" style="width: 920px; height: 1000px">
       <p>
         <b>Disclaimer:</b> This demo is old and the code is stylistically bad
-        and probably difficult to understand. It is <b>strongly</b> recommend to use
-        the online demos at
+        and probably difficult to understand. It is <b>strongly</b> recommended
+        to use the online demos at
         <a href="https://jamietre.github.io/ImageMapster/overview/demos/"
           >the project web site</a
         >

site/src/components/demos/resize/map.html

@@ -421,7 +421,7 @@
     gap: 1rem;
     flex-wrap: nowrap;
   }
-  .resize-controls input[type="button"] {
+  .resize-controls input[type='button'] {
     padding: 0.1rem 0.4rem;
   }
   .resize-number-input {

site/src/components/demos/skeleton/narrative.mdx

@@ -1,4 +1,3 @@
-
 The [Skeleton Joint demo][example-skeleton] is a user-contributed example of using ImageMapster to allow synchronizing selections from a complex list with an image. It is from a private web site, but the author has granted permission to use it here.
 
 [example-skeleton]: https://html-preview.github.io/?url=https://raw.githubusercontent.com/jamietre/ImageMapster/main/examples/skeleton.html

site/src/components/features/feature-detail.astro

@@ -1,9 +1,9 @@
 <li>
-  <slot/>
+  <slot />
 </li>
 
 <style>
-	.feature-detail-list {
+  .feature-detail-list {
     padding-inline-start: 1.5rem;
   }
   @media (min-width: 50rem) {

site/src/components/features/feature-grid.astro

@@ -1,20 +1,20 @@
 <div class:list={['feature-grid', 'not-content']}><slot /></div>
 
 <style>
-	.feature-grid {
-		display: grid;
-		gap: 1rem;
+  .feature-grid {
+    display: grid;
+    gap: 1rem;
     align-items: center;
-	}
+  }
 
-	.feature-grid > :global(*) {
-		margin-top: 0 !important;
-	}
+  .feature-grid > :global(*) {
+    margin-top: 0 !important;
+  }
 
-	@media (min-width: 50rem) {
-		.feature-grid {
-			gap: 1.5rem;
+  @media (min-width: 50rem) {
+    .feature-grid {
+      gap: 1.5rem;
       flex-direction: column;
-		}
-	}
+    }
+  }
 </style>

site/src/components/features/feature.astro

@@ -1,17 +1,20 @@
 ---
 interface Props {
-   imageFilename: string;
-   altText: string;
+  imageFilename: string;
+  altText: string;
 }
 
 const imageBasePath = '/src/assets/images/features';
 const imageFilter = `${imageBasePath}/*.{jpeg,jpg,png,gif}`;
 const { imageFilename, altText } = Astro.props;
 import type { ImageMetadata } from 'astro';
 import { Image } from 'astro:assets';
-const images = import.meta.glob<{ default: ImageMetadata }>(`/src/assets/images/features/*.{jpeg,jpg,png,gif}`)
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  `/src/assets/images/features/*.{jpeg,jpg,png,gif}`
+);
 const imagePath = `${imageBasePath}/${imageFilename}`;
-if (!images[imagePath]) throw new Error(`"${imagePath}" does not exist in glob: "${imageFilter}"`);
+if (!images[imagePath])
+  throw new Error(`"${imagePath}" does not exist in glob: "${imageFilter}"`);
 ---
 
 <div class="feature sl-flex">
@@ -26,20 +29,20 @@ if (!images[imagePath]) throw new Error(`"${imagePath}" does not exist in glob:
 </div>
 
 <style>
-	.feature {
+  .feature {
     display: grid;
     grid-template-columns: 1fr;
-		gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
+    gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
     align-items: center;
-	}
+  }
   .feature-image img {
     width: 50%;
     height: auto;
   }
   .feature-image {
-
   }
-  .feature-image, .feature-bullets {
+  .feature-image,
+  .feature-bullets {
     display: flex;
     align-items: center;
   }

site/src/content/docs/overview/introduction.mdx

@@ -28,6 +28,7 @@ See [getting started](./getting-started.md) for information on how to install an
       Control [color][cr-fillcolor], [opacity][cr-fillopacity], [border][cr-stroke],
       [fade effects][cr-fade], and more for highlight and select
     </FeatureDetail>
+
   </Feature>
 
   <Feature imageFilename="multiple.gif" altText="Select Areas">
@@ -45,6 +46,7 @@ See [getting started](./getting-started.md) for information on how to install an
       Define areas as inactive or always active with
       [staticState][cr-staticstate]
     </FeatureDetail>
+
   </Feature>
 </FeatureGrid>
 
@@ -61,6 +63,7 @@ See [getting started](./getting-started.md) for information on how to install an
       Regular fills and borders can be used in combination with alternate image
       to create complex highlight and selection effects
     </FeatureDetail>
+
   </Feature>
 </FeatureGrid>
 
@@ -77,6 +80,7 @@ See [getting started](./getting-started.md) for information on how to install an
       data with [onGetList][cr-ongetlist], optionally sorted by specifying a sort order
       using [sortlist][cr-sortlist]
     </FeatureDetail>
+
   </Feature>
 </FeatureGrid>
 
@@ -89,6 +93,7 @@ See [getting started](./getting-started.md) for information on how to install an
     <FeatureDetail>Use the default tooltip container, or create a custom [toolTipContainer][cr-tooltipcontainer] using any HTML template</FeatureDetail>
 
     <FeatureDetail>Manually activate or deactivate tooltips with the [tooltip][ar-tooltip] method</FeatureDetail>
+
   </Feature>
 </FeatureGrid>
 
@@ -115,6 +120,7 @@ See [getting started](./getting-started.md) for information on how to install an
       concentric selection areas by defining an interior area as both a mask and
       its own selection group
     </FeatureDetail>
+
   </Feature>
 </FeatureGrid>
 
@@ -134,12 +140,13 @@ See [getting started](./getting-started.md) for information on how to install an
     <FeatureDetail>
       Manually resize image maps by calling the [resize][ar-resize] method
     </FeatureDetail>
+
   </Feature>
 </FeatureGrid>
 
 ## History
 
-ImageMapster was created by [James Treworgy](https://github.com/jamietre).  It
+ImageMapster was created by [James Treworgy](https://github.com/jamietre). It
 started as a fork of David Lynch's [Maphilight](https://github.com/kemayo/maphilight)
 in early 2011. He wanted to add the ability to keep areas selected. Having a lot
 of ideas for interesting things that could be done with image maps, he ended up
@@ -169,7 +176,7 @@ browsers (Internet Explorer 6-8) it uses VML to achieve similar effects.
 ImageMapster works in all major browsers (IE6+, Firefox 2+, Opera, Chrome, Edge,
 Safari) and on mobile devices.
 
-James put in a lot of work making ImageMapster what it is today.  If inclined,
+James put in a lot of work making ImageMapster what it is today. If inclined,
 find out about [how to thank him](../resources/faq.md#how-can-i-thank-you-for-your-work).
 
 [cr-fillcolor]: ../reference/configuration-reference.md#fillcolor

site/src/content/docs/resources/feedback.mdx

@@ -10,4 +10,7 @@ Tell us what you think and/or post a link to your site using ImageMapster in a c
 If you have technical issues, [github](https://github.com/jamietre/ImageMapster/issues) is a better place to report them and if you have general questions,
 check out our [FAQ](./faq.md) and [support](https://github.com/jamietre/ImageMapster/blob/main/SUPPORT.md) pages.
 
-<Disqus pageId='imagemapster-feedback' pageUrl='http://www.outsharked.com/imagemapster/default.aspx?feedback.html' />
+<Disqus
+  pageId="imagemapster-feedback"
+  pageUrl="http://www.outsharked.com/imagemapster/default.aspx?feedback.html"
+/>

src/tooltip.js

@@ -273,7 +273,9 @@
     options.fadeDuration =
       options.fadeDuration ||
       (md.options.toolTipFade
-        ? u.isNumeric(areaOpts.fadeDuration) ? areaOpts.fadeDuration : md.options.fadeDuration
+        ? u.isNumeric(areaOpts.fadeDuration)
+          ? areaOpts.fadeDuration
+          : md.options.fadeDuration
         : 0);
 
     target = ad.area