nuxt__ui/test/components/__snapshots__/ChangelogVersions.spec.ts.snap

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

exports[`ChangelogVersions > renders with as correctly 1`] = `
"<section data-slot="root" class="relative">
  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
  </div>
  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
    <!---->
    <!---->
    <article data-slot="root" class="relative">
      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
        </div>
      </div>
      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
        <div data-slot="header" class="">
          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
          </div>
          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
            <!--v-if-->Title 1
          </h2>
          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
            <!--v-if-->
          </div>
        </div>
        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
              <div data-slot="wrapper" class="">
                <!--v-if-->
                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                <!--v-if-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>"
`;

exports[`ChangelogVersions > renders with class correctly 1`] = `
"<div data-slot="root" class="absolute">
  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
  </div>
  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
    <!---->
    <!---->
    <article data-slot="root" class="relative">
      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
        </div>
      </div>
      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
        <div data-slot="header" class="">
          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
          </div>
          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
            <!--v-if-->Title 1
          </h2>
          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
            <!--v-if-->
          </div>
        </div>
        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
              <div data-slot="wrapper" class="">
                <!--v-if-->
                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                <!--v-if-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>"
`;

exports[`ChangelogVersions > renders with default slot correctly 1`] = `
"<div data-slot="root" class="relative">
  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
  </div>
  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">Default slot</div>
</div>"
`;

exports[`ChangelogVersions > renders with indicator slot correctly 1`] = `
"<div data-slot="root" class="relative">
  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">Indicator slot</div>
  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
    <!---->
    <!---->
    <article data-slot="root" class="relative">
      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
        </div>
      </div>
      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
        <div data-slot="header" class="">
          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
          </div>
          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
            <!--v-if-->Title 1
          </h2>
          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
            <!--v-if-->
          </div>
        </div>
        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
              <div data-slot="wrapper" class="">
                <!--v-if-->
                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                <!--v-if-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>"
`;

exports[`ChangelogVersions > renders with ui correctly 1`] = `
"<div data-slot="root" class="relative">
  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px -ms-[8.5px] bg-primary">
    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
  </div>
  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
    <!---->
    <!---->
    <article data-slot="root" class="relative">
      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
        </div>
      </div>
      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
        <div data-slot="header" class="">
          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
          </div>
          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
            <!--v-if-->Title 1
          </h2>
          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
            <!--v-if-->
          </div>
        </div>
        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
              <div data-slot="wrapper" class="">
                <!--v-if-->
                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                <!--v-if-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>"
`;

exports[`ChangelogVersions > renders with versions correctly 1`] = `
"<div data-slot="root" class="relative">
  <div data-slot="indicator" class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
    <div data-slot="beam" class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
  </div>
  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
    <!---->
    <!---->
    <article data-slot="root" class="relative">
      <div data-slot="indicator" class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
        <div data-slot="dot" class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
          <div data-slot="dotInner" class="size-2 rounded-full bg-primary"></div>
        </div>
      </div>
      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
        <div data-slot="header" class="">
          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate lg:hidden">Dec 13, 2024</time>
          </div>
          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
            <!--v-if-->Title 1
          </h2>
          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
            <!--v-if-->
          </div>
        </div>
        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
              <div data-slot="wrapper" class="">
                <!--v-if-->
                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                <!--v-if-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>"
`;

exports[`ChangelogVersions > renders without indicator correctly 1`] = `
"<div data-slot="root" class="relative">
  <!--v-if-->
  <div data-slot="container" class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
    <!---->
    <!---->
    <article data-slot="root" class="relative">
      <!--v-if-->
      <div data-slot="container" class="flex flex-col mx-auto max-w-2xl">
        <div data-slot="header" class="">
          <div data-slot="meta" class="flex items-center gap-3 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
            <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" data-slot="date" class="text-sm/6 text-toned truncate">Dec 13, 2024</time>
          </div>
          <h2 data-slot="title" class="relative text-xl text-pretty font-semibold text-highlighted">
            <!--v-if-->Title 1
          </h2>
          <div data-slot="description" class="text-base text-pretty text-muted mt-1">Description 1</div>
          <div data-slot="imageWrapper" class="relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image"><img alt="Image alt" src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full">
            <!--v-if-->
          </div>
        </div>
        <div data-slot="footer" class="border-t border-default pt-5 flex items-center justify-between mt-5">
          <div data-slot="authors" class="flex flex-wrap gap-x-4 gap-y-1.5">
            <div data-orientation="horizontal" data-slot="root" class="relative group/user flex items-center gap-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" alt="benjamincanac" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
              <div data-slot="wrapper" class="">
                <!--v-if-->
                <p data-slot="name" class="font-medium text-highlighted text-sm">benjamincanac</p>
                <!--v-if-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>"
`;