Angular Aria Combobox and Listbox as hostDirectives mouse click functionality

### Which @angular/* package(s) are the source of the bug?

Don't known / other

### Is this a regression?

No

### Description

When using hostDirectives to implement a `Combobox`, mouse click will only open the combobox and not close it. Also the `Listbox` within will not register mouse clicks on `Option` components. Below is nearly the same example from the Docs, but using hostDirectives.

### TS
```typescript
import {
Combobox,
ComboboxInput,
ComboboxPopup,
ComboboxPopupContainer,
} from "@angular/aria/combobox";
import { Listbox, Option } from "@angular/aria/listbox";
import {
afterRenderEffect,
ChangeDetectionStrategy,
Component,
computed,
viewChild,
viewChildren,
} from "@angular/core";
import { OverlayModule } from "@angular/cdk/overlay";

@Component({
selector: "mww-select",
templateUrl: "./mww-select.html",
styleUrl: "./mww-select.css",
host: { ngCombobox: "", readonly: "" },
hostDirectives: [{ directive: Combobox, inputs: ["readonly"] }],
imports: [
ComboboxInput,
ComboboxPopup,
ComboboxPopupContainer,
Listbox,
Option,
OverlayModule,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MwwSelect {
/** The combobox listbox popup. */
listbox = viewChild>(Listbox);
/** The options available in the listbox. */
options = viewChildren>(Option);
/** A reference to the ng aria combobox. */
combobox = viewChild>(Combobox);
/** The string that is displayed in the combobox. */
displayValue = computed(() => {
const values = this.listbox()?.values() || [];
if (values.length === 0) {
return "Select a label";
}
if (values.length === 1) {
return values[0];
}
return `${values[0]} + ${values.length - 1} more`;
});
/** The labels that are available for selection. */
labels = [
"Important",
"Starred",
"Work",
"Personal",
"To Do",
"Later",
"Read",
"Travel",
];
constructor() {
// Scrolls to the active item when the active option changes.
// The slight delay here is to ensure animations are done before scrolling.
afterRenderEffect(() => {
const option = this.options().find((opt) => opt.active());
setTimeout(
() => option?.element.scrollIntoView({ block: "nearest" }),
50,
);
});
// Resets the listbox scroll position when the combobox is closed.
afterRenderEffect(() => {
if (!this.combobox()?.expanded()) {
setTimeout(() => this.listbox()?.element.scrollTo(0, 0), 150);
}
});
}
}
```
### Component HTML
```html

```
### Usage HTML
```html

```

### Please provide a link to a minimal reproduction of the bug

_No response_

### Please provide the exception or error you saw

```true

```

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI : 21.0.0
Angular : 21.0.0
Node.js : 22.18.0
Package Manager : npm 10.8.1
Operating System : win32 x64

┌───────────────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular-devkit/build-angular │ 21.0.0 │ ^21.0.0 │
│ @angular/animations │ 21.0.0 │ ^21.0.0 │
│ @angular/aria │ 21.0.0 │ ^21.0.0 │
│ @angular/cdk │ 21.0.0 │ ^21.0.0 │
│ @angular/cli │ 21.0.0 │ ^21.0.0 │
│ @angular/common │ 21.0.0 │ ^21.0.0 │
│ @angular/compiler │ 21.0.0 │ ^21.0.0 │
│ @angular/compiler-cli │ 21.0.0 │ ^21.0.0 │
│ @angular/core │ 21.0.0 │ ^21.0.0 │
│ @angular/forms │ 21.0.0 │ ^21.0.0 │
│ @angular/material │ 21.0.0 │ ^21.0.0 │
│ @angular/platform-browser │ 21.0.0 │ ^21.0.0 │
│ @angular/platform-browser-dynamic │ 21.0.0 │ ^21.0.0 │
│ @angular/router │ 21.0.0 │ ^21.0.0 │
│ rxjs │ 7.8.2 │ ^7.5.5 │
│ typescript │ 5.9.3 │ ^5.9.3 │
│ zone.js │ 0.15.1 │ ^0.15.1 │
└───────────────────────────────────┴───────────────────┴───────────────────┘
```

### Anything else?

_No response_