fix: auto-cleanup by bot (mdn#42305)

* chore: auto-fix Markdownlint, Prettier, and front-matter issues

* Fix typos

* More fixes

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

Author: mdn-bot

.vscode/dictionaries/code-entities.txt

@@ -298,6 +298,7 @@ indexeddb-examples
 indexifembedded
 inputreport
 inputsourceschange
+interestfor
 intitle
 intl.uidirection.locale
 intrinsicsize
@@ -383,6 +384,7 @@ localecho
 localstore
 longdiv
 longtask
+loseinterest
 lowdelay
 lowp
 lquote
@@ -521,6 +523,8 @@ ondispose
 ondownloadprogress
 onefive
 ongesturestart
+oninterest
+onloseinterest
 onnavigate
 onnavigateerror
 onnavigatesuccess

.vscode/dictionaries/terms-abbreviations.txt

@@ -861,6 +861,7 @@ ungroup
 ungrouping
 unguaranteed
 unhovered
+unhovering
 uninterpolated
 unintuitively
 unioned

files/en-us/learn_web_development/core/frameworks_libraries/angular_building/index.md

@@ -54,7 +54,7 @@ Because these files are static, you can host them on any web server capable of s
 - Java
 - .NET
 
-You can use any backend such as [Firebase](https://firebase.google.com/docs/hosting), [Google Cloud](https://cloud.google.com/solutions/web-hosting), or [App Engine](https://cloud.google.com/appengine/docs/standard/hosting-a-static-website).
+You can use any backend such as [Firebase](https://firebase.google.com/docs/hosting), [Google Cloud](https://cloud.google.com/solutions/web-hosting), or [App Engine](https://docs.cloud.google.com/appengine/docs/standard/hosting-a-static-website).
 
 ### Host locally
 

files/en-us/web/api/element/setattributens/index.md

@@ -13,7 +13,7 @@ browser-compat: api.Element.setAttributeNS
 > APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the value originally came from an attacker.
 >
 > You can mitigate this risk by always passing the appropriate trusted type object ({{domxref("TrustedHTML")}}, {{domxref("TrustedScript")}}, or {{domxref("TrustedScriptURL")}}) instead of strings for those attributes that require them, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
-> See [Security considerations](#/en-US/docs/Web/API/Element/setAttribute#security_considerations) in {{domxref("Element.setAttribute())}} for more information.
+> See [Security considerations](/en-US/docs/Web/API/Element/setAttribute#security_considerations) in {{domxref("Element.setAttribute())}} for more information.
 
 The **`setAttributeNS()`** method of the {{domxref("Element")}} interface adds a new attribute or changes the value of an attribute with the given namespace and name.
 

files/en-us/web/api/htmlareaelement/interestforelement/index.md

@@ -30,8 +30,8 @@ In this example, we use an `<area>` element's `interestForElement` property to s
 We include an `<area>` element and a `<div>` element. We turn the `<div>` element into a popover by setting a `popover` attribute on it.
 
 ```html live-sample___basic-interest-invoker
-<map>
-  <area href="#" shape="default" />
+<map name="example-map" id="example-map">
+  <area href="#" shape="default" alt="Example area" />
 </map>
 <div id="mypopover" popover>I am a <code>&lt;div&gt;</code> element.</div>
 ```

files/en-us/web/api/popover_api/using_interest_invokers/index.md

@@ -10,7 +10,7 @@ page-type: guide
 
 ## Concepts
 
-The Popover API provides the functionality to display a popover when a related control element (the **invoker**) is activated, for example, when it is clicked. This feature is useful for displaying UI elements such as modals and information panels. You can [create popovers declaratively](/en-US/docs/Web/API/Popover_API/Using#creating_declarative_popovers) by using the [`popover`](/en-US/docs/Web/HTML/Reference/Elements/button#popover) attribute together with either [`popovertarget`](/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget) or [`commandfor`](/en-US/docs/Web/HTML/Reference/Elements/button#commandfor).
+The Popover API provides the functionality to display a popover when a related control element (the **invoker**) is activated, for example, when it is clicked. This feature is useful for displaying UI elements such as modals and information panels. You can [create popovers declaratively](/en-US/docs/Web/API/Popover_API/Using#creating_declarative_popovers) by using the [`popover`](/en-US/docs/Web/HTML/Reference/Global_attributes/popover) attribute together with either [`popovertarget`](/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget) or [`commandfor`](/en-US/docs/Web/HTML/Reference/Elements/button#commandfor).
 
 In addition to these activation-based popovers, there is a common need to display a popover when a control element is hovered or focused – interactions that indicate user interest. For example, many social and community sites let users hover over a link to a person's or group's profile page to show a popover with more information. This quick preview helps users decide whether they want to visit the full page. Such popovers may also contain quick actions, such as "Follow" or "Subscribe to group", allowing users to take an action without losing their current context.
 
@@ -32,7 +32,7 @@ Creating an interest invoker declaratively has the following two requirements:
 - A **target element**: This is the element that is affected or controlled when interest is gained or lost. The target element must have an `id`, and it can be just about any element type. Giving this element a `popover` attribute turns it into a popover.
 
   > [!NOTE]
-  > You can also set the target element programmatically by setting the invoker element's `interestForElement` DOM property to a reference to the target element. For more information, see [The interest invoker JavaScript API](#the_interest_invoker_javascript_api) section later in this guide.
+  > You can also set the target element programmatically by setting the invoker element's `interestForElement` DOM property to a reference to the target element. For more information, see [JavaScript API for interest invokers](#javascript_api_for_interest_invokers) section later in this guide.
 
 Let's look at a simple example. Here, the **invoker element** is a link, and the **target element** is a paragraph with the `popover` attribute.
 
@@ -48,8 +48,10 @@ Let's look at a simple example. Here, the **invoker element** is a link, and the
 ```
 
 ```js hidden live-sample___basic-interest-invoker live-sample___interest-invoker-popover-interaction live-sample___interest-invoker-styling live-sample___interest-invoker-api live-sample___non-popover live-sample___link-preview-popover
-const supported =
-  HTMLButtonElement.prototype.hasOwnProperty("interestForElement");
+const supported = Object.hasOwn(
+  HTMLButtonElement.prototype,
+  "interestForElement",
+);
 if (!supported) {
   document.querySelector("html").classList.add("no-interest-invokers");
 }
@@ -75,11 +77,11 @@ The value of the `popover` attribute doesn't affect the popover's behavior in th
 You can combine interest invokers with regular popovers on the same control element. In the following example, a {{htmlelement("button")}} element is set up as an interest invoker using the `interestfor` attribute, meaning it will show a tooltip when the user shows interest in it. If the button is clicked, it will show or hide a different popover referenced by the `commandfor` attribute. The [`command`](/en-US/docs/Web/HTML/Reference/Elements/button#command) attribute is set to `toggle-popover`, allowing the button to be pressed multiple times to toggle the popover between its shown and hidden states.
 
 ```css hidden live-sample___interest-invoker-popover-interaction
-#mytooltip {
+#my-tooltip {
   position-area: right;
 }
 
-#myinfobox {
+#my-infobox {
   position-area: bottom;
 }
 ```
@@ -88,14 +90,14 @@ You can combine interest invokers with regular popovers on the same control elem
 <p>
   Some content including a
   <button
-    interestfor="mytooltip"
-    commandfor="myinfobox"
+    interestfor="my-tooltip"
+    commandfor="my-infobox"
     command="toggle-popover">
     button
   </button>
 </p>
-<p id="mytooltip" popover="hint">A hover tooltip</p>
-<p id="myinfobox" popover>
+<p id="my-tooltip" popover="hint">A hover tooltip</p>
+<p id="my-infobox" popover>
   An infobox that also contains some control buttons<br />
   <button>Button 1</button> <button>Button 2</button>
 </p>
@@ -122,10 +124,10 @@ We've defined two buttons and a tooltip. The tooltip is shown or hidden when the
 
 ```html live-sample___interest-invoker-styling
 <p>
-  <button interestfor="mytooltip">Button 1</button>
-  <button interestfor="mytooltip">Button 2</button>
+  <button interestfor="my-tooltip">Button 1</button>
+  <button interestfor="my-tooltip">Button 2</button>
 </p>
-<p id="mytooltip" popover="hint">A hover tooltip</p>
+<p id="my-tooltip" popover="hint">A hover tooltip</p>
 ```
 
 In the CSS, we've set an `interest-delay` of `1s 2s` on the `<button>` — this creates a delay of 1 second before the tooltip appears when the user shows interest, and a delay of 2 seconds before it disappears when the user loses interest. We've also used the `button:interest-source` selector to change the {{cssxref("background-color")}} of the buttons to `orange` when interest is shown.
@@ -151,15 +153,15 @@ p:has(button:interest-source) button {
 We've also set a {{cssxref("position-area")}} of `bottom` on the tooltip so that it appears below the button. This is possible because associating any popover with its interest invoker creates an implicit anchor reference between them (see [Popover anchor positioning](/en-US/docs/Web/API/Popover_API/Using#popover_anchor_positioning) for more details).
 
 ```css live-sample___interest-invoker-styling
-#mytooltip {
+#my-tooltip {
   position-area: bottom;
 }
 ```
 
-Finally, we've used the `#mytooltip:interest-target` selector to set a dashed border on the popover when interest is shown.
+Finally, we've used the `#my-tooltip:interest-target` selector to set a dashed border on the popover when interest is shown.
 
 ```css live-sample___interest-invoker-styling
-#mytooltip:interest-target {
+#my-tooltip:interest-target {
   border-style: dashed;
 }
 ```
@@ -180,13 +182,15 @@ Interest invokers have an associated JavaScript API that lets you query the elem
 
 ### Detecting support for interest invokers
 
-One of the uses of the API is feature detection. The simplest way to check whether interest invokers are supported is to use the {{jsxref("Object.hasOwnProperty()")}} method on one of the interface types to see if the `interestForElement` property is available.
+One of the uses of the API is feature detection. The simplest way to check whether interest invokers are supported is to use the {{jsxref("Object.hasOwn()")}} method on one of the interface types to see if the `interestForElement` property is available.
 
 For example:
 
 ```js
-const supported =
-  HTMLButtonElement.prototype.hasOwnProperty("interestForElement");
+const supported = Object.hasOwn(
+  HTMLButtonElement.prototype,
+  "interestForElement",
+);
 ```
 
 All the examples in this guide use this technique to detect support. If the return value is `false`, indicating that the feature is not supported, we add a class to the {{htmlelement("html")}} element:
@@ -219,25 +223,25 @@ Let's look at a basic example that shows the API features in action. This exampl
   Here's some links:
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
-  <a href="#"">Link 3</a>
+  <a href="#">Link 3</a>
 </p>
-<p id="mytooltip" popover="hint">A hover toolip</p>
+<p id="my-tooltip" popover="hint">A hover tooltip</p>
 ```
 
 ```css hidden live-sample___interest-invoker-api
 html {
   font-family: sans-serif;
 }
 
-#mytooltip {
+#my-tooltip {
   position-area: bottom;
 }
 ```
 
 In the JavaScript, we get references to the popover and the three links. We then loop through the links and set each link's {{domxref("HTMLAnchorElement.interestForElement", "interestForElement")}} property to reference the popover element. This programmatically sets up the interest invoker-target relationship between the popover and each link.
 
 ```js live-sample___interest-invoker-api
-const tooltip = document.getElementById("mytooltip");
+const tooltip = document.getElementById("my-tooltip");
 const links = document.querySelectorAll("a");
 links.forEach((link) => (link.interestForElement = tooltip));
 ```

files/en-us/web/css/reference/properties/animation-range-end/index.md

@@ -91,11 +91,11 @@ In this example, the `animation-range-end` is applied to an element animated via
 
 In the middle of a long block of text, we've included an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity.
 
-```html
-<div class="animatedElement"></div>
+```html-nolint
+<div class="animatedElement">
 ```
 
-```html hidden
+```html-nolint hidden
 <p>
   Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
   cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
@@ -106,7 +106,7 @@ In the middle of a long block of text, we've included an element that we'll anim
   euismod nisi. Eget egestas purus viverra accumsan in nisl nisi scelerisque.
   Netus et malesuada fames ac.
 </p>
-<p></p>
+<p>
 ```
 
 We've also included a checkbox that will toggle the {{cssxref("animation-fill-mode")}} property, so you can see how this property affects animations with shortened timelines.

files/en-us/web/css/reference/properties/animation-range-start/index.md

@@ -44,7 +44,7 @@ animation-range-start: unset;
 ## Description
 
 Allowed values for the `animation-range-start` property are `normal`, a {{cssxref("length-percentage")}}, a `<timeline-range-name>`, or a `<timeline-range-name>` followed by a `<length-percentage>`. If the [`<timeline-range-name>`](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) value does not include a `<length-percentage>`, the percentage defaults to `0%`.
-See [`animation-range`](/en-US/docs/Web/CSS/animation-range) for a detailed description of the available values.
+See [`animation-range`](/en-US/docs/Web/CSS/Reference/Properties/animation-range) for a detailed description of the available values.
 Also check out the [View progress timeline visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/), which shows what the different values mean in an easy-to-follow visual format.
 
 The `animation-range-start` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that using the `animation` shorthand resets any previously declared `animation-range-start` value of equal or lower specificity to `normal`; the shorthand cannot be used to set a new `animation-range-start` value. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you should declare `animation-range-start` _after_ declaring any `animation` shorthand to avoid resetting the value to `normal`.

files/en-us/web/css/reference/selectors/_colon_interest-source/index.md

@@ -32,7 +32,7 @@ The markup includes a {{htmlelement("button")}} and a {{htmlelement("p")}}. We s
 
 ```html live-sample___interest-source
 <button interestfor="mypopover">Button</button>
-<p id="mypopover" popover>A hover toolip</p>
+<p id="mypopover" popover>A hover tooltip</p>
 ```
 
 #### CSS

files/en-us/web/css/reference/selectors/_colon_interest-target/index.md

@@ -37,7 +37,7 @@ The markup includes a {{htmlelement("button")}} and a {{htmlelement("p")}}. We s
 
 #### CSS
 
-In the CSS, we specify a rule with an `:interest-target` selector, which will apply a specific set of sttyles to the `<p>` element when interest is shown in the `<button>`. We also apply some other styles to the `<button>`, which we've hidden for brevity.
+In the CSS, we specify a rule with an `:interest-target` selector, which will apply a specific set of styles to the `<p>` element when interest is shown in the `<button>`. We also apply some other styles to the `<button>`, which we've hidden for brevity.
 
 ```css hidden live-sample___interest-target
 body {