Flyout: use theme default for position (#482)

Initial POC to prove if this idea is possible and how we feel about it.

I put together an example of what I understand we want to build here 😅 .
In this example, the theme author will make explicitly how they want to
use `readthedocs-flyout` HTML tag:

```html
<readthedocs-flyout position="top-right"></readthedocs-flyout>
```

That will add the class `top-right` and show the flyout as follows:


![Screenshot_2025-01-08_12-44-20](https://github.com/user-attachments/assets/14ed7946-a1ab-4c44-84dc-d2a9ee456b8c)

However, the project author can change the `position` value from the
dashboard if they prefer to override the theme's default value:


![Peek 2025-01-08
12-46](https://github.com/user-attachments/assets/d8ab340b-2fc1-4704-ac0e-4a12bfe0ae07)

* Related #51
* Requires readthedocs/ext-theme#554
* Requires readthedocs/readthedocs.org#11891
* Example using
https://test-builds.readthedocs.io/en/addons-theme-defaults/
* Closes #434

src/flyout.js

@@ -52,6 +52,19 @@ export class FlyoutElement extends LitElement {
       return;
     }
     this.config = config;
+
+    // The "position" is a value that can be defined from the dashboard.
+    // There are two main options: "Default" or a specific value.
+    // When "Default" is used, the value will be grabbed from the HTML element (e.g. explicitly set by the theme author).
+    // In case it's not defined, the value defined in the `constructor` will be used ("bottom-right")
+    const dashboardPosition = objectPath.get(
+      this.config,
+      "addons.flyout.position",
+      null,
+    );
+    if (dashboardPosition) {
+      this.position = dashboardPosition;
+    }
   }
 
   _close() {