Replace JS with CSS selector

eerepr/html.py

@@ -70,8 +70,8 @@ def _make_collapsible_li(header: str, children: list) -> str:
     """Package a header and children into a collapsible list element."""
     return (
         "<li>"
-        f"<label class='ee-shut'>{header}"
-        "<input type='checkbox' class='ee-toggle'></label>"
+        f"<label>{header}"
+        "<input type='checkbox'></label>"
         f"<ul>{''.join(children)}</ul>"
         "</li>"
     )

eerepr/repr.py

@@ -40,14 +40,6 @@ def _load_css() -> str:
     return _load_file("eerepr.static.css", "style.css")
 
 
-@lru_cache(maxsize=1)
-def _load_js() -> str:
-    """Note: JS is only needed because the CSS `:has()` selector isn't well supported
-    yet, preventing a pure CSS solution to the collapsible lists.
-    """
-    return _load_file("eerepr.static.js", "script.js")
-
-
 def _attach_html_repr(cls: type, repr: Any) -> None:
     """Add a HTML repr method to an EE class. Only overwrite the method if it was set by
     this function.
@@ -82,7 +74,6 @@ def _repr_html_(obj: EEObject) -> str:
         return f"<pre>{escape(repr(obj))}</pre>"
 
     css = _load_css()
-    js = _load_js()
     body = convert_to_html(info)
 
     return (
@@ -91,7 +82,6 @@ def _repr_html_(obj: EEObject) -> str:
         "<div class='ee'>"
         f"<ul>{body}</ul>"
         "</div>"
-        f"<script>{js}</script>"
         "</div>"
     )
 

eerepr/static/css/style.css

@@ -44,15 +44,13 @@ body.vscode-dark {
   padding-left: 0 !important;
 }
 
-.ee-open,
-.ee-shut {
+.ee label {
   color: var(--font-color-secondary);
   cursor: pointer;
   margin: 0;
 }
 
-.ee-open:hover,
-.ee-shut:hover {
+.ee label:hover {
   color: var(--font-color-primary);
 }
 
@@ -65,30 +63,26 @@ body.vscode-dark {
   color: var(--font-color-primary);
 }
 
-.ee-toggle {
+.ee input {
   display: none;
 }
 
-.ee-shut + ul {
+.ee label + ul {
   display: none;
 }
 
-.ee-open + ul {
+.ee label:has(input:checked) + ul {
   display: block;
 }
 
-.ee-shut::before {
+.ee label::before {
+  transform: rotate(-90deg);
   display: inline-block;
   content: "▼";
   margin-right: 6px;
-  transform: rotate(-90deg);
   transition: transform 0.2s;
 }
 
-.ee-open::before {
+.ee label:has(input:checked)::before {
   transform: rotate(0deg);
-  display: inline-block;
-  content: "▼";
-  margin-right: 6px;
-  transition: transform 0.2s;
 }