Disable check on readonly

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/list", 
-  "version": "2.0.8",
+  "version": "2.0.9",
   "keywords": [
     "codex editor",
     "list",

src/ListRenderer/ChecklistRenderer.ts

@@ -34,6 +34,11 @@ interface ChecklistCssClasses extends ListCssClasses {
    * CSS class of the checkbox container
    */
   checkboxContainer: string;
+
+  /**
+   * CSS class for disabled checkbox check
+   */
+  checkboxCheckDisabled: string;
 }
 
 /**
@@ -61,6 +66,7 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
       noHover: `${CssPrefix}__checkbox--no-hover`,
       checkbox: `${CssPrefix}__checkbox-check`,
       checkboxContainer: `${CssPrefix}__checkbox`,
+      checkboxCheckDisabled: `${CssPrefix}__checkbox-check--disabled`,
     };
   }
 
@@ -129,6 +135,11 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
       checkboxContainer.classList.add(CheckListRenderer.CSS.itemChecked);
     }
 
+    // Disable checkbox interaction in read-only mode
+    if (this.readOnly) {
+      checkboxContainer.classList.add(CheckListRenderer.CSS.checkboxCheckDisabled);
+    }
+
     checkbox.innerHTML = IconCheck;
     checkboxContainer.appendChild(checkbox);
 

src/styles/list.pcss

@@ -159,6 +159,10 @@
         transform: scale(1);
         transition: transform 400ms ease-out, opacity 400ms;
       }
+
+      &--disabled {
+        pointer-events: none;
+      }
     }
   }
 }