@y14e/parent-checkbox 1.0.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yusuke Kamiyamane
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+# Parent Checkbox
+
+WAI-ARIA compliant [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) (mixed) pattern implementation in TypeScript.
+
+## Install
+
+```bash
+npm i @y14e/parent-checkbox
+```
+
+```ts
+// npm
+import ParentCheckbox from '@y14e/parent-checkbox';
+
+// CDNs
+import ParentCheckbox from 'https://esm.sh/@y14e/parent-checkbox'
+// or
+import ParentCheckbox from 'https://cdn.jsdelivr.net/npm/@y14e/parent-checkbox/+esm';
+// or
+import ParentCheckbox from 'https://unpkg.com/@y14e/parent-checkbox/dist/index.js';
+```
+
+## Usage
+
+```ts
+new ParentCheckbox(root);
+// => ParentCheckbox
+//
+// root: HTMLInputElement
+```
+
+## 📦 APIs
+
+### `destroy`
+
+Destroys the instance and cleans up all event listeners.
+
+```ts
+checkbox.destroy();
+// => void
+```
+## Demo
+
+https://y14e.github.io/parent-checkbox/

package/dist/index.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+// src/index.ts
+var ParentCheckbox = class {
+  #rootElement;
+  #childElements;
+  #controller = null;
+  #isDestroyed = false;
+  constructor(root) {
+    if (!(root instanceof HTMLInputElement)) {
+      throw new TypeError("Invalid root element");
+    }
+    if (root.hasAttribute("data-parent-checkbox-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#rootElement = root;
+    const ids = root.getAttribute("aria-controls")?.trim() ?? "";
+    !ids && console.warn("Invalid aria-controls attribute");
+    this.#childElements = ids.split(/\s+/).map((id) => document.getElementById(id)).filter((element) => element instanceof HTMLInputElement);
+    !this.#childElements.length && console.warn("Missing child elements");
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#childElements.length = 0;
+    this.#rootElement.removeAttribute("data-parent-checkbox-initialized");
+  }
+  #initialize() {
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#rootElement.addEventListener("change", this.#onRootChange, {
+      signal
+    });
+    this.#childElements.forEach((child) => {
+      child.addEventListener("change", this.#onChildChange, { signal });
+    });
+    this.#update();
+    this.#rootElement.setAttribute("data-parent-checkbox-initialized", "");
+  }
+  #update() {
+    const isAllChecked = this.#childElements.every((child) => child.checked);
+    this.#rootElement.checked = isAllChecked;
+    this.#rootElement.indeterminate = !isAllChecked && this.#childElements.some((child) => child.checked);
+  }
+  #onRootChange = () => {
+    this.#rootElement.indeterminate = false;
+    const isChecked = this.#rootElement.checked;
+    this.#childElements.forEach((child) => {
+      child.checked = isChecked;
+    });
+  };
+  #onChildChange = () => {
+    this.#update();
+  };
+};
+/**
+ * Parent Checkbox
+ * WAI-ARIA compliant checkbox (mixed) pattern implementation in TypeScript.
+ *
+ * @version 1.0.7
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/parent-checkbox}
+ */
+
+module.exports = ParentCheckbox;

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+/**
+ * Parent Checkbox
+ * WAI-ARIA compliant checkbox (mixed) pattern implementation in TypeScript.
+ *
+ * @version 1.0.7
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/parent-checkbox}
+ */
+declare class ParentCheckbox {
+    #private;
+    constructor(root: HTMLInputElement);
+    destroy(): void;
+}
+
+export { ParentCheckbox as default };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Parent Checkbox
+ * WAI-ARIA compliant checkbox (mixed) pattern implementation in TypeScript.
+ *
+ * @version 1.0.7
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/parent-checkbox}
+ */
+declare class ParentCheckbox {
+    #private;
+    constructor(root: HTMLInputElement);
+    destroy(): void;
+}
+
+export { ParentCheckbox as default };

package/dist/index.js

@@ -0,0 +1,71 @@
+// src/index.ts
+var ParentCheckbox = class {
+  #rootElement;
+  #childElements;
+  #controller = null;
+  #isDestroyed = false;
+  constructor(root) {
+    if (!(root instanceof HTMLInputElement)) {
+      throw new TypeError("Invalid root element");
+    }
+    if (root.hasAttribute("data-parent-checkbox-initialized")) {
+      console.warn("Already initialized");
+      return;
+    }
+    this.#rootElement = root;
+    const ids = root.getAttribute("aria-controls")?.trim() ?? "";
+    !ids && console.warn("Invalid aria-controls attribute");
+    this.#childElements = ids.split(/\s+/).map((id) => document.getElementById(id)).filter((element) => element instanceof HTMLInputElement);
+    !this.#childElements.length && console.warn("Missing child elements");
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#childElements.length = 0;
+    this.#rootElement.removeAttribute("data-parent-checkbox-initialized");
+  }
+  #initialize() {
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#rootElement.addEventListener("change", this.#onRootChange, {
+      signal
+    });
+    this.#childElements.forEach((child) => {
+      child.addEventListener("change", this.#onChildChange, { signal });
+    });
+    this.#update();
+    this.#rootElement.setAttribute("data-parent-checkbox-initialized", "");
+  }
+  #update() {
+    const isAllChecked = this.#childElements.every((child) => child.checked);
+    this.#rootElement.checked = isAllChecked;
+    this.#rootElement.indeterminate = !isAllChecked && this.#childElements.some((child) => child.checked);
+  }
+  #onRootChange = () => {
+    this.#rootElement.indeterminate = false;
+    const isChecked = this.#rootElement.checked;
+    this.#childElements.forEach((child) => {
+      child.checked = isChecked;
+    });
+  };
+  #onChildChange = () => {
+    this.#update();
+  };
+};
+/**
+ * Parent Checkbox
+ * WAI-ARIA compliant checkbox (mixed) pattern implementation in TypeScript.
+ *
+ * @version 1.0.7
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/parent-checkbox}
+ */
+
+export { ParentCheckbox as default };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@y14e/parent-checkbox",
+  "version": "1.0.7",
+  "description": "WAI-ARIA compliant checkbox (mixed) pattern implementation in TypeScript",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build",
+    "lint": "tsc --noEmit"
+  },
+  "keywords": [
+    "a11y",
+    "accessibility",
+    "checkbox",
+    "checkboxes",
+    "component",
+    "typescript",
+    "utility"
+  ],
+  "author": "Yusuke Kamiyamane",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/y14e/parent-checkbox.git"
+  },
+  "bugs": {
+    "url": "https://github.com/y14e/parent-checkbox/issues"
+  },
+  "homepage": "https://github.com/y14e/parent-checkbox#readme",
+  "devDependencies": {
+    "bun-types": "latest",
+    "tsup": "^8.0.0",
+    "typescript": "^5.6.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}