feat: Add "keyboard-showing" class to ion-app or app-root

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Currently, the class `.tab-bar-hidden` is added to `ion-tab-bar` when the keyboard is opened. But because it's deeply tucked away in the DOM at `body > app-root > ion-app > ion-router-outlet > app-tabs > ion-tabs > ion-tab-bar`, it's not useful elsewhere.

Could [the code that adds this class](https://github.com/ionic-team/ionic-framework/blob/221bb42c001ff0a00922d819c074003116875970/core/src/components/tab-bar/tab-bar.tsx#L109) be moved to the App component, where it could add a class to `ion-app` like ``? Then we could use `:host-context(.keyboard-showing)` throughout the app. The tab bar itself [could stop using `.tab-bar-hidden`](https://github.com/ionic-team/ionic-framework/blob/47829690b538903b70ad4fe77657404013270263/core/src/components/tab-bar/tab-bar.scss#L72) and switch to this new class.

Yes, we can use the listeners in `@capacitor/keyboard`, but we have to finesse the timing to get it to match `.tab-bar-hidden`.

### Describe the Use Case

I have some footers that need to hide just like the tab bar. I can imagine similar needs with `ion-fab`, fixed content, etc.

### Describe Preferred Solution

_No response_

### Describe Alternatives

I'm currently doing this:

```ts
import { Component, signal } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { Keyboard } from '@capacitor/keyboard';

@Component({
selector: 'app-root',
template: `



`,
standalone: true,
imports: [IonApp, IonRouterOutlet],
})
export class AppComponent {

isKeyboardShowing = signal(false);

constructor() {

Keyboard.addListener('keyboardWillShow', info => {
this.isKeyboardShowing.set(true);
});

Keyboard.addListener('keyboardWillHide', () => {
/**
* I have to finesse the timing here. I'd rather have the timing
* match the tab bar exactly. And since the logic is already built-in,
* why not move it so it's more useful?
*/
setTimeout(() => this.isKeyboardShowing.set(false), 50);
});

}
}
```

### Related Code

_No response_

### Additional Information

_No response_