fix(tools): improve dev server 'maximize'

Author: bennypowers

tools/pfe-tools/demo/demo.ts

@@ -156,6 +156,7 @@ async function go(location = window.location) {
     viewer.src = '';
     viewer.hidden = true;
     document.querySelector('h1').textContent = 'Select a demo from the Menu';
+    onMaximize(false);
   }
 }
 
@@ -179,6 +180,14 @@ function toggleNav(force?: boolean | Event) {
   }
 }
 
+function onMaximize(force?: boolean) {
+  for (const svg of form.querySelectorAll('svg')) {
+    svg.toggleAttribute('hidden');
+  }
+  document.documentElement.toggleAttribute('maximized', force);
+  localStorage.setItem('pfe-demo-maximized', document.documentElement.hasAttribute('maximized').toString());
+}
+
 const li = (element: string) => html`
   <li class="site-navigation__item">
     <a class="site-navigation__link" href="/demo/${element}/">${pretty(element)}</a>
@@ -196,13 +205,7 @@ installRouter(go);
 go();
 
 form.addEventListener('submit', e => e.preventDefault());
-form.querySelector('button').addEventListener('click', () => {
-  for (const svg of form.querySelectorAll('svg')) {
-    svg.toggleAttribute('hidden');
-  }
-  document.documentElement.toggleAttribute('maximized');
-  localStorage.setItem('pfe-demo-maximized', document.documentElement.hasAttribute('maximized').toString());
-});
+form.querySelector('button').addEventListener('click', () => onMaximize());
 
 context.addEventListener('select', onContextChange);
 hamburger.addEventListener('click', toggleNav);

tools/pfe-tools/demo/index.html

@@ -45,7 +45,8 @@ <h1 slot="header">Select a Demo from the Menu</h1>
           <pfe-select id="context-selector">
             <select>
               <option disabled>Select a context</option>
-              <option value="light" selected>Light</option>
+              <option value="base" selected>Default</option>
+              <option value="light">Light</option>
               <option value="dark">Dark</option>
               <option value="saturated">Saturated</option>
             </select>