<!DOCTYPE html>
@WAIT-FOR:Ready
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Design Version Information</title>
<script type="module">
import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js";
injectImportMap();
const components = ["md-filled-button"];
loadAndWaitForReady(components, () => {
Promise.all([
fetch("/@material/web/package.json").then(r => r.json()),
fetch("/lit/package.json").then(r => r.json())
]).then(([materialWebPkg, litPkg]) => {
const materialDesignVersion = materialWebPkg.keywords?.includes("material design")
? `Material Design Components v${materialWebPkg.version}`
: materialWebPkg.description || "Unknown Material Design version";
const versionInfo = {
materialWeb: materialWebPkg.version,
materialDesign: materialDesignVersion,
lit: litPkg.version,
source: "third_party/material_web_components"
};
const versionDisplay = document.getElementById("version-display");
versionDisplay.innerHTML = `
<div>Material Web Components Library: ${versionInfo.materialWeb}</div>
<div>Material Design Info: ${versionInfo.materialDesign}</div>
<div>Lit Framework: ${versionInfo.lit}</div>
<div>Source: ${versionInfo.source}</div>
`;
const button = document.createElement("md-filled-button");
button.textContent = "Test Button";
document.body.appendChild(button);
document.getElementById("status").setAttribute("aria-label", "Ready");
}).catch(error => {
const versionDisplay = document.getElementById("version-display");
versionDisplay.innerHTML = `
<div>Material Web Components Library: Error - ${error.message}</div>
<div>Material Design Info: Error - Cannot fetch package info</div>
<div>Lit Framework: Error - ${error.message}</div>
<div>Source: third_party/material_web_components</div>
<div>Fetch Error: ${error.message}</div>
`;
document.getElementById("status").setAttribute("aria-label", "Ready");
});
});
</script>
</head>
<body>
<h1>Material Design Version Information</h1>
<div id="version-display" aria-label="Version information"></div>
<div id="status" aria-label="Loading"></div>
</body>
</html>
