[dev-v5] Add fluent-overlay web component

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/Examples/OverlayHtmlElement.razor

@@ -0,0 +1,57 @@
+<FluentSwitch @bind-Value="@FullScreen" Label="FullScreen" Margin="@Margin.Right4" />
+<FluentSwitch @bind-Value="@Interactive" Label="Interactive" Margin="@Margin.Right4" />
+<br />
+<FluentSelect @bind-Value="@CloseMode" Label="Close Mode" LabelPosition="LabelPosition.Before">
+    <FluentOption Value="manual">Manual</FluentOption>
+    <FluentOption Value="all">All</FluentOption>
+    <FluentOption Value="inside">Inside only</FluentOption>
+    <FluentOption Value="outside">Outside only</FluentOption>
+</FluentSelect>
+
+<div class="container">
+    <h3>Container</h3>
+    <button onclick="alert('clicked')">Click Me</button>
+    <fluent-overlay id="id1"
+                    dialog-style="background: transparent;"
+                    dialog-class="my-class"
+                    background="color-mix(in srgb, var(--colorBrandBackground) 20%, transparent)"
+                    fullscreen="@FullScreen"
+                    interactive="@Interactive"
+                    close-mode="@CloseMode">
+        <FluentSpinner />
+    </fluent-overlay>
+</div>
+
+<div>
+    <button onclick="document.getElementById('id1').show()">Show Overlay</button>
+    <button onclick="document.getElementById('id1').close()">Close Overlay</button>
+</div>
+
+@code
+{
+    bool FullScreen = false;
+    bool Interactive = false;
+    string CloseMode = "all";
+}
+
+<script>
+    document.getElementById('id1').addEventListener('toggle', function (event) {
+        console.log('New State:', event.detail.newState);
+    });
+</script>
+
+<style>
+    .container {
+        width: 50%;
+        height: 100px;
+        border: 1px dashed red;
+    }
+
+        .container button {
+            cursor: pointer;
+        }
+
+        .container h3:hover {
+            color: red;
+        }
+</style>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/FluentOverlay.md

@@ -0,0 +1,8 @@
+---
+title: Overlay
+route: /Overlay
+---
+
+# Overlay HTMLElement
+
+{{ OverlayHtmlElement }}

src/Core.Scripts/src/Components/Overlay/FluentOverlay-Styles.ts

@@ -0,0 +1,63 @@
+export const fluentOverlayStyles: string = `
+  :host {
+    --overlayZIndex: 99999;
+    --overlayBackground: '';
+  }
+
+  :host dialog {
+    border: none;
+    background: none;
+    z-index: var(--overlayZIndex);
+  }
+
+  :focus-visible {
+    outline: none;
+  }
+
+  :host([fullscreen]) dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  :host([fullscreen]) dialog::backdrop {
+    background-color: var(--overlayBackground);
+  }
+
+  :host(:not([fullscreen])):has(dialog[open]) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--overlayBackground);
+  }
+
+  :host(:not([fullscreen])) dialog {
+    position: fixed;
+    margin: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  :host(:not([fullscreen])) dialog::backdrop {
+    background-color: transparent;
+    width: 0;
+    height: 0;
+  }
+
+  :host([interactive][fullscreen]):has(dialog[open]) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: calc(var(--overlayZIndex) - 1);
+    background-color: var(--overlayBackground);
+  }
+
+  :host([interactive]):has(dialog[open]) {
+    pointer-events: none;
+  }
+`;