import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";

import * as SkeletonStories from "./Skeleton.stories";

<Meta of={SkeletonStories} />

# Skeleton

**Also zero fleet-wide.** The counterpart to `Spinner`, and the better answer wherever the
shape of the incoming content is already known: a poster grid that skeletons does not
reflow when the images land, and layout shift is what users actually notice.

<Canvas of={SkeletonStories.AllVariants} />

## Props

<Controls />

## `aria-hidden` is the contract, not an optimisation

A skeleton is decoration standing in for content that does not exist yet. Announcing it
means a screen reader reading three empty bars, and an agent finding a "loading" element it
cannot act on.

**The load has to be announced by the region that owns it** — a `Spinner`, or `aria-busy`
on the container. The `Playground` story asserts the skeleton is hidden from assistive
technology, and `Interactive` asserts it contributes no roles at all. Both are assertions
axe cannot make for you: there is nothing invalid about a visible placeholder.

<Canvas of={SkeletonStories.AllStates} />