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

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

exports[`PageSection > renders with as correctly 1`] = `
"<div data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
</div>"
`;

exports[`PageSection > renders with body slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <!--v-if-->
      <div data-slot="body" class="mt-8">Body slot</div>
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with bottom slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>Bottom slot
</section>"
`;

exports[`PageSection > renders with class correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="isolate absolute">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
</section>"
`;

exports[`PageSection > renders with default slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <!--v-if-->Default slot
  </div>
</section>"
`;

exports[`PageSection > renders with description correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <!--v-if-->
        <!--v-if-->
        <!--v-if-->
        <div data-slot="description" class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
      </div>
      <!--v-if-->
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with description slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <!--v-if-->
        <!--v-if-->
        <!--v-if-->
        <div data-slot="description" class="text-base sm:text-lg text-muted text-center text-balance">Description slot</div>
      </div>
      <!--v-if-->
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with features and description correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <!--v-if-->
        <!--v-if-->
        <!--v-if-->
        <div data-slot="description" class="text-base sm:text-lg text-muted text-center text-balance">Description</div>
      </div>
      <div data-slot="body" class="mt-16">
        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><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="size-5 shrink-0 text-primary"></svg></div>
            <div data-slot="wrapper" class="">
              <!--v-if-->
              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
            </div>
          </li>
        </ul>
      </div>
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with features and title correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <!--v-if-->
        <!--v-if-->
        <h2 data-slot="title" class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
        <!--v-if-->
      </div>
      <div data-slot="body" class="mt-16">
        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><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="size-5 shrink-0 text-primary"></svg></div>
            <div data-slot="wrapper" class="">
              <!--v-if-->
              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
            </div>
          </li>
        </ul>
      </div>
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with features correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <!--v-if-->
      <div data-slot="body" class="mt-8">
        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><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="size-5 shrink-0 text-primary"></svg></div>
            <div data-slot="wrapper" class="">
              <!--v-if-->
              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
            </div>
          </li>
        </ul>
      </div>
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with features slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <!--v-if-->
      <div data-slot="body" class="mt-8">
        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">Features slot</ul>
      </div>
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with footer slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <!--v-if-->
      <!--v-if-->
      <div data-slot="footer" class="mt-8">Footer slot</div>
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with header slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">Header slot</div>
      <!--v-if-->
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with headline correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <!--v-if-->
        <div data-slot="headline" class="mb-3 justify-center font-semibold text-primary flex items-center gap-1.5">Headline</div>
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with headline slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <!--v-if-->
        <div data-slot="headline" class="mb-3 justify-center">Headline slot</div>
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with icon correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <div data-slot="leading" class="flex items-center mb-6 justify-center"><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="size-10 shrink-0 text-primary"></svg></div>
        <!--v-if-->
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with leading slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <div data-slot="leading" class="flex items-center mb-6 justify-center">Leading slot</div>
        <!--v-if-->
        <!--v-if-->
        <!--v-if-->
      </div>
      <!--v-if-->
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with links and features correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <!--v-if-->
      <div data-slot="body" class="mt-8">
        <ul data-slot="features" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><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="size-5 shrink-0 text-primary"></svg></div>
            <div data-slot="wrapper" class="">
              <!--v-if-->
              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
            </div>
          </li>
        </ul>
      </div>
      <div data-slot="footer" class="mt-16">
        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><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">
            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
            <!--v-if-->
          </button></div>
      </div>
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with links correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <!--v-if-->
      <!--v-if-->
      <div data-slot="footer" class="mt-8">
        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center"><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">
            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
            <!--v-if-->
          </button></div>
      </div>
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with links slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <!--v-if-->
      <!--v-if-->
      <div data-slot="footer" class="mt-8">
        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3 justify-center">Links slot</div>
      </div>
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with orientation horizontal correctly 1`] = `
"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
    <!--v-if-->
    <div class="hidden lg:block"></div>
  </div>
</section>"
`;

exports[`PageSection > renders with orientation horizontal features correctly 1`] = `
"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
    <div data-slot="wrapper" class="">
      <!--v-if-->
      <div data-slot="body" class="mt-8">
        <ul data-slot="features" class="grid gap-4">
          <li data-orientation="horizontal" data-slot="root" class="relative flex items-start gap-2.5">
            <div data-slot="leading" class="inline-flex items-center justify-center p-0.5"><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="size-5 shrink-0 text-primary"></svg></div>
            <div data-slot="wrapper" class="">
              <!--v-if-->
              <div data-slot="title" class="text-base text-pretty font-semibold text-highlighted">Title</div>
              <div data-slot="description" class="text-[15px] text-pretty text-muted mt-1">Description</div>
            </div>
          </li>
        </ul>
      </div>
      <!--v-if-->
    </div>
    <div class="hidden lg:block"></div>
  </div>
</section>"
`;

exports[`PageSection > renders with orientation horizontal links correctly 1`] = `
"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
    <div data-slot="wrapper" class="">
      <!--v-if-->
      <!--v-if-->
      <div data-slot="footer" class="mt-8">
        <div data-slot="links" class="flex flex-wrap gap-x-6 gap-y-3"><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">
            <!--v-if--><span data-slot="label" class="truncate">Get started</span>
            <!--v-if-->
          </button></div>
      </div>
    </div>
    <div class="hidden lg:block"></div>
  </div>
</section>"
`;

exports[`PageSection > renders with orientation horizontal reverse correctly 1`] = `
"<section data-orientation="horizontal" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 lg:grid-cols-2 lg:items-center" data-slot="container">
    <!--v-if-->
    <div class="hidden lg:block"></div>
  </div>
</section>"
`;

exports[`PageSection > renders with reverse correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
</section>"
`;

exports[`PageSection > renders with title correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <!--v-if-->
        <!--v-if-->
        <h2 data-slot="title" class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title</h2>
        <!--v-if-->
      </div>
      <!--v-if-->
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with title slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container">
    <div data-slot="wrapper" class="">
      <div data-slot="header" class="">
        <!--v-if-->
        <!--v-if-->
        <h2 data-slot="title" class="text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted text-center">Title slot</h2>
        <!--v-if-->
      </div>
      <!--v-if-->
      <!--v-if-->
    </div>
    <!--v-if-->
  </div>
</section>"
`;

exports[`PageSection > renders with top slot correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16" data-slot="container"></div>
</section>"
`;

exports[`PageSection > renders with ui correctly 1`] = `
"<section data-orientation="vertical" data-slot="root" class="relative isolate">
  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16 max-w-5xl" data-slot="container"></div>
</section>"
`;