Fix desktop styles not working

Author: ivteplo

README.md

@@ -1,12 +1,12 @@
 # HTML Sheet Element
 
-HTML Custom Element for creating sheets. Displayed as a bottom sheet on mobile and centered sheet on desktop.
+HTML Custom Element for creating sheets. Displayed as a bottom sheet on mobile and a centered sheet on desktop.
 
 
 ## Features
 
-- There is a draggable area to open or close the sheet
-- The sheet can be closed using a button in the top right corner, using the `Esc` key, or by clicking outside the bottom sheet
+- There is a handle at the top of the sheet that can be used to open or close the sheet
+- The sheet can be closed using a button in the sheet header, using the `Esc` key, or by clicking outside the bottom sheet
   - This behavior is configurable. You can turn off the `Esc` or the click outside the sheet when you want.
 - API is similar to the `<dialog>` element's
   - Supports forms inside of it

library/styleSheet.js

@@ -28,6 +28,7 @@ styleSheet.replaceSync(`
     --_sheet-backdrop-color: var(--sheet-backdrop-color, #88888880);
 
     --_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-handle-width: var(--sheet-handle-width, 3rem);
@@ -55,19 +56,8 @@ styleSheet.replaceSync(`
   @media (min-width: 48rem) {
     :host {
       --_sheet-width: var(--sheet-width, auto);
-      --_sheet-max-width: 48rem;
-      --_sheet-max-height: 32rem;
-
-      border-radius: var(--_sheet-border-radius);
-      justify-content: center;
-    }
-
-    .sheet-handle-container {
-      display: none;
-    }
-
-    .sheet-controls {
-      grid-template-columns: 1fr auto auto;
+      --_sheet-max-width: var(--sheet-max-width, 48rem);
+      --_sheet-max-height: var(--sheet-max-height, 32rem);
     }
   }
 
@@ -152,6 +142,10 @@ styleSheet.replaceSync(`
     justify-content: flex-start;
   }
 
+  .sheet-title-area:not(:empty) {
+    padding: var(--_sheet-title-margin);
+  }
+
   .sheet-handle-container {
     display: flex;
     flex-direction: column;
@@ -200,4 +194,23 @@ styleSheet.replaceSync(`
     padding: var(--_sheet-body-padding);
     box-sizing: border-box;
   }
+
+  /* tablet */
+  @media (min-width: 48rem) {
+    :host {
+      justify-content: center;
+    }
+
+    .sheet-contents {
+      border-radius: var(--_sheet-border-radius);
+    }
+
+    .sheet-handle-container {
+      display: none;
+    }
+
+    .sheet-controls {
+      grid-template-columns: 1fr auto auto;
+    }
+  }
 `)

test/index.html

@@ -24,11 +24,11 @@
     <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;">
-      <h2 slot="title-area" style="padding-block: 0.5rem">Contact</h2>
+      <h2 slot="title-area">Contact</h2>
       <form method="dialog" class="column">
         <div class="column">
-          <label for="email">Email</label>
-          <input name="email" id="email" type="email" placeholder="Your email" required>
+          <label for="email">Recepient</label>
+          <input name="email" id="email" type="email" placeholder="Recepient's email" required>
         </div>
         <div class="column">
           <label for="subject">Subject</label>
@@ -38,7 +38,6 @@ <h2 slot="title-area" style="padding-block: 0.5rem">Contact</h2>
           <label for="message">Message</label>
           <textarea name="message" placeholder="Your message"></textarea>
         </div>
-        <!-- <div contenteditable="true">Contenteditable block</div> -->
         <button type="submit" value="send">Send</button>
       </form>
     </ui-sheet>

test/main.css

@@ -79,7 +79,3 @@ form > div {
 form label {
   font-weight: 500;
 }
-
-ui-sheet h2 {
-  padding-block: 0.5rem;
-}