fix: create class to html too

README.md

@@ -130,11 +130,11 @@ To locally test Atomium using Alpha/Beta versions, follow the steps below:
 
 1. Update the `.release-please-manifest.json` file in the root directory of the Atomium project with the next version number + alpha. Ex: the current version is `2.10.0`, so the next alpha version can be `2.11.0-alpha.1` (OBS: in the example, it is updating only the core lib, update the libs that your changes impact).
 
-![add alpha version to release](https://github.com/user-attachments/assets/3e3adaa2-1bcd-4442-8d1a-118cc14cc274)
+![add alpha version to release](https://github.com/user-attachments/assets/91418116-266c-45f1-9cf2-bdf2d6c1a7eb)
 
 2. Add the same version to the repespective `package.json` file in the root directory of the lib project. Ex: packages/core/package.json
 
-![add alpha to package](https://github.com/user-attachments/assets/3e3adaa2-1bcd-4442-8d1a-118cc14cc274)
+![add alpha to package](https://github.com/user-attachments/assets/ec4bfbf2-a822-4cf5-b7c4-66575fd36230)
 
 3. Build the Atomium libraries by running the following command in the root directory of the Atomium project
 

packages/core/src/components/modal/modal.tsx

@@ -1,20 +1,9 @@
-import {
-  Component,
-  Event,
-  EventEmitter,
-  Host,
-  Prop,
-  Watch,
-  h,
-} from '@stencil/core'
+import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core'
 
 import { IconProps } from '../../icons'
 
 type AlertType = Record<'alert' | 'error', { icon: IconProps; color: string }>
 
-/* @todo it's needed to prevent a ionic error. In the version 8.0 it was fixed, remove it after the upgrade.
- *  https://github.com/ionic-team/ionic-framework/issues/23942
- */
 const BACKDROP_NO_SCROLL = 'backdrop-no-scroll'
 
 type HTMLAtomModalElement = HTMLIonModalElement & { close: () => Promise<void> }
@@ -44,13 +33,6 @@ export class AtomModal {
   @Event() atomPrimaryClick: EventEmitter
   @Event() atomSecondaryClick: EventEmitter
 
-  @Watch('isOpen')
-  watchPropHandler(newValue: boolean) {
-    if (newValue) {
-      document.body.classList.add(BACKDROP_NO_SCROLL)
-    }
-  }
-
   private modal: HTMLAtomModalElement
 
   private readonly alertMap: AlertType = {
@@ -65,12 +47,16 @@ export class AtomModal {
   }
 
   componentDidLoad() {
+    /* @todo it's needed to prevent a ionic error. In the version 8.0 it was fixed, remove it after the upgrade.
+     *  https://github.com/ionic-team/ionic-framework/issues/23942
+     */
     document.body.classList.remove(BACKDROP_NO_SCROLL)
 
     this.modal.close = async () => {
       await this.modal.dismiss()
 
       document.body.classList.remove(BACKDROP_NO_SCROLL)
+      document.documentElement.classList.remove(BACKDROP_NO_SCROLL)
     }
   }
 
@@ -80,6 +66,9 @@ export class AtomModal {
 
   private readonly handleDidPresent = () => {
     this.atomDidPresent.emit(this.modal)
+
+    document.body.classList.add(BACKDROP_NO_SCROLL)
+    document.documentElement.classList.add(BACKDROP_NO_SCROLL)
   }
 
   private readonly handleCloseClick = async () => {

packages/core/src/global/global.scss

@@ -111,3 +111,7 @@ Issue: https://github.com/ionic-team/ionic-framework/issues/27500
     }
   }
 }
+
+html.backdrop-no-scroll {
+  overflow: hidden;
+}