refactor(webui): LabelBorder uses Svelte transitions, tidy CSS

webui/src/lib/components/utils/LabelBorder.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { slide } from 'svelte/transition';
+
 	export let hide = false;
 	let hidden = true;
 </script>
@@ -6,28 +8,33 @@
 <section class="labelborder" class:hide class:hidden>
 	<header
 		on:click={() => {
-			if (hide) {
+			if (hide) hidden = !hidden;
-				hidden = !hidden;
-			}
 		}}
 		on:keydown={(ev) => {
 			if (['Space', 'Enter'].includes(ev.key) && hide) hidden = !hidden;
 		}}
+		role="button"
+		tabindex="0"
 	>
 		<slot name="header-full">
-			<h3><slot name="header" /></h3>
+			<h3>
+				<slot name="header" />
+			</h3>
 		</slot>
 	</header>
-	<div class="content">
+	{#if !hide || !hidden}
-		<slot />
+		<div class="content" transition:slide>
-	</div>
+			<slot />
+		</div>
+	{/if}
 </section>
 
-<style lang="scss">
+<style>
 	section.labelborder {
 		margin-top: 0.66rem;
+		transition: opacity 0.5s ease-in-out;
 
-		header {
+		& header {
 			display: flex;
 			align-items: end;
 			justify-content: space-between;
@@ -36,28 +43,19 @@
 			padding-bottom: 0.33rem;
 			margin-bottom: 0.33rem;
 
-			h3 {
+			& h3 {
 				margin: 0;
 			}
 		}
 
 		&.hide {
-			header {
+			& header {
 				cursor: pointer;
 			}
+		}
 
-			transition: opacity 0.2s ease-in-out;
+		&.hide.hidden {
-			&.hidden {
+			opacity: 0.66;
-				opacity: 0.66;
-
-				header {
-					border-bottom-width: 0.5px;
-				}
-
-				.content {
-					display: none;
-				}
-			}
 		}
 	}
 </style>