{# @description A phone frame with a camera notch, for showing a mobile screen. #}
{# @prop class:text | description:"Extra classes added to the phone frame." #}
{# @slot <div class="p-4 flex flex-col gap-4"><c-progress value="20" label="Photo 1 of 4 uploaded" /><c-progress value="55" variant="primary" label="Photo 2 of 4 uploaded" /><c-progress value="90" variant="success" label="Photo 3 of 4 uploaded" /><c-progress label="Photo 4 of 4 uploaded" /><div class="flex justify-around"><c-radial_progress value="70" label="Storage used" class="[--size:3rem] [--thickness:3px]" /><c-radial_progress value="55" label="Battery" class="text-primary" /><c-radial_progress value="100" label="Upload complete"><i class="bi bi-check-lg" aria-hidden="true"></i></c-radial_progress></div><div class="card bg-base-100 w-full shadow-sm"><c-skeleton class="h-32 w-full" /><div class="card-body gap-4"><div class="flex items-center gap-4"><c-skeleton class="h-12 w-12 shrink-0 rounded-full" /><div class="flex flex-col gap-2"><c-skeleton class="h-4 w-28" /><c-skeleton class="h-4 w-40" /></div></div></div></div></div> — A mobile upload screen: four progress bars for photos uploading, each named and one left indeterminate, three radial progresses below, one sized with [--size:…] [--thickness:…], one coloured with a text utility, one holding a checkmark icon as custom centre content, and a card placeholder below them: an image skeleton, an avatar skeleton and two text-line skeletons. #}
<c-vars class />
<div class="mockup-phone {{ class }}" {{ attrs }}>
  <div class="mockup-phone-camera" aria-hidden="true"></div>
  <div class="mockup-phone-display bg-base-100 text-base-content">{{ slot }}</div>
</div>