feat: Add Fullscreen API wrapping the browser Fullscreen API

Adds Component.requestFullscreen() that uses a wrapper approach to
handle Vaadin theming and overlay components correctly, along with
Page.requestFullscreen() for whole-page fullscreen, Page.exitFullscreen(),
Page.isFullscreenEnabled(), and Page.addFullscreenChangeListener().

Fixes #21902

Author: Artur-

flow-server/src/main/java/com/vaadin/flow/component/Component.java

@@ -885,6 +885,39 @@ public void scrollIntoView(ScrollOptions scrollOptions) {
         getElement().scrollIntoView(scrollOptions);
     }
 
+    /**
+     * Requests that the browser display this component in fullscreen mode.
+     * <p>
+     * Because of how Vaadin theming and overlay components work, this method
+     * does not call {@code requestFullscreen()} on the component's element
+     * directly. Instead, it fullscreens the entire page
+     * ({@code document.documentElement}), moves the component into a wrapper
+     * element, and hides the rest of the view. When fullscreen is exited
+     * (either programmatically or by the user pressing Escape), the component
+     * is automatically restored to its original position in the DOM.
+     * <p>
+     * Note that browsers require transient user activation (e.g., a button
+     * click) to enter fullscreen mode. Calling this method from a server push
+     * or view constructor will likely not work.
+     *
+     * @see com.vaadin.flow.component.page.Page#requestFullscreen()
+     * @see com.vaadin.flow.component.page.Page#exitFullscreen()
+     * @see <a href=
+     *      "https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API">MDN
+     *      Fullscreen API</a>
+     */
+    public void requestFullscreen() {
+        if (!isAttached()) {
+            throw new IllegalStateException(
+                    "Component must be attached to the UI to request fullscreen");
+        }
+        UI ui = getUI().get();
+        Element wrapperElement = ui.getInternals().getWrapperElement();
+        ui.getPage().executeJs(
+                "window.Vaadin.Flow.fullscreen.requestComponentFullscreen($0, $1)",
+                getElement(), wrapperElement);
+    }
+
     /**
      * Traverses the component tree up and returns the first ancestor component
      * that matches the given type.

flow-server/src/main/java/com/vaadin/flow/component/UI.java

@@ -108,6 +108,7 @@
  * @since 1.0
  */
 @JsModule("@vaadin/common-frontend/ConnectionIndicator.js")
