@vectojs/core 1.9.0 → 1.9.2

package/dist/index.js

@@ -1214,6 +1214,13 @@ var Scene = (_class2 = class _Scene {
   }
   /** True when any node in the subtree has a pending animation. */
   /** True when any node in the subtree is interactive (drives a11y sync). */
+  syncOptionalAttribute(element, name, value) {
+    if (value === void 0) {
+      if (element.hasAttribute(name)) element.removeAttribute(name);
+      return;
+    }
+    if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+  }
   syncA11y(node) {
     if (!this.a11yRoot) return;
     if (node.isDOMPortal) {
@@ -1380,12 +1387,8 @@ var Scene = (_class2 = class _Scene {
         this.a11yElements.set(node.id, el);
         this.a11yNeedsReorder = true;
       }
-      if (attrs.role !== void 0 && el.getAttribute("role") !== attrs.role) {
-        el.setAttribute("role", attrs.role);
-      }
-      if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
-        el.setAttribute("aria-label", attrs.label);
-      }
+      this.syncOptionalAttribute(el, "role", attrs.role);
+      this.syncOptionalAttribute(el, "aria-label", attrs.label);
       const semanticPointerEvents = _nullishCoalesce(attrs.pointerEvents, () => ( "auto"));
       if (el.style.pointerEvents !== semanticPointerEvents) {
         el.style.pointerEvents = semanticPointerEvents;
@@ -1397,58 +1400,58 @@ var Scene = (_class2 = class _Scene {
       } else if (el.getAttribute("tabindex") !== String(desiredTabIndex)) {
         el.setAttribute("tabindex", String(desiredTabIndex));
       }
-      if (attrs.inputType !== void 0 && el.getAttribute("type") !== attrs.inputType) {
-        el.setAttribute("type", attrs.inputType);
-      }
-      if (attrs.placeholder !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
-        if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
+      this.syncOptionalAttribute(el, "type", attrs.inputType);
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+        const placeholder = _nullishCoalesce(attrs.placeholder, () => ( ""));
+        if (el.placeholder !== placeholder) el.placeholder = placeholder;
       }
-      if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
-        const safeHref = _chunkBPMNCGU7js.sanitizeUrl.call(void 0, attrs.href);
-        if (el.getAttribute("href") !== safeHref) el.setAttribute("href", safeHref);
-        if (attrs.target !== void 0 && el.getAttribute("target") !== attrs.target) {
-          el.setAttribute("target", attrs.target);
-        }
+      if (el instanceof HTMLAnchorElement) {
+        this.syncOptionalAttribute(
+          el,
+          "href",
+          attrs.href === void 0 ? void 0 : _chunkBPMNCGU7js.sanitizeUrl.call(void 0, attrs.href)
+        );
+        this.syncOptionalAttribute(el, "target", attrs.target);
       }
       if (el instanceof HTMLImageElement) {
-        if (attrs.src !== void 0 && el.src !== attrs.src) el.src = attrs.src;
-        if (attrs.alt !== void 0 && el.alt !== attrs.alt) el.alt = attrs.alt;
-      }
-      if (attrs.checked !== void 0) {
-        if (el instanceof HTMLInputElement) {
-          if (el.checked !== attrs.checked) el.checked = attrs.checked;
-        } else if (el.getAttribute("aria-checked") !== String(attrs.checked)) {
-          el.setAttribute("aria-checked", String(attrs.checked));
-        }
-      }
-      if (attrs.disabled !== void 0) {
-        if ("disabled" in el) {
-          if (el.disabled !== attrs.disabled) el.disabled = attrs.disabled;
-        } else if (el.getAttribute("aria-disabled") !== String(attrs.disabled)) {
-          el.setAttribute("aria-disabled", String(attrs.disabled));
-        }
-      }
-      if (attrs.expanded !== void 0 && el.getAttribute("aria-expanded") !== String(attrs.expanded)) {
-        el.setAttribute("aria-expanded", String(attrs.expanded));
+        this.syncOptionalAttribute(el, "src", attrs.src);
+        this.syncOptionalAttribute(el, "alt", attrs.alt);
       }
-      if (attrs.controls !== void 0 && el.getAttribute("aria-controls") !== attrs.controls) {
-        el.setAttribute("aria-controls", attrs.controls);
-      }
-      if (attrs.haspopup !== void 0 && el.getAttribute("aria-haspopup") !== attrs.haspopup) {
-        el.setAttribute("aria-haspopup", attrs.haspopup);
-      }
-      if (attrs.selected !== void 0 && el.getAttribute("aria-selected") !== String(attrs.selected)) {
-        el.setAttribute("aria-selected", String(attrs.selected));
-      }
-      if (attrs.activedescendant !== void 0 && el.getAttribute("aria-activedescendant") !== attrs.activedescendant) {
-        el.setAttribute("aria-activedescendant", attrs.activedescendant);
-      }
-      if (attrs.valuemin !== void 0 && el.getAttribute("aria-valuemin") !== attrs.valuemin) {
-        el.setAttribute("aria-valuemin", attrs.valuemin);
+      if (el instanceof HTMLInputElement) {
+        const checked = _nullishCoalesce(attrs.checked, () => ( false));
+        if (el.checked !== checked) el.checked = checked;
+      } else {
+        this.syncOptionalAttribute(
+          el,
+          "aria-checked",
+          attrs.checked === void 0 ? void 0 : String(attrs.checked)
+        );
       }
-      if (attrs.valuemax !== void 0 && el.getAttribute("aria-valuemax") !== attrs.valuemax) {
-        el.setAttribute("aria-valuemax", attrs.valuemax);
+      if ("disabled" in el) {
+        const disabled = _nullishCoalesce(attrs.disabled, () => ( false));
+        if (el.disabled !== disabled) el.disabled = disabled;
+      } else {
+        this.syncOptionalAttribute(
+          el,
+          "aria-disabled",
+          attrs.disabled === void 0 ? void 0 : String(attrs.disabled)
+        );
       }
+      this.syncOptionalAttribute(
+        el,
+        "aria-expanded",
+        attrs.expanded === void 0 ? void 0 : String(attrs.expanded)
+      );
+      this.syncOptionalAttribute(el, "aria-controls", attrs.controls);
+      this.syncOptionalAttribute(el, "aria-haspopup", attrs.haspopup);
+      this.syncOptionalAttribute(
+        el,
+        "aria-selected",
+        attrs.selected === void 0 ? void 0 : String(attrs.selected)
+      );
+      this.syncOptionalAttribute(el, "aria-activedescendant", attrs.activedescendant);
+      this.syncOptionalAttribute(el, "aria-valuemin", attrs.valuemin);
+      this.syncOptionalAttribute(el, "aria-valuemax", attrs.valuemax);
       if (attrs.value !== void 0) {
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           if (el.value !== attrs.value) {
@@ -1458,9 +1461,11 @@ var Scene = (_class2 = class _Scene {
               el._lastSyncedValue = attrs.value;
             }
           }
-        } else if (el.getAttribute("aria-valuenow") !== attrs.value) {
-          el.setAttribute("aria-valuenow", attrs.value);
+        } else {
+          this.syncOptionalAttribute(el, "aria-valuenow", attrs.value);
         }
+      } else if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+        this.syncOptionalAttribute(el, "aria-valuenow", void 0);
       }
       if (attrs.textInputStyle !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
         const textStyle = attrs.textInputStyle;
@@ -3402,7 +3407,7 @@ var DOMPortalEntity = (_class7 = class extends _chunkGKLTTGBRjs.Entity {
     if (!local) return false;
     return local.x >= 0 && local.x <= w && local.y >= 0 && local.y <= h;
   }
-  add(_child) {
+  add(..._children) {
     console.warn(`DOMPortalEntity (${this.id}) is a leaf node. Child entities are not supported.`);
     return this;
   }

package/dist/index.mjs

@@ -1214,6 +1214,13 @@ var Scene = class _Scene {
   }
   /** True when any node in the subtree has a pending animation. */
   /** True when any node in the subtree is interactive (drives a11y sync). */
+  syncOptionalAttribute(element, name, value) {
+    if (value === void 0) {
+      if (element.hasAttribute(name)) element.removeAttribute(name);
+      return;
+    }
+    if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+  }
   syncA11y(node) {
     if (!this.a11yRoot) return;
     if (node.isDOMPortal) {
@@ -1380,12 +1387,8 @@ var Scene = class _Scene {
         this.a11yElements.set(node.id, el);
         this.a11yNeedsReorder = true;
       }
-      if (attrs.role !== void 0 && el.getAttribute("role") !== attrs.role) {
-        el.setAttribute("role", attrs.role);
-      }
-      if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
-        el.setAttribute("aria-label", attrs.label);
-      }
+      this.syncOptionalAttribute(el, "role", attrs.role);
+      this.syncOptionalAttribute(el, "aria-label", attrs.label);
       const semanticPointerEvents = attrs.pointerEvents ?? "auto";
       if (el.style.pointerEvents !== semanticPointerEvents) {
         el.style.pointerEvents = semanticPointerEvents;
@@ -1397,58 +1400,58 @@ var Scene = class _Scene {
       } else if (el.getAttribute("tabindex") !== String(desiredTabIndex)) {
         el.setAttribute("tabindex", String(desiredTabIndex));
       }
-      if (attrs.inputType !== void 0 && el.getAttribute("type") !== attrs.inputType) {
-        el.setAttribute("type", attrs.inputType);
-      }
-      if (attrs.placeholder !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
-        if (el.placeholder !== attrs.placeholder) el.placeholder = attrs.placeholder;
+      this.syncOptionalAttribute(el, "type", attrs.inputType);
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+        const placeholder = attrs.placeholder ?? "";
+        if (el.placeholder !== placeholder) el.placeholder = placeholder;
       }
-      if (attrs.href !== void 0 && el instanceof HTMLAnchorElement) {
-        const safeHref = sanitizeUrl(attrs.href);
-        if (el.getAttribute("href") !== safeHref) el.setAttribute("href", safeHref);
-        if (attrs.target !== void 0 && el.getAttribute("target") !== attrs.target) {
-          el.setAttribute("target", attrs.target);
-        }
+      if (el instanceof HTMLAnchorElement) {
+        this.syncOptionalAttribute(
+          el,
+          "href",
+          attrs.href === void 0 ? void 0 : sanitizeUrl(attrs.href)
+        );
+        this.syncOptionalAttribute(el, "target", attrs.target);
       }
       if (el instanceof HTMLImageElement) {
-        if (attrs.src !== void 0 && el.src !== attrs.src) el.src = attrs.src;
-        if (attrs.alt !== void 0 && el.alt !== attrs.alt) el.alt = attrs.alt;
-      }
-      if (attrs.checked !== void 0) {
-        if (el instanceof HTMLInputElement) {
-          if (el.checked !== attrs.checked) el.checked = attrs.checked;
-        } else if (el.getAttribute("aria-checked") !== String(attrs.checked)) {
-          el.setAttribute("aria-checked", String(attrs.checked));
-        }
-      }
-      if (attrs.disabled !== void 0) {
-        if ("disabled" in el) {
-          if (el.disabled !== attrs.disabled) el.disabled = attrs.disabled;
-        } else if (el.getAttribute("aria-disabled") !== String(attrs.disabled)) {
-          el.setAttribute("aria-disabled", String(attrs.disabled));
-        }
-      }
-      if (attrs.expanded !== void 0 && el.getAttribute("aria-expanded") !== String(attrs.expanded)) {
-        el.setAttribute("aria-expanded", String(attrs.expanded));
+        this.syncOptionalAttribute(el, "src", attrs.src);
+        this.syncOptionalAttribute(el, "alt", attrs.alt);
       }
-      if (attrs.controls !== void 0 && el.getAttribute("aria-controls") !== attrs.controls) {
-        el.setAttribute("aria-controls", attrs.controls);
-      }
-      if (attrs.haspopup !== void 0 && el.getAttribute("aria-haspopup") !== attrs.haspopup) {
-        el.setAttribute("aria-haspopup", attrs.haspopup);
-      }
-      if (attrs.selected !== void 0 && el.getAttribute("aria-selected") !== String(attrs.selected)) {
-        el.setAttribute("aria-selected", String(attrs.selected));
-      }
-      if (attrs.activedescendant !== void 0 && el.getAttribute("aria-activedescendant") !== attrs.activedescendant) {
-        el.setAttribute("aria-activedescendant", attrs.activedescendant);
-      }
-      if (attrs.valuemin !== void 0 && el.getAttribute("aria-valuemin") !== attrs.valuemin) {
-        el.setAttribute("aria-valuemin", attrs.valuemin);
+      if (el instanceof HTMLInputElement) {
+        const checked = attrs.checked ?? false;
+        if (el.checked !== checked) el.checked = checked;
+      } else {
+        this.syncOptionalAttribute(
+          el,
+          "aria-checked",
+          attrs.checked === void 0 ? void 0 : String(attrs.checked)
+        );
       }
-      if (attrs.valuemax !== void 0 && el.getAttribute("aria-valuemax") !== attrs.valuemax) {
-        el.setAttribute("aria-valuemax", attrs.valuemax);
+      if ("disabled" in el) {
+        const disabled = attrs.disabled ?? false;
+        if (el.disabled !== disabled) el.disabled = disabled;
+      } else {
+        this.syncOptionalAttribute(
+          el,
+          "aria-disabled",
+          attrs.disabled === void 0 ? void 0 : String(attrs.disabled)
+        );
       }
+      this.syncOptionalAttribute(
+        el,
+        "aria-expanded",
+        attrs.expanded === void 0 ? void 0 : String(attrs.expanded)
+      );
+      this.syncOptionalAttribute(el, "aria-controls", attrs.controls);
+      this.syncOptionalAttribute(el, "aria-haspopup", attrs.haspopup);
+      this.syncOptionalAttribute(
+        el,
+        "aria-selected",
+        attrs.selected === void 0 ? void 0 : String(attrs.selected)
+      );
+      this.syncOptionalAttribute(el, "aria-activedescendant", attrs.activedescendant);
+      this.syncOptionalAttribute(el, "aria-valuemin", attrs.valuemin);
+      this.syncOptionalAttribute(el, "aria-valuemax", attrs.valuemax);
       if (attrs.value !== void 0) {
         if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
           if (el.value !== attrs.value) {
@@ -1458,9 +1461,11 @@ var Scene = class _Scene {
               el._lastSyncedValue = attrs.value;
             }
           }
-        } else if (el.getAttribute("aria-valuenow") !== attrs.value) {
-          el.setAttribute("aria-valuenow", attrs.value);
+        } else {
+          this.syncOptionalAttribute(el, "aria-valuenow", attrs.value);
         }
+      } else if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+        this.syncOptionalAttribute(el, "aria-valuenow", void 0);
       }
       if (attrs.textInputStyle !== void 0 && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
         const textStyle = attrs.textInputStyle;
@@ -3402,7 +3407,7 @@ var DOMPortalEntity = class extends Entity {
     if (!local) return false;
     return local.x >= 0 && local.x <= w && local.y >= 0 && local.y <= h;
   }
-  add(_child) {
+  add(..._children) {
     console.warn(`DOMPortalEntity (${this.id}) is a leaf node. Child entities are not supported.`);
     return this;
   }

package/dist/tree/DOMPortalEntity.d.ts

@@ -13,7 +13,7 @@ export declare class DOMPortalEntity extends Entity {
     lastOpacity: string;
     constructor(domElement: HTMLElement, width?: number, height?: number, id?: string);
     isPointInside(globalX: number, globalY: number): boolean;
-    add(_child: Entity): this;
+    add(..._children: Entity[]): this;
     render(): void;
     destroy(): void;
 }

package/dist/tree/Scene.d.ts

@@ -309,6 +309,7 @@ export declare class Scene {
     markDirty(): void;
     /** True when any node in the subtree has a pending animation. */
     /** True when any node in the subtree is interactive (drives a11y sync). */
+    private syncOptionalAttribute;
     private syncA11y;
     /**
      * Mirror one entity's static text ({@link Entity.getContentProjection}) as a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "publishConfig": {
     "access": "public"
   },