// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Page Check dark page against snapshot 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    >
      <div
        class="pf-v6-c-page__sidebar-body"
      >
        Navigation
      </div>
    </div>
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Check page horizontal layout example against snapshot 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-breadcrumb"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            <nav
              aria-label="Breadcrumb"
              class="pf-v6-c-breadcrumb"
              data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
              data-ouia-component-type="PF6/Breadcrumb"
              data-ouia-safe="true"
            >
              <ol
                class="pf-v6-c-breadcrumb__list"
                role="list"
              >
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  Section Home
                </li>
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  <span
                    class="pf-v6-c-breadcrumb__item-divider"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      viewBox="0 0 256 512"
                      width="1em"
                    >
                      <path
                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                      />
                    </svg>
                  </span>
                  <a
                    class="pf-v6-c-breadcrumb__link"
                    href="#"
                  >
                    Section Title
                  </a>
                </li>
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  <span
                    class="pf-v6-c-breadcrumb__item-divider"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      viewBox="0 0 256 512"
                      width="1em"
                    >
                      <path
                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                      />
                    </svg>
                  </span>
                  <a
                    class="pf-v6-c-breadcrumb__link"
                    href="#"
                  >
                    Section Title
                  </a>
                </li>
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  <span
                    class="pf-v6-c-breadcrumb__item-divider"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      viewBox="0 0 256 512"
                      width="1em"
                    >
                      <path
                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                      />
                    </svg>
                  </span>
                  <a
                    aria-current="page"
                    class="pf-v6-c-breadcrumb__link pf-m-current"
                    href="#"
                  >
                    Section Landing
                  </a>
                </li>
              </ol>
            </nav>
          </div>
        </section>
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Check page to verify breadcrumb is created 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-breadcrumb"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            <div
              class="pf-v6-c-page__main-body"
            >
              <nav
                aria-label="Breadcrumb"
                class="pf-v6-c-breadcrumb"
                data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
                data-ouia-component-type="PF6/Breadcrumb"
                data-ouia-safe="true"
              >
                <ol
                  class="pf-v6-c-breadcrumb__list"
                  role="list"
                >
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    Section Home
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      aria-current="page"
                      class="pf-v6-c-breadcrumb__link pf-m-current"
                      href="#"
                    >
                      Section Landing
                    </a>
                  </li>
                </ol>
              </nav>
            </div>
          </div>
        </section>
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <div
          class="pf-v6-c-page__main-group pf-m-sticky-bottom"
        >
          <section
            class="pf-v6-c-page__main-breadcrumb"
          >
            <div
              class="pf-v6-c-page__main-body"
            >
              <nav
                aria-label="Breadcrumb"
                class="pf-v6-c-breadcrumb"
                data-ouia-component-id="OUIA-Generated-Breadcrumb-7"
                data-ouia-component-type="PF6/Breadcrumb"
                data-ouia-safe="true"
              >
                <ol
                  class="pf-v6-c-breadcrumb__list"
                  role="list"
                >
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    Section Home
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      aria-current="page"
                      class="pf-v6-c-breadcrumb__link pf-m-current"
                      href="#"
                    >
                      Section Landing
                    </a>
                  </li>
                </ol>
              </nav>
            </div>
          </section>
          <nav
            aria-label="Nav"
            class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
            data-ouia-component-type="PF6/Nav"
            data-ouia-safe="true"
          >
            <ul
              class="pf-v6-c-nav__list"
              role="list"
            >
              <li
                class="pf-v6-c-nav__item"
                data-ouia-component-id="OUIA-Generated-NavItem-1"
                data-ouia-component-type="PF6/NavItem"
                data-ouia-safe="true"
              >
                <a
                  aria-current="page"
                  class="pf-v6-c-nav__link pf-m-current"
                >
                  <span
                    class="pf-v6-c-nav__link-text"
                  >
                    System Panel
                  </span>
                </a>
              </li>
              <li
                class="pf-v6-c-nav__item"
                data-ouia-component-id="OUIA-Generated-NavItem-2"
                data-ouia-component-type="PF6/NavItem"
                data-ouia-safe="true"
              >
                <a
                  class="pf-v6-c-nav__link"
                >
                  <span
                    class="pf-v6-c-nav__link-text"
                  >
                    Policy
                  </span>
                </a>
              </li>
              <li
                class="pf-v6-c-nav__item"
                data-ouia-component-id="OUIA-Generated-NavItem-3"
                data-ouia-component-type="PF6/NavItem"
                data-ouia-safe="true"
              >
                <a
                  class="pf-v6-c-nav__link"
                >
                  <span
                    class="pf-v6-c-nav__link-text"
                  >
                    Authentication
                  </span>
                </a>
              </li>
              <li
                class="pf-v6-c-nav__item"
                data-ouia-component-id="OUIA-Generated-NavItem-4"
                data-ouia-component-type="PF6/NavItem"
                data-ouia-safe="true"
              >
                <a
                  class="pf-v6-c-nav__link"
                >
                  <span
                    class="pf-v6-c-nav__link-text"
                  >
                    Network Services
                  </span>
                </a>
              </li>
              <li
                class="pf-v6-c-nav__item"
                data-ouia-component-id="OUIA-Generated-NavItem-5"
                data-ouia-component-type="PF6/NavItem"
                data-ouia-safe="true"
              >
                <a
                  class="pf-v6-c-nav__link"
                >
                  <span
                    class="pf-v6-c-nav__link-text"
                  >
                    Server
                  </span>
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <div
          aria-label="test"
          class="pf-v6-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
          role="region"
          tabindex="0"
        >
          <div
            class="pf-v6-c-page__main-subnav"
          >
            <div
              class="pf-v6-c-page__main-body"
            >
              <nav
                aria-label="Nav"
                class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
                data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-2"
                data-ouia-component-type="PF6/Nav"
                data-ouia-safe="true"
              >
                <ul
                  class="pf-v6-c-nav__list"
                  role="list"
                >
                  <li
                    class="pf-v6-c-nav__item"
                    data-ouia-component-id="OUIA-Generated-NavItem-6"
                    data-ouia-component-type="PF6/NavItem"
                    data-ouia-safe="true"
                  >
                    <a
                      aria-current="page"
                      class="pf-v6-c-nav__link pf-m-current"
                    >
                      <span
                        class="pf-v6-c-nav__link-text"
                      >
                        System Panel
                      </span>
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-nav__item"
                    data-ouia-component-id="OUIA-Generated-NavItem-7"
                    data-ouia-component-type="PF6/NavItem"
                    data-ouia-safe="true"
                  >
                    <a
                      class="pf-v6-c-nav__link"
                    >
                      <span
                        class="pf-v6-c-nav__link-text"
                      >
                        Policy
                      </span>
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-nav__item"
                    data-ouia-component-id="OUIA-Generated-NavItem-8"
                    data-ouia-component-type="PF6/NavItem"
                    data-ouia-safe="true"
                  >
                    <a
                      class="pf-v6-c-nav__link"
                    >
                      <span
                        class="pf-v6-c-nav__link-text"
                      >
                        Authentication
                      </span>
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-nav__item"
                    data-ouia-component-id="OUIA-Generated-NavItem-9"
                    data-ouia-component-type="PF6/NavItem"
                    data-ouia-safe="true"
                  >
                    <a
                      class="pf-v6-c-nav__link"
                    >
                      <span
                        class="pf-v6-c-nav__link-text"
                      >
                        Network Services
                      </span>
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-nav__item"
                    data-ouia-component-id="OUIA-Generated-NavItem-10"
                    data-ouia-component-type="PF6/NavItem"
                    data-ouia-safe="true"
                  >
                    <a
                      class="pf-v6-c-nav__link"
                    >
                      <span
                        class="pf-v6-c-nav__link-text"
                      >
                        Server
                      </span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <section
            class="pf-v6-c-page__main-breadcrumb"
          >
            <div
              class="pf-v6-c-page__main-body"
            >
              <div
                class="pf-v6-c-page__main-body"
              >
                <section
                  class="pf-v6-c-page__main-breadcrumb"
                >
                  <div
                    class="pf-v6-c-page__main-body"
                  >
                    <nav
                      aria-label="Breadcrumb"
                      class="pf-v6-c-breadcrumb"
                      data-ouia-component-id="OUIA-Generated-Breadcrumb-8"
                      data-ouia-component-type="PF6/Breadcrumb"
                      data-ouia-safe="true"
                    >
                      <ol
                        class="pf-v6-c-breadcrumb__list"
                        role="list"
                      >
                        <li
                          class="pf-v6-c-breadcrumb__item"
                        >
                          Section Home
                        </li>
                        <li
                          class="pf-v6-c-breadcrumb__item"
                        >
                          <span
                            class="pf-v6-c-breadcrumb__item-divider"
                          >
                            <svg
                              aria-hidden="true"
                              class="pf-v6-svg"
                              fill="currentColor"
                              height="1em"
                              role="img"
                              viewBox="0 0 256 512"
                              width="1em"
                            >
                              <path
                                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                              />
                            </svg>
                          </span>
                          <a
                            class="pf-v6-c-breadcrumb__link"
                            href="#"
                          >
                            Section Title
                          </a>
                        </li>
                        <li
                          class="pf-v6-c-breadcrumb__item"
                        >
                          <span
                            class="pf-v6-c-breadcrumb__item-divider"
                          >
                            <svg
                              aria-hidden="true"
                              class="pf-v6-svg"
                              fill="currentColor"
                              height="1em"
                              role="img"
                              viewBox="0 0 256 512"
                              width="1em"
                            >
                              <path
                                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                              />
                            </svg>
                          </span>
                          <a
                            class="pf-v6-c-breadcrumb__link"
                            href="#"
                          >
                            Section Title
                          </a>
                        </li>
                        <li
                          class="pf-v6-c-breadcrumb__item"
                        >
                          <span
                            class="pf-v6-c-breadcrumb__item-divider"
                          >
                            <svg
                              aria-hidden="true"
                              class="pf-v6-svg"
                              fill="currentColor"
                              height="1em"
                              role="img"
                              viewBox="0 0 256 512"
                              width="1em"
                            >
                              <path
                                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                              />
                            </svg>
                          </span>
                          <a
                            aria-current="page"
                            class="pf-v6-c-breadcrumb__link pf-m-current"
                            href="#"
                          >
                            Section Landing
                          </a>
                        </li>
                      </ol>
                    </nav>
                  </div>
                </section>
              </div>
            </div>
          </section>
        </div>
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Check page to verify skip to content points to main content region 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    data-testid="page-test-id"
    id="PageId"
  >
    <div
      class="pf-v6-c-skip-to-content"
    >
      <a
        aria-disabled="false"
        class="pf-v6-c-button pf-m-primary"
        data-ouia-component-id="OUIA-Generated-Button-primary-1"
        data-ouia-component-type="PF6/Button"
        data-ouia-safe="true"
        href="#main-content-page-layout-test-nav"
      >
        <span
          class="pf-v6-c-button__text"
        >
          Skip to Content
        </span>
      </a>
    </div>
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        id="main-content-page-layout-test-nav"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-breadcrumb"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            <div
              class="pf-v6-c-page__main-body"
            >
              <nav
                aria-label="Breadcrumb"
                class="pf-v6-c-breadcrumb"
                data-ouia-component-id="OUIA-Generated-Breadcrumb-9"
                data-ouia-component-type="PF6/Breadcrumb"
                data-ouia-safe="true"
              >
                <ol
                  class="pf-v6-c-breadcrumb__list"
                  role="list"
                >
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    Section Home
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      aria-current="page"
                      class="pf-v6-c-breadcrumb__link pf-m-current"
                      href="#"
                    >
                      Section Landing
                    </a>
                  </li>
                </ol>
              </nav>
            </div>
          </div>
        </section>
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Check page vertical layout example against snapshot 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    >
      <div
        class="pf-v6-c-page__sidebar-body"
      >
        Navigation
      </div>
    </div>
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            <nav
              aria-label="Breadcrumb"
              class="pf-v6-c-breadcrumb"
              data-ouia-component-id="OUIA-Generated-Breadcrumb-6"
              data-ouia-component-type="PF6/Breadcrumb"
              data-ouia-safe="true"
            >
              <ol
                class="pf-v6-c-breadcrumb__list"
                role="list"
              >
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  Section Home
                </li>
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  <span
                    class="pf-v6-c-breadcrumb__item-divider"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      viewBox="0 0 256 512"
                      width="1em"
                    >
                      <path
                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                      />
                    </svg>
                  </span>
                  <a
                    class="pf-v6-c-breadcrumb__link"
                    href="#"
                  >
                    Section Title
                  </a>
                </li>
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  <span
                    class="pf-v6-c-breadcrumb__item-divider"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      viewBox="0 0 256 512"
                      width="1em"
                    >
                      <path
                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                      />
                    </svg>
                  </span>
                  <a
                    class="pf-v6-c-breadcrumb__link"
                    href="#"
                  >
                    Section Title
                  </a>
                </li>
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  <span
                    class="pf-v6-c-breadcrumb__item-divider"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      viewBox="0 0 256 512"
                      width="1em"
                    >
                      <path
                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                      />
                    </svg>
                  </span>
                  <a
                    aria-current="page"
                    class="pf-v6-c-breadcrumb__link pf-m-current"
                    href="#"
                  >
                    Section Landing
                  </a>
                </li>
              </ol>
            </nav>
          </div>
        </section>
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            <div
              class="pf-v6-c-page__main-body"
            >
              <nav
                aria-label="Breadcrumb"
                class="pf-v6-c-breadcrumb"
                data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
                data-ouia-component-type="PF6/Breadcrumb"
                data-ouia-safe="true"
              >
                <ol
                  class="pf-v6-c-breadcrumb__list"
                  role="list"
                >
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    Section Home
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      aria-current="page"
                      class="pf-v6-c-breadcrumb__link pf-m-current"
                      href="#"
                    >
                      Section Landing
                    </a>
                  </li>
                </ol>
              </nav>
            </div>
          </div>
        </section>
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            <nav
              aria-label="Breadcrumb"
              class="pf-v6-c-breadcrumb"
              data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
              data-ouia-component-type="PF6/Breadcrumb"
              data-ouia-safe="true"
            >
              <ol
                class="pf-v6-c-breadcrumb__list"
                role="list"
              >
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  Section Home
                </li>
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  <span
                    class="pf-v6-c-breadcrumb__item-divider"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      viewBox="0 0 256 512"
                      width="1em"
                    >
                      <path
                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                      />
                    </svg>
                  </span>
                  <a
                    class="pf-v6-c-breadcrumb__link"
                    href="#"
                  >
                    Section Title
                  </a>
                </li>
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  <span
                    class="pf-v6-c-breadcrumb__item-divider"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      viewBox="0 0 256 512"
                      width="1em"
                    >
                      <path
                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                      />
                    </svg>
                  </span>
                  <a
                    class="pf-v6-c-breadcrumb__link"
                    href="#"
                  >
                    Section Title
                  </a>
                </li>
                <li
                  class="pf-v6-c-breadcrumb__item"
                >
                  <span
                    class="pf-v6-c-breadcrumb__item-divider"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      viewBox="0 0 256 512"
                      width="1em"
                    >
                      <path
                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                      />
                    </svg>
                  </span>
                  <a
                    aria-current="page"
                    class="pf-v6-c-breadcrumb__link pf-m-current"
                    href="#"
                  >
                    Section Landing
                  </a>
                </li>
              </ol>
            </nav>
          </div>
        </section>
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
<DocumentFragment>
  <div
    aria-label="Page layout"
    class="pf-v6-c-page my-page-class"
    id="PageId"
  >
    <header
      class="pf-v6-c-masthead pf-m-display-inline-on-md"
    />
    <div
      aria-hidden="false"
      class="pf-v6-c-page__sidebar pf-m-expanded"
      id="page-sidebar"
    />
    <div
      class="pf-v6-c-page__main-container"
    >
      <main
        class="pf-v6-c-page__main"
        tabindex="-1"
      >
        <section
          class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            <div
              class="pf-v6-c-page__main-body"
            >
              <nav
                aria-label="Breadcrumb"
                class="pf-v6-c-breadcrumb"
                data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
                data-ouia-component-type="PF6/Breadcrumb"
                data-ouia-safe="true"
              >
                <ol
                  class="pf-v6-c-breadcrumb__list"
                  role="list"
                >
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    Section Home
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      class="pf-v6-c-breadcrumb__link"
                      href="#"
                    >
                      Section Title
                    </a>
                  </li>
                  <li
                    class="pf-v6-c-breadcrumb__item"
                  >
                    <span
                      class="pf-v6-c-breadcrumb__item-divider"
                    >
                      <svg
                        aria-hidden="true"
                        class="pf-v6-svg"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                    <a
                      aria-current="page"
                      class="pf-v6-c-breadcrumb__link pf-m-current"
                      href="#"
                    >
                      Section Landing
                    </a>
                  </li>
                </ol>
              </nav>
            </div>
          </div>
        </section>
        <section
          class="pf-v6-c-page__main-section"
        >
          <div
            class="pf-v6-c-page__main-body"
          >
            Section with default background
          </div>
        </section>
      </main>
    </div>
  </div>
</DocumentFragment>
`;