+@JsModule("./fullscreenConnector.js")
 public class UI extends Component
         implements PollNotifier, HasComponents, RouterLayout {
 

flow-server/src/main/java/com/vaadin/flow/component/page/FullscreenChangeEvent.java

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2000-2026 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.component.page;
+
+import java.util.EventObject;
+
+/**
+ * Event that is fired when the fullscreen state of the page changes.
+ *
+ * @author Vaadin Ltd
+ *
+ * @see FullscreenChangeListener
+ * @see Page#addFullscreenChangeListener(FullscreenChangeListener)
+ */
+public class FullscreenChangeEvent extends EventObject {
+
+    private final boolean fullscreen;
+
+    /**
+     * Creates a new event.
+     *
+     * @param source
+     *            the page for which the fullscreen state has changed
+     * @param fullscreen
+     *            {@code true} if the page is now in fullscreen mode,
+     *            {@code false} if fullscreen was exited
+     */
+    public FullscreenChangeEvent(Page source, boolean fullscreen) {
+        super(source);
+        this.fullscreen = fullscreen;
+    }
+
+    @Override
+    public Page getSource() {
+        return (Page) super.getSource();
+    }
+
+    /**
+     * Returns whether the page is currently in fullscreen mode.
+     *
+     * @return {@code true} if in fullscreen mode, {@code false} otherwise
+     */
+    public boolean isFullscreen() {
+        return fullscreen;
+    }
+}

flow-server/src/main/java/com/vaadin/flow/component/page/FullscreenChangeListener.java

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2000-2026 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.component.page;
+
+import java.io.Serializable;
+
+/**
+ * Listener that gets notified when the fullscreen state of the page changes.
+ *
+ * @author Vaadin Ltd
+ *
+ * @see Page#addFullscreenChangeListener(FullscreenChangeListener)
+ */
+@FunctionalInterface
+public interface FullscreenChangeListener extends Serializable {
+    /**
+     * Invoked when the fullscreen state changes.
+     *
+     * @param event
+     *            a fullscreen change event
+     */
+    void fullscreenChanged(FullscreenChangeEvent event);
+}

flow-server/src/main/java/com/vaadin/flow/component/page/Page.java

@@ -24,6 +24,7 @@
 import java.util.Objects;
 import java.util.UUID;
 
+import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.Direction;
 import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.dependency.JavaScript;
@@ -57,6 +58,8 @@ public class Page implements Serializable {
     private DomListenerRegistration resizeReceiver;
     private ArrayList<BrowserWindowResizeListener> resizeListeners;
     private ValueSignal<WindowSize> windowSizeSignal;
+    private DomListenerRegistration fullscreenReceiver;
+    private ArrayList<FullscreenChangeListener> fullscreenListeners;
 
     /**
      * Creates a page instance for the given UI.
@@ -680,4 +683,104 @@ private Direction getDirectionByClientName(String directionClientName) {
                         .equals(directionClientName))
                 .findFirst().orElse(Direction.LEFT_TO_RIGHT);
     }
+
+    /**
+     * Requests that the browser display the entire page in fullscreen mode.
+     * <p>
+     * This calls {@code document.documentElement.requestFullscreen()} which
+     * fullscreens the entire page. Themes and overlay components (such as
+     * Notification and ComboBox popups) work correctly in this mode.
+     * <p>
+     * Note that browsers require transient user activation (e.g., a button
+     * click) to enter fullscreen mode. Calling this method from a server push
+     * or view constructor will likely not work.
+     *
+     * @see Component#requestFullscreen()
+     * @see #exitFullscreen()
+     * @see <a href=
+     *      "https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API">MDN
+     *      Fullscreen API</a>
+     */
+    public void requestFullscreen() {
+        executeJs("window.Vaadin.Flow.fullscreen.requestPageFullscreen()");
+    }
+
+    /**
+     * Exits fullscreen mode if the page is currently in fullscreen.
+     * <p>
+     * This calls {@code document.exitFullscreen()} on the browser. If a
+     * component was previously fullscreened via
+     * {@link Component#requestFullscreen()}, it will be automatically restored
+     * to its original position.
+     *
+     * @see #requestFullscreen()
+     * @see Component#requestFullscreen()
+     */
+    public void exitFullscreen() {
+        executeJs("document.exitFullscreen()");
+    }
+
+    /**
+     * Checks if the browser supports fullscreen mode.
+     * <p>
+     * Returns a {@link PendingJavaScriptResult} that resolves to a boolean. Use
+     * it like:
+     *
+     * <pre>
+     * page.isFullscreenEnabled().then(Boolean.class, enabled -&gt; {
+     *     if (enabled) {
+     *         page.requestFullscreen();
+     *     }
+     * });
+     * </pre>
+     *
+     * @return a pending result that resolves to {@code true} if fullscreen is
+     *         supported
+     */
+    public PendingJavaScriptResult isFullscreenEnabled() {
+        return executeJs("return document.fullscreenEnabled === true");
+    }
+
+    /**
+     * Adds a listener that is notified when the fullscreen state changes.
+     * <p>
+     * The listener is called when the page enters or exits fullscreen mode,
+     * whether triggered programmatically or by the user (e.g., pressing
+     * Escape).
+     *
+     * @param listener
+     *            the listener to add, not {@code null}
+     * @return a registration object for removing the listener
+     *
+     * @see FullscreenChangeListener#fullscreenChanged(FullscreenChangeEvent)
+     * @see Registration
+     */
+    public Registration addFullscreenChangeListener(
+            FullscreenChangeListener listener) {
+        Objects.requireNonNull(listener);
+        ensureFullscreenChangeListener();
+        if (fullscreenListeners == null) {
+            fullscreenListeners = new ArrayList<>(1);
+        }
+        fullscreenListeners.add(listener);
+        return () -> fullscreenListeners.remove(listener);
+    }
+
+    private void ensureFullscreenChangeListener() {
+        if (fullscreenReceiver == null) {
+            ui.getElement().executeJs(
+                    "window.Vaadin.Flow.fullscreen.setupFullscreenChangeListener(this)");
+            fullscreenReceiver = ui.getElement()
+                    .addEventListener("flow-fullscreenchange", e -> {
+                        boolean fullscreen = e.getEventData()
+                                .get("event.fullscreen").asBoolean();
+                        if (fullscreenListeners != null) {
+                            var evt = new FullscreenChangeEvent(this,
+                                    fullscreen);
+                            new ArrayList<>(fullscreenListeners)
+                                    .forEach(l -> l.fullscreenChanged(evt));
+                        }
+                    }).addEventData("event.fullscreen").allowInert();
+        }
+    }
 }

flow-server/src/main/resources/META-INF/frontend/fullscreenConnector.js

@@ -0,0 +1,66 @@
+window.Vaadin = window.Vaadin || {};
+window.Vaadin.Flow = window.Vaadin.Flow || {};
+window.Vaadin.Flow.fullscreen = {
+  /**
+   * Requests fullscreen for a specific component by moving it into the
+   * wrapper element and hiding the rest of the view. Fullscreens
+   * document.documentElement so that theming and overlays work correctly.
+   */
+  requestComponentFullscreen: function (element, wrapper) {
+    this._resetIfActive();
+    if (document.fullscreenEnabled !== true) {
+      return;
+    }
+    const placeholder = document.createComment('placeholder');
+    const originalParent = element.parentNode;
+    element.parentNode.insertBefore(placeholder, element);
+
+    wrapper.appendChild(element);
+    wrapper.firstChild.style.display = 'none';
+    document.documentElement.requestFullscreen();
+
+    this._reset = () => {
+      originalParent.appendChild(element);
+      placeholder.remove();
+      wrapper.firstChild.style.display = '';
+      document.documentElement.removeEventListener('fullscreenchange', this._onChange);
+      delete this._onChange;
+      delete this._reset;
+    };
+
+    this._onChange = () => {
+      if (!document.fullscreenElement) {
+        this._reset();
+      }
+    };
+    document.documentElement.addEventListener('fullscreenchange', this._onChange);
+  },
+
+  /**
+   * Requests fullscreen for the entire page
+   * (document.documentElement).
+   */
+  requestPageFullscreen: function () {
+    this._resetIfActive();
+    document.documentElement.requestFullscreen();
+  },
+
+  /**
+   * Sets up a listener on the document that re-dispatches
+   * fullscreenchange events on the given UI element so the
+   * server side can pick them up.
+   */
+  setupFullscreenChangeListener: function (uiElement) {
+    document.addEventListener('fullscreenchange', () => {
+      const event = new Event('flow-fullscreenchange');
+      event.fullscreen = document.fullscreenElement !== null;
+      uiElement.dispatchEvent(event);
+    });
+  },
+
+  _resetIfActive: function () {
+    if (this._reset) {
+      this._reset();
+    }
+  }
+};

flow-server/src/test/java/com/vaadin/flow/component/ComponentTest.java

@@ -2059,6 +2059,22 @@ public void cannotMoveComponentsToOtherUI() {
                 ex.getMessage());
     }
 
