untitled

<script lang="ts">
  import type { FocusManagerContext } from '@artesgo/holokit';
  import { getContext } from "svelte";
  const focusManager = getContext<FocusManagerContext>('focus');
  ...

<Button on:click={() => focusManager.focus("focus-4")}>
  Focus 4</Button>
<Button on:click={() => focusManager.focus("focus-5")}>
  Focus 5</Button>
<Button on:click={() => focusManager.focus("focus-6")}>
  Focus 6</Button>

<Button id="focus-4">4</Button>
<Button id="focus-5">5</Button>
<Button id="focus-6">6</Button>

Want to use this for your own components?

import type { FocusManagerContext } from '@artesgo/holokit';
import { getContext } from 'svelte';
const focusManager = getContext<FocusManagerContext>('focus');
let element: HTMLElement; // bind:this={element} for element that wants focus
$: if (element && !!$focusManager.focused && $focusManager.focused === id) {
  element.focus();
}