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

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

exports[`BlogPost > renders with as correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</section>"
`;

exports[`BlogPost > renders with author correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
  <!--v-if-->
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with authors correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
  <!--v-if-->
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
      <div data-slot="root" class="inline-flex flex-row-reverse justify-end">
        <!--v-if--><button type="button" data-slot="base" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://github.com/atinux.png" alt="atinux" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></button><button type="button" data-slot="base" class="relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><span data-slot="root" class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><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></button>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with authors slot correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">Authors slot</div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with badge correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
  <!--v-if-->
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
    <!--v-if-->
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span>
      <!--v-if-->
    </div>
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with badge object correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
  <!--v-if-->
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
    <!--v-if-->
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span>
      <!--v-if-->
    </div>
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with badge slot correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2">Badge slot<time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time></div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with body slot correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>Body slot</div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with class correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50 absolute">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with date correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
  <!--v-if-->
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
    <!--v-if-->
    <div data-slot="meta" class="flex items-center gap-2 mb-2">
      <!--v-if--><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with date slot correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Date slot</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with description correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
  <!--v-if-->
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <!--v-if-->
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with description slot correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description slot</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with footer slot correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <div data-slot="footer" class="">Footer slot</div>
</article>"
`;

exports[`BlogPost > renders with header slot correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none">Header slot</div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with image correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with orientation horizontal correctly 1`] = `
"<article data-orientation="horizontal" data-slot="root" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with orientation vertical correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with title correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
  <!--v-if-->
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
    <!--v-if-->
    <!--v-if-->
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with title slot correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title slot" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title slot</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with to & image correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with to correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <!--v-if-->
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Post link" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with ui correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with variant ghost correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg group-hover/blog-post:shadow-none transition-all group-hover/blog-post:rounded-b-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with variant naked correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col p-0 sm:p-0 transition">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none shadow-lg rounded-lg"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with variant outline correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default transition hover:bg-elevated/50">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-toned">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-muted">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with variant soft correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 transition hover:bg-elevated">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-muted">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-toned">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;

exports[`BlogPost > renders with variant subtle correctly 1`] = `
"<article data-orientation="vertical" data-slot="root" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-elevated/50 ring ring-default transition hover:bg-elevated hover:ring-accented">
  <div data-slot="header" class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img src="https://picsum.photos/640/360" alt="Title" data-slot="image" class="object-cover object-top w-full h-full transform transition-transform duration-200 group-hover/blog-post:scale-110"></div>
  <div data-slot="body" class="min-w-0 flex-1 flex flex-col p-4 sm:p-6"><a href="https://github.com/benjamincanac" tabindex="-1" rel="noopener noreferrer" aria-label="Title" class="focus:outline-none peer"><span class="absolute inset-0" aria-hidden="true"></span></a>
    <div data-slot="meta" class="flex items-center gap-2 mb-2"><span data-slot="badge" class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span data-slot="label" class="truncate">Badge</span>
      <!--v-if--></span><time datetime="2024-01-01T00:00:00.000Z" data-slot="date" class="text-sm text-muted">Jan 1, 2024</time>
    </div>
    <h2 data-slot="title" class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
    <div data-slot="description" class="mt-1 text-base text-pretty text-toned">Description</div>
    <div data-slot="authors" class="pt-4 mt-auto flex flex-wrap gap-x-3 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">Benjamin Canac</p>
          <p data-slot="description" class="text-muted text-xs">benjamincanac</p>
        </div>
      </div>
    </div>
  </div>
  <!--v-if-->
</article>"
`;