@veeqo/ui 0.0.1 → 0.0.3

package/src/components/Modal/__snapshots__/Modal.test.tsx.snap

@@ -0,0 +1,1940 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal displays footer slot instead of if actions if provided 1`] = `
+<DocumentFragment>
+  .c5 {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  line-height: 16px;
+  color: #37424d;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+  color: #37424D;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: -0.019rem;
+  -moz-letter-spacing: -0.019rem;
+  -ms-letter-spacing: -0.019rem;
+  letter-spacing: -0.019rem;
+}
+
+.c9 {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  line-height: 16px;
+  color: #37424d;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 16px;
+  color: #637381;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+}
+
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.c8 svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.c6 {
+  position: relative;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c6:hover {
+  cursor: pointer;
+}
+
+.c6:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c6 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c7 {
+  border-color: transparent;
+  box-shadow: none;
+  color: #37424D;
+}
+
+.c7:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c7:active {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c7:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c7:disabled {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.c3 {
+  padding-top: 1.5rem;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.c3 > * + * {
+  margin-top: 0.25rem;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c4 > *:first-child {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.c2 {
+  position: relative;
+  width: 100%;
+  background-color: white;
+  border: 1px solid #DFE3E8;
+  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.c11 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+}
+
+.c0 {
+  padding: 0;
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
+  min-width: 360px;
+}
+
+.c0::backdrop {
+  -webkit-animation: fadeIn 0.25s ease forwards;
+  animation: fadeIn 0.25s ease forwards;
+}
+
+.c0 > .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-height: 84vh;
+}
+
+.c0 > .c1 .c10 {
+  padding-bottom: 1.5rem;
+}
+
+.c0::backdrop {
+  background-color: rgba(55,66,77,0.5);
+}
+
+.c0:not([open]) {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+@media (min-width:calc(640px + 1px)) and (max-width:720px) {
+  .c0 {
+    max-width: 100vw;
+  }
+}
+
+@media (min-width:720px) and (max-width:960px) {
+  .c0 {
+    max-width: 88vw;
+  }
+}
+
+@media (min-width:960px) and (max-width:1280px) {
+  .c0 {
+    max-width: 72vw;
+  }
+}
+
+@media (min-width:1280px) {
+  .c0 {
+    max-width: 52vw;
+  }
+}
+
+@media (max-width:720px) {
+  .c0 {
+    margin: 0;
+    width: 100%;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
+  .c0,
+  .c0 > .c1 {
+    border-radius: 0;
+    height: 100%;
+    width: 100%;
+    max-height: unset;
+  }
+}
+
+<dialog
+    aria-describedby="modal_title"
+    class="c0"
+    open=""
+    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
+  >
+    <div
+      class="c1 c2"
+    >
+      <header
+        class="c3"
+      >
+        <div
+          class="c4"
+        >
+          <h2
+            class="c5"
+            id="modal_title"
+          >
+            TEST TITLE
+          </h2>
+          <button
+            aria-label="Close"
+            class="c6 c7"
+          >
+            <span
+              class="c8"
+            >
+              <svg
+                fill="none"
+                height="1.5rem"
+                role="presentation"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <span
+          class="c9"
+        >
+          TEST SUBTITLE
+        </span>
+      </header>
+      <section
+        class="c10 c11"
+      >
+        <div
+          data-testid="main-content"
+        />
+      </section>
+      <div
+        data-testid="footer-slot"
+      />
+    </div>
+  </dialog>
+</DocumentFragment>
+`;
+
+exports[`Modal displays header and footer slots when provided 1`] = `
+<DocumentFragment>
+  .c2 {
+  position: relative;
+  width: 100%;
+  background-color: white;
+  border: 1px solid #DFE3E8;
+  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.c4 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+}
+
+.c0 {
+  padding: 0;
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
+  min-width: 360px;
+}
+
+.c0::backdrop {
+  -webkit-animation: fadeIn 0.25s ease forwards;
+  animation: fadeIn 0.25s ease forwards;
+}
+
+.c0 > .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-height: 84vh;
+}
+
+.c0 > .c1 .c3 {
+  padding-bottom: 1.5rem;
+}
+
+.c0::backdrop {
+  background-color: rgba(55,66,77,0.5);
+}
+
+.c0:not([open]) {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+@media (min-width:calc(640px + 1px)) and (max-width:720px) {
+  .c0 {
+    max-width: 100vw;
+  }
+}
+
+@media (min-width:720px) and (max-width:960px) {
+  .c0 {
+    max-width: 88vw;
+  }
+}
+
+@media (min-width:960px) and (max-width:1280px) {
+  .c0 {
+    max-width: 72vw;
+  }
+}
+
+@media (min-width:1280px) {
+  .c0 {
+    max-width: 52vw;
+  }
+}
+
+@media (max-width:720px) {
+  .c0 {
+    margin: 0;
+    width: 100%;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
+  .c0,
+  .c0 > .c1 {
+    border-radius: 0;
+    height: 100%;
+    width: 100%;
+    max-height: unset;
+  }
+}
+
+<dialog
+    aria-describedby="modal_title"
+    class="c0"
+    open=""
+    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
+  >
+    <div
+      class="c1 c2"
+    >
+      <div
+        data-testid="header-slot"
+      />
+      <section
+        class="c3 c4"
+      >
+        <div
+          data-testid="main-content"
+        />
+      </section>
+      <div
+        data-testid="footer-slot"
+      />
+    </div>
+  </dialog>
+</DocumentFragment>
+`;
+
+exports[`Modal displays header slot instead of title and subtitle if also provided 1`] = `
+<DocumentFragment>
+  .c2 {
+  position: relative;
+  width: 100%;
+  background-color: white;
+  border: 1px solid #DFE3E8;
+  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.c4 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+}
+
+.c0 {
+  padding: 0;
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
+  min-width: 360px;
+}
+
+.c0::backdrop {
+  -webkit-animation: fadeIn 0.25s ease forwards;
+  animation: fadeIn 0.25s ease forwards;
+}
+
+.c0 > .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-height: 84vh;
+}
+
+.c0 > .c1 .c3 {
+  padding-bottom: 1.5rem;
+}
+
+.c0::backdrop {
+  background-color: rgba(55,66,77,0.5);
+}
+
+.c0:not([open]) {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+@media (min-width:calc(640px + 1px)) and (max-width:720px) {
+  .c0 {
+    max-width: 100vw;
+  }
+}
+
+@media (min-width:720px) and (max-width:960px) {
+  .c0 {
+    max-width: 88vw;
+  }
+}
+
+@media (min-width:960px) and (max-width:1280px) {
+  .c0 {
+    max-width: 72vw;
+  }
+}
+
+@media (min-width:1280px) {
+  .c0 {
+    max-width: 52vw;
+  }
+}
+
+@media (max-width:720px) {
+  .c0 {
+    margin: 0;
+    width: 100%;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
+  .c0,
+  .c0 > .c1 {
+    border-radius: 0;
+    height: 100%;
+    width: 100%;
+    max-height: unset;
+  }
+}
+
+<dialog
+    aria-describedby="modal_title"
+    class="c0"
+    open=""
+    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
+  >
+    <div
+      class="c1 c2"
+    >
+      <div
+        data-testid="header-slot"
+      />
+      <section
+        class="c3 c4"
+      >
+        <div
+          data-testid="main-content"
+        />
+      </section>
+    </div>
+  </dialog>
+</DocumentFragment>
+`;
+
+exports[`Modal looks as expected with a footer slot provided 1`] = `
+<DocumentFragment>
+  .c5 {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  line-height: 16px;
+  color: #37424d;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+  color: #37424D;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: -0.019rem;
+  -moz-letter-spacing: -0.019rem;
+  -ms-letter-spacing: -0.019rem;
+  letter-spacing: -0.019rem;
+}
+
+.c9 {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  line-height: 16px;
+  color: #37424d;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 16px;
+  color: #637381;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+}
+
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.c8 svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.c6 {
+  position: relative;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c6:hover {
+  cursor: pointer;
+}
+
+.c6:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c6 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c7 {
+  border-color: transparent;
+  box-shadow: none;
+  color: #37424D;
+}
+
+.c7:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c7:active {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c7:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c7:disabled {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.c3 {
+  padding-top: 1.5rem;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.c3 > * + * {
+  margin-top: 0.25rem;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c4 > *:first-child {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.c2 {
+  position: relative;
+  width: 100%;
+  background-color: white;
+  border: 1px solid #DFE3E8;
+  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.c11 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+}
+
+.c0 {
+  padding: 0;
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
+  min-width: 360px;
+}
+
+.c0::backdrop {
+  -webkit-animation: fadeIn 0.25s ease forwards;
+  animation: fadeIn 0.25s ease forwards;
+}
+
+.c0 > .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-height: 84vh;
+}
+
+.c0 > .c1 .c10 {
+  padding-bottom: 1.5rem;
+}
+
+.c0::backdrop {
+  background-color: rgba(55,66,77,0.5);
+}
+
+.c0:not([open]) {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+@media (min-width:calc(640px + 1px)) and (max-width:720px) {
+  .c0 {
+    max-width: 100vw;
+  }
+}
+
+@media (min-width:720px) and (max-width:960px) {
+  .c0 {
+    max-width: 88vw;
+  }
+}
+
+@media (min-width:960px) and (max-width:1280px) {
+  .c0 {
+    max-width: 72vw;
+  }
+}
+
+@media (min-width:1280px) {
+  .c0 {
+    max-width: 52vw;
+  }
+}
+
+@media (max-width:720px) {
+  .c0 {
+    margin: 0;
+    width: 100%;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
+  .c0,
+  .c0 > .c1 {
+    border-radius: 0;
+    height: 100%;
+    width: 100%;
+    max-height: unset;
+  }
+}
+
+<dialog
+    aria-describedby="modal_title"
+    class="c0"
+    open=""
+    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
+  >
+    <div
+      class="c1 c2"
+    >
+      <header
+        class="c3"
+      >
+        <div
+          class="c4"
+        >
+          <h2
+            class="c5"
+            id="modal_title"
+          >
+            TEST TITLE
+          </h2>
+          <button
+            aria-label="Close"
+            class="c6 c7"
+          >
+            <span
+              class="c8"
+            >
+              <svg
+                fill="none"
+                height="1.5rem"
+                role="presentation"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <span
+          class="c9"
+        >
+          TEST SUBTITLE
+        </span>
+      </header>
+      <section
+        class="c10 c11"
+      >
+        <div
+          data-testid="main-content"
+        />
+      </section>
+      <div
+        data-testid="footer-slot"
+      />
+    </div>
+  </dialog>
+</DocumentFragment>
+`;
+
+exports[`Modal looks as expected with a header slot provided 1`] = `
+<DocumentFragment>
+  .c13 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.c13 svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c9 {
+  position: relative;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 24px;
+  padding-right: 24px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c9:hover {
+  cursor: pointer;
+}
+
+.c9:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c9 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c10 {
+  border-color: #CDD1D5;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
+  color: #37424D;
+}
+
+.c10:hover {
+  background-color: #FAFAFB;
+}
+
+.c10:active {
+  background-color: #FAFAFB;
+  border-color: #0079D1;
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c10:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c10:disabled {
+  box-shadow: none !important;
+  background-color: #DFE3E8 !important;
+  border-color: #DFE3E8 !important;
+  color: #637381 !important;
+}
+
+.c11 {
+  background-color: #0079D1;
+  border-color: #0079D1;
+  color: white;
+}
+
+.c11:hover {
+  background-color: #005A9C;
+  border-color: #005A9C;
+}
+
+.c11:active {
+  background-color: #005A9C;
+  border-color: #005A9C;
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c11:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c12 {
+  background-color: #EB5757;
+  border-color: #EB5757;
+  color: white;
+}
+
+.c12:hover {
+  background-color: #A53D3D;
+  border-color: #A53D3D;
+}
+
+.c12:active {
+  background-color: #A53D3D;
+  border-color: #A53D3D;
+  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
+}
+
+.c12:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
+}
+
+.c6 {
+  margin-top: 1rem;
+  padding: 1.5rem;
+  z-index: 2;
+}
+
+.c2 {
+  position: relative;
+  width: 100%;
+  background-color: white;
+  border: 1px solid #DFE3E8;
+  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.c4 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+}
+
+.c0 {
+  padding: 0;
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
+  min-width: 360px;
+}
+
+.c0::backdrop {
+  -webkit-animation: fadeIn 0.25s ease forwards;
+  animation: fadeIn 0.25s ease forwards;
+}
+
+.c0 > .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-height: 84vh;
+}
+
+.c0 > .c1 .c3 {
+  padding-bottom: 1.5rem;
+}
+
+.c0 > .c1 .c5 {
+  margin-top: 0;
+}
+
+.c0::backdrop {
+  background-color: rgba(55,66,77,0.5);
+}
+
+.c0:not([open]) {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c7 > * {
+  -webkit-flex: undefined;
+  -ms-flex: undefined;
+  flex: undefined;
+}
+
+.c7 > * + * {
+  margin-left: 1rem;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c8 > * {
+  -webkit-flex: undefined;
+  -ms-flex: undefined;
+  flex: undefined;
+}
+
+.c8 > * + * {
+  margin-left: 1rem;
+}
+
+@media (min-width:calc(640px + 1px)) and (max-width:720px) {
+  .c0 {
+    max-width: 100vw;
+  }
+}
+
+@media (min-width:720px) and (max-width:960px) {
+  .c0 {
+    max-width: 88vw;
+  }
+}
+
+@media (min-width:960px) and (max-width:1280px) {
+  .c0 {
+    max-width: 72vw;
+  }
+}
+
+@media (min-width:1280px) {
+  .c0 {
+    max-width: 52vw;
+  }
+}
+
+@media (max-width:720px) {
+  .c0 {
+    margin: 0;
+    width: 100%;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
+  .c0,
+  .c0 > .c1 {
+    border-radius: 0;
+    height: 100%;
+    width: 100%;
+    max-height: unset;
+  }
+}
+
+<dialog
+    aria-describedby="modal_title"
+    class="c0"
+    open=""
+    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
+  >
+    <div
+      class="c1 c2"
+    >
+      <div
+        data-testid="header-slot"
+      />
+      <section
+        class="c3 c4"
+      >
+        <div
+          data-testid="main-content"
+        />
+      </section>
+      <footer
+        class="c5 c6"
+      >
+        <div
+          class="c7"
+          direction="horizontal"
+        >
+          <div
+            class="c8"
+            data-testid="left-actions-container"
+            direction="horizontal"
+          >
+            <button
+              class="c9 c10 c11 c12"
+              type="button"
+            >
+              <span
+                class="c13"
+              >
+                <span>
+                  Cancel
+                </span>
+              </span>
+            </button>
+          </div>
+          <div
+            class="c8"
+            data-testid="right-actions-container"
+            direction="horizontal"
+          >
+            <button
+              class="c9 c10 c11"
+              type="button"
+            >
+              <span
+                class="c13"
+              >
+                <span>
+                  Save
+                </span>
+              </span>
+            </button>
+            <button
+              class="c9 c10"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="c13"
+              >
+                <span>
+                  Cancel
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </dialog>
+</DocumentFragment>
+`;
+
+exports[`Modal looks as expected without slots 1`] = `
+<DocumentFragment>
+  .c5 {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  line-height: 16px;
+  color: #37424d;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+  color: #37424D;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: -0.019rem;
+  -moz-letter-spacing: -0.019rem;
+  -ms-letter-spacing: -0.019rem;
+  letter-spacing: -0.019rem;
+}
+
+.c9 {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  line-height: 16px;
+  color: #37424d;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 16px;
+  color: #637381;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+}
+
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.c8 svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.c20 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.c20 svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c6 {
+  position: relative;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c6:hover {
+  cursor: pointer;
+}
+
+.c6:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c6 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c16 {
+  position: relative;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 24px;
+  padding-right: 24px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c16:hover {
+  cursor: pointer;
+}
+
+.c16:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c16 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c17 {
+  border-color: #CDD1D5;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
+  color: #37424D;
+}
+
+.c17:hover {
+  background-color: #FAFAFB;
+}
+
+.c17:active {
+  background-color: #FAFAFB;
+  border-color: #0079D1;
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c17:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c17:disabled {
+  box-shadow: none !important;
+  background-color: #DFE3E8 !important;
+  border-color: #DFE3E8 !important;
+  color: #637381 !important;
+}
+
+.c18 {
+  background-color: #0079D1;
+  border-color: #0079D1;
+  color: white;
+}
+
+.c18:hover {
+  background-color: #005A9C;
+  border-color: #005A9C;
+}
+
+.c18:active {
+  background-color: #005A9C;
+  border-color: #005A9C;
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c18:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c19 {
+  background-color: #EB5757;
+  border-color: #EB5757;
+  color: white;
+}
+
+.c19:hover {
+  background-color: #A53D3D;
+  border-color: #A53D3D;
+}
+
+.c19:active {
+  background-color: #A53D3D;
+  border-color: #A53D3D;
+  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
+}
+
+.c19:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #F7BCBC;
+}
+
+.c7 {
+  border-color: transparent;
+  box-shadow: none;
+  color: #37424D;
+}
+
+.c7:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c7:active {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.c7:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c7:disabled {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.c3 {
+  padding-top: 1.5rem;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.c3 > * + * {
+  margin-top: 0.25rem;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c4 > *:first-child {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.c13 {
+  margin-top: 1rem;
+  padding: 1.5rem;
+  z-index: 2;
+}
+
+.c2 {
+  position: relative;
+  width: 100%;
+  background-color: white;
+  border: 1px solid #DFE3E8;
+  box-shadow: 0px 1px 3px rgba(55,66,77,0.15);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.c11 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 1.5rem;
+}
+
+.c0 {
+  padding: 0;
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: 0px 20px 25px rgba(27,33,38,0.2);
+  min-width: 360px;
+}
+
+.c0::backdrop {
+  -webkit-animation: fadeIn 0.25s ease forwards;
+  animation: fadeIn 0.25s ease forwards;
+}
+
+.c0 > .c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  max-height: 84vh;
+}
+
+.c0 > .c1 .c10 {
+  padding-bottom: 1.5rem;
+}
+
+.c0 > .c1 .c12 {
+  margin-top: 0;
+}
+
+.c0::backdrop {
+  background-color: rgba(55,66,77,0.5);
+}
+
+.c0:not([open]) {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c14 > * {
+  -webkit-flex: undefined;
+  -ms-flex: undefined;
+  flex: undefined;
+}
+
+.c14 > * + * {
+  margin-left: 1rem;
+}
+
+.c15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c15 > * {
+  -webkit-flex: undefined;
+  -ms-flex: undefined;
+  flex: undefined;
+}
+
+.c15 > * + * {
+  margin-left: 1rem;
+}
+
+@media (min-width:calc(640px + 1px)) and (max-width:720px) {
+  .c0 {
+    max-width: 100vw;
+  }
+}
+
+@media (min-width:720px) and (max-width:960px) {
+  .c0 {
+    max-width: 88vw;
+  }
+}
+
+@media (min-width:960px) and (max-width:1280px) {
+  .c0 {
+    max-width: 72vw;
+  }
+}
+
+@media (min-width:1280px) {
+  .c0 {
+    max-width: 52vw;
+  }
+}
+
+@media (max-width:720px) {
+  .c0 {
+    margin: 0;
+    width: 100%;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
+  .c0,
+  .c0 > .c1 {
+    border-radius: 0;
+    height: 100%;
+    width: 100%;
+    max-height: unset;
+  }
+}
+
+<dialog
+    aria-describedby="modal_title"
+    class="c0"
+    open=""
+    style="opacity: 0; transform: translateY(-50px) translateZ(0);"
+  >
+    <div
+      class="c1 c2"
+    >
+      <header
+        class="c3"
+      >
+        <div
+          class="c4"
+        >
+          <h2
+            class="c5"
+            id="modal_title"
+          >
+            TEST TITLE
+          </h2>
+          <button
+            aria-label="Close"
+            class="c6 c7"
+          >
+            <span
+              class="c8"
+            >
+              <svg
+                fill="none"
+                height="1.5rem"
+                role="presentation"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <span
+          class="c9"
+        >
+          TEST SUBTITLE
+        </span>
+      </header>
+      <section
+        class="c10 c11"
+      >
+        <div
+          data-testid="main-content"
+        />
+      </section>
+      <footer
+        class="c12 c13"
+      >
+        <div
+          class="c14"
+          direction="horizontal"
+        >
+          <div
+            class="c15"
+            data-testid="left-actions-container"
+            direction="horizontal"
+          >
+            <button
+              class="c16 c17 c18 c19"
+              type="button"
+            >
+              <span
+                class="c20"
+              >
+                <span>
+                  Cancel
+                </span>
+              </span>
+            </button>
+          </div>
+          <div
+            class="c15"
+            data-testid="right-actions-container"
+            direction="horizontal"
+          >
+            <button
+              class="c16 c17 c18"
+              type="button"
+            >
+              <span
+                class="c20"
+              >
+                <span>
+                  Save
+                </span>
+              </span>
+            </button>
+            <button
+              class="c16 c17"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="c20"
+              >
+                <span>
+                  Cancel
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </dialog>
+</DocumentFragment>
+`;