Skeleton

Shimmering loading placeholder — the building block behind every other component's loading state, and usable directly for custom loading layouts.

Selector: tip-skeleton

API

Name	Type	Default	Description
`variant` (input)	`SkeletonVariant` = `'rect' \| 'text' \| 'circle'`	`'rect'`	`text` defaults to 100% width / 12px height (last line of a `count>1` stack shrinks to 70%); `circle` is square, radius 50%.
`width` (input)	`string \| number \| undefined`	`undefined`	Explicit width; number is treated as px.
`height` (input)	`string \| number \| undefined`	`undefined`	Explicit height.
`radius` (input)	`string \| undefined`	`undefined`	Border-radius override (defaults per variant: `--radius-sm` text, 50% circle, `--radius-md` rect).
`count` (input)	`number`	`1`	Stacks N lines (only meaningful for `text`/general use — see Notes).
`gap` (input)	`number`	`8`	Gap in px between stacked lines when `count > 1`.
`dark` (input)	`boolean`	`false`	Lighter shimmer tuned for dark/inverse surfaces (e.g. inside `tip-stat-card--inverse`).

<tip-skeleton variant="text" [count]="2" />
<tip-skeleton [height]="12" [width]="j === 0 ? 70 : 130" />

Shimmer keyframe (tip-skeleton-shimmer, 1.4s ease infinite) lives in styles/tokens/animation.css so it's available regardless of which component uses it; disabled globally under prefers-reduced-motion: reduce.
Every value/data component that supports loading renders tip-skeleton internally (tip-input, tip-select, tip-checkbox, tip-stat-card, tip-nav-item, tip-activity-item, tip-progress-bar) — prefer their own loading input over hand-rolling a tip-skeleton layout when one exists.
:host { display: contents } — the skeleton doesn't introduce its own box; sizing comes entirely from the rendered .tip-skeleton div(s).