fix: restore <details> styling in Firefox

only remove startup stylesheet on first JS style load

docs/script.js

@@ -2,14 +2,18 @@
 /** @typedef {'dark' | 'light'} Theme */
 /** @typedef {keyof typeof FILE_SIZES} FileName */
 /** @typedef {'success' | 'failed'} CopyStatus */
-/** @typedef {{ theme: Theme, isLegacy: boolean, isStandalone: boolean }} VersionOptions */
+/**
+ * @typedef {Object} VersionOptions Configurable options for water.css versions
+ * @prop {Theme} theme
+ * @prop {boolean} isLegacy
+ * @prop {boolean} isStandalone
+ */
 /**
  * @typedef {Object} Libraries External packages exposed on `window` (loaded through `<script>`)
  * @prop {typeof import('vue').default} Vue
  * @prop {Clipboard} clipboard
  * @prop {import('favicon-mode-switcher')} faviconModeSwitcher
  */
-
 /**
  * @typedef {Object} VueData State used by the version picker
  * @prop {VersionOptions} versionOptions
@@ -80,6 +84,8 @@ const externalElements = {
   _removeStartupStylesheet() {
     const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')
     if (startupStylesheet) document.head.removeChild(startupStylesheet)
+    const that = externalElements
+    that._stylesheet.removeEventListener('load', that._removeStartupStylesheet)
   },
   _updateProductHunt(/** @type {Theme} */ theme) {
     this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)
@@ -171,6 +177,7 @@ new w.Vue({
 })
 
 const iconModeSwitcher = w.faviconModeSwitcher.default
+/* Use bright favicons when the browser is in dark mode. */
 iconModeSwitcher([
   {
     element: 'link[rel="shortcut icon"]',

docs/style.css

@@ -32,18 +32,24 @@ html {
 .version-select__options > label:first-child {
   margin-right: 1rem;
 }
+.version-select__options__additional {
+  display: flex;
+  flex-direction: column;
+}
 .version-select__options__additional > * {
   margin-top: 1rem;
-  display: inline-block;
+}
+.version-select__options__additional > *:not(summary) {
+  display: block;
 }
 .version-select__options__additional summary {
-  display: block;
   cursor: pointer;
   font-weight: 600;
 }
 .version-select__options__additional summary:focus {
   outline: none;
 }
+.version-select__options__additional summary:hover span,
 .version-select__options__additional summary:focus span {
   text-decoration: underline;
 }

docs/versionpicker.html

@@ -43,7 +43,6 @@
         <input type="checkbox" checked v-model="versionOptions.isStandalone" />
         Enforce theme? (ignore <code>prefers-color-scheme</code>)
       </label>
-      <br />
       <label>
         <input type="checkbox" v-model="versionOptions.isLegacy" />
         Support Internet Explorer and other legacy browsers?