feat: add right attribute to open drawer from right side

README.md

@@ -67,6 +67,9 @@ This web component uses [HTML templates](https://caniuse.com/#feat=template), th
     - Example: `drawer.open = true`
   - In (p)react you might need to set undefined in your JSX (since false !== undefined for html attribute existence)
     - Example: `<side-drawer open={this.state.isDrawerOpen || undefined}></side-drawer>`
+- `right`
+  - Add this attribute so the drawer opens from the right instead of the left.
+    - Example: `<side-drawer right></side-drawer>`
 
 ### Events
 

index.html

@@ -312,6 +312,11 @@ <h2>Example Customization</h2>
             <code>--side-drawer-overlay-opacity: .25;</code>
             <side-drawer id="drawer4"></side-drawer>
           </li>
+          <li>
+            <wc-menu-button id="menuButton5"></wc-menu-button>
+            <code>&lt;side-drawer right&gt;&lt;side-drawer&gt;</code>
+            <side-drawer right id="drawer5"></side-drawer>
+          </li>
         </ul>
       </section>
     </main>
@@ -347,11 +352,13 @@ <h2>Example Customization</h2>
         const menuButton2 = document.querySelector("#menuButton2");
         const menuButton3 = document.querySelector("#menuButton3");
         const menuButton4 = document.querySelector("#menuButton4");
+        const menuButton5 = document.querySelector("#menuButton5");
 
         const drawer = document.querySelector("#drawer");
         const drawer2 = document.querySelector("#drawer2");
         const drawer3 = document.querySelector("#drawer3");
         const drawer4 = document.querySelector("#drawer4");
+        const drawer5 = document.querySelector("#drawer5");
 
         menuButton.addEventListener("opened", (ev) => {
           drawer.open = true;
@@ -365,6 +372,9 @@ <h2>Example Customization</h2>
         menuButton4.addEventListener("opened", (ev) => {
           drawer4.open = true;
         });
+        menuButton5.addEventListener("opened", (ev) => {
+          drawer5.open = true;
+        });
 
         drawer.addEventListener("open", (ev) => {
           menuButton.open = true;
@@ -378,6 +388,9 @@ <h2>Example Customization</h2>
         drawer4.addEventListener("open", (ev) => {
           menuButton4.open = true;
         });
+        drawer5.addEventListener("open", (ev) => {
+          menuButton5.open = true;
+        });
 
         drawer.addEventListener("close", (ev) => {
           menuButton.open = false;
@@ -391,6 +404,9 @@ <h2>Example Customization</h2>
         drawer4.addEventListener("close", (ev) => {
           menuButton4.open = false;
         });
+        drawer5.addEventListener("close", (ev) => {
+          menuButton5.open = false;
+        });
       }
     </script>
   </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "side-drawer",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "A simple side drawer element with no dependencies and small as possible",
   "keywords": [
     "web component",

side-drawer.js

@@ -32,6 +32,12 @@ dialog {
   visibility: hidden;
 }
 
+:host([right]) dialog {
+  left: unset;
+  right: 0;
+  transform: translateX(100%);
+}
+
 /* putting this here in case this is ever fixed:
  https://github.com/whatwg/html/issues/7732 */
 dialog,
@@ -44,6 +50,8 @@ dialog:modal {
   box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.5);
   border-top-right-radius: inherit;
   border-bottom-right-radius: inherit;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
 }
 
 dialog::backdrop {
@@ -63,7 +71,7 @@ dialog[open] {
 
 :host([open]) dialog[open],
 :host([open]) dialog[open]::backdrop {
-    transition-delay:0s;
+    transition-delay: 0s;
     transform: none;
 }