handy-scroll 2.0.1 → 2.0.2

package/README.md

@@ -29,6 +29,12 @@ If you don’t use bundlers, just import the component as a module in your HTML
 <script type="module" src="https://esm.run/handy-scroll"></script>
 ```
 
+or in your ES modules:
+
+```javascript
+import "https://esm.run/handy-scroll";
+```
+
 ## Standard usage
 
 Drop the custom element `<handy-scroll>` where you need in your markup and link the component to the horizontally-scrollable target using the `owner` attribute:

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handy-scroll",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Handy dependency-free floating scrollbar web component",
   "exports": {
     ".": {
@@ -36,10 +36,10 @@
   },
   "homepage": "https://amphiluke.github.io/handy-scroll/",
   "devDependencies": {
-    "@eslint/js": "^9.9.1",
-    "@stylistic/eslint-plugin-js": "^2.7.2",
-    "eslint": "^9.9.1",
+    "@eslint/js": "^9.10.0",
+    "@stylistic/eslint-plugin-js": "^2.8.0",
+    "eslint": "^9.10.0",
     "globals": "^15.9.0",
-    "vite": "^5.4.2"
+    "vite": "^5.4.5"
   }
 }

package/src/handy-scroll.css

@@ -31,8 +31,11 @@
   }
 }
 
-:host([viewport]) {
+:host([viewport]:not([hidden])) {
   display: block;
+}
+
+:host([viewport]) {
   position: sticky;
 }
 

package/src/handy-scroll.mjs

@@ -4,7 +4,7 @@ let getAttributeErrorMessage = (attribute) => `Attribute ‘${attribute}’ must
 
 class HandyScroll extends HTMLElement {
   static get observedAttributes() {
-    return ["owner", "viewport"];
+    return ["owner", "viewport", "hidden"];
   }
 
   #internals = null;
@@ -73,6 +73,12 @@ class HandyScroll extends HTMLElement {
     if (!this.#eventHandlers.size) { // handle only dynamic changes when the element is completely connected
       return;
     }
+    if (name === "hidden") {
+      if (!this.hasAttribute("hidden")) {
+        this.update();
+      }
+      return;
+    }
     if (name === "owner") {
       this.#bindOwner();
     } else if (name === "viewport") {