RTL Dropdown Nav corrected thanks to @64bitint

Added popovers to possibly replace the notifications.
Started adding popover toasts

docs/index.html

@@ -91,6 +91,7 @@
 			</header>
 			<!-- /Header -->
 		</div>
+
 		<main class="col-12 col-md-9 col-lg-10">
 			<article>
 				<header><h2>Yohns PicoCSS Fork v2.2.0</h2></header>
@@ -125,11 +126,11 @@
 				<p>Add <code>role="list"</code> attribute to the <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> element for the hamburger menu, and then add <code>role="listitem"</code> attribute to each <code>&lt;li&gt;</code> element.</p>
 				<hr>
 				<hgroup>
-          <h3>Example Hamburger Menu</h3>
-          <h6>(resize width of screen if you don't see it)</h6>
-        </hgroup>
+					<h3>Example Hamburger Menu</h3>
+					<h6>(resize width of screen if you don't see it)</h6>
+				</hgroup>
 
-        <!-- Start Responsive Nav 1 -->
+				<!-- Start Responsive Nav 1 -->
 				<nav role="navigation" data-position="start" data-breakpoint="lg">
 					<ul>
 						<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
@@ -138,7 +139,7 @@
 						<li><strong>Like Us on GitHub!</strong></li>
 					</ul>
 					<input type="checkbox" id="menu-btn" />
-          <!-- role="button" -->
+					<!-- role="button" -->
 					<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu" aria-controls="nav-example">
 						&#x2261;
 					</label>
@@ -150,10 +151,10 @@
 						<li role="listitem"><a href="#">Sign Up</a></li>
 					</ol>
 				</nav>
-        <!-- End Responsive Nav 1 -->
+				<!-- End Responsive Nav 1 -->
 
-        <h3>Hamburger Menu Under Nav Example</h3>
-        <!-- Start Responsive Nav 2 -->
+				<h3>Hamburger Menu Under Nav Example</h3>
+				<!-- Start Responsive Nav 2 -->
 				<nav role="navigation" data-position="end" data-breakpoint="lg">
 					<ul>
 						<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
@@ -173,9 +174,9 @@
 						<li role="listitem"><a href="#">Sign Up</a></li>
 					</ol>
 				</nav>
-        <!-- End Responsive Nav 2 -->
+				<!-- End Responsive Nav 2 -->
 
-      </article>
+			</article>
 			<!-- /hamburger-menu -->
 			 <hr>
 			<!-- Tabs -->
@@ -506,6 +507,28 @@
 			</article>
 			<!-- ./ Modal -->
 			<hr>
+			<article id="popover">
+				<header><h2>Popovers</h2><p>Popovers will replace the notifications below.</p></header>
+
+				<button class="action" popovertarget="popover-example1">Backdrop Close</button>
+
+				<button popovertarget="popover-example2" popovertargetaction="show">Manual Close</button>
+
+				<article id="popover-example1" popover>
+					<header>
+						<h2>Popover</h2>
+					</header>
+					Click/Tap everywhere else to close
+					<footer>Footer</footer>
+				</article>
+
+				<article id="popover-example2" popover="manual">
+					Some Feedback Message With Close Button
+					<button popovertarget="popover-example2" popovertargetaction="hide">&times;</button>
+				</article>
+
+			</article>
+			<hr>
 			<!-- notifications -->
 			<article id="notifications">
 				<header><h2>Notificaton</h2></header>

docs/js/popover-toast.js

@@ -0,0 +1,80 @@
+/**
+ * Popover Toast
+ *
+ * Modified from https://mdn.github.io/dom-examples/popover-api/toast-popovers/
+ * Modified by Yohn
+ */
+
+const successToastBtn = document.getElementById("success-toast-btn");
+const failureToastBtn = document.getElementById("failure-toast-btn");
+const counter = document.querySelector("p");
+
+function makeToast(result) {
+	// Create an element and make it into a popover
+	const popover = document.createElement("article");
+	popover.popover = "manual";
+	popover.classList.add("toast");
+	popover.classList.add("newest");
+
+	let msg;
+
+	// Give the toast an appropriate text content, class for styling, and update
+	// the relevant count, depending on whether it was a success or a failure
+	if (result === "success") {
+		msg = "Action was successful!";
+		popover.classList.add("success");
+		successCount++;
+	} else if (result === "failure") {
+		msg = "Action failed!";
+		popover.classList.add("failure");
+		failCount++;
+	} else {
+		return;
+	}
+
+	// Give the toast its text content, and add it to the DOM
+	popover.textContent = msg;
+	document.body.appendChild(popover);
+
+	// Show the popover
+	popover.showPopover();
+
+	// Remove the toast again after 4 seconds
+	setTimeout(() => {
+		popover.hidePopover();
+		popover.remove();
+	}, 4000);
+
+	// When a new toast appears, run the movetoastsUp() function
+	popover.addEventListener("toggle", (event) => {
+		if (event.newState === "open") {
+			moveToastsUp();
+		}
+	});
+}
+
+function moveToastsUp() {
+	const toasts = document.querySelectorAll(".toast");
+
+	toasts.forEach((toast) => {
+		// If the toast is the one that has just appeared, we don't want it to move up.
+		if (toast.classList.contains("newest")) {
+			toast.style.bottom = `5px`;
+			toast.classList.remove("newest");
+		} else {
+			// Move up all the other toasts by 50px to make way for the new one
+			const prevValue = toast.style.bottom.replace("px", "");
+			const newValue = parseInt(prevValue) + 50;
+			toast.style.bottom = `${newValue}px`;
+		}
+	});
+}
+
+// Handlers to wire up the buttons to the makeToast() function
+successToastBtn.addEventListener("click", () => {
+	makeToast("success");
+});
+
+failureToastBtn.addEventListener("click", () => {
+	makeToast("failure");
+});