fix: Hide sl-option elements by default

server/input.ts

@@ -70,17 +70,18 @@ document.addEventListener("htmx:afterRequest", function (event) {
   }
 });
 
-function slOptionsReveal() {
-  document
-    .querySelectorAll("sl-option.hidden")
-    .forEach((o) => o.classList.remove("hidden"));
+{
+  // Reveal <sl-option> elements once the page is loaded or
+  // parts of the page are reloaded to avoid CLS (cumulative layout shift).
+  function slOptionsReveal() {
+    document
+      .querySelectorAll("sl-option")
+      .forEach((o) => o.classList.add("visible"));
+  }
+  window.addEventListener("load", slOptionsReveal);
+  document.addEventListener("htmx:afterSwap", slOptionsReveal);
 }
 
-// Reveal <sl-option> elements once the page is loaded or
-// parts of the page are reloaded to avoid CLS (cumulative layout shift).
-window.addEventListener("load", slOptionsReveal);
-document.addEventListener("htmx:afterSwap", slOptionsReveal);
-
 enum Theme {
   Light = "light",
   Dark = "dark",

server/input.tw.css

@@ -2,23 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Default global styles */
-html button,
-html input,
-html select,
-html textarea {
-  border: 1px solid grey;
-  border-radius: 0.2rem;
-  padding: 0.2rem;
-  padding-left: 0.3rem;
-  padding-right: 0.3rem;
-  height: 2rem;
-  background-color: transparent;
-}
-
-html table td {
-  border: 1px solid lightgrey;
-  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
+/* to avoid CLS (cumulative layout shift) on page load the "visible"
+class will be added on `window.load` and `htmx:afterSwap` events. */
+
+sl-option {
+  display: none;
+}
+
+sl-option.visible {
+  display: block;
 }
 
 /*--- HTMX loading indicator ---*/