From 1f5d596accfe63b1bad48efe02fac6e110a6af3a Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 13 Jan 2023 16:23:37 +0200
Subject: [PATCH 01/30] Create a `BottomSheet` class

---
 index.html   |  41 +++------
 main.css     |   9 +-
 main.js      | 256 ++++++++++++++++++++++++++++++++++-----------------
 package.json |  19 ++++
 4 files changed, 209 insertions(+), 116 deletions(-)
 create mode 100644 package.json
diff --git a/index.html b/index.html
index a627d41..3eead87 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!-- Copyright (c) 2022 Ivan Teplov -->
+<!-- Copyright (c) 2022-2023 Ivan Teplov -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -20,36 +20,17 @@
     <!-- Button to open a sheet -->
     <button type="button" id="open-sheet" aria-controls="sheet">Open Sheet</button>
 
-    <!-- The sheet component -->
-    <div id="sheet" class="sheet" aria-hidden="true" role="dialog">
-      <!-- Dark background for the sheet -->
-      <div class="overlay"></div>
+    <!-- Contents that will go inside of the sheet -->
+    <div id="sheet-body">
+      <h2>Hello, World!</h2>
+      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit explicabo vero quas eligendi, eos cupiditate sint aliquam a omnis commodi quos in libero veniam. Quidem, non a quibusdam consequuntur mollitia officia numquam sit quos dolorum quaerat reprehenderit laboriosam perspiciatis consequatur odit error dolore recusandae iste id quam magnam ut! Sint nulla minus excepturi libero officiis, deleniti, delectus obcaecati saepe natus rerum nesciunt! Nemo quo id ipsum fugiat voluptas ducimus incidunt nulla sed, voluptates modi exercitationem quod obcaecati corporis perspiciatis dolorum ullam provident sint iusto consequatur totam dolorem. Amet, praesentium accusamus dolore hic ad iusto nostrum exercitationem velit ex optio nihil obcaecati provident enim nobis molestiae cupiditate possimus error itaque facilis eligendi placeat eos quam! Consequatur eveniet corporis nam accusantium nemo harum non explicabo accusamus. Voluptatem laborum dolores magni voluptatibus doloribus sunt? Id quae vero, nemo nam dolore ab amet distinctio molestias excepturi blanditiis quia eos et eligendi magnam voluptas iusto.</p>
 
-      <!-- The sheet itself -->
-      <div class="contents">
-        <!-- Sheet controls -->
-        <header class="controls">
-          <!-- The thing to drag if you want to resize the sheet -->
-          <div class="draggable-area">
-            <div class="draggable-thumb"></div>
-          </div>
-          <!-- Button to close the sheet -->
-          <button class="close-sheet" type="button" title="Close the sheet">&times;</button>
-        </header>
-
-        <!-- Body of the sheet -->
-        <main class="body">
-          <h2>Hello, World!</h2>
-          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit explicabo vero quas eligendi, eos cupiditate sint aliquam a omnis commodi quos in libero veniam. Quidem, non a quibusdam consequuntur mollitia officia numquam sit quos dolorum quaerat reprehenderit laboriosam perspiciatis consequatur odit error dolore recusandae iste id quam magnam ut! Sint nulla minus excepturi libero officiis, deleniti, delectus obcaecati saepe natus rerum nesciunt! Nemo quo id ipsum fugiat voluptas ducimus incidunt nulla sed, voluptates modi exercitationem quod obcaecati corporis perspiciatis dolorum ullam provident sint iusto consequatur totam dolorem. Amet, praesentium accusamus dolore hic ad iusto nostrum exercitationem velit ex optio nihil obcaecati provident enim nobis molestiae cupiditate possimus error itaque facilis eligendi placeat eos quam! Consequatur eveniet corporis nam accusantium nemo harum non explicabo accusamus. Voluptatem laborum dolores magni voluptatibus doloribus sunt? Id quae vero, nemo nam dolore ab amet distinctio molestias excepturi blanditiis quia eos et eligendi magnam voluptas iusto.</p>
-
-          <p>Here is a little form to test this sheet:</p>
-          <form action="" method="get" class="column">
-            <input type="email" placeholder="Email field">
-            <textarea placeholder="Text field"></textarea>
-            <div contenteditable="true">Contenteditable block</div>
-          </form>
-        </main>
-      </div>
+      <p>Here is a little form to test this sheet:</p>
+      <form action="" method="get" class="column">
+        <input type="email" placeholder="Email field">
+        <textarea placeholder="Text field"></textarea>
+        <div contenteditable="true">Contenteditable block</div>
+      </form>
     </div>
   </body>
 </html>
diff --git a/main.css b/main.css
index 4e2f884..8cb2895 100644
--- a/main.css
+++ b/main.css
@@ -1,4 +1,4 @@
-/* Copyright (c) 2022 Ivan Teplov */
+/* Copyright (c) 2022-2023 Ivan Teplov */
 
 * {
   margin: 0;
@@ -158,12 +158,17 @@ button {
   flex-direction: column;
 
   overflow-y: auto;
-  gap: 1rem;
 
   padding: 1rem;
   box-sizing: border-box;
 }
 
+#sheet-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 form {
   gap: 1rem;
 }
diff --git a/main.js b/main.js
index 16fb1f5..54b26c0 100644
--- a/main.js
+++ b/main.js
@@ -1,99 +1,187 @@
-// Copyright (c) 2022 Ivan Teplov
-
-const $ = document.querySelector.bind(document)
-
-const openSheetButton = $("#open-sheet")
-const sheet = $("#sheet")
-const sheetContents = sheet.querySelector(".contents")
-const draggableArea = sheet.querySelector(".draggable-area")
-
-let sheetHeight // in vh
-
-const setSheetHeight = (value) => {
-  sheetHeight = Math.max(0, Math.min(100, value))
-  sheetContents.style.height = `${sheetHeight}vh`
-
-  if (sheetHeight === 100) {
-    sheetContents.classList.add("fullscreen")
-  } else {
-    sheetContents.classList.remove("fullscreen")
-  }
-}
-
-const setIsSheetShown = (isShown) => {
-  sheet.setAttribute("aria-hidden", String(!isShown))
-}
-
-// Open the sheet when clicking the 'open sheet' button
-openSheetButton.addEventListener("click", () => {
-  setSheetHeight(Math.min(50, 720 / window.innerHeight * 100))
-  setIsSheetShown(true)
-})
-
-// Hide the sheet when clicking the 'close' button
-sheet.querySelector(".close-sheet").addEventListener("click", () => {
-  setIsSheetShown(false)
-})
-
-// Hide the sheet when clicking the background
-sheet.querySelector(".overlay").addEventListener("click", () => {
-  setIsSheetShown(false)
-})
+// Copyright (c) 2022-2023 Ivan Teplov
 
+/**
+ * Check if the element is focused
+ * @param {HTMLElement}
+ */
 const isFocused = element => document.activeElement === element
 
-// Hide the sheet when pressing Escape if the target element
-// is not an input field
-window.addEventListener("keyup", (event) => {
-  const isSheetElementFocused =
-    sheet.contains(event.target) && isFocused(event.target)
-
-  if (event.key === "Escape" && !isSheetElementFocused) {
-    setIsSheetShown(false)
-  }
-})
-
+/**
+ * Get object that contains touch position (depending on event type)
+ * @param {MouseEvent|TouchEvent} event
+ * @returns {MouseEvent|Touch}
+ */
 const touchPosition = (event) =>
   event.touches ? event.touches[0] : event
 
-let dragPosition
+class BottomSheet {
+  #height = 0 // in vh (viewport height)
+  #contents
+  #sheet
+
+  /**
+   * @param {HTMLElement} contents
+   * @param {object} options
+   * @param {boolean?} options.closeOnBackgroundClick
+   * @param {boolean?} options.closeOnEscapeKey
+   */
+  constructor(contents, options = {}) {
+    this.options = {
+      closeOnBackgroundClick: true,
+      closeOnEscapeKey: true,
+      ...options
+    }
+
+    this.#wrapContents(contents)
+  }
 
-const onDragStart = (event) => {
-  dragPosition = touchPosition(event).pageY
-  sheetContents.classList.add("not-selectable")
-  draggableArea.style.cursor = document.body.style.cursor = "grabbing"
-}
+  /**
+   * Method to hide or show the sheet
+   * @param {boolean} isShown
+   */
+  setIsShown(isShown) {
+    this.#sheet.setAttribute("aria-hidden", String(!isShown))
+
+    if (!isShown) {
+      this.setHeight(0)
+    } else {
+      this.setHeight(50)
+    }
+  }
 
-const onDragMove = (event) => {
-  if (dragPosition === undefined) return
+  /**
+   * @param {number} value - height in vh (viewport height)
+   */
+  setHeight(value) {
+    if (typeof value !== "number") return
 
-  const y = touchPosition(event).pageY
-  const deltaY = dragPosition - y
-  const deltaHeight = deltaY / window.innerHeight * 100
+    this.#height = Math.max(0, Math.min(100, value))
+    this.#contents.style.height = `${this.#height}vh`
 
-  setSheetHeight(sheetHeight + deltaHeight)
-  dragPosition = y
-}
+    if (this.#height === 100) {
+      this.#contents.classList.add("fullscreen")
+    } else {
+      this.#contents.classList.remove("fullscreen")
+    }
+  }
 
-const onDragEnd = () => {
-  dragPosition = undefined
-  sheetContents.classList.remove("not-selectable")
-  draggableArea.style.cursor = document.body.style.cursor = ""
-
-  if (sheetHeight < 25) {
-    setIsSheetShown(false)
-  } else if (sheetHeight > 75) {
-    setSheetHeight(100)
-  } else {
-    setSheetHeight(50)
+  /**
+   * @param {HTMLElement} contents
+   */
+  #wrapContents(contents) {
+    const sheet = document.createElement("div")
+    sheet.classList.add("sheet")
+    sheet.setAttribute("role", "dialog")
+    sheet.setAttribute("aria-hidden", "true")
+    this.#sheet = sheet
+
+    const overlay = document.createElement("div")
+    overlay.classList.add("overlay")
+    sheet.appendChild(overlay)
+
+    // Hide the sheet when clicking at the background
+    overlay.addEventListener("click", () => {
+      if (this.options.closeOnBackgroundClick) {
+        this.setIsShown(false)
+      }
+    })
+
+    const contentsWrapper = document.createElement("div")
+    contentsWrapper.classList.add("contents")
+    sheet.appendChild(contentsWrapper)
+    this.#contents = contentsWrapper
+
+    const controlsHeader = document.createElement("header")
+    controlsHeader.classList.add("controls")
+    contentsWrapper.appendChild(controlsHeader)
+
+    const draggableArea = document.createElement("div")
+    draggableArea.classList.add("draggable-area")
+    controlsHeader.appendChild(draggableArea)
+
+    const draggableThumb = document.createElement("div")
+    draggableThumb.classList.add("draggable-thumb")
+    draggableArea.appendChild(draggableThumb)
+
+    // TODO: set up the aria-controls attribute
+    const closeButton = document.createElement("button")
+    closeButton.classList.add("close-sheet")
+    closeButton.setAttribute("type", "button")
+    closeButton.setAttribute("title", "Close the sheet")
+    closeButton.innerHTML = "&times;"
+    controlsHeader.appendChild(closeButton)
+
+    // Hide the sheet when clicking at the 'close' button
+    closeButton.addEventListener("click", () => {
+      this.setIsShown(false)
+    })
+
+    const sheetBody = document.createElement("main")
+    sheetBody.classList.add("body")
+    contentsWrapper.appendChild(sheetBody)
+
+    contents.replaceWith(sheet)
+    sheetBody.appendChild(contents)
+
+    // Hide the sheet when pressing Escape if the target element
+    // is not an input field
+    window.addEventListener("keyup", (event) => {
+      const isSheetElementFocused =
+        sheet.contains(event.target) && isFocused(event.target)
+
+      if (event.key === "Escape" && !isSheetElementFocused && this.options.closeOnEscapeKey) {
+        this.setIsShown(false)
+      }
+    })
+
+    let dragPosition
+
+    const onDragStart = (event) => {
+      dragPosition = touchPosition(event).pageY
+      contentsWrapper.classList.add("not-selectable")
+      draggableArea.style.cursor = document.body.style.cursor = "grabbing"
+    }
+
+    const onDragMove = (event) => {
+      if (dragPosition === undefined) return
+
+      const y = touchPosition(event).pageY
+      const deltaY = dragPosition - y
+      const deltaHeight = deltaY / window.innerHeight * 100
+
+      this.setHeight(this.#height + deltaHeight)
+      dragPosition = y
+    }
+
+    const onDragEnd = () => {
+      dragPosition = undefined
+      contentsWrapper.classList.remove("not-selectable")
+      draggableArea.style.cursor = document.body.style.cursor = ""
+
+      if (this.#height < 25) {
+        this.setIsShown(false)
+      } else if (this.#height > 75) {
+        this.setHeight(100)
+      } else {
+        this.setHeight(50)
+      }
+    }
+
+    draggableArea.addEventListener("mousedown", onDragStart)
+    draggableArea.addEventListener("touchstart", onDragStart)
+
+    window.addEventListener("mousemove", onDragMove)
+    window.addEventListener("touchmove", onDragMove)
+
+    window.addEventListener("mouseup", onDragEnd)
+    window.addEventListener("touchend", onDragEnd)
   }
 }
 
-draggableArea.addEventListener("mousedown", onDragStart)
-draggableArea.addEventListener("touchstart", onDragStart)
+const openSheetButton = document.querySelector("#open-sheet")
+const sheetBody = document.querySelector("#sheet-body")
+const sheet = new BottomSheet(sheetBody)
 
-window.addEventListener("mousemove", onDragMove)
-window.addEventListener("touchmove", onDragMove)
-
-window.addEventListener("mouseup", onDragEnd)
-window.addEventListener("touchend", onDragEnd)
+openSheetButton.addEventListener("click", () => {
+  sheet.setIsShown(true)
+})
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..36763f9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@ivteplo/bottom-sheet",
+  "version": "1.0.0",
+  "description": "Bottom sheet, implemented in pure HTML, CSS, and JavaScript",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ivteplo/bottom-sheet.git"
+  },
+  "author": "Ivan Teplov <iteplov7@gmail.com>",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/ivteplo/bottom-sheet/issues"
+  },
+  "homepage": "https://github.com/ivteplo/bottom-sheet#readme"
+}

From 291c709241e1e6806f664122f5a7b72725d8c8c4 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Thu, 20 Apr 2023 13:43:16 +0300
Subject: [PATCH 02/30] Set up Vite for building and testing

---
 .gitignore                    | 132 +++++++++
 main.js => library/index.js   |  10 +-
 package-lock.json             | 544 ++++++++++++++++++++++++++++++++++
 package.json                  |  27 +-
 index.html => test/index.html |   2 +-
 main.css => test/main.css     |   0
 test/main.js                  |  11 +
 test/vite.config.js           |  14 +
 vite.config.js                |  20 ++
 9 files changed, 746 insertions(+), 14 deletions(-)
 create mode 100644 .gitignore
 rename main.js => library/index.js (95%)
 create mode 100644 package-lock.json
 rename index.html => test/index.html (97%)
 rename main.css => test/main.css (100%)
 create mode 100644 test/main.js
 create mode 100644 test/vite.config.js
 create mode 100644 vite.config.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d062a73
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,132 @@
+build
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/main.js b/library/index.js
similarity index 95%
rename from main.js
rename to library/index.js
index 54b26c0..5e47dba 100644
--- a/main.js
+++ b/library/index.js
@@ -14,7 +14,7 @@ const isFocused = element => document.activeElement === element
 const touchPosition = (event) =>
   event.touches ? event.touches[0] : event
 
-class BottomSheet {
+export class BottomSheet {
   #height = 0 // in vh (viewport height)
   #contents
   #sheet
@@ -178,10 +178,4 @@ class BottomSheet {
   }
 }
 
-const openSheetButton = document.querySelector("#open-sheet")
-const sheetBody = document.querySelector("#sheet-body")
-const sheet = new BottomSheet(sheetBody)
-
-openSheetButton.addEventListener("click", () => {
-  sheet.setIsShown(true)
-})
+export default BottomSheet
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..9042a56
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,544 @@
+{
+  "name": "@ivteplo/bottom-sheet",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@ivteplo/bottom-sheet",
+      "version": "1.0.0",
+      "license": "Apache-2.0",
+      "devDependencies": {
+        "vite": "^4.3.0"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.17.tgz",
+      "integrity": "sha512-E6VAZwN7diCa3labs0GYvhEPL2M94WLF8A+czO8hfjREXxba8Ng7nM5VxV+9ihNXIY1iQO1XxUU4P7hbqbICxg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.17.tgz",
+      "integrity": "sha512-jaJ5IlmaDLFPNttv0ofcwy/cfeY4bh/n705Tgh+eLObbGtQBK3EPAu+CzL95JVE4nFAliyrnEu0d32Q5foavqg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.17.tgz",
+      "integrity": "sha512-446zpfJ3nioMC7ASvJB1pszHVskkw4u/9Eu8s5yvvsSDTzYh4p4ZIRj0DznSl3FBF0Z/mZfrKXTtt0QCoFmoHA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.17.tgz",
+      "integrity": "sha512-m/gwyiBwH3jqfUabtq3GH31otL/0sE0l34XKpSIqR7NjQ/XHQ3lpmQHLHbG8AHTGCw8Ao059GvV08MS0bhFIJQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.17.tgz",
+      "integrity": "sha512-4utIrsX9IykrqYaXR8ob9Ha2hAY2qLc6ohJ8c0CN1DR8yWeMrTgYFjgdeQ9LIoTOfLetXjuCu5TRPHT9yKYJVg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.17.tgz",
+      "integrity": "sha512-4PxjQII/9ppOrpEwzQ1b0pXCsFLqy77i0GaHodrmzH9zq2/NEhHMAMJkJ635Ns4fyJPFOlHMz4AsklIyRqFZWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.17.tgz",
+      "integrity": "sha512-lQRS+4sW5S3P1sv0z2Ym807qMDfkmdhUYX30GRBURtLTrJOPDpoU0kI6pVz1hz3U0+YQ0tXGS9YWveQjUewAJw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.17.tgz",
+      "integrity": "sha512-biDs7bjGdOdcmIk6xU426VgdRUpGg39Yz6sT9Xp23aq+IEHDb/u5cbmu/pAANpDB4rZpY/2USPhCA+w9t3roQg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.17.tgz",
+      "integrity": "sha512-2+pwLx0whKY1/Vqt8lyzStyda1v0qjJ5INWIe+d8+1onqQxHLLi3yr5bAa4gvbzhZqBztifYEu8hh1La5+7sUw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.17.tgz",
+      "integrity": "sha512-IBTTv8X60dYo6P2t23sSUYym8fGfMAiuv7PzJ+0LcdAndZRzvke+wTVxJeCq4WgjppkOpndL04gMZIFvwoU34Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.17.tgz",
+      "integrity": "sha512-WVMBtcDpATjaGfWfp6u9dANIqmU9r37SY8wgAivuKmgKHE+bWSuv0qXEFt/p3qXQYxJIGXQQv6hHcm7iWhWjiw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.17.tgz",
+      "integrity": "sha512-2kYCGh8589ZYnY031FgMLy0kmE4VoGdvfJkxLdxP4HJvWNXpyLhjOvxVsYjYZ6awqY4bgLR9tpdYyStgZZhi2A==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.17.tgz",
+      "integrity": "sha512-KIdG5jdAEeAKogfyMTcszRxy3OPbZhq0PPsW4iKKcdlbk3YE4miKznxV2YOSmiK/hfOZ+lqHri3v8eecT2ATwQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.17.tgz",
+      "integrity": "sha512-Cj6uWLBR5LWhcD/2Lkfg2NrkVsNb2sFM5aVEfumKB2vYetkA/9Uyc1jVoxLZ0a38sUhFk4JOVKH0aVdPbjZQeA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.17.tgz",
+      "integrity": "sha512-lK+SffWIr0XsFf7E0srBjhpkdFVJf3HEgXCwzkm69kNbRar8MhezFpkIwpk0qo2IOQL4JE4mJPJI8AbRPLbuOQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.17.tgz",
+      "integrity": "sha512-XcSGTQcWFQS2jx3lZtQi7cQmDYLrpLRyz1Ns1DzZCtn898cWfm5Icx/DEWNcTU+T+tyPV89RQtDnI7qL2PObPg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.17.tgz",
+      "integrity": "sha512-RNLCDmLP5kCWAJR+ItLM3cHxzXRTe4N00TQyQiimq+lyqVqZWGPAvcyfUBM0isE79eEZhIuGN09rAz8EL5KdLA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.17.tgz",
+      "integrity": "sha512-PAXswI5+cQq3Pann7FNdcpSUrhrql3wKjj3gVkmuz6OHhqqYxKvi6GgRBoaHjaG22HV/ZZEgF9TlS+9ftHVigA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.17.tgz",
+      "integrity": "sha512-V63egsWKnx/4V0FMYkr9NXWrKTB5qFftKGKuZKFIrAkO/7EWLFnbBZNM1CvJ6Sis+XBdPws2YQSHF1Gqf1oj/Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.17.tgz",
+      "integrity": "sha512-YtUXLdVnd6YBSYlZODjWzH+KzbaubV0YVd6UxSfoFfa5PtNJNaW+1i+Hcmjpg2nEe0YXUCNF5bkKy1NnBv1y7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.17.tgz",
+      "integrity": "sha512-yczSLRbDdReCO74Yfc5tKG0izzm+lPMYyO1fFTcn0QNwnKmc3K+HdxZWLGKg4pZVte7XVgcFku7TIZNbWEJdeQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.17.tgz",
+      "integrity": "sha512-FNZw7H3aqhF9OyRQbDDnzUApDXfC1N6fgBhkqEO2jvYCJ+DxMTfZVqg3AX0R1khg1wHTBRD5SdcibSJ+XF6bFg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.17.17",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.17.tgz",
+      "integrity": "sha512-/jUywtAymR8jR4qsa2RujlAF7Krpt5VWi72Q2yuLD4e/hvtNcFQ0I1j8m/bxq238pf3/0KO5yuXNpuLx8BE1KA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.17.17",
+        "@esbuild/android-arm64": "0.17.17",
+        "@esbuild/android-x64": "0.17.17",
+        "@esbuild/darwin-arm64": "0.17.17",
+        "@esbuild/darwin-x64": "0.17.17",
+        "@esbuild/freebsd-arm64": "0.17.17",
+        "@esbuild/freebsd-x64": "0.17.17",
+        "@esbuild/linux-arm": "0.17.17",
+        "@esbuild/linux-arm64": "0.17.17",
+        "@esbuild/linux-ia32": "0.17.17",
+        "@esbuild/linux-loong64": "0.17.17",
+        "@esbuild/linux-mips64el": "0.17.17",
+        "@esbuild/linux-ppc64": "0.17.17",
+        "@esbuild/linux-riscv64": "0.17.17",
+        "@esbuild/linux-s390x": "0.17.17",
+        "@esbuild/linux-x64": "0.17.17",
+        "@esbuild/netbsd-x64": "0.17.17",
+        "@esbuild/openbsd-x64": "0.17.17",
+        "@esbuild/sunos-x64": "0.17.17",
+        "@esbuild/win32-arm64": "0.17.17",
+        "@esbuild/win32-ia32": "0.17.17",
+        "@esbuild/win32-x64": "0.17.17"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "node_modules/postcss": {
+      "version": "8.4.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
+      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "3.20.6",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.6.tgz",
+      "integrity": "sha512-2yEB3nQXp/tBQDN0hJScJQheXdvU2wFhh6ld7K/aiZ1vYcak6N/BKjY1QrU6BvO2JWYS8bEs14FRaxXosxy2zw==",
+      "dev": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=14.18.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.0.tgz",
+      "integrity": "sha512-JTGFgDh3dVxeGBpuQX04Up+JZmuG6wu9414Ei36vQzaEruY/M4K0AgwtuB2b4HaBgB7R8l+LHxjB0jcgz4d2qQ==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.17.5",
+        "postcss": "^8.4.21",
+        "rollup": "^3.20.2"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      },
+      "peerDependencies": {
+        "@types/node": ">= 14",
+        "less": "*",
+        "sass": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 36763f9..f14cf8f 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,34 @@
 {
   "name": "@ivteplo/bottom-sheet",
+  "description": "Bottom sheet component, implemented in pure JavaScript",
+  "author": "Ivan Teplov <iteplov7@gmail.com>",
+  "license": "Apache-2.0",
   "version": "1.0.0",
-  "description": "Bottom sheet, implemented in pure HTML, CSS, and JavaScript",
-  "main": "main.js",
+
+  "type": "module",
+  "files": ["build"],
+  "main": "./build/index.umd.cjs",
+  "module": "./build/index.js",
+  "exports": {
+    ".": {
+      "require": "./build/index.umd.cjs",
+      "import": "./build/index.js"
+    }
+  },
+
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite --config test/vite.config.js",
+    "build": "vite build"
   },
+
+  "devDependencies": {
+    "vite": "^4.3.0"
+  },
+
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ivteplo/bottom-sheet.git"
   },
-  "author": "Ivan Teplov <iteplov7@gmail.com>",
-  "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/ivteplo/bottom-sheet/issues"
   },
diff --git a/index.html b/test/index.html
similarity index 97%
rename from index.html
rename to test/index.html
index 3eead87..dba55fd 100644
--- a/index.html
+++ b/test/index.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="main.css">
 
     <!-- Script that makes the sheet work -->
-    <script src="main.js" defer></script>
+    <script type="module" src="main.js" defer></script>
   </head>
   <body class="font-system column fill items-center justify-center">
     <!-- Button to open a sheet -->
diff --git a/main.css b/test/main.css
similarity index 100%
rename from main.css
rename to test/main.css
diff --git a/test/main.js b/test/main.js
new file mode 100644
index 0000000..544b249
--- /dev/null
+++ b/test/main.js
@@ -0,0 +1,11 @@
+// Copyright (c) 2022-2023 Ivan Teplov
+
+import BottomSheet from "../library/index"
+
+const openSheetButton = document.querySelector("#open-sheet")
+const sheetBody = document.querySelector("#sheet-body")
+const sheet = new BottomSheet(sheetBody)
+
+openSheetButton.addEventListener("click", () => {
+  sheet.setIsShown(true)
+})
diff --git a/test/vite.config.js b/test/vite.config.js
new file mode 100644
index 0000000..162a91f
--- /dev/null
+++ b/test/vite.config.js
@@ -0,0 +1,14 @@
+// Copyright (c) 2022-2023 Ivan Teplov
+
+import { defineConfig } from "vite"
+import { resolve } from "path"
+
+export default defineConfig({
+  root: __dirname,
+  build: {
+    outDir: resolve(__dirname, "./build/"),
+    rollupOptions: {
+      input: resolve(__dirname, "./index.html")
+    }
+  }
+})
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..875cb10
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,20 @@
+// Copyright (c) 2022-2023 Ivan Teplov
+
+import { defineConfig } from "vite"
+import { resolve } from "path"
+
+export default defineConfig({
+  build: {
+    outDir: resolve(__dirname, "./build/"),
+    lib: {
+      entry: resolve(__dirname, "./library/index.js"),
+      name: "BottomSheet",
+      fileName: "index"
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: []
+    }
+  }
+})

From 02bda793fe948fc6e8f37568e21128f2f10b8b7b Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Thu, 21 Sep 2023 22:01:23 +0200
Subject: [PATCH 03/30] Work in process: add basic functionality, use CSS
 modules

---
 library/index.js         |  27 ++---
 library/sheet.module.css | 120 +++++++++++++++++++++
 package-lock.json        | 219 ++++++++++++++++++++-------------------
 test/main.css            | 111 +-------------------
 test/main.js             |   5 +-
 test/vite.config.js      |   8 ++
 vite.config.js           |   8 ++
 7 files changed, 273 insertions(+), 225 deletions(-)
 create mode 100644 library/sheet.module.css

diff --git a/library/index.js b/library/index.js
index 5e47dba..6238781 100644
--- a/library/index.js
+++ b/library/index.js
@@ -1,4 +1,9 @@
+//
 // Copyright (c) 2022-2023 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
+
+import * as styles from "./sheet.module.css"
 
 /**
  * Check if the element is focused
@@ -70,13 +75,13 @@ export class BottomSheet {
    */
   #wrapContents(contents) {
     const sheet = document.createElement("div")
-    sheet.classList.add("sheet")
+    sheet.classList.add(styles.sheet)
     sheet.setAttribute("role", "dialog")
     sheet.setAttribute("aria-hidden", "true")
     this.#sheet = sheet
 
     const overlay = document.createElement("div")
-    overlay.classList.add("overlay")
+    overlay.classList.add(styles.overlay)
     sheet.appendChild(overlay)
 
     // Hide the sheet when clicking at the background
@@ -87,25 +92,25 @@ export class BottomSheet {
     })
 
     const contentsWrapper = document.createElement("div")
-    contentsWrapper.classList.add("contents")
+    contentsWrapper.classList.add(styles.contents)
     sheet.appendChild(contentsWrapper)
     this.#contents = contentsWrapper
 
     const controlsHeader = document.createElement("header")
-    controlsHeader.classList.add("controls")
+    controlsHeader.classList.add(styles.controls)
     contentsWrapper.appendChild(controlsHeader)
 
     const draggableArea = document.createElement("div")
-    draggableArea.classList.add("draggable-area")
+    draggableArea.classList.add(styles.draggableArea)
     controlsHeader.appendChild(draggableArea)
 
     const draggableThumb = document.createElement("div")
-    draggableThumb.classList.add("draggable-thumb")
+    draggableThumb.classList.add(styles.draggableThumb)
     draggableArea.appendChild(draggableThumb)
 
     // TODO: set up the aria-controls attribute
     const closeButton = document.createElement("button")
-    closeButton.classList.add("close-sheet")
+    closeButton.classList.add(styles.closeSheet)
     closeButton.setAttribute("type", "button")
     closeButton.setAttribute("title", "Close the sheet")
     closeButton.innerHTML = "&times;"
@@ -117,7 +122,7 @@ export class BottomSheet {
     })
 
     const sheetBody = document.createElement("main")
