focusTrap

import { focusTrap } from 'svogg-components';

Utility for trapping focus within an element. Good for e.g. drawers and modals. On mount, focuses the first focusable element by default.

Try moving focus by tabbing inside of the card in the demo and see how focus never breaks out of the element.

<div class="flex flex-col gap-4 surface-200 p-6 rounded" use:focusTrap>
	<label class="flex flex-col gap-2">
		<span class="leading-none">Name</span>
		<input class="svogg-input" type="text" placeholder="svogg" />
	</label>
	<label class="flex flex-col gap-2">
		<span class="leading-none">Email</span>
		<input class="svogg-input" type="text" placeholder="admin@svogg.dev" />
	</label>
	<button class="svogg-btn self-end">Click me</button>
    </div>
  

Keyboard navigation

1. Tab
   1. Moves focus to next focusable child element.
   2. If the last focusable element has focus, moves focus to the first focusable child element.
2. Shift + Tab
   1. Moves focus to previous focusable child element.
   2. If the first focusable element has focus, moves focus to the last focusable child element.