build: replace rollup and jest with vite and vitest with demo env

BREAKING CHANGE: vite changes the naming convention for the dist files

See #32

.eslintrc.js

@@ -6,10 +6,6 @@ module.exports = {
   },
   extends: ["standard", "plugin:jsdoc/recommended", "prettier"],
   plugins: ["jsdoc"],
-  globals: {
-    Atomics: "readonly",
-    SharedArrayBuffer: "readonly",
-  },
   parser: "@babel/eslint-parser",
   parserOptions: {
     sourceType: "module",
@@ -21,6 +17,17 @@ module.exports = {
         allow: ["warn", "error"],
       },
     ],
+    "jsdoc/tag-lines": [
+      "warn",
+      "always",
+      {
+        noEndLines: true,
+        tags: {
+          property: { lines: "never" },
+          param: { lines: "never" },
+        },
+      },
+    ],
   },
   settings: {
     jsdoc: {

.github/workflows/test.yml

@@ -30,4 +30,4 @@ jobs:
       - name: Install modules
         run: npm install
       - name: Run tests
-        run: npm test
+        run: npm run test:run

demo/main.js

@@ -0,0 +1,159 @@
+import AccessibleMenuBootstrap5 from "../index";
+import { singleLevel, twoLevel, threeLevel } from "./menus";
+
+/**
+ * Generates an accessible-menu.
+ *
+ * @param {string}      type           - The type of menu to use.
+ * @param {string}      structure      - The DOM structure to use.
+ * @param {string}      hover          - The hover type for the menu.
+ * @param {HTMLElement} container      - The container to generate the menu in.
+ * @param {object}      [options = {}] - Option overrides.
+ */
+function generateMenu(type, structure, hover, container, options = {}) {
+  menus.pop();
+  const MenuClass = AccessibleMenuBootstrap5[type] || null;
+  const menuDOM = menuStructures[structure];
+
+  container.innerHTML = menuDOM.default;
+
+  const nav = container.querySelector("nav");
+
+  nav.classList.remove("disclosure-menu");
+  nav.classList.remove("menubar");
+  nav.classList.remove("treeview");
+
+  if (MenuClass !== null) {
+    switch (type) {
+      case "Bootstrap5DisclosureMenu":
+        nav.classList.add("disclosure-menu");
+
+        break;
+
+      case "Bootstrap5Menubar":
+        nav.classList.add("menubar");
+
+        break;
+
+      case "Bootstrap5Treeview":
+        nav.classList.add("treeview");
+
+        break;
+    }
+
+    const menu = new MenuClass({
+      menuElement: nav.querySelector(".navbar-nav"),
+      containerElement: nav.querySelector(".navbar-collapse"),
+      controllerElement: nav.querySelector(".navbar-toggler"),
+      hoverType: hover,
+      ...options,
+    });
+
+    menus.push(menu);
+  }
+}
+
+// Menu setup.
+const menus = [];
+const header = document.querySelector("header");
+const menuButtons = document.querySelectorAll("#menuButtons button");
+const domButtons = document.querySelectorAll("#domButtons button");
+const hoverButtons = document.querySelectorAll("#hoverButtons button");
+const menuStructures = {
+  one: {
+    default: singleLevel,
+  },
+  two: {
+    default: twoLevel,
+  },
+  three: {
+    default: threeLevel,
+  },
+};
+const menuOptions = {
+  Bootstrap5DisclosureMenu: {
+    optionalKeySupport: true,
+  },
+  Bootstrap5Menubar: {},
+  Bootstrap5Treeview: {},
+};
+
+// Theme setup.
+const preferredTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+  ? "dark"
+  : "light";
+const setTheme = window.localStorage.getItem("setTheme") || preferredTheme;
+const body = document.querySelector("body");
+const themeToggle = document.querySelector("#themeToggle");
+
+// Menu options.
+let menuType = "";
+let menuStructure = "one";
+let hoverType = "off";
+
+// Set up menu type switching.
+menuButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    menuType = button.dataset.menuType;
+    const options = menuOptions[menuType] || {};
+
+    generateMenu(menuType, menuStructure, hoverType, header, options);
+    document
+      .querySelector("#menuButtons button.active")
+      .classList.remove("active");
+    button.classList.add("active");
+  });
+});
+
+// Set up menu structure switching.
+domButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    menuStructure = button.dataset.menuStructure;
+    const options = menuOptions[menuType] || {};
+
+    generateMenu(menuType, menuStructure, hoverType, header, options);
+    document
+      .querySelector("#domButtons button.active")
+      .classList.remove("active");
+    button.classList.add("active");
+  });
+});
+
+// Set up hover type switching.
+hoverButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    hoverType = button.dataset.hoverType;
+    const options = menuOptions[menuType] || {};
+
+    generateMenu(menuType, menuStructure, hoverType, header, options);
+    document
+      .querySelector("#hoverButtons button.active")
+      .classList.remove("active");
+    button.classList.add("active");
+  });
+});
+
+// Set up theme switching.
+document.querySelector("#themeToggle").addEventListener("click", () => {
+  if (body.dataset.bsTheme === "dark") {
+    body.dataset.bsTheme = "light";
+    window.localStorage.setItem("setTheme", "light");
+    themeToggle.innerHTML = "Dark Mode";
+  } else {
+    body.dataset.bsTheme = "dark";
+    window.localStorage.setItem("setTheme", "dark");
+    themeToggle.innerHTML = "Light Mode";
+  }
+});
+
+// Generate an initial menu and set theme.
+document.addEventListener("DOMContentLoaded", () => {
+  const options = menuOptions[menuType] || {};
+
+  generateMenu(menuType, menuStructure, hoverType, header, options);
+
+  if (setTheme === "dark") {
+    body.dataset.bsTheme = "dark";
+    themeToggle.innerHTML = "Light Mode";
+  }
+});

