Make some style tweaks

Author: ivteplo

library/styleSheet.js

@@ -29,7 +29,7 @@ styleSheet.replaceSync(`
 
     --_sheet-header-padding: var(--sheet-header-padding, 0 0 0 1rem);
     --_sheet-title-margin: var(--sheet-title-margin, 0.5rem 0);
-    --_sheet-body-padding: var(--sheet-body-padding, 1rem);
+    --_sheet-body-padding: var(--sheet-body-padding, 0 1rem 1rem 1rem);
 
     --_sheet-handle-width: var(--sheet-handle-width, 3rem);
     --_sheet-handle-height: var(--sheet-handle-height, 0.25rem);

test/index.html

@@ -23,7 +23,7 @@
     <!-- Button to open a sheet -->
     <button type="button" id="open-sheet" aria-controls="sheet">Open the Sheet</button>
 
-    <ui-sheet id="sheet" style="--sheet-body-padding: 0 1rem 1rem 1rem;">
+    <ui-sheet id="sheet">
       <h2 slot="title-area">Contact</h2>
       <form method="dialog" class="column">
         <div class="column">

test/main.css

@@ -47,13 +47,20 @@ textarea,
   border-radius: 0.5rem;
   border: 0.0625rem solid var(--section-divider-color);
 
+  box-shadow: 0 0.125rem 0.25rem var(--section-divider-color);
+
   font-family: inherit;
   font-size: 1rem;
 
   background: var(--page-background-color);
   color: var(--page-foreground-color);
 }
 
+button.text-only {
+  box-shadow: none;
+  border: none;
+}
+
 textarea {
   resize: none;
 }
@@ -79,3 +86,7 @@ form > div {
 form label {
   font-weight: 500;
 }
+
+ui-sheet button {
+  font-weight: 600;
+}