<!-- AUTO-GENERATED from the @riverty/web-components custom elements manifest. Do not edit by hand. -->

# r-skip-link

An accessibility utility that renders a visible-on-focus link allowing keyboard users to skip navigation and jump directly to main content.

Example
```
<r-skip-link>
  <a href="#main-content">Skip to main content</a>
</r-skip-link>

<main id="main-content">
  <!-- page content -->
</main>
```

Visibility is the union of two independent sources: the link is visible while it contains
focus (default accessibility behaviour, resolved by CSS) or while `revealed` is set
(programmatic control). Because of that, `revealed` means "forced visible", not "is visible".

While visible, the link is anchored to the viewport (`position: fixed`), so revealing it on a
scrolled page keeps it in view without scrolling the page. An ancestor with `transform`,
`filter`, `perspective`, `backdrop-filter`, or `contain: paint` becomes the containing block
and the link is anchored to that element instead of the viewport.

## class: `RSkipLink`, `r-skip-link`

### Fields

| Name       | Privacy | Type                 | Default    | Description                                                                                                                                                                                 | Inherited From |
| ---------- | ------- | -------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `position` |         | `"center" \| "left"` | `'center'` | Defines skip link position                                                                                                                                                                  |                |
| `revealed` |         | `boolean`            | `false`    | Forces the skip link to be visible, independently of focus.<br>The link is also visible while it contains focus, so `revealed="false"` does not<br>hide a link that is currently focused. |                |

### Methods

| Name     | Privacy | Description                                                                                                                                                              | Parameters | Return          | Inherited From |
| -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | --------------- | -------------- |
| `hide`   |         | Hides the skip link and restores the default focus-driven behaviour.<br>While the link still contains focus it stays visible, and `rHide` is emitted once focus leaves. |            | `Promise<void>` |                |
| `reveal` |         | Reveals the skip link without waiting for focus.<br>Does not move focus. Calling it on an already visible link emits nothing.                                           |            | `Promise<void>` |                |

### Events

| Name      | Type                | Description                                                                                                        | Inherited From |
| --------- | ------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------- |
| `rHide`   | `CustomEvent<void>` | Emitted when the skip link becomes hidden, either through `hide()`/`revealed`<br>or because it lost focus.        |                |
| `rReveal` | `CustomEvent<void>` | Emitted when the skip link becomes visible, either through `reveal()`/`revealed`<br>or because it received focus. |                |

### Attributes

| Name       | Field    | Inherited From |
| ---------- | -------- | -------------- |
| `position` | position |                |
| `revealed` | revealed |                |

### Slots

| Name | Description          |
| ---- | -------------------- |
|      | Skip link label text |

<hr/>

## Exports

| Kind                        | Name          | Declaration | Module | Package |
| --------------------------- | ------------- | ----------- | ------ | ------- |
| `js`                        | `RSkipLink`   | RSkipLink   |        |         |
| `custom-element-definition` | `r-skip-link` | RSkipLink   |        |         |