+
+ Feedback · Skeleton
+ Skeleton
+
+ Content placeholder shown while data loads. Three shapes
+ (rect, circle, text), five sizes, eight color accents,
+ and an optional shimmer animation. Pure eidos primitive — no semantic events, no soma layer.
+ Reduced-motion freezes the animation while keeping the visual.
+
+
+ parts{partsList.length}
+ events0
+ shapes{shapes.length}
+ scopeeidos
+
+
+
+
+
+
+
+ {#if shape === 'rect'}
+
+ {:else if shape === 'circle'}
+
+ {:else}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if tab === 'live'}
+
+ {:else if tab === 'api'}
+
+ API
+
+
+ | prop | type | default | description |
|---|
+
+
+ | shape | 'rect' | 'circle' | 'text' | 'rect' | Visual shape. |
+ | size | 'xs'..'xl' | 'md' | Intrinsic block-size. |
+ | color | ColorRole | 'neutral' | Placeholder tint. |
+ | lines | number | 1 | Bar count when shape='text'. |
+ | animated | boolean | true | Shimmer wave (CSS keyframes). |
+ | aria-label | string? | — | Override the translated 'Loading'. |
+
+ | ...Box | BoxProps | — | width/height/padding/gridColumn/… |
+
+
+
+
+ {:else if tab === 'morfo'}
+
+
+ morfo contract
+
+
+ One provider part with role="status" and aria-busy="true". Carries
+ data-shape + data-animated attrs that the eidos recipe consumes.
+
+
+ | part | element | role | archetype |
|---|
+
+ {#each partsList as p (p.kebab)}
+
+ {p.kebab} |
+ {p.defaultElement} |
+ {p.role ?? '—'} |
+ {p.archetype ?? '—'} |
+
+ {/each}
+
+
+
+ {:else if tab === 'sema'}
+
+
+ sema events
+
+
+ Skeleton has no semantic events — it's a pure visual placeholder that the consumer unmounts
+ when real content is ready. The morfo declares no events, so the perceptual cascade has
+ nothing to react to. The single Provider part carries aria-busy +
+ role="status" for assistive tech.
+
+
+ {:else if tab === 'recipe'}
+
+ Recipe
+
+ eidos · canonical usage
+
+ {eidosSnippet}
+
+ {:else if tab === 'a11y'}
+
+ Accessibility
+
+ -
+ Renders
<div role="status" aria-busy="true">. Screen readers will
+ announce the configured label ("Loading" in EN, "Cargando" in ES) when the skeleton
+ enters the DOM.
+
+ -
+ When swapped with real content, the screen reader hears the new content because the
+ Skeleton element is removed entirely (not just hidden).
+
+ -
+
aria-label can override the default "Loading" string with a more specific
+ message (e.g. aria-label="Loading user profile").
+
+ -
+ Animation respects
prefers-reduced-motion — under reduced motion the shimmer
+ stops but the placeholder shape remains visible.
+
+ -
+ Color contrast: the placeholder uses
color-mix at 50–60% opacity over the
+ surface, low enough to read as "non-content" but high enough to register against most
+ backgrounds.
+
+
+
+ {/if}
+
+
+ Feedback · Spinner
+ Spinner
+
+ Indeterminate progress indicator. Three visual variants (ring,
+ dots, bars), five sizes, eight color accents, and an optional
+ inline label. Pure eidos primitive — no semantic events. Use
+ <Progress> instead when you have a known percentage.
+
+
+ parts{partsList.length}
+ events0
+ variants{variants.length}
+ scopeeidos
+
+
+
+
+
+
+ {#if withLabel}
+ Loading…
+ {:else}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if tab === 'live'}
+
+ Controls
+
+
+ eidos props
+
+
+
+
+
+
+
+
+ All variants side-by-side
+
+ {#each variants as v (v)}
+
+ {v}
+ {#each sizes as s (s)}
+
+ {/each}
+
+ {/each}
+
+
+ Color matrix
+
+ {#each colors as c (c)}
+
+
+ {c}
+
+ {/each}
+
+
+ {:else if tab === 'api'}
+
+ API
+
+
+ | prop | type | default | description |
|---|
+
+
+ | variant | 'ring' | 'dots' | 'bars' | 'ring' | Visual style. |
+ | size | 'xs'..'xl' | 'md' | Track diameter / dot size. |
+ | color | ColorRole | 'primary' | Accent palette. |
+ | aria-label | string? | — | Override the translated 'Loading'. |
+ | children | Snippet? | — | Optional inline label. |
+
+
+
+ {:else if tab === 'morfo'}
+
+
+ morfo contract
+
+
+ Two parts: provider (role=status, polite live region) and track
+ (decorative, aria-hidden). The variant prop only swaps the inner DOM of Track.
+
+
+ | part | element | role | archetype |
|---|
+
+ {#each partsList as p (p.kebab)}
+
+ {p.kebab} |
+ {p.defaultElement} |
+ {p.role ?? '—'} |
+ {p.archetype ?? '—'} |
+
+ {/each}
+
+
+
+ {:else if tab === 'sema'}
+
+
+ sema events
+
+
+ Spinner has no semantic events — the loading state is announced only through ARIA. There's
+ no commit/emerge/shift to react to. Mount when work starts; unmount when it ends.
+
+
+ {:else if tab === 'recipe'}
+
+ Recipe
+
+ eidos · canonical usage
+
+ {eidosSnippet}
+
+ {:else if tab === 'a11y'}
+
+ Accessibility
+
+ -
+
role="status" + aria-live="polite" on the root — the screen
+ reader announces the configured label when the spinner enters the DOM (typically when
+ you start a fetch).
+
+ -
+ Default label is the translated "Loading" / "Cargando". Override per-instance with
+
aria-label="Loading orders" for more specific context.
+
+ -
+ Visual track parts (
data-spinner-track, -dot, -bar)
+ are aria-hidden="true" — decoration only.
+
+ -
+ Animation respects
prefers-reduced-motion — under reduced motion the
+ rotation/bounce/stretch keyframes stop, but the visual stays so the user still sees the
+ loading affordance.
+
+ -
+ Use
<Spinner> for unknown progress (network requests, async
+ rendering). Switch to <Progress> when you can report a percentage.
+
+
+
+ {/if}
+