demo/menus.js

@@ -0,0 +1,186 @@
+export const singleLevel =
+  /* html */
+  `
+<nav id="example-menu" aria-label="example" aria-describedby="disclaimer" class="navbar navbar-expand-lg bg-body-tertiary">
+  <button id="example-toggle" aria-label="Toggle example menu" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#exampleCollapse">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="exampleCollapse">
+    <ul class="navbar-nav">
+      <li class="nav-item"><a href="#" class="nav-link">Mammals</a></li>
+      <li class="nav-item"><a href="#" class="nav-link">Reptiles</a></li>
+      <li class="nav-item"><a href="#" class="nav-link">Amphibians</a></li>
+      <li class="nav-item"><a href="#" class="nav-link">Birds</a></li>
+      <li class="nav-item"><a href="#" class="nav-link">Fish</a></li>
+    </ul>
+  </div>
+</nav>
+`;
+
+export const twoLevel =
+  /* html */
+  `
+<nav id="example-menu" aria-label="example" aria-describedby="disclaimer" class="navbar navbar-expand-lg bg-body-tertiary">
+  <button id="example-toggle" aria-label="Toggle example menu" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#exampleCollapse">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="exampleCollapse">
+    <ul class="navbar-nav">
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Mammals</a>
+        <ul class="dropdown-menu">
+          <li><a href="#" class="dropdown-item">Wild</a></li>
+          <li><a href="#" class="dropdown-item">Domesticated</a></li>
+        </ul>
+      </li>
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Reptiles</a>
+        <ul class="dropdown-menu">
+          <li><a href="#" class="dropdown-item">Wild</a></li>
+          <li><a href="#" class="dropdown-item">Domesticated</a></li>
+        </ul>
+      </li>
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Amphibians</a>
+        <ul class="dropdown-menu">
+          <li><a href="#" class="dropdown-item">Wild</a></li>
+          <li><a href="#" class="dropdown-item">Domesticated</a></li>
+        </ul>
+      </li>
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Birds</a>
+        <ul class="dropdown-menu">
+          <li><a href="#" class="dropdown-item">Wild</a></li>
+          <li><a href="#" class="dropdown-item">Domesticated</a></li>
+        </ul>
+      </li>
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Fish</a>
+        <ul class="dropdown-menu">
+          <li><a href="#" class="dropdown-item">Wild</a></li>
+          <li><a href="#" class="dropdown-item">Domesticated</a></li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</nav>
+`;
+
+export const threeLevel =
+  /* html */
+  `
+<nav id="example-menu"  aria-label="example" aria-describedby="disclaimer" class="navbar navbar-expand-lg bg-body-tertiary">
+  <button id="example-toggle" aria-label="Toggle example menu" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#exampleCollapse">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="exampleCollapse">
+    <ul class="navbar-nav">
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Mammals</a>
+        <ul class="dropdown-menu">
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Wild</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Bears</a></li>
+              <li><a href="#" class="dropdown-item">Lions</a></li>
+              <li><a href="#" class="dropdown-item">Wolves</a></li>
+            </ul>
+          </li>
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Domesticated</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Cats</a></li>
+              <li><a href="#" class="dropdown-item">Dogs</a></li>
+              <li><a href="#" class="dropdown-item">Horses</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Reptiles</a>
+        <ul class="dropdown-menu">
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Wild</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Snakes</a></li>
+              <li><a href="#" class="dropdown-item">Lizards</a></li>
+              <li><a href="#" class="dropdown-item">Turtles</a></li>
+            </ul>
+          </li>
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Domesticated</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Geckos</a></li>
+              <li><a href="#" class="dropdown-item">Tortoises</a></li>
+              <li><a href="#" class="dropdown-item">Iguanas</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Amphibians</a>
+        <ul class="dropdown-menu">
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Wild</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Frogs</a></li>
+              <li><a href="#" class="dropdown-item">Toads</a></li>
+              <li><a href="#" class="dropdown-item">Salamanders</a></li>
+            </ul>
+          </li>
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Domesticated</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Axolotls</a></li>
+              <li><a href="#" class="dropdown-item">Newts</a></li>
+              <li><a href="#" class="dropdown-item">Frogs</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Birds</a>
+        <ul class="dropdown-menu">
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Wild</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Eagles</a></li>
+              <li><a href="#" class="dropdown-item">Hawks</a></li>
+              <li><a href="#" class="dropdown-item">Owls</a></li>
+            </ul>
+          </li>
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Domesticated</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Parakeets</a></li>
+              <li><a href="#" class="dropdown-item">Pigeons</a></li>
+              <li><a href="#" class="dropdown-item">Chickens</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Fish</a>
+        <ul class="dropdown-menu">
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Wild</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Trout</a></li>
+              <li><a href="#" class="dropdown-item">Carp</a></li>
+              <li><a href="#" class="dropdown-item">Perch</a></li>
+            </ul>
+          </li>
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown">Domesticated</a>
+            <ul class="dropdown-menu">
+              <li><a href="#" class="dropdown-item">Goldfish</a></li>
+              <li><a href="#" class="dropdown-item">Koi</a></li>
+              <li><a href="#" class="dropdown-item">Betta</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</nav>
+`;

demo/scss/_custom-properties.scss

@@ -0,0 +1,3 @@
+/**
+ * CSS custom properties.
+ */

demo/scss/_variables.scss

@@ -0,0 +1,3 @@
+/**
+ * Variables.
+ */