-    sheetBody.classList.add("body")
+    sheetBody.classList.add(styles.body)
     contentsWrapper.appendChild(sheetBody)
 
     contents.replaceWith(sheet)
@@ -138,7 +143,7 @@ export class BottomSheet {
 
     const onDragStart = (event) => {
       dragPosition = touchPosition(event).pageY
-      contentsWrapper.classList.add("not-selectable")
+      contentsWrapper.classList.add(styles.notSelectable)
       draggableArea.style.cursor = document.body.style.cursor = "grabbing"
     }
 
@@ -155,7 +160,7 @@ export class BottomSheet {
 
     const onDragEnd = () => {
       dragPosition = undefined
-      contentsWrapper.classList.remove("not-selectable")
+      contentsWrapper.classList.remove(styles.notSelectable)
       draggableArea.style.cursor = document.body.style.cursor = ""
 
       if (this.#height < 25) {
@@ -177,5 +182,3 @@ export class BottomSheet {
     window.addEventListener("touchend", onDragEnd)
   }
 }
-
-export default BottomSheet
diff --git a/library/sheet.module.css b/library/sheet.module.css
new file mode 100644
index 0000000..eaec87a
--- /dev/null
+++ b/library/sheet.module.css
@@ -0,0 +1,120 @@
+/*
+  Copyright (c) 2022-2023 Ivan Teplov
+  Licensed under the Apache license 2.0
+*/
+
+:root {
+  --bottom-sheet-background: #fff;
+  --bottom-sheet-foreground: #000;
+  --bottom-sheet-overlay-background: #888;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bottom-sheet-background: #000;
+    --bottom-sheet-foreground: #fff;
+  }
+}
+
+.sheet {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  visibility: visible;
+  transition: opacity 0.5s, visibility 0.5s;
+}
+
+.sheet[aria-hidden="true"] {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.sheet .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  background: var(--bottom-sheet-overlay-background);
+  opacity: 0.5;
+}
+
+.sheet .contents {
+  display: flex;
+  flex-direction: column;
+
+  border-radius: 1rem 1rem 0 0;
+
+  background: var(--bottom-sheet-background);
+
+  overflow-y: hidden;
+
+  --default-transitions: transform 0.5s, border-radius 0.5s;
+
+  transition: var(--default-transitions);
+  transform: translateY(0);
+
+  max-width: 70rem;
+  max-height: 100vh;
+  height: 30vh;
+
+  box-sizing: border-box;
+}
+
+.sheet .contents:not(.not-selectable) {
+  transition: var(--default-transitions), height 0.5s;
+}
+
+.sheet .contents.fullscreen {
+  border-radius: 0;
+}
+
+.sheet[aria-hidden="true"] .contents {
+  transform: translateY(100%);
+}
+
+.sheet .controls {
+  display: flex;
+}
+
+.sheet .draggable-area {
+  width: 3rem;
+  margin: auto;
+  padding: 1rem;
+  cursor: grab;
+}
+
+.sheet .draggable-thumb {
+  width: inherit;
+  height: 0.25rem;
+  background: var(--divider);
+  border-radius: 0.125rem;
+}
+
+.sheet .close-sheet {
+  border: none;
+  padding: 0.7rem;
+}
+
+.sheet .body {
+  flex-grow: 1;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: auto;
+
+  padding: 1rem;
+  box-sizing: border-box;
+}
diff --git a/package-lock.json b/package-lock.json
index 9042a56..4f5671b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,9 +13,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.17.tgz",
-      "integrity": "sha512-E6VAZwN7diCa3labs0GYvhEPL2M94WLF8A+czO8hfjREXxba8Ng7nM5VxV+9ihNXIY1iQO1XxUU4P7hbqbICxg==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
       "cpu": [
         "arm"
       ],
@@ -29,9 +29,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.17.tgz",
-      "integrity": "sha512-jaJ5IlmaDLFPNttv0ofcwy/cfeY4bh/n705Tgh+eLObbGtQBK3EPAu+CzL95JVE4nFAliyrnEu0d32Q5foavqg==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
       "cpu": [
         "arm64"
       ],
@@ -45,9 +45,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.17.tgz",
-      "integrity": "sha512-446zpfJ3nioMC7ASvJB1pszHVskkw4u/9Eu8s5yvvsSDTzYh4p4ZIRj0DznSl3FBF0Z/mZfrKXTtt0QCoFmoHA==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
       "cpu": [
         "x64"
       ],
@@ -61,9 +61,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.17.tgz",
-      "integrity": "sha512-m/gwyiBwH3jqfUabtq3GH31otL/0sE0l34XKpSIqR7NjQ/XHQ3lpmQHLHbG8AHTGCw8Ao059GvV08MS0bhFIJQ==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
       "cpu": [
         "arm64"
       ],
@@ -77,9 +77,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.17.tgz",
-      "integrity": "sha512-4utIrsX9IykrqYaXR8ob9Ha2hAY2qLc6ohJ8c0CN1DR8yWeMrTgYFjgdeQ9LIoTOfLetXjuCu5TRPHT9yKYJVg==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
       "cpu": [
         "x64"
       ],
@@ -93,9 +93,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.17.tgz",
-      "integrity": "sha512-4PxjQII/9ppOrpEwzQ1b0pXCsFLqy77i0GaHodrmzH9zq2/NEhHMAMJkJ635Ns4fyJPFOlHMz4AsklIyRqFZWA==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
       "cpu": [
         "arm64"
       ],
@@ -109,9 +109,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.17.tgz",
-      "integrity": "sha512-lQRS+4sW5S3P1sv0z2Ym807qMDfkmdhUYX30GRBURtLTrJOPDpoU0kI6pVz1hz3U0+YQ0tXGS9YWveQjUewAJw==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
       "cpu": [
         "x64"
       ],
@@ -125,9 +125,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.17.tgz",
-      "integrity": "sha512-biDs7bjGdOdcmIk6xU426VgdRUpGg39Yz6sT9Xp23aq+IEHDb/u5cbmu/pAANpDB4rZpY/2USPhCA+w9t3roQg==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
       "cpu": [
         "arm"
       ],
@@ -141,9 +141,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.17.tgz",
-      "integrity": "sha512-2+pwLx0whKY1/Vqt8lyzStyda1v0qjJ5INWIe+d8+1onqQxHLLi3yr5bAa4gvbzhZqBztifYEu8hh1La5+7sUw==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
       "cpu": [
         "arm64"
       ],
@@ -157,9 +157,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.17.tgz",
-      "integrity": "sha512-IBTTv8X60dYo6P2t23sSUYym8fGfMAiuv7PzJ+0LcdAndZRzvke+wTVxJeCq4WgjppkOpndL04gMZIFvwoU34Q==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
       "cpu": [
         "ia32"
       ],
@@ -173,9 +173,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.17.tgz",
-      "integrity": "sha512-WVMBtcDpATjaGfWfp6u9dANIqmU9r37SY8wgAivuKmgKHE+bWSuv0qXEFt/p3qXQYxJIGXQQv6hHcm7iWhWjiw==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
       "cpu": [
         "loong64"
       ],
@@ -189,9 +189,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.17.tgz",
-      "integrity": "sha512-2kYCGh8589ZYnY031FgMLy0kmE4VoGdvfJkxLdxP4HJvWNXpyLhjOvxVsYjYZ6awqY4bgLR9tpdYyStgZZhi2A==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
       "cpu": [
         "mips64el"
       ],
@@ -205,9 +205,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.17.tgz",
-      "integrity": "sha512-KIdG5jdAEeAKogfyMTcszRxy3OPbZhq0PPsW4iKKcdlbk3YE4miKznxV2YOSmiK/hfOZ+lqHri3v8eecT2ATwQ==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
       "cpu": [
         "ppc64"
       ],
@@ -221,9 +221,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.17.tgz",
-      "integrity": "sha512-Cj6uWLBR5LWhcD/2Lkfg2NrkVsNb2sFM5aVEfumKB2vYetkA/9Uyc1jVoxLZ0a38sUhFk4JOVKH0aVdPbjZQeA==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
       "cpu": [
         "riscv64"
       ],
@@ -237,9 +237,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.17.tgz",
-      "integrity": "sha512-lK+SffWIr0XsFf7E0srBjhpkdFVJf3HEgXCwzkm69kNbRar8MhezFpkIwpk0qo2IOQL4JE4mJPJI8AbRPLbuOQ==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
       "cpu": [
         "s390x"
       ],
@@ -253,9 +253,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.17.tgz",
-      "integrity": "sha512-XcSGTQcWFQS2jx3lZtQi7cQmDYLrpLRyz1Ns1DzZCtn898cWfm5Icx/DEWNcTU+T+tyPV89RQtDnI7qL2PObPg==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
       "cpu": [
         "x64"
       ],
@@ -269,9 +269,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.17.tgz",
-      "integrity": "sha512-RNLCDmLP5kCWAJR+ItLM3cHxzXRTe4N00TQyQiimq+lyqVqZWGPAvcyfUBM0isE79eEZhIuGN09rAz8EL5KdLA==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
       "cpu": [
         "x64"
       ],
@@ -285,9 +285,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.17.tgz",
-      "integrity": "sha512-PAXswI5+cQq3Pann7FNdcpSUrhrql3wKjj3gVkmuz6OHhqqYxKvi6GgRBoaHjaG22HV/ZZEgF9TlS+9ftHVigA==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
       "cpu": [
         "x64"
       ],
@@ -301,9 +301,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.17.tgz",
-      "integrity": "sha512-V63egsWKnx/4V0FMYkr9NXWrKTB5qFftKGKuZKFIrAkO/7EWLFnbBZNM1CvJ6Sis+XBdPws2YQSHF1Gqf1oj/Q==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
       "cpu": [
         "x64"
       ],
@@ -317,9 +317,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.17.tgz",
-      "integrity": "sha512-YtUXLdVnd6YBSYlZODjWzH+KzbaubV0YVd6UxSfoFfa5PtNJNaW+1i+Hcmjpg2nEe0YXUCNF5bkKy1NnBv1y7Q==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
       "cpu": [
         "arm64"
       ],
@@ -333,9 +333,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.17.tgz",
-      "integrity": "sha512-yczSLRbDdReCO74Yfc5tKG0izzm+lPMYyO1fFTcn0QNwnKmc3K+HdxZWLGKg4pZVte7XVgcFku7TIZNbWEJdeQ==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
       "cpu": [
         "ia32"
       ],
@@ -349,9 +349,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.17.tgz",
-      "integrity": "sha512-FNZw7H3aqhF9OyRQbDDnzUApDXfC1N6fgBhkqEO2jvYCJ+DxMTfZVqg3AX0R1khg1wHTBRD5SdcibSJ+XF6bFg==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
       "cpu": [
         "x64"
       ],
@@ -365,9 +365,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.17.17",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.17.tgz",
-      "integrity": "sha512-/jUywtAymR8jR4qsa2RujlAF7Krpt5VWi72Q2yuLD4e/hvtNcFQ0I1j8m/bxq238pf3/0KO5yuXNpuLx8BE1KA==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -377,34 +377,34 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.17.17",
-        "@esbuild/android-arm64": "0.17.17",
-        "@esbuild/android-x64": "0.17.17",
-        "@esbuild/darwin-arm64": "0.17.17",
-        "@esbuild/darwin-x64": "0.17.17",
-        "@esbuild/freebsd-arm64": "0.17.17",
-        "@esbuild/freebsd-x64": "0.17.17",
-        "@esbuild/linux-arm": "0.17.17",
-        "@esbuild/linux-arm64": "0.17.17",
-        "@esbuild/linux-ia32": "0.17.17",
-        "@esbuild/linux-loong64": "0.17.17",
-        "@esbuild/linux-mips64el": "0.17.17",
-        "@esbuild/linux-ppc64": "0.17.17",
-        "@esbuild/linux-riscv64": "0.17.17",
-        "@esbuild/linux-s390x": "0.17.17",
-        "@esbuild/linux-x64": "0.17.17",
-        "@esbuild/netbsd-x64": "0.17.17",
-        "@esbuild/openbsd-x64": "0.17.17",
-        "@esbuild/sunos-x64": "0.17.17",
-        "@esbuild/win32-arm64": "0.17.17",
-        "@esbuild/win32-ia32": "0.17.17",
-        "@esbuild/win32-x64": "0.17.17"
+        "@esbuild/android-arm": "0.18.20",
+        "@esbuild/android-arm64": "0.18.20",
+        "@esbuild/android-x64": "0.18.20",
+        "@esbuild/darwin-arm64": "0.18.20",
+        "@esbuild/darwin-x64": "0.18.20",
+        "@esbuild/freebsd-arm64": "0.18.20",
+        "@esbuild/freebsd-x64": "0.18.20",
+        "@esbuild/linux-arm": "0.18.20",
+        "@esbuild/linux-arm64": "0.18.20",
+        "@esbuild/linux-ia32": "0.18.20",
+        "@esbuild/linux-loong64": "0.18.20",
+        "@esbuild/linux-mips64el": "0.18.20",
+        "@esbuild/linux-ppc64": "0.18.20",
+        "@esbuild/linux-riscv64": "0.18.20",
+        "@esbuild/linux-s390x": "0.18.20",
+        "@esbuild/linux-x64": "0.18.20",
+        "@esbuild/netbsd-x64": "0.18.20",
+        "@esbuild/openbsd-x64": "0.18.20",
+        "@esbuild/sunos-x64": "0.18.20",
+        "@esbuild/win32-arm64": "0.18.20",
+        "@esbuild/win32-ia32": "0.18.20",
+        "@esbuild/win32-x64": "0.18.20"
       }
     },
     "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
       "optional": true,
