Update dependencies

index.html

@@ -8,7 +8,7 @@
   <script>
     if (!window.CustomStateSet) location.replace("./v1/");
   </script>
-  <link rel="stylesheet" href="css/main.min.css?v2.0.0">
+  <link rel="stylesheet" href="css/main.min.css?v2.0.2">
   <meta name="description" content="Handy dependency-free floating scrollbar web component">
   <meta property="og:url" content="https://amphiluke.github.io/handy-scroll">
   <meta property="og:type" content="website">
@@ -104,8 +104,8 @@ <h3>Demo’s code</h3>
     </p>
   </footer>
 
-  <script type="module" src="js/handy-scroll.mjs?v2.0.0"></script>
-  <script type="module" src="js/main.mjs?v2.0.0"></script>
+  <script type="module" src="js/handy-scroll.mjs?v2.0.2"></script>
+  <script type="module" src="js/main.mjs?v2.0.2"></script>
   <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
 </body>
 </html>

js/handy-scroll.mjs

@@ -1,13 +1,13 @@
 /*!
-handy-scroll v2.0.0
+handy-scroll v2.0.2
 https://amphiluke.github.io/handy-scroll/
 (c) 2024 Amphiluke
 */
-const o = ':host{bottom:0;min-height:17px;overflow:auto;position:fixed}.strut{height:1px;overflow:hidden;pointer-events:none;&:before{content:" "}}:host,.strut{font-size:1px;line-height:0;margin:0;padding:0}:host(:state(latent)){bottom:110vh;.strut:before{content:"  "}}:host([viewport]){display:block;position:sticky}:host([viewport]:state(latent)){position:fixed}';
+const o = ':host{bottom:0;min-height:17px;overflow:auto;position:fixed}.strut{height:1px;overflow:hidden;pointer-events:none;&:before{content:" "}}:host,.strut{font-size:1px;line-height:0;margin:0;padding:0}:host(:state(latent)){bottom:110vh;.strut:before{content:"  "}}:host([viewport]:not([hidden])){display:block}:host([viewport]){position:sticky}:host([viewport]:state(latent)){position:fixed}';
 let h = (n) => `Attribute ‘${n}’ must reference a valid container ‘id’`;
 class r extends HTMLElement {
   static get observedAttributes() {
-    return ["owner", "viewport"];
+    return ["owner", "viewport", "hidden"];
   }
   #o = null;
   #t = null;
@@ -47,7 +47,13 @@ class r extends HTMLElement {
     this.#w(), this.#p(), this.#e = this.#t = null;
   }
   attributeChangedCallback(t) {
-    this.#i.size && (t === "owner" ? this.#a() : t === "viewport" && this.#c(), this.#w(), this.#p(), this.#u(), this.#f(), this.update());
+    if (this.#i.size) {
+      if (t === "hidden") {
+        this.hasAttribute("hidden") || this.update();
+        return;
+      }
+      t === "owner" ? this.#a() : t === "viewport" && this.#c(), this.#w(), this.#p(), this.#u(), this.#f(), this.update();
+    }
   }
   #a() {
     let t = this.getAttribute("owner");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "handy-scroll-page",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": true,
   "description": "Live demos for the handy-scroll project",
   "scripts": {
@@ -17,7 +17,7 @@
   },
   "homepage": "https://amphiluke.github.io/handy-scroll/",
   "devDependencies": {
-    "lightningcss-cli": "^1.26.0",
+    "lightningcss-cli": "^1.27.0",
     "normalize.css": "^8.0.1"
   }
 }