ui/test/components/__snapshots__/Progress.spec.ts.snap

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Progress > renders with animation carousel correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with animation elastic correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with animation swing correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with as correctly 1`] = `
"<section class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</section>"
`;

exports[`Progress > renders with class correctly 1`] = `
"<div class="gap-2 flex flex-col w-48">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with color neutral correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-bg-inverted) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with max correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
  </div>
  <div class="grid items-end text-(--ui-primary) text-sm">
    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Cloning...</div>
    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-100">Migrating...</div>
    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Deploying...</div>
    <div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Done!</div>
  </div>
</div>"
`;

exports[`Progress > renders with max inverted correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
  <div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
  </div>
  <div class="grid items-end text-(--ui-primary) text-sm">
    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Cloning...</div>
    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-100 text-start">Migrating...</div>
    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Deploying...</div>
    <div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Done!</div>
  </div>
</div>"
`;

exports[`Progress > renders with modelValue correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with orientation horizontal correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with orientation vertical correctly 1`] = `
"<div class="gap-2 h-full flex flex-row-reverse">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) h-full w-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with size 2xl correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-5" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with size 2xs correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-px" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with size lg correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-3" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with size md correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with size sm correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-1" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with size xl correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-4" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with size xs correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-0.5" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with status correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with status inverted correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <div class="flex justify-end text-(--ui-text-dimmed) transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with status slot correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-(--ui-bg-accented) w-full h-2" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Progress > renders with ui correctly 1`] = `
"<div class="gap-2 w-full flex flex-col">
  <!--v-if-->
  <div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-(--ui-bg)" style="transform: translateZ(0);">
    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-(--ui-primary) data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
  </div>
  <!--v-if-->
</div>"
`;