@johnmorrisdotca/kazoku-ui 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.2.1] - 2026-11-01
+
+- `ignore` now sees through shadow DOM: it tests the elements on the event's `composedPath()`, from the innermost up to the view, so a button inside a web component's open shadow root is left alone. Before, only the event's target (the host) was tested. A closed shadow root stays a limit: mark its host with `data-kazoku-ignore`.
+
 ## [0.2.0] - 2026-11-01
 
 - A button, link or form control inside the view still works: a pointer press on a child that matches the new `ignore` selector is not captured, so the click goes through and a drag from the empty view still turns it. Attribute `ignore` and `createViewController` option `ignore`; the default is `button, a, input, select, textarea, label, [data-kazoku-ignore]` (`DEFAULT_IGNORE`); `ignore=""` leaves nothing alone.

package/README.md

@@ -104,6 +104,8 @@ Options of `createViewController` that match: `zoom` (`"fit"` or a number), `fit
 
 The hands capture the pointer on the `for` element, so a press on a button or link placed inside it would be taken for a drag and its click lost. A press on anything that matches `ignore` is left alone (no capture, no drag, no double-tap), and the click goes through. Mark any other child with `data-kazoku-ignore`. Dragging from the empty part of the view turns it as before.
 
+`ignore` also sees through shadow DOM: it tests every element on the event's path from the innermost one up to the view, so a button inside a web component's open shadow root (a card's own Animate button, say) is left alone even though the event's target is the component. A closed shadow root hides its inside from the page, so only the component itself can be matched: mark the host with `data-kazoku-ignore`, or add its tag name to `ignore`.
+
 ### Opening at the scene's natural size
 
 Zoom 1 is Fit, whatever size that is on the page. A page that draws its scene at `fitScale` (for example 0.4 of natural size when it fits the view) and wants to open at natural size sets `zoom="1"` and tells the controls the scale:

package/dist/view-controls/controller.js

@@ -200,16 +200,26 @@ export function createViewController(options = {}) {
         };
         const canTurn = () => controller.turnable;
         const ignored = (e) => {
-            const target = e.target;
-            if (controller.ignore === "" || typeof target?.closest !== "function")
+            if (controller.ignore === "")
                 return false;
+            const path = typeof e.composedPath === "function" ? e.composedPath() : [];
             try {
-                const hit = target.closest(controller.ignore);
-                return hit !== null && hit !== view && view.contains(hit);
+                if (path.length === 0) {
+                    const target = e.target;
+                    const hit = typeof target?.closest === "function" ? target.closest(controller.ignore) : null;
+                    return hit !== null && hit !== view && view.contains(hit);
+                }
+                for (const node of path) {
+                    if (node === view)
+                        return false;
+                    if (typeof node.matches === "function" && node.matches(controller.ignore))
+                        return true;
+                }
             }
             catch {
                 return false;
             }
+            return false;
         };
         const onDown = (e) => {
             if (e.pointerType === "mouse" && e.button > 2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/kazoku-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Kazoku UI 家族, the family's shared interface parts as their own versioned package. First part: view controls for any 3D or zoomable view (angle, tilt, auto-turn, zoom about the pointer, pan, touch, address state) as a framework-free custom element and a plain controller. Zero dependencies.",
   "keywords": [
     "view-controls",