+    @Test
+    public void requestFullscreen_attachedComponent_executesJs() {
+        EnabledDiv div = new EnabledDiv();
+        testUI.add(div);
+        div.requestFullscreen();
+
+        assertPendingJs(
+                "window.Vaadin.Flow.fullscreen.requestComponentFullscreen");
+    }
+
+    @Test
+    public void requestFullscreen_detachedComponent_throws() {
+        EnabledDiv div = new EnabledDiv();
+        assertThrows(IllegalStateException.class, div::requestFullscreen);
+    }
+
     private void resetComponentTrackerProductionMode() throws Exception {
         Field disabled = ComponentTracker.class.getDeclaredField("disabled");
         disabled.setAccessible(true);

flow-server/src/test/java/com/vaadin/flow/component/page/FullscreenChangeEventTest.java

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2000-2026 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.component.page;
+
+import org.junit.jupiter.api.Test;
+
+import com.vaadin.tests.util.MockUI;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertFalse;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+class FullscreenChangeEventTest {
+
+    @Test
+    public void eventReturnsConstructorValues() {
+        Page page = new Page(new MockUI());
+
+        FullscreenChangeEvent enterEvent = new FullscreenChangeEvent(page,
+                true);
+        assertTrue(enterEvent.isFullscreen());
+        assertEquals(page, enterEvent.getSource());
+
+        FullscreenChangeEvent exitEvent = new FullscreenChangeEvent(page,
+                false);
+        assertFalse(exitEvent.isFullscreen());
+    }
+}