@@ -440,9 +440,9 @@
       "dev": true
     },
     "node_modules/postcss": {
-      "version": "8.4.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "version": "8.4.30",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
+      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
       "dev": true,
       "funding": [
         {
@@ -468,9 +468,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.20.6",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.20.6.tgz",
-      "integrity": "sha512-2yEB3nQXp/tBQDN0hJScJQheXdvU2wFhh6ld7K/aiZ1vYcak6N/BKjY1QrU6BvO2JWYS8bEs14FRaxXosxy2zw==",
+      "version": "3.29.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.2.tgz",
+      "integrity": "sha512-CJouHoZ27v6siztc21eEQGo0kIcE5D1gVPA571ez0mMYb25LGYGKnVNXpEj5MGlepmDWGXNjDB5q7uNiPHC11A==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -493,14 +493,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.0.tgz",
-      "integrity": "sha512-JTGFgDh3dVxeGBpuQX04Up+JZmuG6wu9414Ei36vQzaEruY/M4K0AgwtuB2b4HaBgB7R8l+LHxjB0jcgz4d2qQ==",
+      "version": "4.4.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
+      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.17.5",
-        "postcss": "^8.4.21",
-        "rollup": "^3.20.2"
+        "esbuild": "^0.18.10",
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -508,12 +508,16 @@
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
       "optionalDependencies": {
         "fsevents": "~2.3.2"
       },
       "peerDependencies": {
         "@types/node": ">= 14",
         "less": "*",
+        "lightningcss": "^1.21.0",
         "sass": "*",
         "stylus": "*",
         "sugarss": "*",
@@ -526,6 +530,9 @@
         "less": {
           "optional": true
         },
+        "lightningcss": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         },
diff --git a/test/main.css b/test/main.css
index 8cb2895..37d38d8 100644
--- a/test/main.css
+++ b/test/main.css
@@ -1,4 +1,7 @@
-/* Copyright (c) 2022-2023 Ivan Teplov */
+/*
+  Copyright (c) 2022-2023 Ivan Teplov
+  Licensed under the Apache license 2.0
+*/
 
 * {
   margin: 0;
@@ -8,8 +11,7 @@
 :root {
   --background: #fff;
   --foreground: #000;
-  --divider: #dcdcdc;
-  --overlay: #888;
+  --divider: #eee;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -60,109 +62,6 @@ button {
   cursor: pointer;
 }
 
-.sheet {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 2;
-  visibility: visible;
-  transition: opacity 0.5s, visibility 0.5s;
-}
-
-.sheet[aria-hidden="true"] {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.sheet .overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  background: var(--overlay);
-  opacity: 0.5;
-}
-
-.sheet .contents {
-  display: flex;
-  flex-direction: column;
-
-  border-radius: 1rem 1rem 0 0;
-
-  background: var(--background);
-
-  overflow-y: hidden;
-
-  --default-transitions: transform 0.5s, border-radius 0.5s;
-
-  transition: var(--default-transitions);
-  transform: translateY(0);
-
-  max-width: 70rem;
-  max-height: 100vh;
-  height: 30vh;
-
-  box-sizing: border-box;
-}
-
-.sheet .contents:not(.not-selectable) {
-  transition: var(--default-transitions), height 0.5s;
-}
-
-.sheet .contents.fullscreen {
-  border-radius: 0;
-}
-
-.sheet[aria-hidden="true"] .contents {
-  transform: translateY(100%);
-}
-
-.sheet .controls {
-  display: flex;
-}
-
-.sheet .draggable-area {
-  width: 3rem;
-  margin: auto;
-  padding: 1rem;
-  cursor: grab;
-}
-
-.sheet .draggable-thumb {
-  width: inherit;
-  height: 0.25rem;
-  background: var(--divider);
-  border-radius: 0.125rem;
-}
-
-.sheet .close-sheet {
-  border: none;
-  padding: 0.7rem;
-}
-
-.sheet .body {
-  flex-grow: 1;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-
-  overflow-y: auto;
-
-  padding: 1rem;
-  box-sizing: border-box;
-}
-
 #sheet-body {
   display: flex;
   flex-direction: column;
diff --git a/test/main.js b/test/main.js
index 544b249..8256321 100644
--- a/test/main.js
+++ b/test/main.js
@@ -1,6 +1,9 @@
+//
 // Copyright (c) 2022-2023 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
 
-import BottomSheet from "../library/index"
+import { BottomSheet } from "../library/index"
 
 const openSheetButton = document.querySelector("#open-sheet")
 const sheetBody = document.querySelector("#sheet-body")
diff --git a/test/vite.config.js b/test/vite.config.js
index 162a91f..dcafab0 100644
--- a/test/vite.config.js
+++ b/test/vite.config.js
@@ -1,10 +1,18 @@
+//
 // Copyright (c) 2022-2023 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
 
 import { defineConfig } from "vite"
 import { resolve } from "path"
 
 export default defineConfig({
   root: __dirname,
+  css: {
+    modules: {
+      localsConvention: "camelCase"
+    }
+  },
   build: {
     outDir: resolve(__dirname, "./build/"),
     rollupOptions: {
diff --git a/vite.config.js b/vite.config.js
index 875cb10..b51c354 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,17 @@
+//
 // Copyright (c) 2022-2023 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
 
 import { defineConfig } from "vite"
 import { resolve } from "path"
 
 export default defineConfig({
+  css: {
+    modules: {
+      localsConvention: "camelCase"
+    }
+  },
   build: {
     outDir: resolve(__dirname, "./build/"),
     lib: {

From a29e81d7441c15606dcdc03c649d43c72772a657 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Thu, 21 Sep 2023 22:35:36 +0200
Subject: [PATCH 04/30] Improve DOM generation code by using JSX

---
 library/createElement.js |  56 ++++++++++++
 library/index.js         | 184 -------------------------------------
 library/index.jsx        | 193 +++++++++++++++++++++++++++++++++++++++
 test/index.html          |   5 +-
 vite.config.js           |   2 +-
 5 files changed, 254 insertions(+), 186 deletions(-)
 create mode 100644 library/createElement.js
 delete mode 100644 library/index.js
 create mode 100644 library/index.jsx

diff --git a/library/createElement.js b/library/createElement.js
new file mode 100644
index 0000000..be69b16
--- /dev/null
+++ b/library/createElement.js
@@ -0,0 +1,56 @@
+//
+// Copyright (c) 2022-2023 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
+
+const eventHandlerAttributePattern = /^on([A-Z][a-zA-Z]*)$/
+
+/**
+ * @param {string} tagName
+ * @param {Record<string, string|function>} attributes
+ * @param {HTMLElement|string|number|bigint} children
+ */
+export function createElement(tagName, attributes, ...children) {
+  const element = document.createElement(tagName)
+
+  for (const [attribute, value] of Object.entries(attributes)) {
+    const eventHandlerPatternMatches = attribute.match(eventHandlerAttributePattern)
+
+    if (!eventHandlerPatternMatches) {
+      element.setAttribute(attribute, value)
+    } else {
+      const event = eventHandlerPatternMatches[1].toLowerCase()
+      element.addEventListener(event, value)
+    }
+  }
+
+  for (const child of children) {
+    switch (typeof child) {
+      case "undefined":
+        break
+      case "string":
+      case "number":
+      case "bigint":
+        element.appendChild(document.createTextNode(String(child)))
+        break
+      case "object":
+        if (child === null) {
+          break
+        }
+
+        if (child instanceof HTMLElement) {
+          element.appendChild(child)
+          break
+        }
+
+        // Note: if the child is not of type HTMLElement,
+        // we will go into the default handler too
+      default:
+        throw new Error("Unexpected type of child: " + typeof child)
+    }
+  }
+
+  return element
+}
+
+export default createElement
diff --git a/library/index.js b/library/index.js
deleted file mode 100644
index 6238781..0000000
--- a/library/index.js
+++ /dev/null
@@ -1,184 +0,0 @@
-//
-// Copyright (c) 2022-2023 Ivan Teplov
-// Licensed under the Apache license 2.0
-//
-
-import * as styles from "./sheet.module.css"
-
-/**
- * Check if the element is focused
- * @param {HTMLElement}
- */
-const isFocused = element => document.activeElement === element
-
-/**
- * Get object that contains touch position (depending on event type)
- * @param {MouseEvent|TouchEvent} event
- * @returns {MouseEvent|Touch}
- */
-const touchPosition = (event) =>
-  event.touches ? event.touches[0] : event
-
-export class BottomSheet {
-  #height = 0 // in vh (viewport height)
-  #contents
-  #sheet
-
-  /**
-   * @param {HTMLElement} contents
-   * @param {object} options
-   * @param {boolean?} options.closeOnBackgroundClick
-   * @param {boolean?} options.closeOnEscapeKey
-   */
-  constructor(contents, options = {}) {
-    this.options = {
-      closeOnBackgroundClick: true,
-      closeOnEscapeKey: true,
-      ...options
-    }
-
-    this.#wrapContents(contents)
-  }
-
-  /**
-   * Method to hide or show the sheet
-   * @param {boolean} isShown
-   */
-  setIsShown(isShown) {
-    this.#sheet.setAttribute("aria-hidden", String(!isShown))
-
-    if (!isShown) {
-      this.setHeight(0)
-    } else {
-      this.setHeight(50)
-    }
-  }
-
-  /**
-   * @param {number} value - height in vh (viewport height)
-   */
-  setHeight(value) {
-    if (typeof value !== "number") return
-
-    this.#height = Math.max(0, Math.min(100, value))
-    this.#contents.style.height = `${this.#height}vh`
-
-    if (this.#height === 100) {
-      this.#contents.classList.add("fullscreen")
-    } else {
-      this.#contents.classList.remove("fullscreen")
-    }
-  }
-
-  /**
-   * @param {HTMLElement} contents
-   */
-  #wrapContents(contents) {
-    const sheet = document.createElement("div")
-    sheet.classList.add(styles.sheet)
-    sheet.setAttribute("role", "dialog")
-    sheet.setAttribute("aria-hidden", "true")
-    this.#sheet = sheet
-
-    const overlay = document.createElement("div")
-    overlay.classList.add(styles.overlay)
-    sheet.appendChild(overlay)
-
-    // Hide the sheet when clicking at the background
-    overlay.addEventListener("click", () => {
-      if (this.options.closeOnBackgroundClick) {
-        this.setIsShown(false)
-      }
-    })
-
-    const contentsWrapper = document.createElement("div")
-    contentsWrapper.classList.add(styles.contents)
-    sheet.appendChild(contentsWrapper)
-    this.#contents = contentsWrapper
-
-    const controlsHeader = document.createElement("header")
-    controlsHeader.classList.add(styles.controls)
-    contentsWrapper.appendChild(controlsHeader)
-
-    const draggableArea = document.createElement("div")
-    draggableArea.classList.add(styles.draggableArea)
-    controlsHeader.appendChild(draggableArea)
-
-    const draggableThumb = document.createElement("div")
-    draggableThumb.classList.add(styles.draggableThumb)
-    draggableArea.appendChild(draggableThumb)
-
-    // TODO: set up the aria-controls attribute
-    const closeButton = document.createElement("button")
-    closeButton.classList.add(styles.closeSheet)
-    closeButton.setAttribute("type", "button")
-    closeButton.setAttribute("title", "Close the sheet")
-    closeButton.innerHTML = "&times;"
-    controlsHeader.appendChild(closeButton)
-
-    // Hide the sheet when clicking at the 'close' button
-    closeButton.addEventListener("click", () => {
-      this.setIsShown(false)
-    })
-
-    const sheetBody = document.createElement("main")
-    sheetBody.classList.add(styles.body)
-    contentsWrapper.appendChild(sheetBody)
-
-    contents.replaceWith(sheet)
-    sheetBody.appendChild(contents)
-
-    // Hide the sheet when pressing Escape if the target element
-    // is not an input field
-    window.addEventListener("keyup", (event) => {
-      const isSheetElementFocused =
-        sheet.contains(event.target) && isFocused(event.target)
-
-      if (event.key === "Escape" && !isSheetElementFocused && this.options.closeOnEscapeKey) {
-        this.setIsShown(false)
-      }
-    })
-
-    let dragPosition
-
-    const onDragStart = (event) => {
-      dragPosition = touchPosition(event).pageY
-      contentsWrapper.classList.add(styles.notSelectable)
-      draggableArea.style.cursor = document.body.style.cursor = "grabbing"
-    }
-
-    const onDragMove = (event) => {
-      if (dragPosition === undefined) return
-
-      const y = touchPosition(event).pageY
-      const deltaY = dragPosition - y
-      const deltaHeight = deltaY / window.innerHeight * 100
-
-      this.setHeight(this.#height + deltaHeight)
-      dragPosition = y
-    }
-
-    const onDragEnd = () => {
-      dragPosition = undefined
-      contentsWrapper.classList.remove(styles.notSelectable)
-      draggableArea.style.cursor = document.body.style.cursor = ""
-
-      if (this.#height < 25) {
-        this.setIsShown(false)
-      } else if (this.#height > 75) {
-        this.setHeight(100)
-      } else {
-        this.setHeight(50)
-      }
-    }
-
-    draggableArea.addEventListener("mousedown", onDragStart)
-    draggableArea.addEventListener("touchstart", onDragStart)
-
-    window.addEventListener("mousemove", onDragMove)
-    window.addEventListener("touchmove", onDragMove)
-
-    window.addEventListener("mouseup", onDragEnd)
-    window.addEventListener("touchend", onDragEnd)
-  }
-}
diff --git a/library/index.jsx b/library/index.jsx
new file mode 100644
index 0000000..9cc26ef
--- /dev/null
+++ b/library/index.jsx
@@ -0,0 +1,193 @@
+//
+// Copyright (c) 2022-2023 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
+
+/** @jsx createElement */
+
+import { createElement } from "./createElement"
+import * as styles from "./sheet.module.css"
+
+/**
+ * Check if the element is focused
+ * @param {HTMLElement}
+ */
+const isFocused = element => document.activeElement === element
+
+/**
+ * Get object that contains touch position (depending on event type)
+ * @param {MouseEvent|TouchEvent} event
+ * @returns {MouseEvent|Touch}
+ */
+const touchPosition = (event) =>
+  event.touches ? event.touches[0] : event
+
+export class BottomSheet {
+  #height = 0 // in vh (viewport height)
+
+  #sheet
+  #contents
+  #draggableArea
+
+  /**
+   * @param {HTMLElement} contents
+   * @param {object} options
+   * @param {boolean?} options.closeOnBackgroundClick
+   * @param {boolean?} options.closeOnEscapeKey
+   */
+  constructor(contents, options = {}) {
+    this.options = {
+      closeOnBackgroundClick: true,
+      closeOnEscapeKey: true,
+      ...options
+    }
+
+    this.#wrapContents(contents)
+  }
+
+  /**
+   * Method to hide or show the sheet
+   * @param {boolean} isShown
+   */
+  setIsShown(isShown) {
+    this.#sheet.setAttribute("aria-hidden", String(!isShown))
+
+    if (!isShown) {
+      this.setHeight(0)
+    } else {
+      this.setHeight(50)
+    }
+  }
+
+  /**
+   * @param {number} value - height in vh (viewport height)
+   */
+  setHeight(value) {
+    if (typeof value !== "number") return
+
+    this.#height = Math.max(0, Math.min(100, value))
+    this.#contents.style.height = `${this.#height}vh`
+
+    if (this.#height === 100) {
+      this.#contents.classList.add("fullscreen")
+    } else {
+      this.#contents.classList.remove("fullscreen")
+    }
+  }
+
+  // Hide the sheet when clicking at the background
+  #onOverlayClick() {
+    if (this.options.closeOnBackgroundClick) {
+      this.setIsShown(false)
+    }
+  }
+
+  // Hide the sheet when clicking at the 'close' button
+  #onCloseButtonClick() {
+    this.setIsShown(false)
+  }
+
+  /**
+   * Hide the sheet when pressing Escape if the target element is not an input field
+   * @param {KeyboardEvent} event
+   */
+  #onKeyUp(event) {
+    const isSheetElementFocused =
+      this.#sheet.contains(event.target) && isFocused(event.target)
+
+    if (event.key === "Escape" && !isSheetElementFocused && this.options.closeOnEscapeKey) {
+      this.setIsShown(false)
+    }
+  }
+
+  #dragPosition
+
+  /**
+   * @param {MouseEvent|TouchEvent} event
+   */
+  #onDragStart(event) {
+    this.#dragPosition = touchPosition(event).pageY
+    this.#contents.classList.add(styles.notSelectable)
+    this.#draggableArea.style.cursor = document.body.style.cursor = "grabbing"
+  }
+
+  /**
+   * @param {MouseEvent|TouchEvent} event
+   */
+  #onDragMove(event) {
+    if (this.#dragPosition === undefined) return
+
+    const y = touchPosition(event).pageY
+    const deltaY = this.#dragPosition - y
+    const deltaHeight = deltaY / window.innerHeight * 100
+
+    this.setHeight(this.#height + deltaHeight)
+    this.#dragPosition = y
+  }
+
+  /**
+   * @param {MouseEvent|TouchEvent} event
+   */
+  #onDragEnd(event) {
+    this.#dragPosition = undefined
+    this.#contents.classList.remove(styles.notSelectable)
+    this.#draggableArea.style.cursor = document.body.style.cursor = ""
+
+    if (this.#height < 25) {
+      this.setIsShown(false)
+    } else if (this.#height > 75) {
+      this.setHeight(100)
+    } else {
+      this.setHeight(50)
+    }
+  }
+
+  /**
+   * @param {HTMLElement} contents
+   */
+  #wrapContents(contents) {
+    const sheet = (
+      <div class={styles.sheet} role="dialog" aria-hidden="true">
+        <div class={styles.overlay} onClick={this.#onOverlayClick.bind(this)}></div>
+        <div class={styles.contents}>
+          <header class={styles.controls}>
+            <div
+              class={styles.draggableArea}
+              onMouseDown={this.#onDragStart.bind(this)}
+              onTouchStart={this.#onDragStart.bind(this)}
+            >
+              <div class={styles.draggableThumb}></div>
+            </div>
+
+            {/* TODO: set up the aria-controls attribute */}
+            <button
+              type="button"
+              class={styles.closeSheet}
+              onClick={this.#onCloseButtonClick.bind(this)}
+              title="Close the sheet"
+            >
+              &times;
+            </button>
+          </header>
+          <main class={styles.body}></main>
+        </div>
+      </div>
+    )
+
+    this.#sheet = sheet
+    this.#contents = this.#sheet.querySelector("." + styles.contents)
+    this.#draggableArea = this.#contents.querySelector("." + styles.draggableArea)
+
+    const sheetBody = this.#contents.querySelector("." + styles.body)
+    contents.replaceWith(sheet)
+    sheetBody.appendChild(contents)
+
+    window.addEventListener("keyup", this.#onKeyUp.bind(this))
+
+    window.addEventListener("mousemove", this.#onDragMove.bind(this))
+    window.addEventListener("touchmove", this.#onDragMove.bind(this))
+
+    window.addEventListener("mouseup", this.#onDragEnd.bind(this))
+    window.addEventListener("touchend", this.#onDragEnd.bind(this))
+  }
+}
diff --git a/test/index.html b/test/index.html
index dba55fd..a7c4ea0 100644
--- a/test/index.html
+++ b/test/index.html
@@ -1,4 +1,7 @@
-<!-- Copyright (c) 2022-2023 Ivan Teplov -->
+<!--
+  Copyright (c) 2022-2023 Ivan Teplov
+  Licensed under the Apache license 2.0
+-->
 <!DOCTYPE html>
 <html lang="en">
   <head>
diff --git a/vite.config.js b/vite.config.js
index b51c354..0446e45 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,7 +15,7 @@ export default defineConfig({
   build: {
     outDir: resolve(__dirname, "./build/"),
     lib: {
-      entry: resolve(__dirname, "./library/index.js"),
+      entry: resolve(__dirname, "./library/index.jsx"),
       name: "BottomSheet",
       fileName: "index"
     },

From c1b47858b099e41f83f68b029734ddfe6447a391 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Thu, 21 Sep 2023 22:37:46 +0200
Subject: [PATCH 05/30] Update utilities.css version in the example code

---
 test/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/index.html b/test/index.html
index a7c4ea0..ffb4114 100644
--- a/test/index.html
+++ b/test/index.html
@@ -11,7 +11,7 @@
     <title>Bottom Sheet</title>
 
     <!-- Utility classes for CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/@ivteplo/utilities.css@1.0.0/build/main.css">
+    <link rel="stylesheet" href="https://unpkg.com/@ivteplo/utilities.css@1.1.1/build/main.css">
 
     <!-- Custom stylesheet -->
     <link rel="stylesheet" href="main.css">

From 3cc7c3cd126859dd240955dc9cd54324bec1b1ab Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Thu, 21 Sep 2023 22:51:27 +0200
Subject: [PATCH 06/30] Force the developer to specify an identifier for the
 sheet

---
 library/index.jsx | 60 +++++++++++++++++++++++++++++++++--------------
 test/index.html   |  2 +-
 test/main.js      |  8 ++++++-
 3 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/library/index.jsx b/library/index.jsx
index 9cc26ef..4635e8f 100644
--- a/library/index.jsx
+++ b/library/index.jsx
@@ -25,24 +25,46 @@ const touchPosition = (event) =>
 export class BottomSheet {
   #height = 0 // in vh (viewport height)
 
+  #identifier
+  #sheetWrapper
   #sheet
-  #contents
   #draggableArea
 
   /**
+   * @param {string} identifier
    * @param {HTMLElement} contents
    * @param {object} options
    * @param {boolean?} options.closeOnBackgroundClick
    * @param {boolean?} options.closeOnEscapeKey
    */
-  constructor(contents, options = {}) {
+  constructor(identifier, contents, options = {}) {
+    this.#identifier = identifier
+
     this.options = {
       closeOnBackgroundClick: true,
       closeOnEscapeKey: true,
       ...options
     }
 
-    this.#wrapContents(contents)
+    this.#mount(contents)
+  }
+
+  get id() {
+    return this.#identifier
+  }
+
+  get identifier() {
+    return this.#identifier
+  }
+
+  #validateSheetIdentifier() {
+    if (typeof this.#identifier !== "string") {
+      throw new TypeError(`Identifier is not specified`)
+    }
+
+    if (document.getElementById(this.#identifier) !== null) {
+      throw new TypeError(`The provided identifier is already in use`)
+    }
   }
 
   /**
@@ -50,7 +72,7 @@ export class BottomSheet {
    * @param {boolean} isShown
    */
   setIsShown(isShown) {
-    this.#sheet.setAttribute("aria-hidden", String(!isShown))
+    this.#sheetWrapper.setAttribute("aria-hidden", String(!isShown))
 
     if (!isShown) {
       this.setHeight(0)
@@ -66,12 +88,12 @@ export class BottomSheet {
     if (typeof value !== "number") return
 
     this.#height = Math.max(0, Math.min(100, value))
-    this.#contents.style.height = `${this.#height}vh`
+    this.#sheet.style.height = `${this.#height}vh`
 
     if (this.#height === 100) {
-      this.#contents.classList.add("fullscreen")
+      this.#sheet.classList.add("fullscreen")
     } else {
-      this.#contents.classList.remove("fullscreen")
+      this.#sheet.classList.remove("fullscreen")
     }
   }
 
@@ -93,7 +115,7 @@ export class BottomSheet {
    */
   #onKeyUp(event) {
     const isSheetElementFocused =
-      this.#sheet.contains(event.target) && isFocused(event.target)
+      this.#sheetWrapper.contains(event.target) && isFocused(event.target)
 
     if (event.key === "Escape" && !isSheetElementFocused && this.options.closeOnEscapeKey) {
       this.setIsShown(false)
@@ -107,7 +129,7 @@ export class BottomSheet {
    */
   #onDragStart(event) {
     this.#dragPosition = touchPosition(event).pageY
-    this.#contents.classList.add(styles.notSelectable)
+    this.#sheet.classList.add(styles.notSelectable)
     this.#draggableArea.style.cursor = document.body.style.cursor = "grabbing"
   }
 
@@ -130,7 +152,7 @@ export class BottomSheet {
    */
   #onDragEnd(event) {
     this.#dragPosition = undefined
-    this.#contents.classList.remove(styles.notSelectable)
+    this.#sheet.classList.remove(styles.notSelectable)
     this.#draggableArea.style.cursor = document.body.style.cursor = ""
 
     if (this.#height < 25) {
@@ -145,9 +167,11 @@ export class BottomSheet {
   /**
    * @param {HTMLElement} contents
    */
-  #wrapContents(contents) {
+  #mount(contents) {
+    this.#validateSheetIdentifier()
+
     const sheet = (
-      <div class={styles.sheet} role="dialog" aria-hidden="true">
+      <div class={styles.sheet} id={this.#identifier} role="dialog" aria-hidden="true">
         <div class={styles.overlay} onClick={this.#onOverlayClick.bind(this)}></div>
         <div class={styles.contents}>
           <header class={styles.controls}>
@@ -159,9 +183,9 @@ export class BottomSheet {
               <div class={styles.draggableThumb}></div>
             </div>
 
-            {/* TODO: set up the aria-controls attribute */}
             <button
               type="button"
+              aria-controls={this.#identifier}
               class={styles.closeSheet}
               onClick={this.#onCloseButtonClick.bind(this)}
               title="Close the sheet"
@@ -174,12 +198,12 @@ export class BottomSheet {
       </div>
     )
 
-    this.#sheet = sheet
-    this.#contents = this.#sheet.querySelector("." + styles.contents)
-    this.#draggableArea = this.#contents.querySelector("." + styles.draggableArea)
+    this.#sheetWrapper = sheet
+    this.#sheet = this.#sheetWrapper.querySelector("." + styles.contents)
+    this.#draggableArea = this.#sheet.querySelector("." + styles.draggableArea)
 
-    const sheetBody = this.#contents.querySelector("." + styles.body)
-    contents.replaceWith(sheet)
+    const sheetBody = this.#sheet.querySelector("." + styles.body)
+    contents.replaceWith(this.#sheetWrapper)
     sheetBody.appendChild(contents)
 
     window.addEventListener("keyup", this.#onKeyUp.bind(this))
diff --git a/test/index.html b/test/index.html
index ffb4114..1f2f8b1 100644
--- a/test/index.html
+++ b/test/index.html
@@ -21,7 +21,7 @@
   </head>
   <body class="font-system column fill items-center justify-center">
     <!-- Button to open a sheet -->
-    <button type="button" id="open-sheet" aria-controls="sheet">Open Sheet</button>
+    <button type="button" id="open-sheet" aria-controls="">Open Sheet</button>
 
     <!-- Contents that will go inside of the sheet -->
     <div id="sheet-body">
diff --git a/test/main.js b/test/main.js
index 8256321..d3aac5a 100644
--- a/test/main.js
+++ b/test/main.js
@@ -7,7 +7,13 @@ import { BottomSheet } from "../library/index"
 
 const openSheetButton = document.querySelector("#open-sheet")
 const sheetBody = document.querySelector("#sheet-body")
-const sheet = new BottomSheet(sheetBody)
+const sheet = new BottomSheet("sheet", sheetBody)
+
+/*
+  // Currently, aria-controls in written directly in HTML,
+  // but you can set it programmatically this way:
+  openSheetButton.setAttribute("aria-controls", sheet.id)
+*/
 
 openSheetButton.addEventListener("click", () => {
   sheet.setIsShown(true)

From bae85ba9654c47f60bcdaacf2d9774b61cf676b8 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Thu, 21 Sep 2023 23:00:51 +0200
Subject: [PATCH 07/30] Support `reference` in the `createElement` attribute to
 remove cryptic `querySelector`s

---
 library/createElement.js |  8 +++++---
 library/index.jsx        | 14 ++++++--------
 test/main.js             |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/library/createElement.js b/library/createElement.js
index be69b16..49cf7f7 100644
--- a/library/createElement.js
+++ b/library/createElement.js
@@ -16,11 +16,13 @@ export function createElement(tagName, attributes, ...children) {
   for (const [attribute, value] of Object.entries(attributes)) {
     const eventHandlerPatternMatches = attribute.match(eventHandlerAttributePattern)
 
-    if (!eventHandlerPatternMatches) {
-      element.setAttribute(attribute, value)
-    } else {
+    if (eventHandlerPatternMatches) {
       const event = eventHandlerPatternMatches[1].toLowerCase()
       element.addEventListener(event, value)
+    } else if (attribute === "reference") {
+      value(element)
+    } else {
+      element.setAttribute(attribute, value)
     }
   }
 
diff --git a/library/index.jsx b/library/index.jsx
index 4635e8f..a6417d3 100644
--- a/library/index.jsx
+++ b/library/index.jsx
@@ -170,13 +170,16 @@ export class BottomSheet {
   #mount(contents) {
     this.#validateSheetIdentifier()
 
-    const sheet = (
+    let sheetBody
+
+    this.#sheetWrapper = (
       <div class={styles.sheet} id={this.#identifier} role="dialog" aria-hidden="true">
         <div class={styles.overlay} onClick={this.#onOverlayClick.bind(this)}></div>
-        <div class={styles.contents}>
+        <div class={styles.contents} reference={sheet => this.#sheet = sheet}>
           <header class={styles.controls}>
             <div
               class={styles.draggableArea}
+              reference={area => this.#draggableArea = area}
               onMouseDown={this.#onDragStart.bind(this)}
               onTouchStart={this.#onDragStart.bind(this)}
             >
@@ -193,16 +196,11 @@ export class BottomSheet {
               &times;
             </button>
           </header>
-          <main class={styles.body}></main>
+          <main class={styles.body} reference={body => sheetBody = body}></main>
         </div>
       </div>
     )
 
-    this.#sheetWrapper = sheet
-    this.#sheet = this.#sheetWrapper.querySelector("." + styles.contents)
-    this.#draggableArea = this.#sheet.querySelector("." + styles.draggableArea)
-
-    const sheetBody = this.#sheet.querySelector("." + styles.body)
     contents.replaceWith(this.#sheetWrapper)
     sheetBody.appendChild(contents)
 
diff --git a/test/main.js b/test/main.js
index d3aac5a..6ff5bf6 100644
--- a/test/main.js
+++ b/test/main.js
@@ -5,8 +5,8 @@
 
 import { BottomSheet } from "../library/index"
 
-const openSheetButton = document.querySelector("#open-sheet")
-const sheetBody = document.querySelector("#sheet-body")
+const openSheetButton = document.getElementById("open-sheet")
+const sheetBody = document.getElementById("sheet-body")
 const sheet = new BottomSheet("sheet", sheetBody)
 
 /*

From 70bfedd190b7ce7f3c186b80cc050237a66c33af Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Sun, 1 Oct 2023 22:41:51 +0200
Subject: [PATCH 08/30] Update styles. Don't use CSS modules

---
 library/index.jsx                       | 22 +++++++++---------
 library/{sheet.module.css => sheet.css} | 31 ++++++++++++++++---------
 package.json                            |  4 +++-
 test/main.css                           | 23 +++++++++---------
 test/vite.config.js                     |  1 +
 vite.config.js                          |  1 +
 6 files changed, 48 insertions(+), 34 deletions(-)
 rename library/{sheet.module.css => sheet.css} (62%)

diff --git a/library/index.jsx b/library/index.jsx
index a6417d3..7985ddc 100644
--- a/library/index.jsx
+++ b/library/index.jsx
@@ -6,7 +6,7 @@
 /** @jsx createElement */
 
 import { createElement } from "./createElement"
-import * as styles from "./sheet.module.css"
+import "./sheet.css"
 
 /**
  * Check if the element is focused
@@ -129,7 +129,7 @@ export class BottomSheet {
    */
   #onDragStart(event) {
     this.#dragPosition = touchPosition(event).pageY
-    this.#sheet.classList.add(styles.notSelectable)
+    this.#sheet.classList.add("not-selectable")
     this.#draggableArea.style.cursor = document.body.style.cursor = "grabbing"
   }
 
@@ -152,7 +152,7 @@ export class BottomSheet {
    */
   #onDragEnd(event) {
     this.#dragPosition = undefined
-    this.#sheet.classList.remove(styles.notSelectable)
+    this.#sheet.classList.remove("not-selectable")
     this.#draggableArea.style.cursor = document.body.style.cursor = ""
 
     if (this.#height < 25) {
@@ -173,30 +173,30 @@ export class BottomSheet {
     let sheetBody
 
     this.#sheetWrapper = (
-      <div class={styles.sheet} id={this.#identifier} role="dialog" aria-hidden="true">
-        <div class={styles.overlay} onClick={this.#onOverlayClick.bind(this)}></div>
-        <div class={styles.contents} reference={sheet => this.#sheet = sheet}>
-          <header class={styles.controls}>
+      <div class="sheet" id={this.#identifier} role="dialog" aria-hidden="true">
+        <div class="overlay" onClick={this.#onOverlayClick.bind(this)}></div>
+        <div class="contents" reference={sheet => this.#sheet = sheet}>
+          <header class="controls">
             <div
-              class={styles.draggableArea}
+              class="draggable-area"
               reference={area => this.#draggableArea = area}
               onMouseDown={this.#onDragStart.bind(this)}
               onTouchStart={this.#onDragStart.bind(this)}
             >
-              <div class={styles.draggableThumb}></div>
+              <div class="draggable-thumb"></div>
             </div>
 
             <button
               type="button"
               aria-controls={this.#identifier}
-              class={styles.closeSheet}
+              class="close-sheet"
               onClick={this.#onCloseButtonClick.bind(this)}
               title="Close the sheet"
             >
               &times;
             </button>
           </header>
-          <main class={styles.body} reference={body => sheetBody = body}></main>
+          <main class="body" reference={body => sheetBody = body}></main>
         </div>
       </div>
     )
diff --git a/library/sheet.module.css b/library/sheet.css
similarity index 62%
rename from library/sheet.module.css
rename to library/sheet.css
index eaec87a..e79bc36 100644
--- a/library/sheet.module.css
+++ b/library/sheet.css
@@ -4,15 +4,18 @@
 */
 
 :root {
-  --bottom-sheet-background: #fff;
-  --bottom-sheet-foreground: #000;
-  --bottom-sheet-overlay-background: #888;
+  --bottom-sheet-background-color: white;
+  --bottom-sheet-foreground-color: black;
+  --bottom-sheet-overlay-background-color: #88888880;
+  --bottom-sheet-thumb-color: #eeeeee;
+  --bottom-sheet-transition-duration: 0.5s;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --bottom-sheet-background: #000;
-    --bottom-sheet-foreground: #fff;
+    --bottom-sheet-background-color: black;
+    --bottom-sheet-foreground-color: white;
+    --bottom-sheet-thumb-color: #333333;
   }
 }
 
@@ -29,7 +32,9 @@
   bottom: 0;
   z-index: 2;
   visibility: visible;
-  transition: opacity 0.5s, visibility 0.5s;
+  transition:
+    opacity var(--bottom-sheet-transition-duration),
+    visibility var(--bottom-sheet-transition-duration);
 }
 
 .sheet[aria-hidden="true"] {
@@ -45,7 +50,7 @@
   right: 0;
   bottom: 0;
   z-index: -1;
-  background: var(--bottom-sheet-overlay-background);
+  background: var(--bottom-sheet-overlay-background-color);
   opacity: 0.5;
 }
 
@@ -55,11 +60,13 @@
 
   border-radius: 1rem 1rem 0 0;
 
-  background: var(--bottom-sheet-background);
+  background: var(--bottom-sheet-background-color);
 
   overflow-y: hidden;
 
-  --default-transitions: transform 0.5s, border-radius 0.5s;
+  --default-transitions:
+    transform var(--bottom-sheet-transition-duration),
+    border-radius var(--bottom-sheet-transition-duration);
 
   transition: var(--default-transitions);
   transform: translateY(0);
@@ -72,7 +79,9 @@
 }
 
 .sheet .contents:not(.not-selectable) {
-  transition: var(--default-transitions), height 0.5s;
+  transition:
+    var(--default-transitions),
+    height var(--bottom-sheet-transition-duration);
 }
 
 .sheet .contents.fullscreen {
@@ -97,7 +106,7 @@
 .sheet .draggable-thumb {
   width: inherit;
   height: 0.25rem;
-  background: var(--divider);
+  background: var(--bottom-sheet-thumb-color);
   border-radius: 0.125rem;
 }
 
diff --git a/package.json b/package.json
index f14cf8f..0fd8bb2 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,13 @@
   "files": ["build"],
   "main": "./build/index.umd.cjs",
   "module": "./build/index.js",
+  "style": "./build/index.css",
   "exports": {
     ".": {
       "require": "./build/index.umd.cjs",
       "import": "./build/index.js"
-    }
+    },
+    "./index.css": "./build/index.css"
   },
 
   "scripts": {
diff --git a/test/main.css b/test/main.css
index 37d38d8..32637cd 100644
--- a/test/main.css
+++ b/test/main.css
@@ -9,16 +9,17 @@
 }
 
 :root {
-  --background: #fff;
-  --foreground: #000;
-  --divider: #eee;
+  --page-background-color: #fff;
+  --page-foreground-color: #000;
+  --section-divider-color: #eee;
+  --bottom-sheet-background-color: #000;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #000;
-    --foreground: #fff;
-    --divider: #333;
+    --page-background-color: #000;
+    --page-foreground-color: #fff;
+    --section-divider-color: #333;
   }
 }
 
@@ -28,8 +29,8 @@ body {
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
+  background: var(--page-background-color);
+  color: var(--page-foreground-color);
 
   overflow: hidden;
   line-height: 1.5;
@@ -45,13 +46,13 @@ textarea,
   padding: 1rem;
 
   border-radius: 1rem;
-  border: 0.0625rem solid var(--divider);
+  border: 0.0625rem solid var(--section-divider-color);
 
   font-family: inherit;
   font-size: 1rem;
 
-  background: var(--background);
-  color: var(--foreground);
+  background: var(--page-background-color);
+  color: var(--page-foreground-color);
 }
 
 textarea {
diff --git a/test/vite.config.js b/test/vite.config.js
index dcafab0..0579124 100644
--- a/test/vite.config.js
+++ b/test/vite.config.js
@@ -15,6 +15,7 @@ export default defineConfig({
   },
   build: {
     outDir: resolve(__dirname, "./build/"),
+    cssCodeSplit: true,
     rollupOptions: {
       input: resolve(__dirname, "./index.html")
     }
diff --git a/vite.config.js b/vite.config.js
index 0446e45..ef0ef66 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -19,6 +19,7 @@ export default defineConfig({
       name: "BottomSheet",
       fileName: "index"
     },
+    cssCodeSplit: true,
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library

From c5cdf8744eaa3aa07dc881da6170e030ccc2e299 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Sun, 1 Oct 2023 22:51:31 +0200
Subject: [PATCH 09/30] Rename CSS classes

---
 library/index.jsx | 26 +++++++++++++-------------
 library/sheet.css | 24 ++++++++++++------------
 test/main.css     |  1 -
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/library/index.jsx b/library/index.jsx
index 7985ddc..27cc545 100644
--- a/library/index.jsx
+++ b/library/index.jsx
@@ -26,7 +26,7 @@ export class BottomSheet {
   #height = 0 // in vh (viewport height)
 
   #identifier
-  #sheetWrapper
+  #wrapper
   #sheet
   #draggableArea
 
@@ -72,7 +72,7 @@ export class BottomSheet {
    * @param {boolean} isShown
    */
   setIsShown(isShown) {
-    this.#sheetWrapper.setAttribute("aria-hidden", String(!isShown))
+    this.#wrapper.setAttribute("aria-hidden", String(!isShown))
 
     if (!isShown) {
       this.setHeight(0)
@@ -115,7 +115,7 @@ export class BottomSheet {
    */
   #onKeyUp(event) {
     const isSheetElementFocused =
-      this.#sheetWrapper.contains(event.target) && isFocused(event.target)
+      this.#wrapper.contains(event.target) && isFocused(event.target)
 
     if (event.key === "Escape" && !isSheetElementFocused && this.options.closeOnEscapeKey) {
       this.setIsShown(false)
@@ -172,36 +172,36 @@ export class BottomSheet {
 
     let sheetBody
 
-    this.#sheetWrapper = (
-      <div class="sheet" id={this.#identifier} role="dialog" aria-hidden="true">
-        <div class="overlay" onClick={this.#onOverlayClick.bind(this)}></div>
-        <div class="contents" reference={sheet => this.#sheet = sheet}>
-          <header class="controls">
+    this.#wrapper = (
+      <div class="bottom-sheet-wrapper" id={this.#identifier} role="dialog" aria-hidden="true">
+        <div class="bottom-sheet-overlay" onClick={this.#onOverlayClick.bind(this)}></div>
+        <div class="bottom-sheet" reference={sheet => this.#sheet = sheet}>
+          <header class="bottom-sheet-controls">
             <div
-              class="draggable-area"
+              class="bottom-sheet-draggable-area"
               reference={area => this.#draggableArea = area}
               onMouseDown={this.#onDragStart.bind(this)}
               onTouchStart={this.#onDragStart.bind(this)}
             >
-              <div class="draggable-thumb"></div>
+              <div class="bottom-sheet-draggable-thumb"></div>
             </div>
 
             <button
               type="button"
               aria-controls={this.#identifier}
-              class="close-sheet"
+              class="bottom-sheet-close-button"
               onClick={this.#onCloseButtonClick.bind(this)}
               title="Close the sheet"
             >
               &times;
             </button>
           </header>
-          <main class="body" reference={body => sheetBody = body}></main>
+          <main class="bottom-sheet-body" reference={body => sheetBody = body}></main>
         </div>
       </div>
     )
 
-    contents.replaceWith(this.#sheetWrapper)
+    contents.replaceWith(this.#wrapper)
     sheetBody.appendChild(contents)
 
     window.addEventListener("keyup", this.#onKeyUp.bind(this))
diff --git a/library/sheet.css b/library/sheet.css
index e79bc36..0142689 100644
--- a/library/sheet.css
+++ b/library/sheet.css
@@ -19,7 +19,7 @@
   }
 }
 
-.sheet {
+.bottom-sheet-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -37,13 +37,13 @@
     visibility var(--bottom-sheet-transition-duration);
 }
 
-.sheet[aria-hidden="true"] {
+.bottom-sheet-wrapper[aria-hidden="true"] {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
 }
 
-.sheet .overlay {
+.bottom-sheet-wrapper .bottom-sheet-overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -54,7 +54,7 @@
   opacity: 0.5;
 }
 
-.sheet .contents {
+.bottom-sheet-wrapper .bottom-sheet {
   display: flex;
   flex-direction: column;
 
@@ -78,44 +78,44 @@
   box-sizing: border-box;
 }
 
-.sheet .contents:not(.not-selectable) {
+.bottom-sheet-wrapper .bottom-sheet:not(.not-selectable) {
   transition:
     var(--default-transitions),
     height var(--bottom-sheet-transition-duration);
 }
 
-.sheet .contents.fullscreen {
+.bottom-sheet-wrapper .bottom-sheet.fullscreen {
   border-radius: 0;
 }
 
-.sheet[aria-hidden="true"] .contents {
+.bottom-sheet-wrapper[aria-hidden="true"] .bottom-sheet {
   transform: translateY(100%);
 }
 
-.sheet .controls {
+.bottom-sheet-wrapper .bottom-sheet-controls {
   display: flex;
 }
 
-.sheet .draggable-area {
+.bottom-sheet-wrapper .bottom-sheet-draggable-area {
   width: 3rem;
   margin: auto;
   padding: 1rem;
   cursor: grab;
 }
 
-.sheet .draggable-thumb {
+.bottom-sheet-wrapper .bottom-sheet-draggable-thumb {
   width: inherit;
   height: 0.25rem;
   background: var(--bottom-sheet-thumb-color);
   border-radius: 0.125rem;
 }
 
-.sheet .close-sheet {
+.bottom-sheet-wrapper .bottom-sheet-close-button {
   border: none;
   padding: 0.7rem;
 }
 
-.sheet .body {
+.bottom-sheet-wrapper .bottom-sheet-body {
   flex-grow: 1;
   height: 100%;
 
diff --git a/test/main.css b/test/main.css
index 32637cd..902f4a7 100644
--- a/test/main.css
+++ b/test/main.css
@@ -12,7 +12,6 @@
   --page-background-color: #fff;
   --page-foreground-color: #000;
   --section-divider-color: #eee;
-  --bottom-sheet-background-color: #000;
 }
 
 @media (prefers-color-scheme: dark) {

From 05fe4fd10262c10a979a9e6d9548c3f4e2cf9526 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Sun, 1 Oct 2023 23:22:54 +0200
Subject: [PATCH 10/30] Add a method to unmount the bottom sheet component /
 restore initial HTML

---
 library/createElement.js |  5 ++-
 library/index.jsx        | 67 +++++++++++++++++++++++++++++++++-------
 2 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/library/createElement.js b/library/createElement.js
index 49cf7f7..1c3e146 100644
--- a/library/createElement.js
+++ b/library/createElement.js
@@ -6,12 +6,15 @@
 const eventHandlerAttributePattern = /^on([A-Z][a-zA-Z]*)$/
 
 /**
- * @param {string} tagName
+ * @template {string} Tag
+ * @param {Tag} tagName
  * @param {Record<string, string|function>} attributes
  * @param {HTMLElement|string|number|bigint} children
+ * @returns {ElementTagNameMap[Tag]|HTMLElement}
  */
 export function createElement(tagName, attributes, ...children) {
   const element = document.createElement(tagName)
+  attributes ??= {}
 
   for (const [attribute, value] of Object.entries(attributes)) {
     const eventHandlerPatternMatches = attribute.match(eventHandlerAttributePattern)
diff --git a/library/index.jsx b/library/index.jsx
index 27cc545..542a2cd 100644
--- a/library/index.jsx
+++ b/library/index.jsx
@@ -23,13 +23,32 @@ const touchPosition = (event) =>
   event.touches ? event.touches[0] : event
 
 export class BottomSheet {
+  /** @type {number} */
   #height = 0 // in vh (viewport height)
 
+  /** @type {string} */
   #identifier
+
+  /** @type {HTMLElement} */
   #wrapper
+
+  /** @type {HTMLElement} */
   #sheet
+
+  /** @type {HTMLElement} */
+  #sheetBody
+
+  /** @type {HTMLElement} */
   #draggableArea
 
+  /** Just methods with 'this' binded */
+  #eventListeners = {
+    onDragMove: this.#onDragMove.bind(this),
+    onDragStart: this.#onDragStart.bind(this),
+    onDragEnd: this.#onDragEnd.bind(this),
+    onKeyUp: this.#onKeyUp.bind(this),
+  }
+
   /**
    * @param {string} identifier
    * @param {HTMLElement} contents
@@ -165,13 +184,11 @@ export class BottomSheet {
   }
 
   /**
-   * @param {HTMLElement} contents
+   * @param {HTMLElement} bodyContents
    */
-  #mount(contents) {
+  #mount(bodyContents) {
     this.#validateSheetIdentifier()
 
-    let sheetBody
-
     this.#wrapper = (
       <div class="bottom-sheet-wrapper" id={this.#identifier} role="dialog" aria-hidden="true">
         <div class="bottom-sheet-overlay" onClick={this.#onOverlayClick.bind(this)}></div>
@@ -196,20 +213,46 @@ export class BottomSheet {
               &times;
             </button>
           </header>
-          <main class="bottom-sheet-body" reference={body => sheetBody = body}></main>
+          <main class="bottom-sheet-body" reference={body => this.#sheetBody = body}></main>
         </div>
       </div>
     )
 
-    contents.replaceWith(this.#wrapper)
-    sheetBody.appendChild(contents)
+    bodyContents.replaceWith(this.#wrapper)
+    this.#sheetBody.appendChild(bodyContents)
+
+    window.addEventListener("keyup", this.#eventListeners.onKeyUp)
+
+    window.addEventListener("mousemove", this.#eventListeners.onDragMove)
+    window.addEventListener("touchmove", this.#eventListeners.onDragMove)
+
+    window.addEventListener("mouseup", this.#eventListeners.onDragEnd)
+    window.addEventListener("touchend", this.#eventListeners.onDragEnd)
+  }
+
+  #unmounted = false
+
+  unmount() {
+    if (this.#unmounted) return;
+    this.#unmounted = true
+
+    /** @type {HTMLElement} */
+    const temporaryReplacement = <div />
+    this.#wrapper.replaceWith(temporaryReplacement)
+
+    for (const child of this.#sheetBody.children) {
+      this.#sheetBody.removeChild(child)
+      temporaryReplacement.parentElement.insertBefore(child, temporaryReplacement.nextSibling)
+    }
+
+    temporaryReplacement.parentElement.removeChild(temporaryReplacement)
 
-    window.addEventListener("keyup", this.#onKeyUp.bind(this))
+    window.removeEventListener("keyup", this.#eventListeners.onKeyUp)
 
-    window.addEventListener("mousemove", this.#onDragMove.bind(this))
-    window.addEventListener("touchmove", this.#onDragMove.bind(this))
+    window.removeEventListener("mousemove", this.#eventListeners.onDragMove)
+    window.removeEventListener("touchmove", this.#eventListeners.onDragMove)
 
-    window.addEventListener("mouseup", this.#onDragEnd.bind(this))
-    window.addEventListener("touchend", this.#onDragEnd.bind(this))
+    window.removeEventListener("mouseup", this.#eventListeners.onDragEnd)
+    window.removeEventListener("touchend", this.#eventListeners.onDragEnd)
   }
 }

From 8d4aa1c5fccf40983c9fcc04e3de08368aa2c2aa Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 24 Nov 2023 21:44:46 +0100
Subject: [PATCH 11/30] Fix test (`aria-controls` wasn't specified in HTML).
 Improve API

Now API is more universal. The sheet body won't be automatically replaced with the component code.
Instead, the library user should do it personally.

`aria-controls` was set to `""` in HTML.

The test has been updated according to the API changes.
Additionally, `<template>` is now used to store sheet body
(so that it won't be shown to the user in case the page will be loading for a long time)
---
 library/index.jsx | 112 +++++++++++++++++++++++++++++-----------------
 library/sheet.css |   7 +++
 test/index.html   |   6 +--
 test/main.js      |   6 ++-
 4 files changed, 86 insertions(+), 45 deletions(-)

diff --git a/library/index.jsx b/library/index.jsx
index 542a2cd..4b94e06 100644
--- a/library/index.jsx
+++ b/library/index.jsx
@@ -23,22 +23,40 @@ const touchPosition = (event) =>
   event.touches ? event.touches[0] : event
 
 export class BottomSheet {
-  /** @type {number} */
-  #height = 0 // in vh (viewport height)
+  /**
+   * Height of the sheet in viewport height units (vh)
+   * @type {number}
+   */
+  #height = 0
 
-  /** @type {string} */
+  /**
+   * DOM identifier of the sheet
+   * @type {string}
+   */
   #identifier
 
-  /** @type {HTMLElement} */
-  #wrapper
+  /**
+   * Body of the sheet (specified in the constructor)
+   * @type {HTMLElement}
+   */
+  #contents
 
-  /** @type {HTMLElement} */
-  #sheet
+  /**
+   * Wrapper of the sheet
+   * @type {HTMLElement|null}
+   */
+  #wrapper = null
 
-  /** @type {HTMLElement} */
-  #sheetBody
+  /**
+   * The sheet itself
+   * @type {HTMLElement|null}
+   */
+  #sheet = null
 
-  /** @type {HTMLElement} */
+  /**
+   * Gray area on the top of the sheet to resize the sheet
+   * @type {HTMLElement}
+   */
   #draggableArea
 
   /** Just methods with 'this' binded */
@@ -47,6 +65,8 @@ export class BottomSheet {
     onDragStart: this.#onDragStart.bind(this),
     onDragEnd: this.#onDragEnd.bind(this),
     onKeyUp: this.#onKeyUp.bind(this),
+    onCloseButtonClick: this.#onCloseButtonClick.bind(this),
+    onOverlayClick: this.#onOverlayClick.bind(this)
   }
 
   /**
@@ -58,14 +78,21 @@ export class BottomSheet {
    */
   constructor(identifier, contents, options = {}) {
     this.#identifier = identifier
+    this.#contents = contents
 
     this.options = {
       closeOnBackgroundClick: true,
       closeOnEscapeKey: true,
       ...options
     }
+  }
+
+  get html() {
+    if (!this.#wrapper) {
+      this.#renderHTML(this.#contents)
+    }
 
-    this.#mount(contents)
+    return this.#wrapper
   }
 
   get id() {
@@ -76,7 +103,7 @@ export class BottomSheet {
     return this.#identifier
   }
 
-  #validateSheetIdentifier() {
+  #validateParameters() {
     if (typeof this.#identifier !== "string") {
       throw new TypeError(`Identifier is not specified`)
     }
@@ -84,6 +111,10 @@ export class BottomSheet {
     if (document.getElementById(this.#identifier) !== null) {
       throw new TypeError(`The provided identifier is already in use`)
     }
+
+    if (this.#contents?.parentElement !== null) {
+      throw new Error("The contents of the bottom sheet should not be already mounted into the Document Object Model (DOM)")
+    }
   }
 
   /**
@@ -133,6 +164,10 @@ export class BottomSheet {
    * @param {KeyboardEvent} event
    */
   #onKeyUp(event) {
+    if (!this.#sheet) {
+      return this.#removeWindowEventListeners()
+    }
+
     const isSheetElementFocused =
       this.#wrapper.contains(event.target) && isFocused(event.target)
 
@@ -147,6 +182,10 @@ export class BottomSheet {
    * @param {MouseEvent|TouchEvent} event
    */
   #onDragStart(event) {
+    if (!this.#sheet) {
+      return this.#removeWindowEventListeners()
+    }
+
     this.#dragPosition = touchPosition(event).pageY
     this.#sheet.classList.add("not-selectable")
     this.#draggableArea.style.cursor = document.body.style.cursor = "grabbing"
@@ -156,6 +195,10 @@ export class BottomSheet {
    * @param {MouseEvent|TouchEvent} event
    */
   #onDragMove(event) {
+    if (!this.#sheet) {
+      return this.#removeWindowEventListeners()
+    }
+
     if (this.#dragPosition === undefined) return
 
     const y = touchPosition(event).pageY
@@ -167,9 +210,13 @@ export class BottomSheet {
   }
 
   /**
-   * @param {MouseEvent|TouchEvent} event
+   * @param {MouseEvent|TouchEvent} _event
    */
-  #onDragEnd(event) {
+  #onDragEnd(_event) {
+    if (!this.#sheet) {
+      return this.#removeWindowEventListeners()
+    }
+
     this.#dragPosition = undefined
     this.#sheet.classList.remove("not-selectable")
     this.#draggableArea.style.cursor = document.body.style.cursor = ""
@@ -186,19 +233,19 @@ export class BottomSheet {
   /**
    * @param {HTMLElement} bodyContents
    */
-  #mount(bodyContents) {
-    this.#validateSheetIdentifier()
+  #renderHTML(bodyContents) {
+    this.#validateParameters()
 
     this.#wrapper = (
       <div class="bottom-sheet-wrapper" id={this.#identifier} role="dialog" aria-hidden="true">
-        <div class="bottom-sheet-overlay" onClick={this.#onOverlayClick.bind(this)}></div>
+        <div class="bottom-sheet-overlay" onClick={this.#eventListeners.onOverlayClick}></div>
         <div class="bottom-sheet" reference={sheet => this.#sheet = sheet}>
           <header class="bottom-sheet-controls">
             <div
               class="bottom-sheet-draggable-area"
               reference={area => this.#draggableArea = area}
-              onMouseDown={this.#onDragStart.bind(this)}
-              onTouchStart={this.#onDragStart.bind(this)}
+              onMouseDown={this.#eventListeners.onDragStart}
+              onTouchStart={this.#eventListeners.onDragStart}
             >
               <div class="bottom-sheet-draggable-thumb"></div>
             </div>
@@ -207,20 +254,19 @@ export class BottomSheet {
               type="button"
               aria-controls={this.#identifier}
               class="bottom-sheet-close-button"
-              onClick={this.#onCloseButtonClick.bind(this)}
+              onClick={this.#eventListeners.onCloseButtonClick}
               title="Close the sheet"
             >
               &times;
             </button>
           </header>
-          <main class="bottom-sheet-body" reference={body => this.#sheetBody = body}></main>
+          <main class="bottom-sheet-body">
+            {bodyContents}
+          </main>
         </div>
       </div>
     )
 
-    bodyContents.replaceWith(this.#wrapper)
-    this.#sheetBody.appendChild(bodyContents)
-
     window.addEventListener("keyup", this.#eventListeners.onKeyUp)
 
     window.addEventListener("mousemove", this.#eventListeners.onDragMove)
@@ -230,23 +276,7 @@ export class BottomSheet {
     window.addEventListener("touchend", this.#eventListeners.onDragEnd)
   }
 
-  #unmounted = false
-
-  unmount() {
-    if (this.#unmounted) return;
-    this.#unmounted = true
-
-    /** @type {HTMLElement} */
-    const temporaryReplacement = <div />
-    this.#wrapper.replaceWith(temporaryReplacement)
-
-    for (const child of this.#sheetBody.children) {
-      this.#sheetBody.removeChild(child)
-      temporaryReplacement.parentElement.insertBefore(child, temporaryReplacement.nextSibling)
-    }
-
-    temporaryReplacement.parentElement.removeChild(temporaryReplacement)
-
+  #removeWindowEventListeners() {
     window.removeEventListener("keyup", this.#eventListeners.onKeyUp)
 
     window.removeEventListener("mousemove", this.#eventListeners.onDragMove)
diff --git a/library/sheet.css b/library/sheet.css
index 0142689..ecf293d 100644
--- a/library/sheet.css
+++ b/library/sheet.css
@@ -19,6 +19,12 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --bottom-sheet-transition-duration: 0.1s;
+  }
+}
+
 .bottom-sheet-wrapper {
   display: flex;
   flex-direction: column;
@@ -71,6 +77,7 @@
   transition: var(--default-transitions);
   transform: translateY(0);
 
+  min-width: 18rem;
   max-width: 70rem;
   max-height: 100vh;
   height: 30vh;
diff --git a/test/index.html b/test/index.html
index 1f2f8b1..09aa1c0 100644
--- a/test/index.html
+++ b/test/index.html
@@ -21,10 +21,10 @@
   </head>
   <body class="font-system column fill items-center justify-center">
     <!-- Button to open a sheet -->
-    <button type="button" id="open-sheet" aria-controls="">Open Sheet</button>
+    <button type="button" id="open-sheet" aria-controls="sheet">Open Sheet</button>
 
     <!-- Contents that will go inside of the sheet -->
-    <div id="sheet-body">
+    <template id="sheet-body-template">
       <h2>Hello, World!</h2>
       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit explicabo vero quas eligendi, eos cupiditate sint aliquam a omnis commodi quos in libero veniam. Quidem, non a quibusdam consequuntur mollitia officia numquam sit quos dolorum quaerat reprehenderit laboriosam perspiciatis consequatur odit error dolore recusandae iste id quam magnam ut! Sint nulla minus excepturi libero officiis, deleniti, delectus obcaecati saepe natus rerum nesciunt! Nemo quo id ipsum fugiat voluptas ducimus incidunt nulla sed, voluptates modi exercitationem quod obcaecati corporis perspiciatis dolorum ullam provident sint iusto consequatur totam dolorem. Amet, praesentium accusamus dolore hic ad iusto nostrum exercitationem velit ex optio nihil obcaecati provident enim nobis molestiae cupiditate possimus error itaque facilis eligendi placeat eos quam! Consequatur eveniet corporis nam accusantium nemo harum non explicabo accusamus. Voluptatem laborum dolores magni voluptatibus doloribus sunt? Id quae vero, nemo nam dolore ab amet distinctio molestias excepturi blanditiis quia eos et eligendi magnam voluptas iusto.</p>
 
@@ -34,6 +34,6 @@ <h2>Hello, World!</h2>
         <textarea placeholder="Text field"></textarea>
         <div contenteditable="true">Contenteditable block</div>
       </form>
-    </div>
+    </template>
   </body>
 </html>
diff --git a/test/main.js b/test/main.js
index 6ff5bf6..b2cec62 100644
--- a/test/main.js
+++ b/test/main.js
@@ -6,8 +6,12 @@
 import { BottomSheet } from "../library/index"
 
 const openSheetButton = document.getElementById("open-sheet")
-const sheetBody = document.getElementById("sheet-body")
+const sheetBodyTemplate = document.getElementById("sheet-body-template")
+const sheetBody = document.createElement("div")
+sheetBody.append(sheetBodyTemplate.content.cloneNode(true))
+
 const sheet = new BottomSheet("sheet", sheetBody)
+document.body.appendChild(sheet.html)
 
 /*
   // Currently, aria-controls in written directly in HTML,

From 2b73b8ca854fdc5ca861d7a52661b094907cd6c3 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 24 Nov 2023 22:24:43 +0100
Subject: [PATCH 12/30] Add some documentation

---
 README.md                        | 48 +++++++++++++++++++++++++++++++-
 library/{index.jsx => sheet.jsx} | 30 ++++++++++++++++++--
 package-lock.json                |  6 ++--
 package.json                     |  8 ++----
 vite.config.js                   |  2 +-
 5 files changed, 82 insertions(+), 12 deletions(-)
 rename library/{index.jsx => sheet.jsx} (93%)

diff --git a/README.md b/README.md
index e935c9b..f289c95 100644
--- a/README.md
+++ b/README.md
@@ -3,4 +3,50 @@ Bottom sheet, implemented in pure HTML, CSS, and JavaScript
 
 ## Features
 - There is a draggable area to resize the sheet
-- The sheet can be closed using a button in the top right corner or using the `Esc` key
+- The sheet can be closed using a button in the top right corner, using the `Esc` key, or by clicking at the overlay background
+  - This behavior is configurable. You can turn off the `Esc` or the overlay background click.
+
+
+## Example
+
+```html
+<button type="button" id="open-sheet">Open the sheet</button>
+
+<template id="sheet-body-template">
+  <h1>Hello world!</h1>
+</template>
+```
+
+```javascript
+import { BottomSheet } from "@ivteplo/bottom-sheet"
+
+
+// Get the button to open the sheet from the document object model (DOM)
+const openSheetButton = document.getElementById("open-sheet")
+
+// Get the sheet body template from the DOM
+const sheetBodyTemplate = document.getElementById("sheet-body-template")
+
+// Create an HTML element that will contain the contents of the template
+const sheetBody = document.createElement("div")
+
+// Clone the contents of the sheet body template and append them to the HTML element
+sheetBody.append(sheetBodyTemplate.contents.cloneNode(true))
+
+
+// Create the sheet. The first argument is the identifier of the sheet.
+// The second argument is the sheet body. The third is bottom sheet options.
+const sheet = new BottomSheet("sheet", sheetBody, {
+  closeOnBackgroundClick: true,
+  closeOnEscapeKey: true
+})
+
+// Append the sheet to the document body
+document.body.appendChild(sheet.html)
+
+// Make the sheet open on button click
+openSheetButton.addEventListener("click", () => {
+  sheet.setIsShown(true)
+})
+```
+
diff --git a/library/index.jsx b/library/sheet.jsx
similarity index 93%
rename from library/index.jsx
rename to library/sheet.jsx
index 4b94e06..aeffd5f 100644
--- a/library/index.jsx
+++ b/library/sheet.jsx
@@ -5,6 +5,8 @@
 
 /** @jsx createElement */
 
+/** @module BottomSheet */
+
 import { createElement } from "./createElement"
 import "./sheet.css"
 
@@ -22,6 +24,9 @@ const isFocused = element => document.activeElement === element
 const touchPosition = (event) =>
   event.touches ? event.touches[0] : event
 
+/**
+ * @alias BottomSheet
+ */
 export class BottomSheet {
   /**
    * Height of the sheet in viewport height units (vh)
@@ -85,8 +90,14 @@ export class BottomSheet {
       closeOnEscapeKey: true,
       ...options
     }
+
+    this.#validateParameters()
   }
 
+  /**
+   * Get the document object model (DOM) representation of the sheet
+   * @returns {HTMLElement}
+   */
   get html() {
     if (!this.#wrapper) {
       this.#renderHTML(this.#contents)
@@ -95,10 +106,19 @@ export class BottomSheet {
     return this.#wrapper
   }
 
+  /**
+   * Get the identifier of the sheet
+   * @returns {string}
+   */
   get id() {
     return this.#identifier
   }
 
+  /**
+   * Get the identifier of the sheet
+   * @alias id
+   * @returns {string}
+   */
   get identifier() {
     return this.#identifier
   }
@@ -147,14 +167,18 @@ export class BottomSheet {
     }
   }
 
-  // Hide the sheet when clicking at the background
+  /**
+   * Hide the sheet when clicking at the background
+   */
   #onOverlayClick() {
     if (this.options.closeOnBackgroundClick) {
       this.setIsShown(false)
     }
   }
 
-  // Hide the sheet when clicking at the 'close' button
+  /**
+   * Hide the sheet when clicking at the 'close' button
+   */
   #onCloseButtonClick() {
     this.setIsShown(false)
   }
@@ -286,3 +310,5 @@ export class BottomSheet {
     window.removeEventListener("touchend", this.#eventListeners.onDragEnd)
   }
 }
+
+export default BottomSheet
diff --git a/package-lock.json b/package-lock.json
index 4f5671b..e342fd1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -440,9 +440,9 @@
       "dev": true
     },
     "node_modules/postcss": {
-      "version": "8.4.30",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz",
-      "integrity": "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "dev": true,
       "funding": [
         {
diff --git a/package.json b/package.json
index 0fd8bb2..0c11ee4 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,10 @@
   "author": "Ivan Teplov <iteplov7@gmail.com>",
   "license": "Apache-2.0",
   "version": "1.0.0",
-
   "type": "module",
-  "files": ["build"],
+  "files": [
+    "build"
+  ],
   "main": "./build/index.umd.cjs",
   "module": "./build/index.js",
   "style": "./build/index.css",
@@ -17,16 +18,13 @@
     },
     "./index.css": "./build/index.css"
   },
-
   "scripts": {
     "dev": "vite --config test/vite.config.js",
     "build": "vite build"
   },
-
   "devDependencies": {
     "vite": "^4.3.0"
   },
-
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ivteplo/bottom-sheet.git"
diff --git a/vite.config.js b/vite.config.js
index ef0ef66..41acdbe 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,7 +15,7 @@ export default defineConfig({
   build: {
     outDir: resolve(__dirname, "./build/"),
     lib: {
-      entry: resolve(__dirname, "./library/index.jsx"),
+      entry: resolve(__dirname, "./library/sheet.jsx"),
       name: "BottomSheet",
       fileName: "index"
     },

From f939bf8f5d3ca266bf4e8907fe940f26c465db06 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 24 Nov 2023 23:05:49 +0100
Subject: [PATCH 13/30] Improve example inside README.md

---
 README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f289c95..f2182dc 100644
--- a/README.md
+++ b/README.md
@@ -3,13 +3,16 @@ Bottom sheet, implemented in pure HTML, CSS, and JavaScript
 
 ## Features
 - There is a draggable area to resize the sheet
-- The sheet can be closed using a button in the top right corner, using the `Esc` key, or by clicking at the overlay background
-  - This behavior is configurable. You can turn off the `Esc` or the overlay background click.
+- The sheet can be closed using a button in the top right corner, 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.
 
 
 ## Example
 
 ```html
+<!-- Insert this into the `<head>` if you want to enable the base styles for the sheet -->
+<link rel="stylesheet" type="text/css" href="/path/to/the/library/build/index.css">
+
 <button type="button" id="open-sheet">Open the sheet</button>
 
 <template id="sheet-body-template">

From 0cf102ece6eff95187527ed3e44dc3c0381e7361 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Wed, 13 Dec 2023 21:48:53 +0100
Subject: [PATCH 14/30] Use null-coalescing operator when calling reference
 setter in `createElement`

---
 library/createElement.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/library/createElement.js b/library/createElement.js
index 1c3e146..92afe1e 100644
--- a/library/createElement.js
+++ b/library/createElement.js
@@ -23,7 +23,7 @@ export function createElement(tagName, attributes, ...children) {
       const event = eventHandlerPatternMatches[1].toLowerCase()
       element.addEventListener(event, value)
     } else if (attribute === "reference") {
-      value(element)
+      value?.(element)
     } else {
       element.setAttribute(attribute, value)
     }

From 6c42522fc0b66b293bcd05d9a110029da633584d Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Wed, 13 Dec 2023 22:32:03 +0100
Subject: [PATCH 15/30] Fix wrong library path in the test page

---
 test/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/main.js b/test/main.js
index b2cec62..7ab6607 100644
--- a/test/main.js
+++ b/test/main.js
@@ -3,7 +3,7 @@
 // Licensed under the Apache license 2.0
 //
 
-import { BottomSheet } from "../library/index"
+import { BottomSheet } from "../library/sheet"
 
 const openSheetButton = document.getElementById("open-sheet")
 const sheetBodyTemplate = document.getElementById("sheet-body-template")

From 7c2dc3c71697e76da624faaca2a9b1481b251647 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 15 Dec 2023 21:45:00 +0100
Subject: [PATCH 16/30] Trigger `hide` and `show` events on the sheet

---
 library/displayStateChangeObserver.js | 76 +++++++++++++++++++++++++++
 library/sheet.jsx                     | 24 ++++++++-
 test/main.js                          |  8 +++
 3 files changed, 106 insertions(+), 2 deletions(-)
 create mode 100644 library/displayStateChangeObserver.js

diff --git a/library/displayStateChangeObserver.js b/library/displayStateChangeObserver.js
new file mode 100644
index 0000000..331c4e2
--- /dev/null
+++ b/library/displayStateChangeObserver.js
@@ -0,0 +1,76 @@
+//
+// Copyright (c) 2022-2023 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
+
+export class BottomSheetDisplayStateChangeObserver extends MutationObserver {
+  /** @type {Map<Node, boolean>} */
+  #isHiddenMap = new Map()
+
+  constructor() {
+    super((mutations, _observer) => {
+      for (const mutation of mutations) {
+        this.#onMutation(mutation)
+      }
+    })
+  }
+
+  #attributeName = "aria-hidden"
+  #isHidden = "true"
+  #onHideEventName = "hide"
+  #onShowEventName = "show"
+
+  /**
+   * @param {MutationRecord} mutation
+   */
+  #onMutation(mutation) {
+    if (!(
+      mutation.type === "attributes" &&
+      mutation.attributeName === this.#attributeName
+    )) {
+      return
+    }
+
+    const isNowHidden = mutation.target.getAttribute(this.#attributeName) === this.#isHidden
+    const wasHidden = this.#isHiddenMap.get(mutation.target)
+
+    if (isNowHidden !== wasHidden) {
+      this.#isHiddenMap.set(mutation.target, isNowHidden)
+
+      const eventType = isNowHidden ? this.#onHideEventName : this.#onShowEventName
+      mutation.target.dispatchEvent(new Event(eventType, {
+        bubbles: false,
+        cancelable: false,
+        composed: false
+      }))
+    }
+  }
+
+  /**
+   * @param {Node}
+   */
+  observe(sheetWrapper) {
+    this.#isHiddenMap.set(
+      sheetWrapper,
+      sheetWrapper.getAttribute(this.#attributeName) === this.#isHidden
+    )
+
+    super.observe(sheetWrapper, {
+      attributes: true,
+      attributeFilter: [this.#attributeName]
+    })
+  }
+
+  /**
+   * @param {Node} node
+   */
+  handleChangesAndDisconnect(node) {
+    for (const mutation of this.takeRecords()) {
+      this.#onMutation(mutation)
+    }
+
+    this.disconnect(node)
+  }
+}
+
+export default BottomSheetDisplayStateChangeObserver
diff --git a/library/sheet.jsx b/library/sheet.jsx
index aeffd5f..8544bfa 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -7,6 +7,7 @@
 
 /** @module BottomSheet */
 
+import { BottomSheetDisplayStateChangeObserver } from "./displayStateChangeObserver"
 import { createElement } from "./createElement"
 import "./sheet.css"
 
@@ -24,6 +25,9 @@ const isFocused = element => document.activeElement === element
 const touchPosition = (event) =>
   event.touches ? event.touches[0] : event
 
+
+const sheetDisplayStateChangeObserver = new BottomSheetDisplayStateChangeObserver()
+
 /**
  * @alias BottomSheet
  */
@@ -125,11 +129,11 @@ export class BottomSheet {
 
   #validateParameters() {
     if (typeof this.#identifier !== "string") {
-      throw new TypeError(`Identifier is not specified`)
+      throw new TypeError("Identifier is not specified")
     }
 
     if (document.getElementById(this.#identifier) !== null) {
-      throw new TypeError(`The provided identifier is already in use`)
+      throw new TypeError(`The provided identifier ${this.#identifier} is already in use`)
     }
 
     if (this.#contents?.parentElement !== null) {
@@ -167,6 +171,15 @@ export class BottomSheet {
     }
   }
 
+  /**
+   * Add event listener to the sheet
+   * @param {"hide"|"show"|string} event
+   * @param {(event: Event) => any} callback
+   */
+  addEventListener(event, callback) {
+    this.html.addEventListener(event, callback)
+  }
+
   /**
    * Hide the sheet when clicking at the background
    */
@@ -291,6 +304,11 @@ export class BottomSheet {
       </div>
     )
 
+    sheetDisplayStateChangeObserver.observe(this.#wrapper, {
+      attributes: true,
+      attributeFilter: ["aria-hidden"]
+    })
+
     window.addEventListener("keyup", this.#eventListeners.onKeyUp)
 
     window.addEventListener("mousemove", this.#eventListeners.onDragMove)
@@ -301,6 +319,8 @@ export class BottomSheet {
   }
 
   #removeWindowEventListeners() {
+    sheetDisplayStateChangeObserver.handleChangesAndDisconnect(this.#wrapper)
+
     window.removeEventListener("keyup", this.#eventListeners.onKeyUp)
 
     window.removeEventListener("mousemove", this.#eventListeners.onDragMove)
diff --git a/test/main.js b/test/main.js
index 7ab6607..9c18021 100644
--- a/test/main.js
+++ b/test/main.js
@@ -22,3 +22,11 @@ document.body.appendChild(sheet.html)
 openSheetButton.addEventListener("click", () => {
   sheet.setIsShown(true)
 })
+
+sheet.addEventListener("hide", () => {
+  console.log("The sheet has been hidden")
+})
+
+sheet.addEventListener("show", () => {
+  console.log("The sheet has been shown")
+})

From 4f0e9aefd488c5e6e3c2f5aca3a45454a2609047 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 15 Dec 2023 22:11:15 +0100
Subject: [PATCH 17/30] Document the new code. Improve names and code style

---
 library/displayStateChangeObserver.js | 83 +++++++++++++++++----------
 library/sheet.jsx                     | 37 ++++++++++--
 2 files changed, 87 insertions(+), 33 deletions(-)

diff --git a/library/displayStateChangeObserver.js b/library/displayStateChangeObserver.js
index 331c4e2..cae23f4 100644
--- a/library/displayStateChangeObserver.js
+++ b/library/displayStateChangeObserver.js
@@ -3,10 +3,10 @@
 // Licensed under the Apache license 2.0
 //
 
+/**
+ * Mutation observer that triggers events whenever the bottom sheets becomes hidden or shown.
+ */
 export class BottomSheetDisplayStateChangeObserver extends MutationObserver {
-  /** @type {Map<Node, boolean>} */
-  #isHiddenMap = new Map()
-
   constructor() {
     super((mutations, _observer) => {
       for (const mutation of mutations) {
@@ -15,29 +15,44 @@ export class BottomSheetDisplayStateChangeObserver extends MutationObserver {
     })
   }
 
-  #attributeName = "aria-hidden"
-  #isHidden = "true"
-  #onHideEventName = "hide"
-  #onShowEventName = "show"
+  #observedAttributeName = "aria-hidden"
+
+  #eventNames = {
+    hide: "hide",
+    show: "show"
+  }
+
+  /**
+   * This object maps bottom sheets to their current state (hidden = true, shown = false)
+   * @type {Map<HTMLElement, boolean>}
+   */
+  #sheetIsHiddenMap = new Map()
+
+  /**
+   * Check whether the element is hidden
+   * @param {HTMLElement} element
+   * @returns {boolean}
+   */
+  #isHidden(element) {
+    return element.getAttribute("aria-hidden") === "true"
+  }
 
   /**
+   * Handle a DOM mutation
    * @param {MutationRecord} mutation
+   * @returns {void}
    */
   #onMutation(mutation) {
-    if (!(
-      mutation.type === "attributes" &&
-      mutation.attributeName === this.#attributeName
-    )) {
-      return
-    }
-
-    const isNowHidden = mutation.target.getAttribute(this.#attributeName) === this.#isHidden
-    const wasHidden = this.#isHiddenMap.get(mutation.target)
+    const wasHidden = this.#sheetIsHiddenMap.get(mutation.target)
+    const isNowHidden = this.#isHidden(mutation.target)
 
     if (isNowHidden !== wasHidden) {
-      this.#isHiddenMap.set(mutation.target, isNowHidden)
+      this.#sheetIsHiddenMap.set(mutation.target, isNowHidden)
+
+      const eventType = isNowHidden
+        ? this.#eventNames.hide
+        : this.#eventNames.show
 
-      const eventType = isNowHidden ? this.#onHideEventName : this.#onShowEventName
       mutation.target.dispatchEvent(new Event(eventType, {
         bubbles: false,
         cancelable: false,
@@ -47,29 +62,39 @@ export class BottomSheetDisplayStateChangeObserver extends MutationObserver {
   }
 
   /**
-   * @param {Node}
+   * Observe element attribute changes
+   * @param {HTMLElement} element
+   * @returns {void}
    */
-  observe(sheetWrapper) {
-    this.#isHiddenMap.set(
-      sheetWrapper,
-      sheetWrapper.getAttribute(this.#attributeName) === this.#isHidden
-    )
+  observe(element) {
+    if (!(element instanceof HTMLElement)) {
+      throw new Error("This observer can only be used with HTML elements")
+    }
 
-    super.observe(sheetWrapper, {
+    this.#sheetIsHiddenMap.set(element, this.#isHidden(element))
+
+    super.observe(element, {
       attributes: true,
-      attributeFilter: [this.#attributeName]
+      attributeFilter: [this.#observedAttributeName]
     })
   }
 
   /**
-   * @param {Node} node
+   * Method to process pending mutations and stop observing an object
+   * @param {HTMLElement} element
+   * @returns {void}
    */
-  handleChangesAndDisconnect(node) {
+  handleChangesAndDisconnect(element) {
+    if (!this.#sheetIsHiddenMap.has(element)) {
+      return
+    }
+
     for (const mutation of this.takeRecords()) {
       this.#onMutation(mutation)
     }
 
-    this.disconnect(node)
+    this.disconnect(element)
+    this.#sheetIsHiddenMap.delete(element)
   }
 }
 
diff --git a/library/sheet.jsx b/library/sheet.jsx
index 8544bfa..1786e8d 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -14,6 +14,7 @@ import "./sheet.css"
 /**
  * Check if the element is focused
  * @param {HTMLElement}
+ * @returns {boolean}
  */
 const isFocused = element => document.activeElement === element
 
@@ -127,6 +128,10 @@ export class BottomSheet {
     return this.#identifier
   }
 
+  /**
+   * Check whether the parameters provided in the constructor are all valid
+   * @throws {Error|TypeError}
+   */
   #validateParameters() {
     if (typeof this.#identifier !== "string") {
       throw new TypeError("Identifier is not specified")
@@ -144,6 +149,7 @@ export class BottomSheet {
   /**
    * Method to hide or show the sheet
    * @param {boolean} isShown
+   * @returns {void}
    */
   setIsShown(isShown) {
     this.#wrapper.setAttribute("aria-hidden", String(!isShown))
@@ -156,7 +162,9 @@ export class BottomSheet {
   }
 
   /**
+   * Set the height of the sheet
    * @param {number} value - height in vh (viewport height)
+   * @returns {void}
    */
   setHeight(value) {
     if (typeof value !== "number") return
@@ -175,6 +183,7 @@ export class BottomSheet {
    * Add event listener to the sheet
    * @param {"hide"|"show"|string} event
    * @param {(event: Event) => any} callback
+   * @returns {void}
    */
   addEventListener(event, callback) {
     this.html.addEventListener(event, callback)
@@ -182,6 +191,7 @@ export class BottomSheet {
 
   /**
    * Hide the sheet when clicking at the background
+   * @returns {void}
    */
   #onOverlayClick() {
     if (this.options.closeOnBackgroundClick) {
@@ -191,6 +201,7 @@ export class BottomSheet {
 
   /**
    * Hide the sheet when clicking at the 'close' button
+   * @returns {void}
    */
   #onCloseButtonClick() {
     this.setIsShown(false)
@@ -199,10 +210,12 @@ export class BottomSheet {
   /**
    * Hide the sheet when pressing Escape if the target element is not an input field
    * @param {KeyboardEvent} event
+   * @returns {void}
    */
   #onKeyUp(event) {
     if (!this.#sheet) {
-      return this.#removeWindowEventListeners()
+      this.#removeWindowEventListeners()
+      return
     }
 
     const isSheetElementFocused =
@@ -216,11 +229,14 @@ export class BottomSheet {
   #dragPosition
 
   /**
+   * Gets called when the user starts grabbing the 'sheet thumb'
    * @param {MouseEvent|TouchEvent} event
+   * @returns {void}
    */
   #onDragStart(event) {
     if (!this.#sheet) {
-      return this.#removeWindowEventListeners()
+      this.#removeWindowEventListeners()
+      return
     }
 
     this.#dragPosition = touchPosition(event).pageY
@@ -229,11 +245,15 @@ export class BottomSheet {
   }
 
   /**
+   * Gets called when the user is moving the 'sheet thumb'.
+   * Updates the height of the sheet
    * @param {MouseEvent|TouchEvent} event
+   * @returns {void}
    */
   #onDragMove(event) {
     if (!this.#sheet) {
-      return this.#removeWindowEventListeners()
+      this.#removeWindowEventListeners()
+      return
     }
 
     if (this.#dragPosition === undefined) return
@@ -247,11 +267,14 @@ export class BottomSheet {
   }
 
   /**
+   * Get called when the user stops grabbing the sheet
    * @param {MouseEvent|TouchEvent} _event
+   * @returns {void}
    */
   #onDragEnd(_event) {
     if (!this.#sheet) {
-      return this.#removeWindowEventListeners()
+      this.#removeWindowEventListeners()
+      return
     }
 
     this.#dragPosition = undefined
@@ -268,7 +291,10 @@ export class BottomSheet {
   }
 
   /**
+   * Renders the sheet and saves its HTML into the `#wrapper` property.
+   * Can throw an error if the constructor parameters are invalid
    * @param {HTMLElement} bodyContents
+   * @returns {void}
    */
   #renderHTML(bodyContents) {
     this.#validateParameters()
@@ -318,6 +344,9 @@ export class BottomSheet {
     window.addEventListener("touchend", this.#eventListeners.onDragEnd)
   }
 
+  /**
+   * Removes all the event listeners when the sheet is no longer mounted
+   */
   #removeWindowEventListeners() {
     sheetDisplayStateChangeObserver.handleChangesAndDisconnect(this.#wrapper)
 

From a8e34054a68cfcbe11cb2b18f25115a79d8f8f3c Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 15 Dec 2023 23:18:58 +0100
Subject: [PATCH 18/30] Update documentation. Don't minify the build output

---
 library/index.js  |  6 ++++++
 library/sheet.jsx | 37 ++++++++++++++++++++++++++++++++-----
 package-lock.json | 25 ++++++++++++++++++++++---
 vite.config.js    |  4 +++-
 4 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 library/index.js

diff --git a/library/index.js b/library/index.js
new file mode 100644
index 0000000..a89f544
--- /dev/null
+++ b/library/index.js
@@ -0,0 +1,6 @@
+//
+// Copyright (c) 2022-2023 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
+
+export * from "./sheet.jsx"
diff --git a/library/sheet.jsx b/library/sheet.jsx
index 1786e8d..791507d 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -5,8 +5,6 @@
 
 /** @jsx createElement */
 
-/** @module BottomSheet */
-
 import { BottomSheetDisplayStateChangeObserver } from "./displayStateChangeObserver"
 import { createElement } from "./createElement"
 import "./sheet.css"
@@ -30,7 +28,15 @@ const touchPosition = (event) =>
 const sheetDisplayStateChangeObserver = new BottomSheetDisplayStateChangeObserver()
 
 /**
- * @alias BottomSheet
+ * @example Create a sheet from a template
+ * // for instance, you store your sheet contents inside of <template id="sheet-body-template">...</template>
+ * const bodyTemplate = document.querySelector("template#sheet-body-template")
+ *
+ * const body = document.createElement("div")
+ * body.appendChild(bodyTemplate.content.cloneNode(true))
+ *
+ * const bottomSheet = new BottomSheet("sheet", body)
+ * bottomSheet.setIsShown(true)
  */
 export class BottomSheet {
   /**
@@ -147,9 +153,14 @@ export class BottomSheet {
   }
 
   /**
-   * Method to hide or show the sheet
+   * Hide or show the sheet
    * @param {boolean} isShown
    * @returns {void}
+   * @example Hide the sheet
+   * sheet.setIsShown(false)
+   *
+   * @example Show the sheet
+   * sheet.setIsShown(true)
    */
   setIsShown(isShown) {
     this.#wrapper.setAttribute("aria-hidden", String(!isShown))
@@ -165,6 +176,9 @@ export class BottomSheet {
    * Set the height of the sheet
    * @param {number} value - height in vh (viewport height)
    * @returns {void}
+   *
+   * @example Make the sheet go fullscreen
+   * sheet.setHeight(100)
    */
   setHeight(value) {
     if (typeof value !== "number") return
@@ -182,8 +196,21 @@ export class BottomSheet {
   /**
    * Add event listener to the sheet
    * @param {"hide"|"show"|string} event
-   * @param {(event: Event) => any} callback
+   * @param {EventListener} callback
    * @returns {void}
+   * @example Run a function when the sheet gets shown or hidden
+   * sheet.addEventListener("hide", () => {
+   *   console.log("The sheet is now hidden")
+   * })
+   *
+   * sheet.addEventListener("show", () => {
+   *   console.log("The sheet is now shown")
+   * })
+   *
+   * @example Alternative expression
+   * sheet.html.addEventListener("...", () => {
+   *   // ...
+   * })
    */
   addEventListener(event, callback) {
     this.html.addEventListener(event, callback)
diff --git a/package-lock.json b/package-lock.json
index e342fd1..fb20eef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -364,6 +364,17 @@
         "node": ">=12"
       }
     },
+    "node_modules/@types/node": {
+      "version": "20.10.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz",
+      "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -492,10 +503,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/vite": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
+      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
diff --git a/vite.config.js b/vite.config.js
index 41acdbe..4ba3c56 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,8 +14,10 @@ export default defineConfig({
   },
   build: {
     outDir: resolve(__dirname, "./build/"),
+    minify: false,
+    cssMinify: false,
     lib: {
-      entry: resolve(__dirname, "./library/sheet.jsx"),
+      entry: resolve(__dirname, "./library/index.js"),
       name: "BottomSheet",
       fileName: "index"
     },

From 3abf22504af1ce8ac59d37f943d55ef7ab7f0bcf Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 9 Feb 2024 21:51:38 +0100
Subject: [PATCH 19/30] Switch to HTML Custom Elements API. Stop changing
 height

Fixes #3: the height of the sheet won't change anymore. Instead, the `translateY` and `scale` get changed.
---
 library/displayStateChangeObserver.js | 101 -------
 library/helpers.js                    |  42 +++
 library/sheet.css                     | 136 ----------
 library/sheet.jsx                     | 366 ++++++++------------------
 library/styleSheet.js                 | 138 ++++++++++
 test/index.html                       |   7 +-
 test/main.js                          |  17 +-
 7 files changed, 301 insertions(+), 506 deletions(-)
 delete mode 100644 library/displayStateChangeObserver.js
 create mode 100644 library/helpers.js
 delete mode 100644 library/sheet.css
 create mode 100644 library/styleSheet.js

diff --git a/library/displayStateChangeObserver.js b/library/displayStateChangeObserver.js
deleted file mode 100644
index cae23f4..0000000
--- a/library/displayStateChangeObserver.js
+++ /dev/null
@@ -1,101 +0,0 @@
-//
-// Copyright (c) 2022-2023 Ivan Teplov
-// Licensed under the Apache license 2.0
-//
-
-/**
- * Mutation observer that triggers events whenever the bottom sheets becomes hidden or shown.
- */
-export class BottomSheetDisplayStateChangeObserver extends MutationObserver {
-  constructor() {
-    super((mutations, _observer) => {
-      for (const mutation of mutations) {
-        this.#onMutation(mutation)
-      }
-    })
-  }
-
-  #observedAttributeName = "aria-hidden"
-
-  #eventNames = {
-    hide: "hide",
-    show: "show"
-  }
-
-  /**
-   * This object maps bottom sheets to their current state (hidden = true, shown = false)
-   * @type {Map<HTMLElement, boolean>}
-   */
-  #sheetIsHiddenMap = new Map()
-
-  /**
-   * Check whether the element is hidden
-   * @param {HTMLElement} element
-   * @returns {boolean}
-   */
-  #isHidden(element) {
-    return element.getAttribute("aria-hidden") === "true"
-  }
-
-  /**
-   * Handle a DOM mutation
-   * @param {MutationRecord} mutation
-   * @returns {void}
-   */
-  #onMutation(mutation) {
-    const wasHidden = this.#sheetIsHiddenMap.get(mutation.target)
-    const isNowHidden = this.#isHidden(mutation.target)
-
-    if (isNowHidden !== wasHidden) {
-      this.#sheetIsHiddenMap.set(mutation.target, isNowHidden)
-
-      const eventType = isNowHidden
-        ? this.#eventNames.hide
-        : this.#eventNames.show
-
-      mutation.target.dispatchEvent(new Event(eventType, {
-        bubbles: false,
-        cancelable: false,
-        composed: false
-      }))
-    }
-  }
-
-  /**
-   * Observe element attribute changes
-   * @param {HTMLElement} element
-   * @returns {void}
-   */
-  observe(element) {
-    if (!(element instanceof HTMLElement)) {
-      throw new Error("This observer can only be used with HTML elements")
-    }
-
-    this.#sheetIsHiddenMap.set(element, this.#isHidden(element))
-
-    super.observe(element, {
-      attributes: true,
-      attributeFilter: [this.#observedAttributeName]
-    })
-  }
-
-  /**
-   * Method to process pending mutations and stop observing an object
-   * @param {HTMLElement} element
-   * @returns {void}
-   */
-  handleChangesAndDisconnect(element) {
-    if (!this.#sheetIsHiddenMap.has(element)) {
-      return
-    }
-
-    for (const mutation of this.takeRecords()) {
-      this.#onMutation(mutation)
-    }
-
-    this.disconnect(element)
-    this.#sheetIsHiddenMap.delete(element)
-  }
-}
-
-export default BottomSheetDisplayStateChangeObserver
diff --git a/library/helpers.js b/library/helpers.js
new file mode 100644
index 0000000..ff15b2d
--- /dev/null
+++ b/library/helpers.js
@@ -0,0 +1,42 @@
+//
+// Copyright (c) 2022-2024 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
+
+/**
+ * Check if the element is focused
+ * @param {HTMLElement}
+ * @returns {boolean}
+ */
+export const isFocused = element => document.activeElement === element
+
+/**
+ * Get object that contains touch position (depending on event type)
+ * @param {MouseEvent|TouchEvent} event
+ * @returns {MouseEvent|Touch}
+ */
+export const touchPosition = (event) =>
+  event.touches ? event.touches[0] : event
+
+
+/**
+ * Map the number from one range to another
+ * @param {number} number
+ * @param {[from: number, to: number]} currentRange
+ * @param {[from: number, to: number]} newRange
+ * @returns {number} - value in the new interval
+ */
+export function mapNumber(number, currentRange, newRange) {
+  const currentRangeSize = currentRange[1] - currentRange[0]
+  const newRangeSize = newRange[1] - newRange[0]
+  return (number - currentRange[0]) / currentRangeSize * newRangeSize + newRange[0]
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} variableName
+ * @returns {string?}
+ */
+export function getCSSVariableValue(element, variableName) {
+  return getComputedStyle(element).getPropertyValue(variableName)
+}
diff --git a/library/sheet.css b/library/sheet.css
deleted file mode 100644
index ecf293d..0000000
--- a/library/sheet.css
+++ /dev/null
@@ -1,136 +0,0 @@
-/*
-  Copyright (c) 2022-2023 Ivan Teplov
-  Licensed under the Apache license 2.0
-*/
-
-:root {
-  --bottom-sheet-background-color: white;
-  --bottom-sheet-foreground-color: black;
-  --bottom-sheet-overlay-background-color: #88888880;
-  --bottom-sheet-thumb-color: #eeeeee;
-  --bottom-sheet-transition-duration: 0.5s;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bottom-sheet-background-color: black;
-    --bottom-sheet-foreground-color: white;
-    --bottom-sheet-thumb-color: #333333;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --bottom-sheet-transition-duration: 0.1s;
-  }
-}
-
-.bottom-sheet-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 2;
-  visibility: visible;
-  transition:
-    opacity var(--bottom-sheet-transition-duration),
-    visibility var(--bottom-sheet-transition-duration);
-}
-
-.bottom-sheet-wrapper[aria-hidden="true"] {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.bottom-sheet-wrapper .bottom-sheet-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-  background: var(--bottom-sheet-overlay-background-color);
-  opacity: 0.5;
-}
-
-.bottom-sheet-wrapper .bottom-sheet {
-  display: flex;
-  flex-direction: column;
-
-  border-radius: 1rem 1rem 0 0;
-
-  background: var(--bottom-sheet-background-color);
-
-  overflow-y: hidden;
-
-  --default-transitions:
-    transform var(--bottom-sheet-transition-duration),
-    border-radius var(--bottom-sheet-transition-duration);
-
-  transition: var(--default-transitions);
-  transform: translateY(0);
-
-  min-width: 18rem;
-  max-width: 70rem;
-  max-height: 100vh;
-  height: 30vh;
-
-  box-sizing: border-box;
-}
-
-.bottom-sheet-wrapper .bottom-sheet:not(.not-selectable) {
-  transition:
-    var(--default-transitions),
-    height var(--bottom-sheet-transition-duration);
-}
-
-.bottom-sheet-wrapper .bottom-sheet.fullscreen {
-  border-radius: 0;
-}
-
-.bottom-sheet-wrapper[aria-hidden="true"] .bottom-sheet {
-  transform: translateY(100%);
-}
-
-.bottom-sheet-wrapper .bottom-sheet-controls {
-  display: flex;
-}
-
-.bottom-sheet-wrapper .bottom-sheet-draggable-area {
-  width: 3rem;
-  margin: auto;
-  padding: 1rem;
-  cursor: grab;
-}
-
-.bottom-sheet-wrapper .bottom-sheet-draggable-thumb {
-  width: inherit;
-  height: 0.25rem;
-  background: var(--bottom-sheet-thumb-color);
-  border-radius: 0.125rem;
-}
-
-.bottom-sheet-wrapper .bottom-sheet-close-button {
-  border: none;
-  padding: 0.7rem;
-}
-
-.bottom-sheet-wrapper .bottom-sheet-body {
-  flex-grow: 1;
-  height: 100%;
-
-  display: flex;
-  flex-direction: column;
-
-  overflow-y: auto;
-
-  padding: 1rem;
-  box-sizing: border-box;
-}
diff --git a/library/sheet.jsx b/library/sheet.jsx
index 791507d..ef5b3fd 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -1,73 +1,20 @@
 //
-// Copyright (c) 2022-2023 Ivan Teplov
+// Copyright (c) 2022-2024 Ivan Teplov
 // Licensed under the Apache license 2.0
 //
 
 /** @jsx createElement */
 
-import { BottomSheetDisplayStateChangeObserver } from "./displayStateChangeObserver"
+import { isFocused, touchPosition, getCSSVariableValue, mapNumber } from "./helpers"
 import { createElement } from "./createElement"
-import "./sheet.css"
-
-/**
- * Check if the element is focused
- * @param {HTMLElement}
- * @returns {boolean}
- */
-const isFocused = element => document.activeElement === element
-
-/**
- * Get object that contains touch position (depending on event type)
- * @param {MouseEvent|TouchEvent} event
- * @returns {MouseEvent|Touch}
- */
-const touchPosition = (event) =>
-  event.touches ? event.touches[0] : event
-
-
-const sheetDisplayStateChangeObserver = new BottomSheetDisplayStateChangeObserver()
-
-/**
- * @example Create a sheet from a template
- * // for instance, you store your sheet contents inside of <template id="sheet-body-template">...</template>
- * const bodyTemplate = document.querySelector("template#sheet-body-template")
- *
- * const body = document.createElement("div")
- * body.appendChild(bodyTemplate.content.cloneNode(true))
- *
- * const bottomSheet = new BottomSheet("sheet", body)
- * bottomSheet.setIsShown(true)
- */
-export class BottomSheet {
-  /**
-   * Height of the sheet in viewport height units (vh)
-   * @type {number}
-   */
-  #height = 0
-
-  /**
-   * DOM identifier of the sheet
-   * @type {string}
-   */
-  #identifier
+import { styleSheet } from "./styleSheet"
 
+export class SheetElement extends HTMLElement {
   /**
-   * Body of the sheet (specified in the constructor)
-   * @type {HTMLElement}
+   * Inner wrapper
+   * @type {HTMLDivElement}
    */
-  #contents
-
-  /**
-   * Wrapper of the sheet
-   * @type {HTMLElement|null}
-   */
-  #wrapper = null
-
-  /**
-   * The sheet itself
-   * @type {HTMLElement|null}
-   */
-  #sheet = null
+  #sheet
 
   /**
    * Gray area on the top of the sheet to resize the sheet
@@ -75,6 +22,8 @@ export class BottomSheet {
    */
   #draggableArea
 
+  #scaleDownTo
+
   /** Just methods with 'this' binded */
   #eventListeners = {
     onDragMove: this.#onDragMove.bind(this),
@@ -82,19 +31,16 @@ export class BottomSheet {
     onDragEnd: this.#onDragEnd.bind(this),
     onKeyUp: this.#onKeyUp.bind(this),
     onCloseButtonClick: this.#onCloseButtonClick.bind(this),
-    onOverlayClick: this.#onOverlayClick.bind(this)
+    onClick: this.#onClick.bind(this)
   }
 
   /**
-   * @param {string} identifier
-   * @param {HTMLElement} contents
    * @param {object} options
    * @param {boolean?} options.closeOnBackgroundClick
    * @param {boolean?} options.closeOnEscapeKey
    */
-  constructor(identifier, contents, options = {}) {
-    this.#identifier = identifier
-    this.#contents = contents
+  constructor(options = {}) {
+    super()
 
     this.options = {
       closeOnBackgroundClick: true,
@@ -102,127 +48,81 @@ export class BottomSheet {
       ...options
     }
 
-    this.#validateParameters()
-  }
-
-  /**
-   * Get the document object model (DOM) representation of the sheet
-   * @returns {HTMLElement}
-   */
-  get html() {
-    if (!this.#wrapper) {
-      this.#renderHTML(this.#contents)
-    }
-
-    return this.#wrapper
-  }
+    const shadowRoot = this.attachShadow({
+      mode: "open"
+    })
 
-  /**
-   * Get the identifier of the sheet
-   * @returns {string}
-   */
-  get id() {
-    return this.#identifier
-  }
+    shadowRoot.adoptedStyleSheets = [styleSheet]
+
+    shadowRoot.append(
+      <div class="sheet-contents" reference={sheet => this.#sheet = sheet}>
+        <header class="sheet-controls">
+          <div
+            class="sheet-draggable-area"
+            reference={area => this.#draggableArea = area}
+            onMouseDown={this.#eventListeners.onDragStart}
+            onTouchStart={this.#eventListeners.onDragStart}
+          >
+            <div class="sheet-draggable-thumb"></div>
+          </div>
+
+          <button
+            type="button"
+            aria-controls={this?.id ?? ""}
+            class="sheet-close-button"
+            onClick={this.#eventListeners.onCloseButtonClick}
+            title="Close the sheet"
+          >
+            &times;
+          </button>
+        </header>
+        <main class="sheet-body">
+          <slot />
+        </main>
+      </div>
+    )
 
-  /**
-   * Get the identifier of the sheet
-   * @alias id
-   * @returns {string}
-   */
-  get identifier() {
-    return this.#identifier
+    this.addEventListener("click", this.#onClick)
   }
 
-  /**
-   * Check whether the parameters provided in the constructor are all valid
-   * @throws {Error|TypeError}
-   */
-  #validateParameters() {
-    if (typeof this.#identifier !== "string") {
-      throw new TypeError("Identifier is not specified")
-    }
-
-    if (document.getElementById(this.#identifier) !== null) {
-      throw new TypeError(`The provided identifier ${this.#identifier} is already in use`)
-    }
-
-    if (this.#contents?.parentElement !== null) {
-      throw new Error("The contents of the bottom sheet should not be already mounted into the Document Object Model (DOM)")
-    }
+  get open() {
+    return this.getAttribute("open")
   }
 
-  /**
-   * Hide or show the sheet
-   * @param {boolean} isShown
-   * @returns {void}
-   * @example Hide the sheet
-   * sheet.setIsShown(false)
-   *
-   * @example Show the sheet
-   * sheet.setIsShown(true)
-   */
-  setIsShown(isShown) {
-    this.#wrapper.setAttribute("aria-hidden", String(!isShown))
-
-    if (!isShown) {
-      this.setHeight(0)
+  set open(value) {
+    if (value === false || value === undefined) {
+      this.close()
     } else {
-      this.setHeight(50)
+      this.showModal()
     }
   }
 
-  /**
-   * Set the height of the sheet
-   * @param {number} value - height in vh (viewport height)
-   * @returns {void}
-   *
-   * @example Make the sheet go fullscreen
-   * sheet.setHeight(100)
-   */
-  setHeight(value) {
-    if (typeof value !== "number") return
+  showModal() {
+    this.setAttribute("open", true)
+  }
 
-    this.#height = Math.max(0, Math.min(100, value))
-    this.#sheet.style.height = `${this.#height}vh`
+  show = this.showModal
 
-    if (this.#height === 100) {
-      this.#sheet.classList.add("fullscreen")
-    } else {
-      this.#sheet.classList.remove("fullscreen")
-    }
+  close() {
+    this.removeAttribute("open")
   }
 
   /**
-   * Add event listener to the sheet
-   * @param {"hide"|"show"|string} event
-   * @param {EventListener} callback
-   * @returns {void}
-   * @example Run a function when the sheet gets shown or hidden
-   * sheet.addEventListener("hide", () => {
-   *   console.log("The sheet is now hidden")
-   * })
-   *
-   * sheet.addEventListener("show", () => {
-   *   console.log("The sheet is now shown")
-   * })
-   *
-   * @example Alternative expression
-   * sheet.html.addEventListener("...", () => {
-   *   // ...
-   * })
+   * Method that combines HTMLElement.contains and HTMLElement.shadowRoot.contains
+   * @param {HTMLElement} element
    */
-  addEventListener(event, callback) {
-    this.html.addEventListener(event, callback)
+  #contains(element) {
+    return this.contains(element) || this.shadowRoot.contains(element)
   }
 
   /**
    * Hide the sheet when clicking at the background
+   * @param {PointerEvent} event
    * @returns {void}
    */
-  #onOverlayClick() {
-    if (this.options.closeOnBackgroundClick) {
-      this.setIsShown(false)
+  #onClick(event) {
+    if (!this.#contains(event.target) && this.options.closeOnBackgroundClick) {
+      this.close()
     }
   }
 
@@ -231,7 +131,7 @@ export class BottomSheet {
    * @returns {void}
    */
   #onCloseButtonClick() {
-    this.setIsShown(false)
+    this.close()
   }
 
   /**
@@ -240,35 +140,47 @@ export class BottomSheet {
    * @returns {void}
    */
   #onKeyUp(event) {
-    if (!this.#sheet) {
-      this.#removeWindowEventListeners()
-      return
-    }
-
     const isSheetElementFocused =
-      this.#wrapper.contains(event.target) && isFocused(event.target)
+      this.#contains(event.target) && isFocused(event.target)
 
     if (event.key === "Escape" && !isSheetElementFocused && this.options.closeOnEscapeKey) {
-      this.setIsShown(false)
+      this.close()
     }
   }
 
   #dragPosition
 
+  /**
+   * Function that changes sheet's size and location during the dragging process
+   * @param {number} distanceToTheBottomInPercents - percents relative to the height of the sheet
+   */
+  #dragSheet(distanceToTheBottomInPercents) {
+    const translateY = 100 - distanceToTheBottomInPercents
+    const scale = mapNumber(distanceToTheBottomInPercents, [0, 100], [this.#scaleDownTo, 1])
+
+    this.#sheet.style.transform = `translateY(${translateY}%) scale(${scale})`
+    this.#sheet.style.transition = "none"
+  }
+
   /**
    * Gets called when the user starts grabbing the 'sheet thumb'
    * @param {MouseEvent|TouchEvent} event
    * @returns {void}
    */
   #onDragStart(event) {
-    if (!this.#sheet) {
-      this.#removeWindowEventListeners()
-      return
-    }
-
     this.#dragPosition = touchPosition(event).pageY
-    this.#sheet.classList.add("not-selectable")
+    this.#sheet.classList.add("is-resized")
     this.#draggableArea.style.cursor = document.body.style.cursor = "grabbing"
+
+    this.#scaleDownTo = +getCSSVariableValue(this.#sheet, "--scale-down-to")
+  }
+
+  #getDistanceToTheBottomInPercents(y) {
+    const deltaY = this.#dragPosition - y
+
+    // Distance to the bottom of the sheet to the cursor in percents (relative to the sheet height)
+    const distanceToTheBottomInPercents = 100 + deltaY / this.#sheet.clientHeight * 100
+    return Math.max(0, Math.min(100, distanceToTheBottomInPercents))
   }
 
   /**
@@ -278,90 +190,40 @@ export class BottomSheet {
    * @returns {void}
    */
   #onDragMove(event) {
-    if (!this.#sheet) {
-      this.#removeWindowEventListeners()
-      return
-    }
-
     if (this.#dragPosition === undefined) return
 
-    const y = touchPosition(event).pageY
-    const deltaY = this.#dragPosition - y
-    const deltaHeight = deltaY / window.innerHeight * 100
-
-    this.setHeight(this.#height + deltaHeight)
-    this.#dragPosition = y
+    this.#dragSheet(this.#getDistanceToTheBottomInPercents(touchPosition(event).pageY))
   }
 
   /**
    * Get called when the user stops grabbing the sheet
-   * @param {MouseEvent|TouchEvent} _event
+   * @param {MouseEvent|TouchEvent} event
    * @returns {void}
    */
-  #onDragEnd(_event) {
-    if (!this.#sheet) {
-      this.#removeWindowEventListeners()
-      return
+  #onDragEnd(event) {
+    if (this.#dragPosition === undefined) return
+
+    // Distance to the bottom of the sheet to the cursor in percents (relative to the sheet height)
+    const distanceToTheBottomInPercents =
+      this.#getDistanceToTheBottomInPercents(touchPosition(event).pageY)
+
+    if (distanceToTheBottomInPercents < 75) {
+      this.close()
     }
 
-    this.#dragPosition = undefined
-    this.#sheet.classList.remove("not-selectable")
     this.#draggableArea.style.cursor = document.body.style.cursor = ""
+    this.#dragPosition = undefined
 
-    if (this.#height < 25) {
-      this.setIsShown(false)
-    } else if (this.#height > 75) {
-      this.setHeight(100)
-    } else {
-      this.setHeight(50)
-    }
+    this.#sheet.classList.remove("is-resized")
+
+    this.#sheet.style.transform = ""
+    this.#sheet.style.transition = ""
   }
 
   /**
-   * Renders the sheet and saves its HTML into the `#wrapper` property.
-   * Can throw an error if the constructor parameters are invalid
-   * @param {HTMLElement} bodyContents
-   * @returns {void}
+   * Attaches event listeners to the window when the sheet is mounted
    */
-  #renderHTML(bodyContents) {
-    this.#validateParameters()
-
-    this.#wrapper = (
-      <div class="bottom-sheet-wrapper" id={this.#identifier} role="dialog" aria-hidden="true">
-        <div class="bottom-sheet-overlay" onClick={this.#eventListeners.onOverlayClick}></div>
-        <div class="bottom-sheet" reference={sheet => this.#sheet = sheet}>
-          <header class="bottom-sheet-controls">
-            <div
-              class="bottom-sheet-draggable-area"
-              reference={area => this.#draggableArea = area}
-              onMouseDown={this.#eventListeners.onDragStart}
-              onTouchStart={this.#eventListeners.onDragStart}
-            >
-              <div class="bottom-sheet-draggable-thumb"></div>
-            </div>
-
-            <button
-              type="button"
-              aria-controls={this.#identifier}
-              class="bottom-sheet-close-button"
-              onClick={this.#eventListeners.onCloseButtonClick}
-              title="Close the sheet"
-            >
-              &times;
-            </button>
-          </header>
-          <main class="bottom-sheet-body">
-            {bodyContents}
-          </main>
-        </div>
-      </div>
-    )
-
-    sheetDisplayStateChangeObserver.observe(this.#wrapper, {
-      attributes: true,
-      attributeFilter: ["aria-hidden"]
-    })
-
+  connectedCallback() {
     window.addEventListener("keyup", this.#eventListeners.onKeyUp)
 
     window.addEventListener("mousemove", this.#eventListeners.onDragMove)
@@ -374,9 +236,7 @@ export class BottomSheet {
   /**
    * Removes all the event listeners when the sheet is no longer mounted
    */
-  #removeWindowEventListeners() {
-    sheetDisplayStateChangeObserver.handleChangesAndDisconnect(this.#wrapper)
-
+  disconnectedCallback() {
     window.removeEventListener("keyup", this.#eventListeners.onKeyUp)
 
     window.removeEventListener("mousemove", this.#eventListeners.onDragMove)
@@ -387,4 +247,8 @@ export class BottomSheet {
   }
 }
 
-export default BottomSheet
+export default SheetElement
+
+// TODO: decide on the component name
+customElements.define("sheet-element", SheetElement)
+
diff --git a/library/styleSheet.js b/library/styleSheet.js
new file mode 100644
index 0000000..9e50a8b
--- /dev/null
+++ b/library/styleSheet.js
@@ -0,0 +1,138 @@
+//
+// Copyright (c) 2022-2024 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
+
+export const styleSheet = new CSSStyleSheet()
+export default styleSheet
+
+styleSheet.replaceSync(`
+  :host {
+    --overlay-color: #88888880;
+    --sheet-background-color: #fff;
+    --sheet-thumb-color: #eee;
+    --sheet-transition-duration: 0.5s;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+
+    transition:
+      opacity var(--sheet-transition-duration),
+      visibility var(--sheet-transition-duration);
+  }
+
+  :host(:not([open])) {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --sheet-background-color: black;
+      --sheet-foreground-color: white;
+      --sheet-thumb-color: #333333;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --sheet-transition-duration: 0.1s;
+    }
+  }
+
+  /* ::backdrop is not supported :( */
+  :host::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--overlay-color, rgba(0, 0, 0, 0.5));
+  }
+
+  .sheet-contents {
+    display: flex;
+    flex-direction: column;
+
+    border-radius: 1rem 1rem 0 0;
+
+    background: var(--sheet-background-color);
+
+    overflow-y: hidden;
+
+    transform: translateY(0) scale(1);
+
+    min-width: 18rem;
+    max-width: 70rem;
+    max-height: 100vh;
+    height: 90vh;
+
+    box-sizing: border-box;
+
+    --scale-down-to: 0.5;
+
+    transition:
+      transform var(--sheet-transition-duration),
+      border-radius var(--sheet-transition-duration);
+  }
+
+  :host(:not([open])) .sheet-contents {
+    transform: translateY(100%) scale(var(--scale-down-to));
+  }
+
+  .sheet-contents.is-resized {
+    user-select: none;
+  }
+
+  .sheet-controls {
+    display: flex;
+  }
+
+  .sheet-draggable-area {
+    width: 3rem;
+    margin: auto;
+    padding: 1rem;
+    cursor: grab;
+  }
+
+  .sheet-draggable-thumb {
+    width:inherit;
+    height: 0.25rem;
+    background: var(--sheet-thumb-color);
+    border-radius: 0.125rem;
+  }
+
+  .sheet-close-button {
+    border: none;
+    padding: 0.7rem;
+    background: transparent;
+    cursor: pointer;
+    color: inherit;
+    font-weight: 500;
+  }
+
+  .sheet-body {
+    flex-grow: 1;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    overflow-y: auto;
+
+    padding: 1rem;
+    box-sizing: border-box;
+  }
+`)
+
diff --git a/test/index.html b/test/index.html
index 09aa1c0..2a27ca6 100644
--- a/test/index.html
+++ b/test/index.html
@@ -8,7 +8,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bottom Sheet</title>
+    <title>Sheet</title>
 
     <!-- Utility classes for CSS -->
     <link rel="stylesheet" href="https://unpkg.com/@ivteplo/utilities.css@1.1.1/build/main.css">
@@ -23,8 +23,7 @@
     <!-- Button to open a sheet -->
     <button type="button" id="open-sheet" aria-controls="sheet">Open Sheet</button>
 
-    <!-- Contents that will go inside of the sheet -->
-    <template id="sheet-body-template">
+    <sheet-element id="sheet">
       <h2>Hello, World!</h2>
       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit explicabo vero quas eligendi, eos cupiditate sint aliquam a omnis commodi quos in libero veniam. Quidem, non a quibusdam consequuntur mollitia officia numquam sit quos dolorum quaerat reprehenderit laboriosam perspiciatis consequatur odit error dolore recusandae iste id quam magnam ut! Sint nulla minus excepturi libero officiis, deleniti, delectus obcaecati saepe natus rerum nesciunt! Nemo quo id ipsum fugiat voluptas ducimus incidunt nulla sed, voluptates modi exercitationem quod obcaecati corporis perspiciatis dolorum ullam provident sint iusto consequatur totam dolorem. Amet, praesentium accusamus dolore hic ad iusto nostrum exercitationem velit ex optio nihil obcaecati provident enim nobis molestiae cupiditate possimus error itaque facilis eligendi placeat eos quam! Consequatur eveniet corporis nam accusantium nemo harum non explicabo accusamus. Voluptatem laborum dolores magni voluptatibus doloribus sunt? Id quae vero, nemo nam dolore ab amet distinctio molestias excepturi blanditiis quia eos et eligendi magnam voluptas iusto.</p>
 
@@ -34,6 +33,6 @@ <h2>Hello, World!</h2>
         <textarea placeholder="Text field"></textarea>
         <div contenteditable="true">Contenteditable block</div>
       </form>
-    </template>
+    </sheet-element>
   </body>
 </html>
diff --git a/test/main.js b/test/main.js
index 9c18021..1bf75e9 100644
--- a/test/main.js
+++ b/test/main.js
@@ -3,24 +3,13 @@
 // Licensed under the Apache license 2.0
 //
 
-import { BottomSheet } from "../library/sheet"
+import "../library/sheet"
 
 const openSheetButton = document.getElementById("open-sheet")
-const sheetBodyTemplate = document.getElementById("sheet-body-template")
-const sheetBody = document.createElement("div")
-sheetBody.append(sheetBodyTemplate.content.cloneNode(true))
-
-const sheet = new BottomSheet("sheet", sheetBody)
-document.body.appendChild(sheet.html)
-
-/*
-  // Currently, aria-controls in written directly in HTML,
-  // but you can set it programmatically this way:
-  openSheetButton.setAttribute("aria-controls", sheet.id)
-*/
+const sheet = document.getElementById("sheet")
 
 openSheetButton.addEventListener("click", () => {
-  sheet.setIsShown(true)
+  sheet.showModal()
 })
 
 sheet.addEventListener("hide", () => {

From 651c84ed44785c7b6850888c9c4c7653f6ef0b08 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 9 Feb 2024 22:01:16 +0100
Subject: [PATCH 20/30] Adapt styles for desktop and tablets

---
 library/helpers.js    |  6 +++++-
 library/styleSheet.js | 25 ++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/library/helpers.js b/library/helpers.js
index ff15b2d..b48cae6 100644
--- a/library/helpers.js
+++ b/library/helpers.js
@@ -16,7 +16,11 @@ export const isFocused = element => document.activeElement === element
  * @returns {MouseEvent|Touch}
  */
 export const touchPosition = (event) =>
-  event.touches ? event.touches[0] : event
+  event instanceof TouchEvent
+    ? event.type === "touchend"
+      ? event.changedTouches[0]
+      : event.touches[0]
+    : event
 
 
 /**
diff --git a/library/styleSheet.js b/library/styleSheet.js
index 9e50a8b..5801105 100644
--- a/library/styleSheet.js
+++ b/library/styleSheet.js
@@ -12,6 +12,7 @@ styleSheet.replaceSync(`
     --sheet-background-color: #fff;
     --sheet-thumb-color: #eee;
     --sheet-transition-duration: 0.5s;
+    --sheet-border-radius: 1rem;
 
     display: flex;
     flex-direction: column;
@@ -65,7 +66,7 @@ styleSheet.replaceSync(`
     display: flex;
     flex-direction: column;
 
-    border-radius: 1rem 1rem 0 0;
+    border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0;
 
     background: var(--sheet-background-color);
 
@@ -134,5 +135,27 @@ styleSheet.replaceSync(`
     padding: 1rem;
     box-sizing: border-box;
   }
+
+  /* tablet */
+  @media (min-width: 48rem) {
+    :host {
+      justify-content: center;
+    }
+
+    .sheet-contents {
+      max-width: 48rem;
+      max-height: 32rem;
+      border-radius: var(--sheet-border-radius);
+    }
+
+    .sheet-draggable-area {
+      display: none;
+    }
+
+    .sheet-controls {
+      justify-content: flex-end;
+    }
+  }
+
 `)
 

From be2e89b3f93eb87f2930a7bdfcaa3a1029f8ea53 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 9 Feb 2024 22:04:29 +0100
Subject: [PATCH 21/30] Dispatch custom events

---
 library/sheet.jsx | 2 ++
 test/main.js      | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/library/sheet.jsx b/library/sheet.jsx
index ef5b3fd..23a1a0f 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -99,12 +99,14 @@ export class SheetElement extends HTMLElement {
 
   showModal() {
     this.setAttribute("open", true)
+    this.dispatchEvent(new CustomEvent("show"))
   }
 
   show = this.showModal
 
   close() {
     this.removeAttribute("open")
+    this.dispatchEvent(new CustomEvent("close"))
   }
 
   /**
diff --git a/test/main.js b/test/main.js
index 1bf75e9..97899c4 100644
--- a/test/main.js
+++ b/test/main.js
@@ -12,8 +12,8 @@ openSheetButton.addEventListener("click", () => {
   sheet.showModal()
 })
 
-sheet.addEventListener("hide", () => {
-  console.log("The sheet has been hidden")
+sheet.addEventListener("close", () => {
+  console.log("The sheet has been closed")
 })
 
 sheet.addEventListener("show", () => {

From 3dc4d59b4808e2c02584ddf7f5dd996a3d4bfc62 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 9 Feb 2024 22:11:28 +0100
Subject: [PATCH 22/30] Add more comments

---
 library/sheet.jsx | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/library/sheet.jsx b/library/sheet.jsx
index 23a1a0f..8156d50 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -85,10 +85,21 @@ export class SheetElement extends HTMLElement {
     this.addEventListener("click", this.#onClick)
   }
 
+  /**
+   * Check if the sheet is open
+   * @returns {boolean}
+   */
   get open() {
     return this.getAttribute("open")
   }
 
+  /**
+   * An alternative way to open or close the sheet
+   * @param {boolean} value
+   * @example
+   * sheet.open = true  // the same as executing sheet.showModal()
+   * sheet.open = false // the same as executing sheet.close()
+   */
   set open(value) {
     if (value === false || value === undefined) {
       this.close()
@@ -97,13 +108,22 @@ export class SheetElement extends HTMLElement {
     }
   }
 
+  /**
+   * Open the sheet
+   */
   showModal() {
     this.setAttribute("open", true)
     this.dispatchEvent(new CustomEvent("show"))
   }
 
+  /**
+   * Open the sheet
+   */
   show = this.showModal
 
+  /**
+   * Collapse the sheet
+   */
   close() {
     this.removeAttribute("open")
     this.dispatchEvent(new CustomEvent("close"))
@@ -177,10 +197,11 @@ export class SheetElement extends HTMLElement {
     this.#scaleDownTo = +getCSSVariableValue(this.#sheet, "--scale-down-to")
   }
 
+  /**
+   * Distance from the cursor to the bottom of the sheet in percents (relative to the sheet height)
+   */
   #getDistanceToTheBottomInPercents(y) {
     const deltaY = this.#dragPosition - y
-
-    // Distance to the bottom of the sheet to the cursor in percents (relative to the sheet height)
     const distanceToTheBottomInPercents = 100 + deltaY / this.#sheet.clientHeight * 100
     return Math.max(0, Math.min(100, distanceToTheBottomInPercents))
   }
@@ -205,7 +226,6 @@ export class SheetElement extends HTMLElement {
   #onDragEnd(event) {
     if (this.#dragPosition === undefined) return
 
-    // Distance to the bottom of the sheet to the cursor in percents (relative to the sheet height)
     const distanceToTheBottomInPercents =
       this.#getDistanceToTheBottomInPercents(touchPosition(event).pageY)
 

From 0d3c6e0936d2829c425ad5234ba03810c0d6f8d6 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 9 Feb 2024 22:15:58 +0100
Subject: [PATCH 23/30] Update folder structure

---
 library/createElement.js | 61 ----------------------------------------
 library/helpers.js       | 57 +++++++++++++++++++++++++++++++++++++
 library/index.js         |  6 ----
 library/sheet.jsx        |  3 +-
 vite.config.js           |  2 +-
 5 files changed, 59 insertions(+), 70 deletions(-)
 delete mode 100644 library/createElement.js
 delete mode 100644 library/index.js

diff --git a/library/createElement.js b/library/createElement.js
deleted file mode 100644
index 92afe1e..0000000
--- a/library/createElement.js
+++ /dev/null
@@ -1,61 +0,0 @@
-//
-// Copyright (c) 2022-2023 Ivan Teplov
-// Licensed under the Apache license 2.0
-//
-
-const eventHandlerAttributePattern = /^on([A-Z][a-zA-Z]*)$/
-
-/**
- * @template {string} Tag
- * @param {Tag} tagName
- * @param {Record<string, string|function>} attributes
- * @param {HTMLElement|string|number|bigint} children
- * @returns {ElementTagNameMap[Tag]|HTMLElement}
- */
-export function createElement(tagName, attributes, ...children) {
-  const element = document.createElement(tagName)
-  attributes ??= {}
-
-  for (const [attribute, value] of Object.entries(attributes)) {
-    const eventHandlerPatternMatches = attribute.match(eventHandlerAttributePattern)
-
-    if (eventHandlerPatternMatches) {
-      const event = eventHandlerPatternMatches[1].toLowerCase()
-      element.addEventListener(event, value)
-    } else if (attribute === "reference") {
-      value?.(element)
-    } else {
-      element.setAttribute(attribute, value)
-    }
-  }
-
-  for (const child of children) {
-    switch (typeof child) {
-      case "undefined":
-        break
-      case "string":
-      case "number":
-      case "bigint":
-        element.appendChild(document.createTextNode(String(child)))
-        break
-      case "object":
-        if (child === null) {
-          break
-        }
-
-        if (child instanceof HTMLElement) {
-          element.appendChild(child)
-          break
-        }
-
-        // Note: if the child is not of type HTMLElement,
-        // we will go into the default handler too
-      default:
-        throw new Error("Unexpected type of child: " + typeof child)
-    }
-  }
-
-  return element
-}
-
-export default createElement
diff --git a/library/helpers.js b/library/helpers.js
index b48cae6..3bb5c6a 100644
--- a/library/helpers.js
+++ b/library/helpers.js
@@ -44,3 +44,60 @@ export function mapNumber(number, currentRange, newRange) {
 export function getCSSVariableValue(element, variableName) {
   return getComputedStyle(element).getPropertyValue(variableName)
 }
+
+
+const eventHandlerAttributePattern = /^on([A-Z][a-zA-Z]*)$/
+
+/**
+ * @template {string} Tag
+ * @param {Tag} tagName
+ * @param {Record<string, string|function>} attributes
+ * @param {HTMLElement|string|number|bigint} children
+ * @returns {ElementTagNameMap[Tag]|HTMLElement}
+ */
+export function createElement(tagName, attributes, ...children) {
+  const element = document.createElement(tagName)
+  attributes ??= {}
+
+  for (const [attribute, value] of Object.entries(attributes)) {
+    const eventHandlerPatternMatches = attribute.match(eventHandlerAttributePattern)
+
+    if (eventHandlerPatternMatches) {
+      const event = eventHandlerPatternMatches[1].toLowerCase()
+      element.addEventListener(event, value)
+    } else if (attribute === "reference") {
+      value?.(element)
+    } else {
+      element.setAttribute(attribute, value)
+    }
+  }
+
+  for (const child of children) {
+    switch (typeof child) {
+      case "undefined":
+        break
+      case "string":
+      case "number":
+      case "bigint":
+        element.appendChild(document.createTextNode(String(child)))
+        break
+      case "object":
+        if (child === null) {
+          break
+        }
+
+        if (child instanceof HTMLElement) {
+          element.appendChild(child)
+          break
+        }
+
+        // Note: if the child is not of type HTMLElement,
+        // we will go into the default handler too
+      default:
+        throw new Error("Unexpected type of child: " + typeof child)
+    }
+  }
+
+  return element
+}
+
diff --git a/library/index.js b/library/index.js
deleted file mode 100644
index a89f544..0000000
--- a/library/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-//
-// Copyright (c) 2022-2023 Ivan Teplov
-// Licensed under the Apache license 2.0
-//
-
-export * from "./sheet.jsx"
diff --git a/library/sheet.jsx b/library/sheet.jsx
index 8156d50..2c90afa 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -5,8 +5,7 @@
 
 /** @jsx createElement */
 
-import { isFocused, touchPosition, getCSSVariableValue, mapNumber } from "./helpers"
-import { createElement } from "./createElement"
+import { isFocused, touchPosition, getCSSVariableValue, mapNumber, createElement } from "./helpers"
 import { styleSheet } from "./styleSheet"
 
 export class SheetElement extends HTMLElement {
diff --git a/vite.config.js b/vite.config.js
index 4ba3c56..0ee406a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -17,7 +17,7 @@ export default defineConfig({
     minify: false,
     cssMinify: false,
     lib: {
-      entry: resolve(__dirname, "./library/index.js"),
+      entry: resolve(__dirname, "./library/sheet.jsx"),
       name: "BottomSheet",
       fileName: "index"
     },

From 4f8994798092378372ef05a1ddcc731da6e1d2a4 Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 9 Feb 2024 22:18:56 +0100
Subject: [PATCH 24/30] Make the library user define the element in the
 registry

Thus the user can rename the component and will not have to solve conflicts with other components
---
 library/sheet.jsx | 3 ---
 test/main.js      | 5 ++++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/library/sheet.jsx b/library/sheet.jsx
index 2c90afa..3b099ff 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -270,6 +270,3 @@ export class SheetElement extends HTMLElement {
 
 export default SheetElement
 
-// TODO: decide on the component name
-customElements.define("sheet-element", SheetElement)
-
diff --git a/test/main.js b/test/main.js
index 97899c4..1c2f7d2 100644
--- a/test/main.js
+++ b/test/main.js
@@ -3,7 +3,10 @@
 // Licensed under the Apache license 2.0
 //
 
-import "../library/sheet"
+import SheetElement from "../library/sheet"
+
+
+customElements.define("sheet-element", SheetElement)
 
 const openSheetButton = document.getElementById("open-sheet")
 const sheet = document.getElementById("sheet")

From 51faa82f13b3a081bbd6fb91947e02bbbb7561ca Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Fri, 9 Feb 2024 22:34:48 +0100
Subject: [PATCH 25/30] Fix the sheet not closing on backdrop click

---
 library/helpers.js | 10 ++++++++++
 library/sheet.jsx  | 18 +++++++-----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/library/helpers.js b/library/helpers.js
index 3bb5c6a..83c3823 100644
--- a/library/helpers.js
+++ b/library/helpers.js
@@ -45,6 +45,16 @@ export function getCSSVariableValue(element, variableName) {
   return getComputedStyle(element).getPropertyValue(variableName)
 }
 
+/**
+ * Check if the element (or its shadow root) contains the child
+ * @param {HTMLElement} child
+ * @param {HTMLElement} element
+ * @returns {boolean}
+ */
+export function elementContains(child, element) {
+  return element.contains(child) || element.shadowRoot?.contains(child)
+}
+
 
 const eventHandlerAttributePattern = /^on([A-Z][a-zA-Z]*)$/
 
diff --git a/library/sheet.jsx b/library/sheet.jsx
index 3b099ff..fe14fe8 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -5,7 +5,7 @@
 
 /** @jsx createElement */
 
-import { isFocused, touchPosition, getCSSVariableValue, mapNumber, createElement } from "./helpers"
+import { isFocused, touchPosition, getCSSVariableValue, mapNumber, createElement, elementContains } from "./helpers"
 import { styleSheet } from "./styleSheet"
 
 export class SheetElement extends HTMLElement {
@@ -41,6 +41,8 @@ export class SheetElement extends HTMLElement {
   constructor(options = {}) {
     super()
 
+    this.role = "dialog"
+
     this.options = {
       closeOnBackgroundClick: true,
       closeOnEscapeKey: true,
@@ -128,21 +130,15 @@ export class SheetElement extends HTMLElement {
     this.dispatchEvent(new CustomEvent("close"))
   }
 
-  /**
-   * Method that combines HTMLElement.contains and HTMLElement.shadowRoot.contains
-   * @param {HTMLElement} element
-   */
-  #contains(element) {
-    return this.contains(element) || this.shadowRoot.contains(element)
-  }
-
   /**
    * Hide the sheet when clicking at the background
    * @param {PointerEvent} event
    * @returns {void}
    */
   #onClick(event) {
-    if (!this.#contains(event.target) && this.options.closeOnBackgroundClick) {
+    const path = event.composedPath()
+
+    if (!path.find(item => item === this.#sheet) && this.options.closeOnBackgroundClick) {
       this.close()
     }
   }
@@ -162,7 +158,7 @@ export class SheetElement extends HTMLElement {
    */
   #onKeyUp(event) {
     const isSheetElementFocused =
-      this.#contains(event.target) && isFocused(event.target)
+      elementContains(event.target, this) && isFocused(event.target)
 
     if (event.key === "Escape" && !isSheetElementFocused && this.options.closeOnEscapeKey) {
       this.close()

From 91b7dc31c526c90d9251eeae07328a0e097e308a Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Sat, 16 Mar 2024 11:03:09 +0100
Subject: [PATCH 26/30] Fix the error that prevented the dragging process

---
 README.md          | 51 ++--------------------------------------------
 library/helpers.js |  8 ++++----
 package.json       |  4 ++--
 test/index.html    |  6 +++---
 test/main.css      |  2 +-
 test/main.js       |  4 ++--
 6 files changed, 14 insertions(+), 61 deletions(-)

diff --git a/README.md b/README.md
index f2182dc..d0bd4dc 100644
--- a/README.md
+++ b/README.md
@@ -1,55 +1,8 @@
-# Bottom Sheet
-Bottom sheet, implemented in pure HTML, CSS, and JavaScript
+# HTML Sheet Element
+HTML Custom Element for creating sheets
 
 ## Features
 - There is a draggable area to resize 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
   - This behavior is configurable. You can turn off the `Esc` or the click outside the sheet when you want.
 
-
-## Example
-
-```html
-<!-- Insert this into the `<head>` if you want to enable the base styles for the sheet -->
-<link rel="stylesheet" type="text/css" href="/path/to/the/library/build/index.css">
-
-<button type="button" id="open-sheet">Open the sheet</button>
-
-<template id="sheet-body-template">
-  <h1>Hello world!</h1>
-</template>
-```
-
-```javascript
-import { BottomSheet } from "@ivteplo/bottom-sheet"
-
-
-// Get the button to open the sheet from the document object model (DOM)
-const openSheetButton = document.getElementById("open-sheet")
-
-// Get the sheet body template from the DOM
-const sheetBodyTemplate = document.getElementById("sheet-body-template")
-
-// Create an HTML element that will contain the contents of the template
-const sheetBody = document.createElement("div")
-
-// Clone the contents of the sheet body template and append them to the HTML element
-sheetBody.append(sheetBodyTemplate.contents.cloneNode(true))
-
-
-// Create the sheet. The first argument is the identifier of the sheet.
-// The second argument is the sheet body. The third is bottom sheet options.
-const sheet = new BottomSheet("sheet", sheetBody, {
-  closeOnBackgroundClick: true,
-  closeOnEscapeKey: true
-})
-
-// Append the sheet to the document body
-document.body.appendChild(sheet.html)
-
-// Make the sheet open on button click
-openSheetButton.addEventListener("click", () => {
-  sheet.setIsShown(true)
-})
-```
-
diff --git a/library/helpers.js b/library/helpers.js
index 83c3823..49ceef4 100644
--- a/library/helpers.js
+++ b/library/helpers.js
@@ -16,10 +16,10 @@ export const isFocused = element => document.activeElement === element
  * @returns {MouseEvent|Touch}
  */
 export const touchPosition = (event) =>
-  event instanceof TouchEvent
-    ? event.type === "touchend"
-      ? event.changedTouches[0]
-      : event.touches[0]
+  event.type === "touchend"
+    ? event.changedTouches[0]
+    : event.type.startsWith("touch")
+    ? event.touches[0]
     : event
 
 
diff --git a/package.json b/package.json
index 0c11ee4..f05dde0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@ivteplo/bottom-sheet",
-  "description": "Bottom sheet component, implemented in pure JavaScript",
+  "name": "@ivteplo/html-sheet-element",
+  "description": "HTML Custom Element for Sheets",
   "author": "Ivan Teplov <iteplov7@gmail.com>",
   "license": "Apache-2.0",
   "version": "1.0.0",
diff --git a/test/index.html b/test/index.html
index 2a27ca6..0ee218c 100644
--- a/test/index.html
+++ b/test/index.html
@@ -1,5 +1,5 @@
 <!--
-  Copyright (c) 2022-2023 Ivan Teplov
+  Copyright (c) 2022-2024 Ivan Teplov
   Licensed under the Apache license 2.0
 -->
 <!DOCTYPE html>
@@ -23,7 +23,7 @@
     <!-- Button to open a sheet -->
     <button type="button" id="open-sheet" aria-controls="sheet">Open Sheet</button>
 
-    <sheet-element id="sheet">
+    <ui-sheet id="sheet">
       <h2>Hello, World!</h2>
       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit explicabo vero quas eligendi, eos cupiditate sint aliquam a omnis commodi quos in libero veniam. Quidem, non a quibusdam consequuntur mollitia officia numquam sit quos dolorum quaerat reprehenderit laboriosam perspiciatis consequatur odit error dolore recusandae iste id quam magnam ut! Sint nulla minus excepturi libero officiis, deleniti, delectus obcaecati saepe natus rerum nesciunt! Nemo quo id ipsum fugiat voluptas ducimus incidunt nulla sed, voluptates modi exercitationem quod obcaecati corporis perspiciatis dolorum ullam provident sint iusto consequatur totam dolorem. Amet, praesentium accusamus dolore hic ad iusto nostrum exercitationem velit ex optio nihil obcaecati provident enim nobis molestiae cupiditate possimus error itaque facilis eligendi placeat eos quam! Consequatur eveniet corporis nam accusantium nemo harum non explicabo accusamus. Voluptatem laborum dolores magni voluptatibus doloribus sunt? Id quae vero, nemo nam dolore ab amet distinctio molestias excepturi blanditiis quia eos et eligendi magnam voluptas iusto.</p>
 
@@ -33,6 +33,6 @@ <h2>Hello, World!</h2>
         <textarea placeholder="Text field"></textarea>
         <div contenteditable="true">Contenteditable block</div>
       </form>
-    </sheet-element>
+    </ui-sheet>
   </body>
 </html>
diff --git a/test/main.css b/test/main.css
index 902f4a7..4bb32f3 100644
--- a/test/main.css
+++ b/test/main.css
@@ -1,5 +1,5 @@
 /*
-  Copyright (c) 2022-2023 Ivan Teplov
+  Copyright (c) 2022-2024 Ivan Teplov
   Licensed under the Apache license 2.0
 */
 
diff --git a/test/main.js b/test/main.js
index 1c2f7d2..a595c60 100644
--- a/test/main.js
+++ b/test/main.js
@@ -1,12 +1,12 @@
 //
-// Copyright (c) 2022-2023 Ivan Teplov
+// Copyright (c) 2022-2024 Ivan Teplov
 // Licensed under the Apache license 2.0
 //
 
 import SheetElement from "../library/sheet"
 
 
-customElements.define("sheet-element", SheetElement)
+customElements.define("ui-sheet", SheetElement)
 
 const openSheetButton = document.getElementById("open-sheet")
 const sheet = document.getElementById("sheet")

From 7f31673a320c6c49a557aa99fb75c79194632eef Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Sat, 16 Mar 2024 12:34:19 +0100
Subject: [PATCH 27/30] Generate simple API documentation

---
 documentation/API.md                   |  22 +++++
 documentation/generateDocumentation.js | 119 +++++++++++++++++++++++++
 library/sheet.jsx                      |  12 ++-
 3 files changed, 150 insertions(+), 3 deletions(-)
 create mode 100644 documentation/API.md
 create mode 100644 documentation/generateDocumentation.js

diff --git a/documentation/API.md b/documentation/API.md
new file mode 100644
index 0000000..d0246a4
--- /dev/null
+++ b/documentation/API.md
@@ -0,0 +1,22 @@
+# SheetElement
+HTML Custom Element for creating sheets
+
+## get open(): boolean
+Check if the sheet is open
+
+## set open(value: boolean): boolean
+An alternative way to open or close the sheet
+*example*: sheet.open = true  // the same as executing sheet.showModal()
+sheet.open = false // the same as executing sheet.close()
+
+## showModal(): void
+Open the sheet
+
+## close(): void
+Collapse the sheet
+
+## connectedCallback(): void
+Attaches event listeners to the window when the sheet is mounted
+
+## disconnectedCallback(): void
+Removes all the event listeners when the sheet is no longer mounted
\ No newline at end of file
diff --git a/documentation/generateDocumentation.js b/documentation/generateDocumentation.js
new file mode 100644
index 0000000..b652a37
--- /dev/null
+++ b/documentation/generateDocumentation.js
@@ -0,0 +1,119 @@
+#!/usr/bin/env deno
+//
+// Copyright (c) 2024 Ivan Teplov
+// Licensed under the Apache license 2.0
+//
+
+import { doc as readJSDoc } from "https://deno.land/x/deno_doc@0.117.0/mod.ts"
+import * as path from "https://deno.land/std@0.207.0/path/mod.ts"
+
+async function main() {
+  const inputFile = new URL("../library/sheet.jsx", import.meta.url).toString()
+  const outputFile = path.fromFileUrl(new URL("./API.md", import.meta.url))
+
+  const documentationInJSON = await readJSDoc(inputFile)
+
+  const documentationInMarkdown = documentationInJSON
+    .filter(DocumentationGenerator.isObjectDocumentationToBeDisplayed)
+    .map(object => DocumentationGenerator.generate(object))
+    .join("\n\n\n")
+
+  await Deno.writeTextFile(outputFile, documentationInMarkdown)
+}
+
+class Markdown {
+  /**
+   * @param {string} name
+   * @param {number} level
+   */
+  static title(name, level = 1) {
+    return "#".repeat(Math.max(level, 1)) + " " + name
+  }
+
+  /**
+   * @param {string} name
+   * @param {string} information
+   */
+  static property(name, information) {
+    return `*${name}*: ${information}`
+  }
+}
+
+function join(items, separator = "\n") {
+  return (Array.isArray(items) && items || [])
+    .filter(Boolean)
+    .map(string => string.trim())
+    .join(separator)
+}
+
+class DocumentationGenerator {
+  static generateFunctionArgumentDocumentation(argument, functionTags) {
+    let result = argument.name
+
+    if (argument.optional) {
+      result += "?"
+    }
+
+    const paramDocumentation = functionTags
+      .find(tag => tag.kind === "param" && tag.name === argument.name)
+
+    if (paramDocumentation) {
+      result += `: ${paramDocumentation.type}`
+    }
+
+    return result
+  }
+
+  static generateObjectName(object) {
+    let name = object.name
+
+    switch (object.kind) {
+      case "getter":
+      case "setter":
+        name = `${object.kind === "getter" ? "get" : "set"} ${name}`
+      case "function":
+      case "method":
+        if (object.functionDef.isAsync) {
+          name = `async ${name}`
+        }
+
+        name += "(" + object.functionDef.params.map(argument => this.generateFunctionArgumentDocumentation(argument, object.jsDoc.tags)) + ")"
+        name += ": " + (object.functionDef.returnType?.repr ?? object.jsDoc.tags.find(tag => tag.kind === "return")?.type ?? "unknown")
+        break
+    }
+
+    return name
+  }
+
+  static generateTags(object) {
+    if (!object.jsDoc?.tags) {
+      object.jsDoc ??= {}
+      object.jsDoc.tags = []
+    }
+
+    if (["function", "method", "getter", "setter"].indexOf(object.kind) !== -1) {
+      object.jsDoc.tags = object.jsDoc.tags.filter(tag => tag.kind !== "param" && tag.kind !== "return")
+    }
+
+    return object.jsDoc.tags.map(
+      tag => Markdown.property(join([tag.kind, tag.name], " "), tag?.doc ?? tag?.type ?? "")
+    )
+  }
+
+  static generate(object, deepnessLevel = 1) {
+    return join([
+      join([
+        Markdown.title(this.generateObjectName(object), deepnessLevel),
+        object.jsDoc?.doc,
+        ...this.generateTags(object),
+      ]),
+      ...(object.classDef?.methods.map(method => this.generate(method, deepnessLevel + 1)) ?? []),
+    ], "\n\n")
+  }
+
+  static isObjectDocumentationToBeDisplayed(object) {
+    return object.name !== "default" && object.declarationKind === "export"
+  }
+}
+
+await main()
diff --git a/library/sheet.jsx b/library/sheet.jsx
index fe14fe8..69fa4d6 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -5,9 +5,12 @@
 
 /** @jsx createElement */
 
-import { isFocused, touchPosition, getCSSVariableValue, mapNumber, createElement, elementContains } from "./helpers"
-import { styleSheet } from "./styleSheet"
+import { isFocused, touchPosition, getCSSVariableValue, mapNumber, createElement, elementContains } from "./helpers.js"
+import { styleSheet } from "./styleSheet.js"
 
+/**
+ * HTML Custom Element for creating sheets
+ */
 export class SheetElement extends HTMLElement {
   /**
    * Inner wrapper
@@ -91,12 +94,13 @@ export class SheetElement extends HTMLElement {
    * @returns {boolean}
    */
   get open() {
-    return this.getAttribute("open")
+    return this.hasAttribute("open")
   }
 
   /**
    * An alternative way to open or close the sheet
    * @param {boolean} value
+   * @returns {boolean}
    * @example
    * sheet.open = true  // the same as executing sheet.showModal()
    * sheet.open = false // the same as executing sheet.close()
@@ -104,8 +108,10 @@ export class SheetElement extends HTMLElement {
   set open(value) {
     if (value === false || value === undefined) {
       this.close()
+      return false
     } else {
       this.showModal()
+      return true
     }
   }
 

From 7354771519422af8d282d9b8665220ce6a18695c Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Sun, 17 Mar 2024 16:18:40 +0100
Subject: [PATCH 28/30] Improve documentation generation

---
 documentation/API.md                   | 76 +++++++++++++++++++++-----
 documentation/generateDocumentation.js | 44 ++++++++++++---
 library/sheet.jsx                      | 65 +++++++++++++++-------
 3 files changed, 144 insertions(+), 41 deletions(-)

diff --git a/documentation/API.md b/documentation/API.md
index d0246a4..c0414de 100644
--- a/documentation/API.md
+++ b/documentation/API.md
@@ -1,22 +1,72 @@
-# SheetElement
+# `SheetElement`
+
 HTML Custom Element for creating sheets
 
-## get open(): boolean
-Check if the sheet is open
+<details open>
+<summary><b>Example:</b> Define the element in the registry</summary>
 
-## set open(value: boolean): boolean
-An alternative way to open or close the sheet
-*example*: sheet.open = true  // the same as executing sheet.showModal()
-sheet.open = false // the same as executing sheet.close()
+```jsx
+customElements.define("ui-sheet", SheetElement)
+```
+
+</details>
+
+<details open>
+<summary><b>Example:</b> Execute certain actions when the sheet opens or closes</summary>
+
+```jsx
+const sheet = document.querySelector("...")
+
+sheet.addEventListener("show", event => {
+  console.log("The sheet is now shown")
+})
+
+sheet.addEventListener("close", event => {
+  console.log("The sheet is now closed")
+})
+```
+
+</details>
+
+<details open>
+<summary><b>Example:</b> Open the sheet programmatically</summary>
+
+```jsx
+const sheet = document.querySelector("...")
+
+sheet.showModal()
+// is the same as:
+sheet.show()
+```
+
+</details>
+
+
+## `showModal(): void`
 
-## showModal(): void
 Open the sheet
 
-## close(): void
+
+## `close(): void`
+
 Collapse the sheet
 
-## connectedCallback(): void
-Attaches event listeners to the window when the sheet is mounted
 
-## disconnectedCallback(): void
-Removes all the event listeners when the sheet is no longer mounted
\ No newline at end of file
+## `get open(): boolean`
+
+Check if the sheet is open
+
+
+## `set open(value: boolean): boolean`
+
+An alternative way to open or close the sheet
+
+<details open>
+<summary><b>Example</b></summary>
+
+```jsx
+sheet.open = true  // the same as executing sheet.showModal()
+sheet.open = false // the same as executing sheet.close()
+```
+
+</details>
\ No newline at end of file
diff --git a/documentation/generateDocumentation.js b/documentation/generateDocumentation.js
index b652a37..d624231 100644
--- a/documentation/generateDocumentation.js
+++ b/documentation/generateDocumentation.js
@@ -16,7 +16,7 @@ async function main() {
   const documentationInMarkdown = documentationInJSON
     .filter(DocumentationGenerator.isObjectDocumentationToBeDisplayed)
     .map(object => DocumentationGenerator.generate(object))
-    .join("\n\n\n")
+    .join("\n\n\n\n") + "\n"
 
   await Deno.writeTextFile(outputFile, documentationInMarkdown)
 }
@@ -35,11 +35,25 @@ class Markdown {
    * @param {string} information
    */
   static property(name, information) {
-    return `*${name}*: ${information}`
+    return `**${name}**: ${information}`
+  }
+
+  /**
+   * @see https://gist.github.com/scmx/eca72d44afee0113ceb0349dd54a84a2
+   */
+  static dropdown(summary, contents) {
+    return (
+      "<details open>\n" +
+        `<summary>${summary}</summary>\n` +
+        `\n` +
+        `${contents}\n` +
+        `\n` +
+      "</details>"
+    )
   }
 }
 
-function join(items, separator = "\n") {
+function join(items, separator = " ") {
   return (Array.isArray(items) && items || [])
     .filter(Boolean)
     .map(string => string.trim())
@@ -82,7 +96,7 @@ class DocumentationGenerator {
         break
     }
 
-    return name
+    return "`" + name + "`"
   }
 
   static generateTags(object) {
@@ -96,19 +110,35 @@ class DocumentationGenerator {
     }
 
     return object.jsDoc.tags.map(
-      tag => Markdown.property(join([tag.kind, tag.name], " "), tag?.doc ?? tag?.type ?? "")
+      tag => tag.kind === "example"
+        ? this.generateExample(tag)
+        : Markdown.property(
+          join([tag.kind, tag.name], " "),
+          tag?.doc ?? tag?.type ?? ""
+        )
     )
   }
 
+  static generateExample(tag) {
+    const summaryMatchGroup = /\<caption\>([^\<\>]*)\<\/caption\>/.exec(tag.doc)
+    const summaryString = summaryMatchGroup?.[1] ?? ""
+    const summaryCode = summaryString ? `<b>Example:</b> ${summaryString}` : "<b>Example</b>"
+    const code = tag.doc
+      .substring(summaryMatchGroup?.[0].length ?? 0)
+      .trim()
+
+    return Markdown.dropdown(summaryCode, "```jsx\n" + code + "\n```")
+  }
+
   static generate(object, deepnessLevel = 1) {
     return join([
       join([
         Markdown.title(this.generateObjectName(object), deepnessLevel),
         object.jsDoc?.doc,
         ...this.generateTags(object),
-      ]),
+      ], "\n\n"),
       ...(object.classDef?.methods.map(method => this.generate(method, deepnessLevel + 1)) ?? []),
-    ], "\n\n")
+    ], "\n\n\n")
   }
 
   static isObjectDocumentationToBeDisplayed(object) {
diff --git a/library/sheet.jsx b/library/sheet.jsx
index 69fa4d6..92cf0ba 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -10,6 +10,27 @@ import { styleSheet } from "./styleSheet.js"
 
 /**
  * HTML Custom Element for creating sheets
+ *
+ * @example <caption>Define the element in the registry</caption>
+ * customElements.define("ui-sheet", SheetElement)
+ *
+ * @example <caption>Execute certain actions when the sheet opens or closes</caption>
+ * const sheet = document.querySelector("...")
+ *
+ * sheet.addEventListener("show", event => {
+ *   console.log("The sheet is now shown")
+ * })
+ *
+ * sheet.addEventListener("close", event => {
+ *   console.log("The sheet is now closed")
+ * })
+ *
+ * @example <caption>Open the sheet programmatically</caption>
+ * const sheet = document.querySelector("...")
+ *
+ * sheet.showModal()
+ * // is the same as:
+ * sheet.show()
  */
 export class SheetElement extends HTMLElement {
   /**
@@ -89,6 +110,27 @@ export class SheetElement extends HTMLElement {
     this.addEventListener("click", this.#onClick)
   }
 
+  /**
+   * Open the sheet
+   */
+  showModal() {
+    this.setAttribute("open", true)
+    this.dispatchEvent(new CustomEvent("show"))
+  }
+
+  /**
+   * Open the sheet
+   */
+  show = this.showModal
+
+  /**
+   * Collapse the sheet
+   */
+  close() {
+    this.removeAttribute("open")
+    this.dispatchEvent(new CustomEvent("close"))
+  }
+
   /**
    * Check if the sheet is open
    * @returns {boolean}
@@ -115,27 +157,6 @@ export class SheetElement extends HTMLElement {
     }
   }
 
-  /**
-   * Open the sheet
-   */
-  showModal() {
-    this.setAttribute("open", true)
-    this.dispatchEvent(new CustomEvent("show"))
-  }
-
-  /**
-   * Open the sheet
-   */
-  show = this.showModal
-
-  /**
-   * Collapse the sheet
-   */
-  close() {
-    this.removeAttribute("open")
-    this.dispatchEvent(new CustomEvent("close"))
-  }
-
   /**
    * Hide the sheet when clicking at the background
    * @param {PointerEvent} event
@@ -245,6 +266,7 @@ export class SheetElement extends HTMLElement {
 
   /**
    * Attaches event listeners to the window when the sheet is mounted
+   * @ignore
    */
   connectedCallback() {
     window.addEventListener("keyup", this.#eventListeners.onKeyUp)
@@ -258,6 +280,7 @@ export class SheetElement extends HTMLElement {
 
   /**
    * Removes all the event listeners when the sheet is no longer mounted
+   * @ignore
    */
   disconnectedCallback() {
     window.removeEventListener("keyup", this.#eventListeners.onKeyUp)

From 8c948d9b77bdc74150a29e4fa893814ec531e09a Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Sun, 17 Mar 2024 16:27:04 +0100
Subject: [PATCH 29/30] Bind options to HTML attributes

---
 library/sheet.jsx | 33 ++++++++++++++++++++++-----------
 test/index.html   |  2 +-
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/library/sheet.jsx b/library/sheet.jsx
index 92cf0ba..3e1d9ee 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -57,21 +57,32 @@ export class SheetElement extends HTMLElement {
     onClick: this.#onClick.bind(this)
   }
 
-  /**
-   * @param {object} options
-   * @param {boolean?} options.closeOnBackgroundClick
-   * @param {boolean?} options.closeOnEscapeKey
-   */
-  constructor(options = {}) {
+  options = {
+    closeOnBackgroundClick: true,
+    closeOnEscapeKey: true
+  }
+
+  constructor() {
     super()
 
     this.role = "dialog"
 
-    this.options = {
-      closeOnBackgroundClick: true,
-      closeOnEscapeKey: true,
-      ...options
-    }
+    Object.defineProperties(this.options, {
+      closeOnBackgroundClick: {
+        get: () =>
+          !this.hasAttribute("ignore-background-click"),
+        set: value => Boolean(value)
+          ? this.removeAttribute("ignore-background-click")
+          : this.setAttribute("ignore-background-click", true)
+      },
+      closeOnEscapeKey: {
+        get: () =>
+          !this.hasAttribute("ignore-escape-key"),
+        set: value => Boolean(value)
+          ? this.removeAttribute("ignore-escape-key")
+          : this.setAttribute("ignore-escape-key", true)
+      }
+    })
 
     const shadowRoot = this.attachShadow({
       mode: "open"
diff --git a/test/index.html b/test/index.html
index 0ee218c..5e4167b 100644
--- a/test/index.html
+++ b/test/index.html
@@ -23,7 +23,7 @@
     <!-- Button to open a sheet -->
     <button type="button" id="open-sheet" aria-controls="sheet">Open Sheet</button>
 
-    <ui-sheet id="sheet">
+    <ui-sheet id="sheet" ignore-escape-key>
       <h2>Hello, World!</h2>
       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit explicabo vero quas eligendi, eos cupiditate sint aliquam a omnis commodi quos in libero veniam. Quidem, non a quibusdam consequuntur mollitia officia numquam sit quos dolorum quaerat reprehenderit laboriosam perspiciatis consequatur odit error dolore recusandae iste id quam magnam ut! Sint nulla minus excepturi libero officiis, deleniti, delectus obcaecati saepe natus rerum nesciunt! Nemo quo id ipsum fugiat voluptas ducimus incidunt nulla sed, voluptates modi exercitationem quod obcaecati corporis perspiciatis dolorum ullam provident sint iusto consequatur totam dolorem. Amet, praesentium accusamus dolore hic ad iusto nostrum exercitationem velit ex optio nihil obcaecati provident enim nobis molestiae cupiditate possimus error itaque facilis eligendi placeat eos quam! Consequatur eveniet corporis nam accusantium nemo harum non explicabo accusamus. Voluptatem laborum dolores magni voluptatibus doloribus sunt? Id quae vero, nemo nam dolore ab amet distinctio molestias excepturi blanditiis quia eos et eligendi magnam voluptas iusto.</p>
 

From 6cde1a3d9e7f5f27c979c66aa30454c4aabea70a Mon Sep 17 00:00:00 2001
From: Ivan Teplov <iteplov7@gmail.com>
Date: Sun, 17 Mar 2024 16:44:33 +0100
Subject: [PATCH 30/30] Update documentation

---
 README.md                              |  8 ++++
 documentation/API.md                   | 52 +++++++++++++++++++++++++-
 documentation/generateDocumentation.js |  8 +++-
 library/sheet.jsx                      | 29 +++++++++++++-
 package.json                           |  3 +-
 5 files changed, 94 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index d0bd4dc..219600d 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,16 @@
 # HTML Sheet Element
+
 HTML Custom Element for creating sheets
 
+
 ## Features
+
 - There is a draggable area to resize 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
   - This behavior is configurable. You can turn off the `Esc` or the click outside the sheet when you want.
 
+
+## API Documentation
+
+You can find API documentation [here](./documentation/API.md)
+
diff --git a/documentation/API.md b/documentation/API.md
index c0414de..d70569b 100644
--- a/documentation/API.md
+++ b/documentation/API.md
@@ -3,10 +3,26 @@
 HTML Custom Element for creating sheets
 
 <details open>
-<summary><b>Example:</b> Define the element in the registry</summary>
+<summary><b>Example:</b> Define the element in the registry and use it in your HTML</summary>
 
 ```jsx
 customElements.define("ui-sheet", SheetElement)
+
+// in HTML:
+<ui-sheet>
+  <p>Hello World!</p>
+</ui-sheet>
+```
+
+</details>
+
+<details open>
+<summary><b>Example:</b> Sheet open by default</summary>
+
+```jsx
+<ui-sheet open>
+  <p>Hello World!</p>
+</ui-sheet>
 ```
 
 </details>
@@ -42,11 +58,43 @@ sheet.show()
 </details>
 
 
+## `options`
+
+Options for behavior customization
+
+<details open>
+<summary><b>Example:</b> Make the sheet <i>not</i> close on background click</summary>
+
+```jsx
+<ui-sheet ignore-background-click>
+  ...
+</ui-sheet>
+```
+
+</details>
+
+<details open>
+<summary><b>Example:</b> Make the sheet <i>not</i> close when pressing Escape</summary>
+
+```jsx
+<ui-sheet ignore-escape-key>
+  ...
+</ui-sheet>
+```
+
+</details>
+
+
 ## `showModal(): void`
 
 Open the sheet
 
 
+## `show(): void`
+
+Open the sheet
+
+
 ## `close(): void`
 
 Collapse the sheet
@@ -69,4 +117,4 @@ sheet.open = true  // the same as executing sheet.showModal()
 sheet.open = false // the same as executing sheet.close()
 ```
 
-</details>
\ No newline at end of file
+</details>
diff --git a/documentation/generateDocumentation.js b/documentation/generateDocumentation.js
index d624231..6a38f34 100644
--- a/documentation/generateDocumentation.js
+++ b/documentation/generateDocumentation.js
@@ -96,6 +96,10 @@ class DocumentationGenerator {
         break
     }
 
+    if (object.isStatic) {
+      name = "static " + name
+    }
+
     return "`" + name + "`"
   }
 
@@ -120,9 +124,10 @@ class DocumentationGenerator {
   }
 
   static generateExample(tag) {
-    const summaryMatchGroup = /\<caption\>([^\<\>]*)\<\/caption\>/.exec(tag.doc)
+    const summaryMatchGroup = /\<caption\>(([^\<\n]|<\/?i>|<\/?b>|<\/?u>|<\/?a>)*)\<\/caption\>/.exec(tag.doc)
     const summaryString = summaryMatchGroup?.[1] ?? ""
     const summaryCode = summaryString ? `<b>Example:</b> ${summaryString}` : "<b>Example</b>"
+
     const code = tag.doc
       .substring(summaryMatchGroup?.[0].length ?? 0)
       .trim()
@@ -137,6 +142,7 @@ class DocumentationGenerator {
         object.jsDoc?.doc,
         ...this.generateTags(object),
       ], "\n\n"),
+      ...(object.classDef?.properties.map(property => this.generate(property, deepnessLevel + 1)) ?? []),
       ...(object.classDef?.methods.map(method => this.generate(method, deepnessLevel + 1)) ?? []),
     ], "\n\n\n")
   }
diff --git a/library/sheet.jsx b/library/sheet.jsx
index 3e1d9ee..9af0a50 100644
--- a/library/sheet.jsx
+++ b/library/sheet.jsx
@@ -11,9 +11,19 @@ import { styleSheet } from "./styleSheet.js"
 /**
  * HTML Custom Element for creating sheets
  *
- * @example <caption>Define the element in the registry</caption>
+ * @example <caption>Define the element in the registry and use it in your HTML</caption>
  * customElements.define("ui-sheet", SheetElement)
  *
+ * // in HTML:
+ * <ui-sheet>
+ *   <p>Hello World!</p>
+ * </ui-sheet>
+ *
+ * @example <caption>Sheet open by default</caption>
+ * <ui-sheet open>
+ *   <p>Hello World!</p>
+ * </ui-sheet>
+ *
  * @example <caption>Execute certain actions when the sheet opens or closes</caption>
  * const sheet = document.querySelector("...")
  *
@@ -57,6 +67,19 @@ export class SheetElement extends HTMLElement {
     onClick: this.#onClick.bind(this)
   }
 
+  /**
+   * Options for behavior customization
+   *
+   * @example <caption>Make the sheet <i>not</i> close on background click</caption>
+   * <ui-sheet ignore-background-click>
+   *   ...
+   * </ui-sheet>
+   *
+   * @example <caption>Make the sheet <i>not</i> close when pressing Escape</caption>
+   * <ui-sheet ignore-escape-key>
+   *   ...
+   * </ui-sheet>
+   */
   options = {
     closeOnBackgroundClick: true,
     closeOnEscapeKey: true
@@ -132,7 +155,9 @@ export class SheetElement extends HTMLElement {
   /**
    * Open the sheet
    */
-  show = this.showModal
+  show() {
+    this.showModal()
+  }
 
   /**
    * Collapse the sheet
diff --git a/package.json b/package.json
index f05dde0..78c6683 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
   },
   "scripts": {
     "dev": "vite --config test/vite.config.js",
-    "build": "vite build"
+    "build": "vite build",
+    "docs:api": "deno run -A documentation/generateDocumentation.js"
   },
   "devDependencies": {
     "vite": "^4.3.0"
