---

## Skeleton
Placeholder loading animation that mimics content layout.
Use to reduce perceived loading time and prevent layout shift.

**Import:** `import { Skeleton } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Skeleton variant="text" size="lg" />
<Skeleton variant="circular" size="md" />
<Skeleton variant="rectangular" width="100%" height="200px" />
```

```svelte
<div class="flex items-center gap-3">
  <Skeleton variant="circular" size="md" />
  <div class="flex flex-col gap-2 flex-1">
    <Skeleton variant="text" size="sm" />
    <Skeleton variant="text" size="xs" class="w-2/3" />
  </div>
</div>
```

### Variants
- variant: circular, rectangular, rounded, text (default: text)
- size: lg, md, sm, xl, xs (default: md)
- animation: none, pulse, wave (default: pulse)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...ElementAttributes | `HTMLAttributes` | no |  | All standard HTML element attributes |
| ...SkeletonVariants | `VariantProps` | no |  | Styling variants from SkeletonVariants |
| animation | `SkeletonVariants['animation']` | no |  | Animation style. `pulse` fades opacity, `wave` sweeps a shimmer gradient, `none` renders a static placeholder. All animations respect `prefers-reduced-motion`. |
| class | `string` | no |  | Extra classes merged onto the root element (or wrapper when `count > 1`). |
| count | `number` | no |  | Number of skeleton lines to render. Wraps items in a flex-column container when > 1. |
| gap | `string` | no |  | Tailwind gap class between repeated lines (e.g. `"gap-2"`, `"gap-4"`). Only applies when `count > 1`. |
| height | `string` | no |  | Custom height (CSS value, e.g. `"48px"`). Overrides the size preset height. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Skeleton: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| size | `SkeletonVariants['size']` | no |  | Physical dimensions following the Standard size scale (xs–xl). Dimensions vary per variant — text heights range from h-3 (xs) to h-6 (xl), circular from 24 px to 64 px. |
| slotClasses | `Partial<Record<SkeletonSlots, string>>` | no |  | Per-slot class overrides merged with (or replacing, when `unstyled`) tv() output. Slots: base | wrapper |
| unstyled | `boolean` | no |  | Strip all default tv() classes. Combine with `slotClasses` for full control. |
| variant | `SkeletonVariants['variant']` | no |  | Shape preset. `text` is a slim bar, `circular` for avatars/icons, `rectangular` for images/cards, `rounded` like rectangular with softer corners. |
| width | `string` | no |  | Custom width (CSS value, e.g. `"200px"` or `"100%"`). Overrides the size preset width. |

Inherited from:
- SkeletonVariants (external)
- HTMLAttributes (html-attributes)