source/ui/src/lib/DensityOptions.svelte

<script lang="ts">
import { density } from './stores';
import Radio from './Radio.svelte';

const options = ['Low', 'Medium', 'High'];
const type = 'density';
</script>

<div>
  <fieldset>
    <legend>Note density</legend>
    <Radio bind:selection={$density} {options} {type} />
  </fieldset>
</div>

<style>
fieldset {
  padding: 0;
  border: none;
  margin-top: 1rem;
}

legend {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0;
  margin-bottom: 1rem;
}
</style>