# SkipLink

`SkipLink` provides a keyboard shortcut to the main content before the application navigation.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<script>
  import { SkipLink, Page, Main, Heading } from "@dg/ui";
</script>

<Page>
  <SkipLink />
  <Main><Heading title="Collection" /></Main>
</Page>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the link.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- When revealed, the shortcut uses `--skip-link-layer` above ordinary nonmodal surfaces; native modal dialogs remain in the browser top layer.

## Parameters

| Name    | Type     | Default     | Description                                                                                 |
| ------- | -------- | ----------- | ------------------------------------------------------------------------------------------- |
| `href`  | `string` | `"#main"`   | ID of the content destination. The target must exist in the page.                           |
| `label` | `string` | `undefined` | Link text revealed on keyboard focus. Defaults to the built-in text in the `Page` language. |

## Accessibility

The first Tab reveals the link. Its destination must exist. Place it first inside `Page`, before `Header`; `Page`'s `lang` translates its default text.