nuxt__ui/test/components/__snapshots__/Empty-vue.spec.ts.snap

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

exports[`Empty > renders with actions correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with actions slot correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0">Actions slot</div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with as correctly 1`] = `
"<section data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <!--v-if-->
  <!--v-if-->
  <!--v-if-->
</section>"
`;

exports[`Empty > renders with avatar correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with body slot correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">Body slot</div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with class correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default gap-6">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with description correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <!--v-if-->
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with description slot correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description slot</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with footer slot correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <div data-slot="footer" class="flex flex-col items-center gap-2 max-w-sm">Footer slot</div>
</div>"
`;

exports[`Empty > renders with header slot correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center">Header slot</div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with icon correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with leading slot correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center">Leading slot<h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with primary variant naked correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with primary variant outline correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with primary variant soft correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-toned">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with primary variant solid correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-inverted">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-pretty font-medium text-base text-inverted">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-dimmed">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with primary variant subtle correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-elevated/50 ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-toned">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with size lg correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-11 text-[22px]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with size md correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with size sm correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-9 text-lg"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-sm">Title</h2>
    <div data-slot="description" class="text-balance text-center text-xs text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with size xl correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-12 text-2xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-lg">Title</h2>
    <div data-slot="description" class="text-balance text-center text-base text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with size xs correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-8 text-base"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-sm">Title</h2>
    <div data-slot="description" class="text-balance text-center text-xs text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with title correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <!--v-if-->
  </div>
  <!--v-if-->
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with title slot correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title slot</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Empty > renders with ui correctly 1`] = `
"<div data-slot="root" class="relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 bg-default ring ring-default">
  <div data-slot="header" class="flex flex-col items-center gap-2 max-w-sm text-center"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated shrink-0 mb-2 size-10 text-xl"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="text-muted shrink-0"></svg></span>
    <h2 data-slot="title" class="text-highlighted text-pretty font-medium text-base">Title</h2>
    <div data-slot="description" class="text-balance text-center text-sm text-muted">Description</div>
  </div>
  <div data-slot="body" class="flex flex-col items-center gap-4 max-w-sm">
    <div data-slot="actions" class="flex flex-wrap justify-center gap-2 shrink-0"><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg><span data-slot="label" class="truncate">Add</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;