Use PAS UI

cmd/ui/css/styles.css

@@ -20,6 +20,12 @@
     --yellow-5: #e5a50a;
 
     --default-margin: 8px var(--base_margin) 8px var(--base_margin);
+
+    --default-outline: transparent solid 2px;
+    --default-outline-offset: 1px;
+
+    --transiton-outline:
+        outline-offset 0.1s ease-in-out, outline-color 0.1s ease-in-out;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -313,13 +319,9 @@ button:active {
 }
 
 * {
-    outline-offset: 1px;
-    outline-style: solid;
-    outline-width: 2px;
-    outline-color: transparent;
-    transition:
-        outline-offset 0.1s ease-in-out,
-        outline-color 0.1s ease-in-out;
+    outline-offset: var(--default-outline-offset);
+    outline: var(--default-outline);
+    transition: var(--transiton-outline);
 }
 
 *:focus-visible {
@@ -412,17 +414,33 @@ button:active {
     width: 0%;
     height: 0%;
     margin: 0%;
-    visibility: hidden;
+    border: none;
+    outline: none;
 }
 
 .boxed-list > .expander {
     border-bottom-color: transparent !important;
-    transition: border-bottom 0.15s steps(1, end);
+    transition:
+        var(--transiton-outline),
+        border-bottom 0.15s steps(1, end),
+        border-bottom-right-radius 0.05s 0.1s,
+        border-bottom-left-radius 0.05s 0.1s;
+}
+
+.boxed-list > .active.expander:focus-within {
+    outline-offset: -1px;
+    outline-color: color-mix(in srgb, var(--accent) 50%, transparent);
+    z-index: 1;
 }
 
 .expander:has(> .expander-state:checked) {
     border-bottom: 1px solid var(--border) !important;
-    transition: border-bottom 0.15s steps(1, start);
+    transition:
+        var(--transiton-outline),
+        border-bottom 0.15s steps(1, start),
+        border-bottom-right-radius 0.05s,
+        border-bottom-left-radius 0.05s;
+    transition-delay: 0s;
 }
 
 .expander-content {