# Skeleton

Render a loading placeholder surface or text-line group. The ghostly apparition of content yet to come, now with better manners for assistive tech.

## Notes

- Use Skeleton only while real content is pending.
- Match the final content shape as closely as possible, so the page doesn't jump around when it loads.
- Prefer one announced loading region over many noisy placeholders; skeletons are aria-hidden unless ariaLabel is provided.
- Focus mode and reduced-motion preferences both suppress shimmer in favor of static loading surfaces.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| width | `string` | '100%' | Placeholder width. |
| height | `string` | '1rem' | Placeholder height. |
| size | `string` | - | Square size used by circle skeletons. |
| shape | `'rect' | 'circle' | 'text'` | 'rect' | Placeholder shape. |
| lines | `number` | 1 | Number of text lines to render. |
| gap | `1 | 2 | 3 | 4 | 5 | 6 | 7 | 8` | 2 | Spacing token between text lines. |
| lastLineWidth | `string` | '75%' | Width of the final line in a multi-line text skeleton. |
| radius | `string` | - | Radius token name or custom CSS radius. |
| animate | `boolean` | true | Whether shimmer animation is enabled when user preferences allow it. |
| ariaLabel | `string` | - | Optional accessible loading announcement for a skeleton region. |
| ariaHidden | `boolean` | - | Force skeleton assistive-tech visibility. |
| class | `string` | - | Additional CSS classes. |

## Example

```astro
<Stack space={4}>
  <Skeleton shape="circle" size="3rem" />
  <Skeleton shape="text" lines={3} lastLineWidth="60%" />
  <Skeleton width="100%" height="8rem" radius="xl" ariaLabel="Loading card" />
</Stack>
```