Vendor dependencies for 0.3.0 release

vendor/bevy/examples/ui/borders.rs

@@ -0,0 +1,304 @@
+//! Example demonstrating bordered UI nodes
+
+use bevy::{color::palettes::css::*, prelude::*};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_systems(Startup, setup)
+        .run();
+}
+
+fn setup(mut commands: Commands) {
+    commands.spawn(Camera2d);
+    let root = commands
+        .spawn((
+            Node {
+                margin: UiRect::all(Val::Px(25.0)),
+                align_self: AlignSelf::Stretch,
+                justify_self: JustifySelf::Stretch,
+                flex_wrap: FlexWrap::Wrap,
+                justify_content: JustifyContent::FlexStart,
+                align_items: AlignItems::FlexStart,
+                align_content: AlignContent::FlexStart,
+                ..default()
+            },
+            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+        ))
+        .id();
+
+    let root_rounded = commands
+        .spawn((
+            Node {
+                margin: UiRect::all(Val::Px(25.0)),
+                align_self: AlignSelf::Stretch,
+                justify_self: JustifySelf::Stretch,
+                flex_wrap: FlexWrap::Wrap,
+                justify_content: JustifyContent::FlexStart,
+                align_items: AlignItems::FlexStart,
+                align_content: AlignContent::FlexStart,
+                ..default()
+            },
+            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+        ))
+        .id();
+
+    // labels for the different border edges
+    let border_labels = [
+        "None",
+        "All",
+        "Left",
+        "Right",
+        "Top",
+        "Bottom",
+        "Horizontal",
+        "Vertical",
+        "Top Left",
+        "Bottom Left",
+        "Top Right",
+        "Bottom Right",
+        "Top Bottom Right",
+        "Top Bottom Left",
+        "Top Left Right",
+        "Bottom Left Right",
+    ];
+
+    // all the different combinations of border edges
+    // these correspond to the labels above
+    let borders = [
+        UiRect::default(),
+        UiRect::all(Val::Px(10.)),
+        UiRect::left(Val::Px(10.)),
+        UiRect::right(Val::Px(10.)),
+        UiRect::top(Val::Px(10.)),
+        UiRect::bottom(Val::Px(10.)),
+        UiRect::horizontal(Val::Px(10.)),
+        UiRect::vertical(Val::Px(10.)),
+        UiRect {
+            left: Val::Px(20.),
+            top: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            left: Val::Px(10.),
+            bottom: Val::Px(20.),
+            ..Default::default()
+        },
+        UiRect {
+            right: Val::Px(20.),
+            top: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            right: Val::Px(10.),
+            bottom: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            right: Val::Px(10.),
+            top: Val::Px(20.),
+            bottom: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            left: Val::Px(10.),
+            top: Val::Px(10.),
+            bottom: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            left: Val::Px(20.),
+            right: Val::Px(10.),
+            top: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            left: Val::Px(10.),
+            right: Val::Px(10.),
+            bottom: Val::Px(20.),
+            ..Default::default()
+        },
+    ];
+
+    for (label, border) in border_labels.into_iter().zip(borders) {
+        let inner_spot = commands
+            .spawn((
+                Node {
+                    width: Val::Px(10.),
+                    height: Val::Px(10.),
+                    ..default()
+                },
+                BackgroundColor(YELLOW.into()),
+            ))
+            .id();
+        let border_node = commands
+            .spawn((
+                Node {
+                    width: Val::Px(50.),
+                    height: Val::Px(50.),
+                    border,
+                    margin: UiRect::all(Val::Px(20.)),
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
+                    ..default()
+                },
+                BackgroundColor(MAROON.into()),
+                BorderColor(RED.into()),
+                Outline {
+                    width: Val::Px(6.),
+                    offset: Val::Px(6.),
+                    color: Color::WHITE,
+                },
+            ))
+            .add_child(inner_spot)
+            .id();
+        let label_node = commands
+            .spawn((
+                Text::new(label),
+                TextFont {
+                    font_size: 9.0,
+                    ..Default::default()
+                },
+            ))
+            .id();
+        let container = commands
+            .spawn(Node {
+                flex_direction: FlexDirection::Column,
+                align_items: AlignItems::Center,
+                ..default()
+            })
+            .add_children(&[border_node, label_node])
+            .id();
+        commands.entity(root).add_child(container);
+    }
+
+    for (label, border) in border_labels.into_iter().zip(borders) {
+        let inner_spot = commands
+            .spawn((
+                Node {
+                    width: Val::Px(10.),
+                    height: Val::Px(10.),
+                    ..default()
+                },
+                BorderRadius::MAX,
+                BackgroundColor(YELLOW.into()),
+            ))
+            .id();
+        let non_zero = |x, y| x != Val::Px(0.) && y != Val::Px(0.);
+        let border_size = |x, y| if non_zero(x, y) { f32::MAX } else { 0. };
+        let border_radius = BorderRadius::px(
+            border_size(border.left, border.top),
+            border_size(border.right, border.top),
+            border_size(border.right, border.bottom),
+            border_size(border.left, border.bottom),
+        );
+        let border_node = commands
+            .spawn((
+                Node {
+                    width: Val::Px(50.),
+                    height: Val::Px(50.),
+                    border,
+                    margin: UiRect::all(Val::Px(20.)),
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
+                    ..default()
+                },
+                BackgroundColor(MAROON.into()),
+                BorderColor(RED.into()),
+                border_radius,
+                Outline {
+                    width: Val::Px(6.),
+                    offset: Val::Px(6.),
+                    color: Color::WHITE,
+                },
+            ))
+            .add_child(inner_spot)
+            .id();
+        let label_node = commands
+            .spawn((
+                Text::new(label),
+                TextFont {
+                    font_size: 9.0,
+                    ..Default::default()
+                },
+            ))
+            .id();
+        let container = commands
+            .spawn(Node {
+                flex_direction: FlexDirection::Column,
+                align_items: AlignItems::Center,
+                ..default()
+            })
+            .add_children(&[border_node, label_node])
+            .id();
+        commands.entity(root_rounded).add_child(container);
+    }
+
+    let border_label = commands
+        .spawn((
+            Node {
+                margin: UiRect {
+                    left: Val::Px(25.0),
+                    right: Val::Px(25.0),
+                    top: Val::Px(25.0),
+                    bottom: Val::Px(0.0),
+                },
+                ..default()
+            },
+            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+        ))
+        .with_children(|builder| {
+            builder.spawn((
+                Text::new("Borders"),
+                TextFont {
+                    font_size: 20.0,
+                    ..Default::default()
+                },
+            ));
+        })
+        .id();
+
+    let border_rounded_label = commands
+        .spawn((
+            Node {
+                margin: UiRect {
+                    left: Val::Px(25.0),
+                    right: Val::Px(25.0),
+                    top: Val::Px(25.0),
+                    bottom: Val::Px(0.0),
+                },
+                ..default()
+            },
+            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+        ))
+        .with_children(|builder| {
+            builder.spawn((
+                Text::new("Borders Rounded"),
+                TextFont {
+                    font_size: 20.0,
+                    ..Default::default()
+                },
+            ));
+        })
+        .id();
+
+    commands
+        .spawn((
+            Node {
+                margin: UiRect::all(Val::Px(25.0)),
+                flex_direction: FlexDirection::Column,
+                align_self: AlignSelf::Stretch,
+                justify_self: JustifySelf::Stretch,
+                flex_wrap: FlexWrap::Wrap,
+                justify_content: JustifyContent::FlexStart,
+                align_items: AlignItems::FlexStart,
+                align_content: AlignContent::FlexStart,
+                ..default()
+            },
+            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+        ))
+        .add_child(border_label)
+        .add_child(root)
+        .add_child(border_rounded_label)
+        .add_child(root_rounded);
+}

vendor/bevy/examples/ui/box_shadow.rs

@@ -0,0 +1,267 @@
+//! This example shows how to create a node with a shadow
+
+use argh::FromArgs;
+use bevy::color::palettes::css::BLUE;
+use bevy::color::palettes::css::DEEP_SKY_BLUE;
+use bevy::color::palettes::css::GREEN;
+use bevy::color::palettes::css::LIGHT_SKY_BLUE;
+use bevy::color::palettes::css::RED;
+use bevy::color::palettes::css::YELLOW;
+use bevy::prelude::*;
+use bevy::winit::WinitSettings;
+
+#[derive(FromArgs, Resource)]
+/// `box_shadow` example
+struct Args {
+    /// number of samples
+    #[argh(option, default = "4")]
+    samples: u32,
+}
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .run();
+}
+
+fn setup(mut commands: Commands) {
+    // `from_env` panics on the web
+    #[cfg(not(target_arch = "wasm32"))]
+    let args: Args = argh::from_env();
+    #[cfg(target_arch = "wasm32")]
+    let args = Args::from_args(&[], &[]).unwrap();
+
+    // ui camera
+    commands.spawn((Camera2d, BoxShadowSamples(args.samples)));
+
+    commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                padding: UiRect::all(Val::Px(30.)),
+                column_gap: Val::Px(30.),
+                flex_wrap: FlexWrap::Wrap,
+                ..default()
+            },
+            BackgroundColor(DEEP_SKY_BLUE.into()),
+        ))
+        .with_children(|commands| {
+            let example_nodes = [
+                (
+                    Vec2::splat(50.),
+                    Vec2::ZERO,
+                    10.,
+                    0.,
+                    BorderRadius::bottom_right(Val::Px(10.)),
+                ),
+                (Vec2::new(50., 25.), Vec2::ZERO, 10., 0., BorderRadius::ZERO),
+                (Vec2::splat(50.), Vec2::ZERO, 10., 0., BorderRadius::MAX),
+                (Vec2::new(100., 25.), Vec2::ZERO, 10., 0., BorderRadius::MAX),
+                (
+                    Vec2::splat(50.),
+                    Vec2::ZERO,
+                    10.,
+                    0.,
+                    BorderRadius::bottom_right(Val::Px(10.)),
+                ),
+                (Vec2::new(50., 25.), Vec2::ZERO, 0., 10., BorderRadius::ZERO),
+                (
+                    Vec2::splat(50.),
+                    Vec2::ZERO,
+                    0.,
+                    10.,
+                    BorderRadius::bottom_right(Val::Px(10.)),
+                ),
+                (Vec2::new(100., 25.), Vec2::ZERO, 0., 10., BorderRadius::MAX),
+                (
+                    Vec2::splat(50.),
+                    Vec2::splat(25.),
+                    0.,
+                    0.,
+                    BorderRadius::ZERO,
+                ),
+                (
+                    Vec2::new(50., 25.),
+                    Vec2::splat(25.),
+                    0.,
+                    0.,
+                    BorderRadius::ZERO,
+                ),
+                (
+                    Vec2::splat(50.),
+                    Vec2::splat(10.),
+                    0.,
+                    0.,
+                    BorderRadius::bottom_right(Val::Px(10.)),
+                ),
+                (
+                    Vec2::splat(50.),
+                    Vec2::splat(25.),
+                    0.,
+                    10.,
+                    BorderRadius::ZERO,
+                ),
+                (
+                    Vec2::new(50., 25.),
+                    Vec2::splat(25.),
+                    0.,
+                    10.,
+                    BorderRadius::ZERO,
+                ),
+                (
+                    Vec2::splat(50.),
+                    Vec2::splat(10.),
+                    0.,
+                    10.,
+                    BorderRadius::bottom_right(Val::Px(10.)),
+                ),
+                (
+                    Vec2::splat(50.),
+                    Vec2::splat(10.),
+                    0.,
+                    3.,
+                    BorderRadius::ZERO,
+                ),
+                (
+                    Vec2::new(50., 25.),
+                    Vec2::splat(10.),
+                    0.,
+                    3.,
+                    BorderRadius::ZERO,
+                ),
+                (
+                    Vec2::splat(50.),
+                    Vec2::splat(10.),
+                    0.,
+                    3.,
+                    BorderRadius::bottom_right(Val::Px(10.)),
+                ),
+                (
+                    Vec2::splat(50.),
+                    Vec2::splat(10.),
+                    0.,
+                    3.,
+                    BorderRadius::all(Val::Px(20.)),
+                ),
+                (
+                    Vec2::new(50., 25.),
+                    Vec2::splat(10.),
+                    0.,
+                    3.,
+                    BorderRadius::all(Val::Px(20.)),
+                ),
+                (
+                    Vec2::new(25., 50.),
+                    Vec2::splat(10.),
+                    0.,
+                    3.,
+                    BorderRadius::MAX,
+                ),
+                (
+                    Vec2::splat(50.),
+                    Vec2::splat(10.),
+                    0.,
+                    10.,
+                    BorderRadius::all(Val::Px(20.)),
+                ),
+                (
+                    Vec2::new(50., 25.),
+                    Vec2::splat(10.),
+                    0.,
+                    10.,
+                    BorderRadius::all(Val::Px(20.)),
+                ),
+                (
+                    Vec2::new(25., 50.),
+                    Vec2::splat(10.),
+                    0.,
+                    10.,
+                    BorderRadius::MAX,
+                ),
+            ];
+
+            for (size, offset, spread, blur, border_radius) in example_nodes {
+                commands.spawn(box_shadow_node_bundle(
+                    size,
+                    offset,
+                    spread,
+                    blur,
+                    border_radius,
+                ));
+            }
+
+            // Demonstrate multiple shadows on one node
+            commands.spawn((
+                Node {
+                    width: Val::Px(40.),
+                    height: Val::Px(40.),
+                    border: UiRect::all(Val::Px(4.)),
+                    ..default()
+                },
+                BorderColor(LIGHT_SKY_BLUE.into()),
+                BorderRadius::all(Val::Px(20.)),
+                BackgroundColor(DEEP_SKY_BLUE.into()),
+                BoxShadow(vec![
+                    ShadowStyle {
+                        color: RED.with_alpha(0.7).into(),
+                        x_offset: Val::Px(-20.),
+                        y_offset: Val::Px(-5.),
+                        spread_radius: Val::Percent(10.),
+                        blur_radius: Val::Px(3.),
+                    },
+                    ShadowStyle {
+                        color: BLUE.with_alpha(0.7).into(),
+                        x_offset: Val::Px(-5.),
+                        y_offset: Val::Px(-20.),
+                        spread_radius: Val::Percent(10.),
+                        blur_radius: Val::Px(3.),
+                    },
+                    ShadowStyle {
+                        color: YELLOW.with_alpha(0.7).into(),
+                        x_offset: Val::Px(20.),
+                        y_offset: Val::Px(5.),
+                        spread_radius: Val::Percent(10.),
+                        blur_radius: Val::Px(3.),
+                    },
+                    ShadowStyle {
+                        color: GREEN.with_alpha(0.7).into(),
+                        x_offset: Val::Px(5.),
+                        y_offset: Val::Px(20.),
+                        spread_radius: Val::Percent(10.),
+                        blur_radius: Val::Px(3.),
+                    },
+                ]),
+            ));
+        });
+}
+
+fn box_shadow_node_bundle(
+    size: Vec2,
+    offset: Vec2,
+    spread: f32,
+    blur: f32,
+    border_radius: BorderRadius,
+) -> impl Bundle {
+    (
+        Node {
+            width: Val::Px(size.x),
+            height: Val::Px(size.y),
+            border: UiRect::all(Val::Px(4.)),
+            ..default()
+        },
+        BorderColor(LIGHT_SKY_BLUE.into()),
+        border_radius,
+        BackgroundColor(DEEP_SKY_BLUE.into()),
+        BoxShadow::new(
+            Color::BLACK.with_alpha(0.8),
+            Val::Percent(offset.x),
+            Val::Percent(offset.y),
+            Val::Percent(spread),
+            Val::Px(blur),
+        ),
+    )
+}

vendor/bevy/examples/ui/button.rs

@@ -0,0 +1,96 @@
+//! This example illustrates how to create a button that changes color and text based on its
+//! interaction state.
+
+use bevy::{color::palettes::basic::*, prelude::*, winit::WinitSettings};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(Update, button_system)
+        .run();
+}
+
+const NORMAL_BUTTON: Color = Color::srgb(0.15, 0.15, 0.15);
+const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
+const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
+
+fn button_system(
+    mut interaction_query: Query<
+        (
+            &Interaction,
+            &mut BackgroundColor,
+            &mut BorderColor,
+            &Children,
+        ),
+        (Changed<Interaction>, With<Button>),
+    >,
+    mut text_query: Query<&mut Text>,
+) {
+    for (interaction, mut color, mut border_color, children) in &mut interaction_query {
+        let mut text = text_query.get_mut(children[0]).unwrap();
+        match *interaction {
+            Interaction::Pressed => {
+                **text = "Press".to_string();
+                *color = PRESSED_BUTTON.into();
+                border_color.0 = RED.into();
+            }
+            Interaction::Hovered => {
+                **text = "Hover".to_string();
+                *color = HOVERED_BUTTON.into();
+                border_color.0 = Color::WHITE;
+            }
+            Interaction::None => {
+                **text = "Button".to_string();
+                *color = NORMAL_BUTTON.into();
+                border_color.0 = Color::BLACK;
+            }
+        }
+    }
+}
+
+fn setup(mut commands: Commands, assets: Res<AssetServer>) {
+    // ui camera
+    commands.spawn(Camera2d);
+    commands.spawn(button(&assets));
+}
+
+fn button(asset_server: &AssetServer) -> impl Bundle + use<> {
+    (
+        Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        },
+        children![(
+            Button,
+            Node {
+                width: Val::Px(150.0),
+                height: Val::Px(65.0),
+                border: UiRect::all(Val::Px(5.0)),
+                // horizontally center child text
+                justify_content: JustifyContent::Center,
+                // vertically center child text
+                align_items: AlignItems::Center,
+                ..default()
+            },
+            BorderColor(Color::BLACK),
+            BorderRadius::MAX,
+            BackgroundColor(NORMAL_BUTTON),
+            children![(
+                Text::new("Button"),
+                TextFont {
+                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                    font_size: 33.0,
+                    ..default()
+                },
+                TextColor(Color::srgb(0.9, 0.9, 0.9)),
+                TextShadow::default(),
+            )]
+        )],
+    )
+}

vendor/bevy/examples/ui/directional_navigation.rs

@@ -0,0 +1,414 @@
+//! Demonstrates how to set up the directional navigation system to allow for navigation between widgets.
+//!
+//! Directional navigation is generally used to move between widgets in a user interface using arrow keys or gamepad input.
+//! When compared to tab navigation, directional navigation is generally more direct, and less aware of the structure of the UI.
+//!
+//! In this example, we will set up a simple UI with a grid of buttons that can be navigated using the arrow keys or gamepad input.
+
+use std::time::Duration;
+
+use bevy::{
+    input_focus::{
+        directional_navigation::{
+            DirectionalNavigation, DirectionalNavigationMap, DirectionalNavigationPlugin,
+        },
+        InputDispatchPlugin, InputFocus, InputFocusVisible,
+    },
+    math::{CompassOctant, FloatOrd},
+    picking::{
+        backend::HitData,
+        pointer::{Location, PointerId},
+    },
+    platform::collections::{HashMap, HashSet},
+    prelude::*,
+    render::camera::NormalizedRenderTarget,
+};
+
+fn main() {
+    App::new()
+        // Input focus is not enabled by default, so we need to add the corresponding plugins
+        .add_plugins((
+            DefaultPlugins,
+            InputDispatchPlugin,
+            DirectionalNavigationPlugin,
+        ))
+        // This resource is canonically used to track whether or not to render a focus indicator
+        // It starts as false, but we set it to true here as we would like to see the focus indicator
+        .insert_resource(InputFocusVisible(true))
+        // We've made a simple resource to keep track of the actions that are currently being pressed for this example
+        .init_resource::<ActionState>()
+        .add_systems(Startup, setup_ui)
+        // Input is generally handled during PreUpdate
+        // We're turning inputs into actions first, then using those actions to determine navigation
+        .add_systems(PreUpdate, (process_inputs, navigate).chain())
+        .add_systems(
+            Update,
+            (
+                // We need to show which button is currently focused
+                highlight_focused_element,
+                // Pressing the "Interact" button while we have a focused element should simulate a click
+                interact_with_focused_button,
+                // We're doing a tiny animation when the button is interacted with,
+                // so we need a timer and a polling mechanism to reset it
+                reset_button_after_interaction,
+            ),
+        )
+        // This observer is added globally, so it will respond to *any* trigger of the correct type.
+        // However, we're filtering in the observer's query to only respond to button presses
+        .add_observer(universal_button_click_behavior)
+        .run();
+}
+
+const NORMAL_BUTTON: Srgba = bevy::color::palettes::tailwind::BLUE_400;
+const PRESSED_BUTTON: Srgba = bevy::color::palettes::tailwind::BLUE_500;
+const FOCUSED_BORDER: Srgba = bevy::color::palettes::tailwind::BLUE_50;
+
+// This observer will be triggered whenever a button is pressed
+// In a real project, each button would also have its own unique behavior,
+// to capture the actual intent of the user
+fn universal_button_click_behavior(
+    mut trigger: Trigger<Pointer<Click>>,
+    mut button_query: Query<(&mut BackgroundColor, &mut ResetTimer)>,
+) {
+    let button_entity = trigger.target();
+    if let Ok((mut color, mut reset_timer)) = button_query.get_mut(button_entity) {
+        // This would be a great place to play a little sound effect too!
+        color.0 = PRESSED_BUTTON.into();
+        reset_timer.0 = Timer::from_seconds(0.3, TimerMode::Once);
+
+        // Picking events propagate up the hierarchy,
+        // so we need to stop the propagation here now that we've handled it
+        trigger.propagate(false);
+    }
+}
+
+/// Resets a UI element to its default state when the timer has elapsed.
+#[derive(Component, Default, Deref, DerefMut)]
+struct ResetTimer(Timer);
+
+fn reset_button_after_interaction(
+    time: Res<Time>,
+    mut query: Query<(&mut ResetTimer, &mut BackgroundColor)>,
+) {
+    for (mut reset_timer, mut color) in query.iter_mut() {
+        reset_timer.tick(time.delta());
+        if reset_timer.just_finished() {
+            color.0 = NORMAL_BUTTON.into();
+        }
+    }
+}
+
+// We're spawning a simple grid of buttons and some instructions
+// The buttons are just colored rectangles with text displaying the button's name
+fn setup_ui(
+    mut commands: Commands,
+    mut directional_nav_map: ResMut<DirectionalNavigationMap>,
+    mut input_focus: ResMut<InputFocus>,
+) {
+    const N_ROWS: u16 = 5;
+    const N_COLS: u16 = 3;
+
+    // Rendering UI elements requires a camera
+    commands.spawn(Camera2d);
+
+    // Create a full-screen background node
+    let root_node = commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            ..default()
+        })
+        .id();
+
+    // Add instruction to the left of the grid
+    let instructions = commands
+        .spawn((
+            Text::new("Use arrow keys or D-pad to navigate. \
+            Click the buttons, or press Enter / the South gamepad button to interact with the focused button."),
+            Node {
+                width: Val::Px(300.0),
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                margin: UiRect::all(Val::Px(12.0)),
+                ..default()
+            },
+        ))
+        .id();
+
+    // Set up the root entity to hold the grid
+    let grid_root_entity = commands
+        .spawn(Node {
+            display: Display::Grid,
+            // Allow the grid to take up the full height and the rest of the width of the window
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            // Set the number of rows and columns in the grid
+            // allowing the grid to automatically size the cells
+            grid_template_columns: RepeatedGridTrack::auto(N_COLS),
+            grid_template_rows: RepeatedGridTrack::auto(N_ROWS),
+            ..default()
+        })
+        .id();
+
+    // Add the instructions and grid to the root node
+    commands
+        .entity(root_node)
+        .add_children(&[instructions, grid_root_entity]);
+
+    let mut button_entities: HashMap<(u16, u16), Entity> = HashMap::default();
+    for row in 0..N_ROWS {
+        for col in 0..N_COLS {
+            let button_name = format!("Button {}-{}", row, col);
+
+            let button_entity = commands
+                .spawn((
+                    Button,
+                    Node {
+                        width: Val::Px(200.0),
+                        height: Val::Px(120.0),
+                        // Add a border so we can show which element is focused
+                        border: UiRect::all(Val::Px(4.0)),
+                        // Center the button's text label
+                        justify_content: JustifyContent::Center,
+                        align_items: AlignItems::Center,
+                        // Center the button within the grid cell
+                        align_self: AlignSelf::Center,
+                        justify_self: JustifySelf::Center,
+                        ..default()
+                    },
+                    ResetTimer::default(),
+                    BorderRadius::all(Val::Px(16.0)),
+                    BackgroundColor::from(NORMAL_BUTTON),
+                    Name::new(button_name.clone()),
+                ))
+                // Add a text element to the button
+                .with_child((
+                    Text::new(button_name),
+                    // And center the text if it flows onto multiple lines
+                    TextLayout {
+                        justify: JustifyText::Center,
+                        ..default()
+                    },
+                ))
+                .id();
+
+            // Add the button to the grid
+            commands.entity(grid_root_entity).add_child(button_entity);
+
+            // Keep track of the button entities so we can set up our navigation graph
+            button_entities.insert((row, col), button_entity);
+        }
+    }
+
+    // Connect all of the buttons in the same row to each other,
+    // looping around when the edge is reached.
+    for row in 0..N_ROWS {
+        let entities_in_row: Vec<Entity> = (0..N_COLS)
+            .map(|col| button_entities.get(&(row, col)).unwrap())
+            .copied()
+            .collect();
+        directional_nav_map.add_looping_edges(&entities_in_row, CompassOctant::East);
+    }
+
+    // Connect all of the buttons in the same column to each other,
+    // but don't loop around when the edge is reached.
+    // While looping is a very reasonable choice, we're not doing it here to demonstrate the different options.
+    for col in 0..N_COLS {
+        let entities_in_column: Vec<Entity> = (0..N_ROWS)
+            .map(|row| button_entities.get(&(row, col)).unwrap())
+            .copied()
+            .collect();
+
+        directional_nav_map.add_edges(&entities_in_column, CompassOctant::South);
+    }
+
+    // When changing scenes, remember to set an initial focus!
+    let top_left_entity = *button_entities.get(&(0, 0)).unwrap();
+    input_focus.set(top_left_entity);
+}
+
+// The indirection between inputs and actions allows us to easily remap inputs
+// and handle multiple input sources (keyboard, gamepad, etc.) in our game
+#[derive(Debug, PartialEq, Eq, Hash)]
+enum DirectionalNavigationAction {
+    Up,
+    Down,
+    Left,
+    Right,
+    Select,
+}
+
+impl DirectionalNavigationAction {
+    fn variants() -> Vec<Self> {
+        vec![
+            DirectionalNavigationAction::Up,
+            DirectionalNavigationAction::Down,
+            DirectionalNavigationAction::Left,
+            DirectionalNavigationAction::Right,
+            DirectionalNavigationAction::Select,
+        ]
+    }
+
+    fn keycode(&self) -> KeyCode {
+        match self {
+            DirectionalNavigationAction::Up => KeyCode::ArrowUp,
+            DirectionalNavigationAction::Down => KeyCode::ArrowDown,
+            DirectionalNavigationAction::Left => KeyCode::ArrowLeft,
+            DirectionalNavigationAction::Right => KeyCode::ArrowRight,
+            DirectionalNavigationAction::Select => KeyCode::Enter,
+        }
+    }
+
+    fn gamepad_button(&self) -> GamepadButton {
+        match self {
+            DirectionalNavigationAction::Up => GamepadButton::DPadUp,
+            DirectionalNavigationAction::Down => GamepadButton::DPadDown,
+            DirectionalNavigationAction::Left => GamepadButton::DPadLeft,
+            DirectionalNavigationAction::Right => GamepadButton::DPadRight,
+            // This is the "A" button on an Xbox controller,
+            // and is conventionally used as the "Select" / "Interact" button in many games
+            DirectionalNavigationAction::Select => GamepadButton::South,
+        }
+    }
+}
+
+// This keeps track of the inputs that are currently being pressed
+#[derive(Default, Resource)]
+struct ActionState {
+    pressed_actions: HashSet<DirectionalNavigationAction>,
+}
+
+fn process_inputs(
+    mut action_state: ResMut<ActionState>,
+    keyboard_input: Res<ButtonInput<KeyCode>>,
+    gamepad_input: Query<&Gamepad>,
+) {
+    // Reset the set of pressed actions each frame
+    // to ensure that we only process each action once
+    action_state.pressed_actions.clear();
+
+    for action in DirectionalNavigationAction::variants() {
+        // Use just_pressed to ensure that we only process each action once
+        // for each time it is pressed
+        if keyboard_input.just_pressed(action.keycode()) {
+            action_state.pressed_actions.insert(action);
+        }
+    }
+
+    // We're treating this like a single-player game:
+    // if multiple gamepads are connected, we don't care which one is being used
+    for gamepad in gamepad_input.iter() {
+        for action in DirectionalNavigationAction::variants() {
+            // Unlike keyboard input, gamepads are bound to a specific controller
+            if gamepad.just_pressed(action.gamepad_button()) {
+                action_state.pressed_actions.insert(action);
+            }
+        }
+    }
+}
+
+fn navigate(action_state: Res<ActionState>, mut directional_navigation: DirectionalNavigation) {
+    // If the user is pressing both left and right, or up and down,
+    // we should not move in either direction.
+    let net_east_west = action_state
+        .pressed_actions
+        .contains(&DirectionalNavigationAction::Right) as i8
+        - action_state
+            .pressed_actions
+            .contains(&DirectionalNavigationAction::Left) as i8;
+
+    let net_north_south = action_state
+        .pressed_actions
+        .contains(&DirectionalNavigationAction::Up) as i8
+        - action_state
+            .pressed_actions
+            .contains(&DirectionalNavigationAction::Down) as i8;
+
+    // Compute the direction that the user is trying to navigate in
+    let maybe_direction = match (net_east_west, net_north_south) {
+        (0, 0) => None,
+        (0, 1) => Some(CompassOctant::North),
+        (1, 1) => Some(CompassOctant::NorthEast),
+        (1, 0) => Some(CompassOctant::East),
+        (1, -1) => Some(CompassOctant::SouthEast),
+        (0, -1) => Some(CompassOctant::South),
+        (-1, -1) => Some(CompassOctant::SouthWest),
+        (-1, 0) => Some(CompassOctant::West),
+        (-1, 1) => Some(CompassOctant::NorthWest),
+        _ => None,
+    };
+
+    if let Some(direction) = maybe_direction {
+        match directional_navigation.navigate(direction) {
+            // In a real game, you would likely want to play a sound or show a visual effect
+            // on both successful and unsuccessful navigation attempts
+            Ok(entity) => {
+                println!("Navigated {direction:?} successfully. {entity} is now focused.");
+            }
+            Err(e) => println!("Navigation failed: {e}"),
+        }
+    }
+}
+
+fn highlight_focused_element(
+    input_focus: Res<InputFocus>,
+    // While this isn't strictly needed for the example,
+    // we're demonstrating how to be a good citizen by respecting the `InputFocusVisible` resource.
+    input_focus_visible: Res<InputFocusVisible>,
+    mut query: Query<(Entity, &mut BorderColor)>,
+) {
+    for (entity, mut border_color) in query.iter_mut() {
+        if input_focus.0 == Some(entity) && input_focus_visible.0 {
+            // Don't change the border size / radius here,
+            // as it would result in wiggling buttons when they are focused
+            border_color.0 = FOCUSED_BORDER.into();
+        } else {
+            border_color.0 = Color::NONE;
+        }
+    }
+}
+
+// By sending a Pointer<Click> trigger rather than directly handling button-like interactions,
+// we can unify our handling of pointer and keyboard/gamepad interactions
+fn interact_with_focused_button(
+    action_state: Res<ActionState>,
+    input_focus: Res<InputFocus>,
+    mut commands: Commands,
+) {
+    if action_state
+        .pressed_actions
+        .contains(&DirectionalNavigationAction::Select)
+    {
+        if let Some(focused_entity) = input_focus.0 {
+            commands.trigger_targets(
+                Pointer::<Click> {
+                    target: focused_entity,
+                    // We're pretending that we're a mouse
+                    pointer_id: PointerId::Mouse,
+                    // This field isn't used, so we're just setting it to a placeholder value
+                    pointer_location: Location {
+                        target: NormalizedRenderTarget::Image(
+                            bevy_render::camera::ImageRenderTarget {
+                                handle: Handle::default(),
+                                scale_factor: FloatOrd(1.0),
+                            },
+                        ),
+                        position: Vec2::ZERO,
+                    },
+                    event: Click {
+                        button: PointerButton::Primary,
+                        // This field isn't used, so we're just setting it to a placeholder value
+                        hit: HitData {
+                            camera: Entity::PLACEHOLDER,
+                            depth: 0.0,
+                            position: None,
+                            normal: None,
+                        },
+                        duration: Duration::from_secs_f32(0.1),
+                    },
+                },
+                focused_entity,
+            );
+        }
+    }
+}

vendor/bevy/examples/ui/display_and_visibility.rs

@@ -0,0 +1,459 @@
+//! Demonstrates how Display and Visibility work in the UI.
+
+use bevy::{
+    color::palettes::css::{DARK_CYAN, DARK_GRAY, YELLOW},
+    ecs::{component::Mutable, hierarchy::ChildSpawnerCommands},
+    prelude::*,
+    winit::WinitSettings,
+};
+
+const PALETTE: [&str; 4] = ["27496D", "466B7A", "669DB3", "ADCBE3"];
+const HIDDEN_COLOR: Color = Color::srgb(1.0, 0.7, 0.7);
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(
+            Update,
+            (
+                buttons_handler::<Display>,
+                buttons_handler::<Visibility>,
+                text_hover,
+            ),
+        )
+        .run();
+}
+
+#[derive(Component)]
+struct Target<T> {
+    id: Entity,
+    phantom: std::marker::PhantomData<T>,
+}
+
+impl<T> Target<T> {
+    fn new(id: Entity) -> Self {
+        Self {
+            id,
+            phantom: std::marker::PhantomData,
+        }
+    }
+}
+
+trait TargetUpdate {
+    type TargetComponent: Component<Mutability = Mutable>;
+    const NAME: &'static str;
+    fn update_target(&self, target: &mut Self::TargetComponent) -> String;
+}
+
+impl TargetUpdate for Target<Display> {
+    type TargetComponent = Node;
+    const NAME: &'static str = "Display";
+    fn update_target(&self, node: &mut Self::TargetComponent) -> String {
+        node.display = match node.display {
+            Display::Flex => Display::None,
+            Display::None => Display::Flex,
+            Display::Block | Display::Grid => unreachable!(),
+        };
+        format!("{}::{:?} ", Self::NAME, node.display)
+    }
+}
+
+impl TargetUpdate for Target<Visibility> {
+    type TargetComponent = Visibility;
+    const NAME: &'static str = "Visibility";
+    fn update_target(&self, visibility: &mut Self::TargetComponent) -> String {
+        *visibility = match *visibility {
+            Visibility::Inherited => Visibility::Visible,
+            Visibility::Visible => Visibility::Hidden,
+            Visibility::Hidden => Visibility::Inherited,
+        };
+        format!("{}::{visibility:?}", Self::NAME)
+    }
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let palette: [Color; 4] = PALETTE.map(|hex| Srgba::hex(hex).unwrap().into());
+
+    let text_font = TextFont {
+        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+        ..default()
+    };
+
+    commands.spawn(Camera2d);
+    commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                flex_direction: FlexDirection::Column,
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::SpaceEvenly,
+                ..Default::default()
+            },
+            BackgroundColor(Color::BLACK),
+        ))
+        .with_children(|parent| {
+            parent.spawn((
+                Text::new("Use the panel on the right to change the Display and Visibility properties for the respective nodes of the panel on the left"),
+                text_font.clone(),
+                TextLayout::new_with_justify(JustifyText::Center),
+                Node {
+                    margin: UiRect::bottom(Val::Px(10.)),
+                    ..Default::default()
+                },
+            ));
+
+            parent
+                .spawn(Node {
+                    width: Val::Percent(100.),
+                    ..default()
+                })
+                .with_children(|parent| {
+                    let mut target_ids = vec![];
+                    parent
+                        .spawn(Node {
+                            width: Val::Percent(50.),
+                            height: Val::Px(520.),
+                            justify_content: JustifyContent::Center,
+                            ..default()
+                        })
+                        .with_children(|parent| {
+                            target_ids = spawn_left_panel(parent, &palette);
+                        });
+
+                    parent
+                        .spawn(Node {
+                            width: Val::Percent(50.),
+                            justify_content: JustifyContent::Center,
+                            ..default()
+                        })
+                        .with_children(|parent| {
+                            spawn_right_panel(parent, text_font, &palette, target_ids);
+                        });
+                });
+
+            parent
+                .spawn(Node {
+                    flex_direction: FlexDirection::Row,
+                    align_items: AlignItems::Start,
+                    justify_content: JustifyContent::Start,
+                    column_gap: Val::Px(10.),
+                    ..default()
+                })
+                .with_children(|builder| {
+                    let text_font = TextFont {
+                        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                        ..default()
+                    };
+
+                    builder.spawn((
+                        Text::new("Display::None\nVisibility::Hidden\nVisibility::Inherited"),
+                        text_font.clone(),
+                        TextColor(HIDDEN_COLOR),
+                        TextLayout::new_with_justify(JustifyText::Center),
+                    ));
+                    builder.spawn((
+                        Text::new("-\n-\n-"),
+                        text_font.clone(),
+                        TextColor(DARK_GRAY.into()),
+                        TextLayout::new_with_justify(JustifyText::Center),
+                    ));
+                    builder.spawn((Text::new("The UI Node and its descendants will not be visible and will not be allotted any space in the UI layout.\nThe UI Node will not be visible but will still occupy space in the UI layout.\nThe UI node will inherit the visibility property of its parent. If it has no parent it will be visible."), text_font));
+                });
+        });
+}
+
+fn spawn_left_panel(builder: &mut ChildSpawnerCommands, palette: &[Color; 4]) -> Vec<Entity> {
+    let mut target_ids = vec![];
+    builder
+        .spawn((
+            Node {
+                padding: UiRect::all(Val::Px(10.)),
+                ..default()
+            },
+            BackgroundColor(Color::WHITE),
+        ))
+        .with_children(|parent| {
+            parent
+                .spawn((Node::default(), BackgroundColor(Color::BLACK)))
+                .with_children(|parent| {
+                    let id = parent
+                        .spawn((
+                            Node {
+                                align_items: AlignItems::FlexEnd,
+                                justify_content: JustifyContent::FlexEnd,
+                                ..default()
+                            },
+                            BackgroundColor(palette[0]),
+                            Outline {
+                                width: Val::Px(4.),
+                                color: DARK_CYAN.into(),
+                                offset: Val::Px(10.),
+                            },
+                        ))
+                        .with_children(|parent| {
+                            parent.spawn(Node {
+                                width: Val::Px(100.),
+                                height: Val::Px(500.),
+                                ..default()
+                            });
+
+                            let id = parent
+                                .spawn((
+                                    Node {
+                                        height: Val::Px(400.),
+                                        align_items: AlignItems::FlexEnd,
+                                        justify_content: JustifyContent::FlexEnd,
+                                        ..default()
+                                    },
+                                    BackgroundColor(palette[1]),
+                                ))
+                                .with_children(|parent| {
+                                    parent.spawn(Node {
+                                        width: Val::Px(100.),
+                                        height: Val::Px(400.),
+                                        ..default()
+                                    });
+
+                                    let id = parent
+                                        .spawn((
+                                            Node {
+                                                height: Val::Px(300.),
+                                                align_items: AlignItems::FlexEnd,
+                                                justify_content: JustifyContent::FlexEnd,
+                                                ..default()
+                                            },
+                                            BackgroundColor(palette[2]),
+                                        ))
+                                        .with_children(|parent| {
+                                            parent.spawn(Node {
+                                                width: Val::Px(100.),
+                                                height: Val::Px(300.),
+                                                ..default()
+                                            });
+
+                                            let id = parent
+                                                .spawn((
+                                                    Node {
+                                                        width: Val::Px(200.),
+                                                        height: Val::Px(200.),
+                                                        ..default()
+                                                    },
+                                                    BackgroundColor(palette[3]),
+                                                ))
+                                                .id();
+                                            target_ids.push(id);
+                                        })
+                                        .id();
+                                    target_ids.push(id);
+                                })
+                                .id();
+                            target_ids.push(id);
+                        })
+                        .id();
+                    target_ids.push(id);
+                });
+        });
+    target_ids
+}
+
+fn spawn_right_panel(
+    parent: &mut ChildSpawnerCommands,
+    text_font: TextFont,
+    palette: &[Color; 4],
+    mut target_ids: Vec<Entity>,
+) {
+    let spawn_buttons = |parent: &mut ChildSpawnerCommands, target_id| {
+        spawn_button::<Display>(parent, text_font.clone(), target_id);
+        spawn_button::<Visibility>(parent, text_font.clone(), target_id);
+    };
+    parent
+        .spawn((
+            Node {
+                padding: UiRect::all(Val::Px(10.)),
+                ..default()
+            },
+            BackgroundColor(Color::WHITE),
+        ))
+        .with_children(|parent| {
+            parent
+                .spawn((
+                    Node {
+                        width: Val::Px(500.),
+                        height: Val::Px(500.),
+                        flex_direction: FlexDirection::Column,
+                        align_items: AlignItems::FlexEnd,
+                        justify_content: JustifyContent::SpaceBetween,
+                        padding: UiRect {
+                            left: Val::Px(5.),
+                            top: Val::Px(5.),
+                            ..default()
+                        },
+                        ..default()
+                    },
+                    BackgroundColor(palette[0]),
+                    Outline {
+                        width: Val::Px(4.),
+                        color: DARK_CYAN.into(),
+                        offset: Val::Px(10.),
+                    },
+                ))
+                .with_children(|parent| {
+                    spawn_buttons(parent, target_ids.pop().unwrap());
+
+                    parent
+                        .spawn((
+                            Node {
+                                width: Val::Px(400.),
+                                height: Val::Px(400.),
+                                flex_direction: FlexDirection::Column,
+                                align_items: AlignItems::FlexEnd,
+                                justify_content: JustifyContent::SpaceBetween,
+                                padding: UiRect {
+                                    left: Val::Px(5.),
+                                    top: Val::Px(5.),
+                                    ..default()
+                                },
+                                ..default()
+                            },
+                            BackgroundColor(palette[1]),
+                        ))
+                        .with_children(|parent| {
+                            spawn_buttons(parent, target_ids.pop().unwrap());
+
+                            parent
+                                .spawn((
+                                    Node {
+                                        width: Val::Px(300.),
+                                        height: Val::Px(300.),
+                                        flex_direction: FlexDirection::Column,
+                                        align_items: AlignItems::FlexEnd,
+                                        justify_content: JustifyContent::SpaceBetween,
+                                        padding: UiRect {
+                                            left: Val::Px(5.),
+                                            top: Val::Px(5.),
+                                            ..default()
+                                        },
+                                        ..default()
+                                    },
+                                    BackgroundColor(palette[2]),
+                                ))
+                                .with_children(|parent| {
+                                    spawn_buttons(parent, target_ids.pop().unwrap());
+
+                                    parent
+                                        .spawn((
+                                            Node {
+                                                width: Val::Px(200.),
+                                                height: Val::Px(200.),
+                                                align_items: AlignItems::FlexStart,
+                                                justify_content: JustifyContent::SpaceBetween,
+                                                flex_direction: FlexDirection::Column,
+                                                padding: UiRect {
+                                                    left: Val::Px(5.),
+                                                    top: Val::Px(5.),
+                                                    ..default()
+                                                },
+                                                ..default()
+                                            },
+                                            BackgroundColor(palette[3]),
+                                        ))
+                                        .with_children(|parent| {
+                                            spawn_buttons(parent, target_ids.pop().unwrap());
+
+                                            parent.spawn(Node {
+                                                width: Val::Px(100.),
+                                                height: Val::Px(100.),
+                                                ..default()
+                                            });
+                                        });
+                                });
+                        });
+                });
+        });
+}
+
+fn spawn_button<T>(parent: &mut ChildSpawnerCommands, text_font: TextFont, target: Entity)
+where
+    T: Default + std::fmt::Debug + Send + Sync + 'static,
+    Target<T>: TargetUpdate,
+{
+    parent
+        .spawn((
+            Button,
+            Node {
+                align_self: AlignSelf::FlexStart,
+                padding: UiRect::axes(Val::Px(5.), Val::Px(1.)),
+                ..default()
+            },
+            BackgroundColor(Color::BLACK.with_alpha(0.5)),
+            Target::<T>::new(target),
+        ))
+        .with_children(|builder| {
+            builder.spawn((
+                Text(format!("{}::{:?}", Target::<T>::NAME, T::default())),
+                text_font,
+                TextLayout::new_with_justify(JustifyText::Center),
+            ));
+        });
+}
+
+fn buttons_handler<T>(
+    mut left_panel_query: Query<&mut <Target<T> as TargetUpdate>::TargetComponent>,
+    mut visibility_button_query: Query<(&Target<T>, &Interaction, &Children), Changed<Interaction>>,
+    mut text_query: Query<(&mut Text, &mut TextColor)>,
+) where
+    T: Send + Sync,
+    Target<T>: TargetUpdate + Component,
+{
+    for (target, interaction, children) in visibility_button_query.iter_mut() {
+        if matches!(interaction, Interaction::Pressed) {
+            let mut target_value = left_panel_query.get_mut(target.id).unwrap();
+            for &child in children {
+                if let Ok((mut text, mut text_color)) = text_query.get_mut(child) {
+                    **text = target.update_target(target_value.as_mut());
+                    text_color.0 = if text.contains("None") || text.contains("Hidden") {
+                        Color::srgb(1.0, 0.7, 0.7)
+                    } else {
+                        Color::WHITE
+                    };
+                }
+            }
+        }
+    }
+}
+
+fn text_hover(
+    mut button_query: Query<(&Interaction, &mut BackgroundColor, &Children), Changed<Interaction>>,
+    mut text_query: Query<(&Text, &mut TextColor)>,
+) {
+    for (interaction, mut color, children) in button_query.iter_mut() {
+        match interaction {
+            Interaction::Hovered => {
+                *color = Color::BLACK.with_alpha(0.6).into();
+                for &child in children {
+                    if let Ok((_, mut text_color)) = text_query.get_mut(child) {
+                        // Bypass change detection to avoid recomputation of the text when only changing the color
+                        text_color.bypass_change_detection().0 = YELLOW.into();
+                    }
+                }
+            }
+            _ => {
+                *color = Color::BLACK.with_alpha(0.5).into();
+                for &child in children {
+                    if let Ok((text, mut text_color)) = text_query.get_mut(child) {
+                        text_color.bypass_change_detection().0 =
+                            if text.contains("None") || text.contains("Hidden") {
+                                HIDDEN_COLOR
+                            } else {
+                                Color::WHITE
+                            };
+                    }
+                }
+            }
+        }
+    }
+}

vendor/bevy/examples/ui/flex_layout.rs

@@ -0,0 +1,170 @@
+//! Demonstrates how the `AlignItems` and `JustifyContent` properties can be composed to layout text.
+use bevy::prelude::*;
+
+const ALIGN_ITEMS_COLOR: Color = Color::srgb(1., 0.066, 0.349);
+const JUSTIFY_CONTENT_COLOR: Color = Color::srgb(0.102, 0.522, 1.);
+const MARGIN: Val = Val::Px(12.);
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                title: "Bevy Flex Layout Example".to_string(),
+                ..Default::default()
+            }),
+            ..Default::default()
+        }))
+        .add_systems(Startup, spawn_layout)
+        .run();
+}
+
+fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+    commands.spawn(Camera2d);
+    commands
+        .spawn((
+            Node {
+                // fill the entire window
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                flex_direction: FlexDirection::Column,
+                align_items: AlignItems::Center,
+                padding: UiRect::all(MARGIN),
+                row_gap: MARGIN,
+                ..Default::default()
+            },
+            BackgroundColor(Color::BLACK),
+        ))
+        .with_children(|builder| {
+            // spawn the key
+            builder
+                .spawn(Node {
+                    flex_direction: FlexDirection::Row,
+                    ..default()
+                })
+                .with_children(|builder| {
+                    spawn_nested_text_bundle(
+                        builder,
+                        font.clone(),
+                        ALIGN_ITEMS_COLOR,
+                        UiRect::right(MARGIN),
+                        "AlignItems",
+                    );
+                    spawn_nested_text_bundle(
+                        builder,
+                        font.clone(),
+                        JUSTIFY_CONTENT_COLOR,
+                        UiRect::default(),
+                        "JustifyContent",
+                    );
+                });
+
+            builder
+                .spawn(Node {
+                    width: Val::Percent(100.),
+                    height: Val::Percent(100.),
+                    flex_direction: FlexDirection::Column,
+                    row_gap: MARGIN,
+                    ..default()
+                })
+                .with_children(|builder| {
+                    // spawn one child node for each combination of `AlignItems` and `JustifyContent`
+                    let justifications = [
+                        JustifyContent::FlexStart,
+                        JustifyContent::Center,
+                        JustifyContent::FlexEnd,
+                        JustifyContent::SpaceEvenly,
+                        JustifyContent::SpaceAround,
+                        JustifyContent::SpaceBetween,
+                    ];
+                    let alignments = [
+                        AlignItems::Baseline,
+                        AlignItems::FlexStart,
+                        AlignItems::Center,
+                        AlignItems::FlexEnd,
+                        AlignItems::Stretch,
+                    ];
+                    for align_items in alignments {
+                        builder
+                            .spawn(Node {
+                                width: Val::Percent(100.),
+                                height: Val::Percent(100.),
+                                flex_direction: FlexDirection::Row,
+                                column_gap: MARGIN,
+                                ..Default::default()
+                            })
+                            .with_children(|builder| {
+                                for justify_content in justifications {
+                                    spawn_child_node(
+                                        builder,
+                                        font.clone(),
+                                        align_items,
+                                        justify_content,
+                                    );
+                                }
+                            });
+                    }
+                });
+        });
+}
+
+fn spawn_child_node(
+    builder: &mut ChildSpawnerCommands,
+    font: Handle<Font>,
+    align_items: AlignItems,
+    justify_content: JustifyContent,
+) {
+    builder
+        .spawn((
+            Node {
+                flex_direction: FlexDirection::Column,
+                align_items,
+                justify_content,
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                ..default()
+            },
+            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+        ))
+        .with_children(|builder| {
+            let labels = [
+                (format!("{align_items:?}"), ALIGN_ITEMS_COLOR, 0.),
+                (format!("{justify_content:?}"), JUSTIFY_CONTENT_COLOR, 3.),
+            ];
+            for (text, color, top_margin) in labels {
+                // We nest the text within a parent node because margins and padding can't be directly applied to text nodes currently.
+                spawn_nested_text_bundle(
+                    builder,
+                    font.clone(),
+                    color,
+                    UiRect::top(Val::Px(top_margin)),
+                    &text,
+                );
+            }
+        });
+}
+
+fn spawn_nested_text_bundle(
+    builder: &mut ChildSpawnerCommands,
+    font: Handle<Font>,
+    background_color: Color,
+    margin: UiRect,
+    text: &str,
+) {
+    builder
+        .spawn((
+            Node {
+                margin,
+                padding: UiRect::axes(Val::Px(5.), Val::Px(1.)),
+                ..default()
+            },
+            BackgroundColor(background_color),
+        ))
+        .with_children(|builder| {
+            builder.spawn((
+                Text::new(text),
+                TextFont { font, ..default() },
+                TextColor::BLACK,
+            ));
+        });
+}

vendor/bevy/examples/ui/font_atlas_debug.rs

@@ -0,0 +1,112 @@
+//! This example illustrates how `FontAtlas`'s are populated.
+//! Bevy uses `FontAtlas`'s under the hood to optimize text rendering.
+
+use bevy::{color::palettes::basic::YELLOW, prelude::*, text::FontAtlasSets};
+use rand::{Rng, SeedableRng};
+use rand_chacha::ChaCha8Rng;
+
+fn main() {
+    App::new()
+        .init_resource::<State>()
+        .insert_resource(ClearColor(Color::BLACK))
+        .add_plugins(DefaultPlugins)
+        .add_systems(Startup, setup)
+        .add_systems(Update, (text_update_system, atlas_render_system))
+        .run();
+}
+
+#[derive(Resource)]
+struct State {
+    atlas_count: u32,
+    handle: Handle<Font>,
+    timer: Timer,
+}
+
+impl Default for State {
+    fn default() -> Self {
+        Self {
+            atlas_count: 0,
+            handle: Handle::default(),
+            timer: Timer::from_seconds(0.05, TimerMode::Repeating),
+        }
+    }
+}
+
+#[derive(Resource, Deref, DerefMut)]
+struct SeededRng(ChaCha8Rng);
+
+fn atlas_render_system(
+    mut commands: Commands,
+    mut state: ResMut<State>,
+    font_atlas_sets: Res<FontAtlasSets>,
+    images: Res<Assets<Image>>,
+) {
+    if let Some(set) = font_atlas_sets.get(&state.handle) {
+        if let Some((_size, font_atlases)) = set.iter().next() {
+            let x_offset = state.atlas_count as f32;
+            if state.atlas_count == font_atlases.len() as u32 {
+                return;
+            }
+            let font_atlas = &font_atlases[state.atlas_count as usize];
+            let image = images.get(&font_atlas.texture).unwrap();
+            state.atlas_count += 1;
+            commands.spawn((
+                ImageNode::new(font_atlas.texture.clone()),
+                Node {
+                    position_type: PositionType::Absolute,
+                    top: Val::ZERO,
+                    left: Val::Px(image.width() as f32 * x_offset),
+                    ..default()
+                },
+            ));
+        }
+    }
+}
+
+fn text_update_system(
+    mut state: ResMut<State>,
+    time: Res<Time>,
+    mut query: Query<&mut Text>,
+    mut seeded_rng: ResMut<SeededRng>,
+) {
+    if !state.timer.tick(time.delta()).just_finished() {
+        return;
+    }
+
+    for mut text in &mut query {
+        let c = seeded_rng.r#gen::<u8>() as char;
+        let string = &mut **text;
+        if !string.contains(c) {
+            string.push(c);
+        }
+    }
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>, mut state: ResMut<State>) {
+    let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
+    state.handle = font_handle.clone();
+    commands.spawn(Camera2d);
+    commands
+        .spawn((
+            Node {
+                position_type: PositionType::Absolute,
+                bottom: Val::ZERO,
+                ..default()
+            },
+            BackgroundColor(Color::NONE),
+        ))
+        .with_children(|parent| {
+            parent.spawn((
+                Text::new("a"),
+                TextFont {
+                    font: font_handle,
+                    font_size: 50.0,
+                    ..default()
+                },
+                TextColor(YELLOW.into()),
+            ));
+        });
+    // We're seeding the PRNG here to make this example deterministic for testing purposes.
+    // This isn't strictly required in practical use unless you need your app to be deterministic.
+    commands.insert_resource(SeededRng(ChaCha8Rng::seed_from_u64(19878367467713)));
+}

vendor/bevy/examples/ui/ghost_nodes.rs

@@ -0,0 +1,125 @@
+//! This example demonstrates the use of Ghost Nodes.
+//!
+//! UI layout will ignore ghost nodes, and treat their children as if they were direct descendants of the first non-ghost ancestor.
+//!
+//! # Warning
+//!
+//! This is an experimental feature, and should be used with caution,
+//! especially in concert with 3rd party plugins or systems that may not be aware of ghost nodes.
+//!
+//! In order to use [`GhostNode`]s you must enable the `ghost_nodes` feature flag.
+
+use bevy::{prelude::*, ui::experimental::GhostNode, winit::WinitSettings};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(Update, button_system)
+        .run();
+}
+
+#[derive(Component)]
+struct Counter(i32);
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+    commands.spawn(Camera2d);
+
+    // Ghost UI root
+    commands.spawn(GhostNode).with_children(|ghost_root| {
+        ghost_root.spawn(Node::default()).with_child(create_label(
+            "This text node is rendered under a ghost root",
+            font_handle.clone(),
+        ));
+    });
+
+    // Normal UI root
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
+        .with_children(|parent| {
+            parent
+                .spawn((Node::default(), Counter(0)))
+                .with_children(|layout_parent| {
+                    layout_parent
+                        .spawn((GhostNode, Counter(0)))
+                        .with_children(|ghost_parent| {
+                            // Ghost children using a separate counter state
+                            // These buttons are being treated as children of layout_parent in the context of UI
+                            ghost_parent
+                                .spawn(create_button())
+                                .with_child(create_label("0", font_handle.clone()));
+                            ghost_parent
+                                .spawn(create_button())
+                                .with_child(create_label("0", font_handle.clone()));
+                        });
+
+                    // A normal child using the layout parent counter
+                    layout_parent
+                        .spawn(create_button())
+                        .with_child(create_label("0", font_handle.clone()));
+                });
+        });
+}
+
+fn create_button() -> impl Bundle {
+    (
+        Button,
+        Node {
+            width: Val::Px(150.0),
+            height: Val::Px(65.0),
+            border: UiRect::all(Val::Px(5.0)),
+            // horizontally center child text
+            justify_content: JustifyContent::Center,
+            // vertically center child text
+            align_items: AlignItems::Center,
+            ..default()
+        },
+        BorderColor(Color::BLACK),
+        BorderRadius::MAX,
+        BackgroundColor(Color::srgb(0.15, 0.15, 0.15)),
+    )
+}
+
+fn create_label(text: &str, font: Handle<Font>) -> (Text, TextFont, TextColor) {
+    (
+        Text::new(text),
+        TextFont {
+            font,
+            font_size: 33.0,
+            ..default()
+        },
+        TextColor(Color::srgb(0.9, 0.9, 0.9)),
+    )
+}
+
+fn button_system(
+    mut interaction_query: Query<(&Interaction, &ChildOf), (Changed<Interaction>, With<Button>)>,
+    labels_query: Query<(&Children, &ChildOf), With<Button>>,
+    mut text_query: Query<&mut Text>,
+    mut counter_query: Query<&mut Counter>,
+) {
+    // Update parent counter on click
+    for (interaction, child_of) in &mut interaction_query {
+        if matches!(interaction, Interaction::Pressed) {
+            let mut counter = counter_query.get_mut(child_of.parent()).unwrap();
+            counter.0 += 1;
+        }
+    }
+
+    // Update button labels to match their parent counter
+    for (children, child_of) in &labels_query {
+        let counter = counter_query.get(child_of.parent()).unwrap();
+        let mut text = text_query.get_mut(children[0]).unwrap();
+
+        **text = counter.0.to_string();
+    }
+}

vendor/bevy/examples/ui/grid.rs

@@ -0,0 +1,206 @@
+//! Demonstrates how CSS Grid layout can be used to lay items out in a 2D grid
+use bevy::{color::palettes::css::*, prelude::*};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                resolution: [800., 600.].into(),
+                title: "Bevy CSS Grid Layout Example".to_string(),
+                ..default()
+            }),
+            ..default()
+        }))
+        .add_systems(Startup, spawn_layout)
+        .run();
+}
+
+fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+    commands.spawn(Camera2d);
+
+    // Top-level grid (app frame)
+    commands
+        .spawn((
+            Node {
+                // Use the CSS Grid algorithm for laying out this node
+                display: Display::Grid,
+                // Make node fill the entirety of its parent (in this case the window)
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                // Set the grid to have 2 columns with sizes [min-content, minmax(0, 1fr)]
+                //   - The first column will size to the size of its contents
+                //   - The second column will take up the remaining available space
+                grid_template_columns: vec![GridTrack::min_content(), GridTrack::flex(1.0)],
+                // Set the grid to have 3 rows with sizes [auto, minmax(0, 1fr), 20px]
+                //  - The first row will size to the size of its contents
+                //  - The second row take up remaining available space (after rows 1 and 3 have both been sized)
+                //  - The third row will be exactly 20px high
+                grid_template_rows: vec![
+                    GridTrack::auto(),
+                    GridTrack::flex(1.0),
+                    GridTrack::px(20.),
+                ],
+                ..default()
+            },
+            BackgroundColor(Color::WHITE),
+        ))
+        .with_children(|builder| {
+            // Header
+            builder
+                .spawn(
+                    Node {
+                        display: Display::Grid,
+                        // Make this node span two grid columns so that it takes up the entire top tow
+                        grid_column: GridPlacement::span(2),
+                        padding: UiRect::all(Val::Px(6.0)),
+                        ..default()
+                    },
+                )
+                .with_children(|builder| {
+                    spawn_nested_text_bundle(builder, font.clone(), "Bevy CSS Grid Layout Example");
+                });
+
+            // Main content grid (auto placed in row 2, column 1)
+            builder
+                .spawn((
+                    Node {
+                        // Make the height of the node fill its parent
+                        height: Val::Percent(100.0),
+                        // Make the grid have a 1:1 aspect ratio meaning it will scale as an exact square
+                        // As the height is set explicitly, this means the width will adjust to match the height
+                        aspect_ratio: Some(1.0),
+                        // Use grid layout for this node
+                        display: Display::Grid,
+                        // Add 24px of padding around the grid
+                        padding: UiRect::all(Val::Px(24.0)),
+                        // Set the grid to have 4 columns all with sizes minmax(0, 1fr)
+                        // This creates 4 exactly evenly sized columns
+                        grid_template_columns: RepeatedGridTrack::flex(4, 1.0),
+                        // Set the grid to have 4 rows all with sizes minmax(0, 1fr)
+                        // This creates 4 exactly evenly sized rows
+                        grid_template_rows: RepeatedGridTrack::flex(4, 1.0),
+                        // Set a 12px gap/gutter between rows and columns
+                        row_gap: Val::Px(12.0),
+                        column_gap: Val::Px(12.0),
+                        ..default()
+                    },
+                    BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+                ))
+                .with_children(|builder| {
+                    // Note there is no need to specify the position for each grid item. Grid items that are
+                    // not given an explicit position will be automatically positioned into the next available
+                    // grid cell. The order in which this is performed can be controlled using the grid_auto_flow
+                    // style property.
+
+                    item_rect(builder, ORANGE);
+                    item_rect(builder, BISQUE);
+                    item_rect(builder, BLUE);
+                    item_rect(builder, CRIMSON);
+                    item_rect(builder, AQUA);
+                    item_rect(builder, ORANGE_RED);
+                    item_rect(builder, DARK_GREEN);
+                    item_rect(builder, FUCHSIA);
+                    item_rect(builder, TEAL);
+                    item_rect(builder, ALICE_BLUE);
+                    item_rect(builder, CRIMSON);
+                    item_rect(builder, ANTIQUE_WHITE);
+                    item_rect(builder, YELLOW);
+                    item_rect(builder, DEEP_PINK);
+                    item_rect(builder, YELLOW_GREEN);
+                    item_rect(builder, SALMON);
+                });
+
+            // Right side bar (auto placed in row 2, column 2)
+            builder
+                .spawn((
+                    Node {
+                        display: Display::Grid,
+                        // Align content towards the start (top) in the vertical axis
+                        align_items: AlignItems::Start,
+                        // Align content towards the center in the horizontal axis
+                        justify_items: JustifyItems::Center,
+                        // Add 10px padding
+                        padding: UiRect::all(Val::Px(10.)),
+                        // Add an fr track to take up all the available space at the bottom of the column so that the text nodes
+                        // can be top-aligned. Normally you'd use flexbox for this, but this is the CSS Grid example so we're using grid.
+                        grid_template_rows: vec![GridTrack::auto(), GridTrack::auto(), GridTrack::fr(1.0)],
+                        // Add a 10px gap between rows
+                        row_gap: Val::Px(10.),
+                        ..default()
+                    },
+                    BackgroundColor(BLACK.into()),
+                ))
+                .with_children(|builder| {
+                    builder.spawn((Text::new("Sidebar"),
+                        TextFont {
+                            font: font.clone(),
+                            ..default()
+                        },
+                    ));
+                    builder.spawn((Text::new("A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely."),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 13.0,
+                            ..default()
+                        },
+                    ));
+                    builder.spawn(Node::default());
+                });
+
+            // Footer / status bar
+            builder.spawn((
+                Node {
+                    // Make this node span two grid column so that it takes up the entire bottom row
+                    grid_column: GridPlacement::span(2),
+                    ..default()
+                },
+                BackgroundColor(WHITE.into()),
+            ));
+
+            // Modal (absolutely positioned on top of content - currently hidden: to view it, change its visibility)
+            builder.spawn((
+                Node {
+                    position_type: PositionType::Absolute,
+                    margin: UiRect {
+                        top: Val::Px(100.),
+                        bottom: Val::Auto,
+                        left: Val::Auto,
+                        right: Val::Auto,
+                    },
+                    width: Val::Percent(60.),
+                    height: Val::Px(300.),
+                    max_width: Val::Px(600.),
+                    ..default()
+                },
+                Visibility::Hidden,
+                BackgroundColor(Color::WHITE.with_alpha(0.8)),
+            ));
+        });
+}
+
+/// Create a colored rectangle node. The node has size as it is assumed that it will be
+/// spawned as a child of a Grid container with `AlignItems::Stretch` and `JustifyItems::Stretch`
+/// which will allow it to take its size from the size of the grid area it occupies.
+fn item_rect(builder: &mut ChildSpawnerCommands, color: Srgba) {
+    builder
+        .spawn((
+            Node {
+                display: Display::Grid,
+                padding: UiRect::all(Val::Px(3.0)),
+                ..default()
+            },
+            BackgroundColor(BLACK.into()),
+        ))
+        .with_children(|builder| {
+            builder.spawn((Node::default(), BackgroundColor(color.into())));
+        });
+}
+
+fn spawn_nested_text_bundle(builder: &mut ChildSpawnerCommands, font: Handle<Font>, text: &str) {
+    builder.spawn((
+        Text::new(text),
+        TextFont { font, ..default() },
+        TextColor::BLACK,
+    ));
+}

vendor/bevy/examples/ui/overflow.rs

@@ -0,0 +1,109 @@
+//! Simple example demonstrating overflow behavior.
+
+use bevy::{color::palettes::css::*, prelude::*, winit::WinitSettings};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(Update, update_outlines)
+        .run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    commands.spawn(Camera2d);
+
+    let text_style = TextFont::default();
+
+    let image = asset_server.load("branding/icon.png");
+
+    commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
+                ..Default::default()
+            },
+            BackgroundColor(ANTIQUE_WHITE.into()),
+        ))
+        .with_children(|parent| {
+            for overflow in [
+                Overflow::visible(),
+                Overflow::clip_x(),
+                Overflow::clip_y(),
+                Overflow::clip(),
+            ] {
+                parent
+                    .spawn(Node {
+                        flex_direction: FlexDirection::Column,
+                        align_items: AlignItems::Center,
+                        margin: UiRect::horizontal(Val::Px(25.)),
+                        ..Default::default()
+                    })
+                    .with_children(|parent| {
+                        let label = format!("{overflow:#?}");
+                        parent
+                            .spawn((
+                                Node {
+                                    padding: UiRect::all(Val::Px(10.)),
+                                    margin: UiRect::bottom(Val::Px(25.)),
+                                    ..Default::default()
+                                },
+                                BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+                            ))
+                            .with_children(|parent| {
+                                parent.spawn((Text::new(label), text_style.clone()));
+                            });
+                        parent
+                            .spawn((
+                                Node {
+                                    width: Val::Px(100.),
+                                    height: Val::Px(100.),
+                                    padding: UiRect {
+                                        left: Val::Px(25.),
+                                        top: Val::Px(25.),
+                                        ..Default::default()
+                                    },
+                                    border: UiRect::all(Val::Px(5.)),
+                                    overflow,
+                                    ..default()
+                                },
+                                BorderColor(Color::BLACK),
+                                BackgroundColor(GRAY.into()),
+                            ))
+                            .with_children(|parent| {
+                                parent.spawn((
+                                    ImageNode::new(image.clone()),
+                                    Node {
+                                        min_width: Val::Px(100.),
+                                        min_height: Val::Px(100.),
+                                        ..default()
+                                    },
+                                    Interaction::default(),
+                                    Outline {
+                                        width: Val::Px(2.),
+                                        offset: Val::Px(2.),
+                                        color: Color::NONE,
+                                    },
+                                ));
+                            });
+                    });
+            }
+        });
+}
+
+fn update_outlines(mut outlines_query: Query<(&mut Outline, Ref<Interaction>)>) {
+    for (mut outline, interaction) in outlines_query.iter_mut() {
+        if interaction.is_changed() {
+            outline.color = match *interaction {
+                Interaction::Pressed => RED.into(),
+                Interaction::Hovered => WHITE.into(),
+                Interaction::None => Color::NONE,
+            };
+        }
+    }
+}

vendor/bevy/examples/ui/overflow_clip_margin.rs

@@ -0,0 +1,94 @@
+//! Simple example demonstrating the `OverflowClipMargin` style property.
+
+use bevy::{color::palettes::css::*, prelude::*, winit::WinitSettings};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    commands.spawn(Camera2d);
+
+    let image = asset_server.load("branding/icon.png");
+
+    commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
+                row_gap: Val::Px(40.),
+                flex_direction: FlexDirection::Column,
+                ..default()
+            },
+            BackgroundColor(ANTIQUE_WHITE.into()),
+        ))
+        .with_children(|parent| {
+            for overflow_clip_margin in [
+                OverflowClipMargin::border_box().with_margin(25.),
+                OverflowClipMargin::border_box(),
+                OverflowClipMargin::padding_box(),
+                OverflowClipMargin::content_box(),
+            ] {
+                parent
+                    .spawn(Node {
+                        flex_direction: FlexDirection::Row,
+                        column_gap: Val::Px(20.),
+                        ..default()
+                    })
+                    .with_children(|parent| {
+                        parent
+                            .spawn((
+                                Node {
+                                    padding: UiRect::all(Val::Px(10.)),
+                                    margin: UiRect::bottom(Val::Px(25.)),
+                                    ..default()
+                                },
+                                BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+                            ))
+                            .with_child(Text(format!("{overflow_clip_margin:#?}")));
+
+                        parent
+                            .spawn((
+                                Node {
+                                    margin: UiRect::top(Val::Px(10.)),
+                                    width: Val::Px(100.),
+                                    height: Val::Px(100.),
+                                    padding: UiRect::all(Val::Px(20.)),
+                                    border: UiRect::all(Val::Px(5.)),
+                                    overflow: Overflow::clip(),
+                                    overflow_clip_margin,
+                                    ..default()
+                                },
+                                BackgroundColor(GRAY.into()),
+                                BorderColor(Color::BLACK),
+                            ))
+                            .with_children(|parent| {
+                                parent
+                                    .spawn((
+                                        Node {
+                                            min_width: Val::Px(50.),
+                                            min_height: Val::Px(50.),
+                                            ..default()
+                                        },
+                                        BackgroundColor(LIGHT_CYAN.into()),
+                                    ))
+                                    .with_child((
+                                        ImageNode::new(image.clone()),
+                                        Node {
+                                            min_width: Val::Px(100.),
+                                            min_height: Val::Px(100.),
+                                            ..default()
+                                        },
+                                    ));
+                            });
+                    });
+            }
+        });
+}

vendor/bevy/examples/ui/overflow_debug.rs

@@ -0,0 +1,286 @@
+//! Tests how different transforms behave when clipped with `Overflow::Hidden`
+
+use bevy::{input::common_conditions::input_just_pressed, prelude::*, ui::widget::TextUiWriter};
+use std::f32::consts::{FRAC_PI_2, PI, TAU};
+
+const CONTAINER_SIZE: f32 = 150.0;
+const HALF_CONTAINER_SIZE: f32 = CONTAINER_SIZE / 2.0;
+const LOOP_LENGTH: f32 = 4.0;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .init_resource::<AnimationState>()
+        .add_systems(Startup, setup)
+        .add_systems(
+            Update,
+            (
+                toggle_overflow.run_if(input_just_pressed(KeyCode::KeyO)),
+                next_container_size.run_if(input_just_pressed(KeyCode::KeyS)),
+                update_transform::<Move>,
+                update_transform::<Scale>,
+                update_transform::<Rotate>,
+                update_animation,
+            ),
+        )
+        .run();
+}
+
+#[derive(Component)]
+struct Instructions;
+
+#[derive(Resource, Default)]
+struct AnimationState {
+    playing: bool,
+    paused_at: f32,
+    paused_total: f32,
+    t: f32,
+}
+
+#[derive(Component)]
+struct Container(u8);
+
+trait UpdateTransform {
+    fn update(&self, t: f32, transform: &mut Transform);
+}
+
+#[derive(Component)]
+struct Move;
+
+impl UpdateTransform for Move {
+    fn update(&self, t: f32, transform: &mut Transform) {
+        transform.translation.x = ops::sin(t * TAU - FRAC_PI_2) * HALF_CONTAINER_SIZE;
+        transform.translation.y = -ops::cos(t * TAU - FRAC_PI_2) * HALF_CONTAINER_SIZE;
+    }
+}
+
+#[derive(Component)]
+struct Scale;
+
+impl UpdateTransform for Scale {
+    fn update(&self, t: f32, transform: &mut Transform) {
+        transform.scale.x = 1.0 + 0.5 * ops::cos(t * TAU).max(0.0);
+        transform.scale.y = 1.0 + 0.5 * ops::cos(t * TAU + PI).max(0.0);
+    }
+}
+
+#[derive(Component)]
+struct Rotate;
+
+impl UpdateTransform for Rotate {
+    fn update(&self, t: f32, transform: &mut Transform) {
+        transform.rotation =
+            Quat::from_axis_angle(Vec3::Z, (ops::cos(t * TAU) * 45.0).to_radians());
+    }
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    // Camera
+
+    commands.spawn(Camera2d);
+
+    // Instructions
+
+    let text_font = TextFont::default();
+
+    commands
+        .spawn((
+            Text::new(
+                "Next Overflow Setting (O)\nNext Container Size (S)\nToggle Animation (space)\n\n",
+            ),
+            text_font.clone(),
+            Node {
+                position_type: PositionType::Absolute,
+                top: Val::Px(12.0),
+                left: Val::Px(12.0),
+                ..default()
+            },
+            Instructions,
+        ))
+        .with_child((
+            TextSpan::new(format!("{:?}", Overflow::clip())),
+            text_font.clone(),
+        ));
+
+    // Overflow Debug
+
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            ..default()
+        })
+        .with_children(|parent| {
+            parent
+                .spawn(Node {
+                    display: Display::Grid,
+                    grid_template_columns: RepeatedGridTrack::px(3, CONTAINER_SIZE),
+                    grid_template_rows: RepeatedGridTrack::px(2, CONTAINER_SIZE),
+                    row_gap: Val::Px(80.),
+                    column_gap: Val::Px(80.),
+                    ..default()
+                })
+                .with_children(|parent| {
+                    spawn_image(parent, &asset_server, Move);
+                    spawn_image(parent, &asset_server, Scale);
+                    spawn_image(parent, &asset_server, Rotate);
+
+                    spawn_text(parent, &asset_server, Move);
+                    spawn_text(parent, &asset_server, Scale);
+                    spawn_text(parent, &asset_server, Rotate);
+                });
+        });
+}
+
+fn spawn_image(
+    parent: &mut ChildSpawnerCommands,
+    asset_server: &Res<AssetServer>,
+    update_transform: impl UpdateTransform + Component,
+) {
+    spawn_container(parent, update_transform, |parent| {
+        parent.spawn((
+            ImageNode::new(asset_server.load("branding/bevy_logo_dark_big.png")),
+            Node {
+                height: Val::Px(100.),
+                position_type: PositionType::Absolute,
+                top: Val::Px(-50.),
+                left: Val::Px(-200.),
+                ..default()
+            },
+        ));
+    });
+}
+
+fn spawn_text(
+    parent: &mut ChildSpawnerCommands,
+    asset_server: &Res<AssetServer>,
+    update_transform: impl UpdateTransform + Component,
+) {
+    spawn_container(parent, update_transform, |parent| {
+        parent.spawn((
+            Text::new("Bevy"),
+            TextFont {
+                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                font_size: 100.0,
+                ..default()
+            },
+        ));
+    });
+}
+
+fn spawn_container(
+    parent: &mut ChildSpawnerCommands,
+    update_transform: impl UpdateTransform + Component,
+    spawn_children: impl FnOnce(&mut ChildSpawnerCommands),
+) {
+    let mut transform = Transform::default();
+
+    update_transform.update(0.0, &mut transform);
+
+    parent
+        .spawn((
+            Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
+                overflow: Overflow::clip(),
+                ..default()
+            },
+            BackgroundColor(Color::srgb(0.25, 0.25, 0.25)),
+            Container(0),
+        ))
+        .with_children(|parent| {
+            parent
+                .spawn((
+                    Node {
+                        align_items: AlignItems::Center,
+                        justify_content: JustifyContent::Center,
+                        top: Val::Px(transform.translation.x),
+                        left: Val::Px(transform.translation.y),
+                        ..default()
+                    },
+                    transform,
+                    update_transform,
+                ))
+                .with_children(spawn_children);
+        });
+}
+
+fn update_animation(
+    mut animation: ResMut<AnimationState>,
+    time: Res<Time>,
+    keys: Res<ButtonInput<KeyCode>>,
+) {
+    let delta = time.elapsed_secs();
+
+    if keys.just_pressed(KeyCode::Space) {
+        animation.playing = !animation.playing;
+
+        if !animation.playing {
+            animation.paused_at = delta;
+        } else {
+            animation.paused_total += delta - animation.paused_at;
+        }
+    }
+
+    if animation.playing {
+        animation.t = (delta - animation.paused_total) % LOOP_LENGTH / LOOP_LENGTH;
+    }
+}
+
+fn update_transform<T: UpdateTransform + Component>(
+    animation: Res<AnimationState>,
+    mut containers: Query<(&mut Transform, &mut Node, &ComputedNode, &T)>,
+) {
+    for (mut transform, mut node, computed_node, update_transform) in &mut containers {
+        update_transform.update(animation.t, &mut transform);
+
+        node.left = Val::Px(transform.translation.x * computed_node.inverse_scale_factor());
+        node.top = Val::Px(transform.translation.y * computed_node.inverse_scale_factor());
+    }
+}
+
+fn toggle_overflow(
+    mut containers: Query<&mut Node, With<Container>>,
+    instructions: Single<Entity, With<Instructions>>,
+    mut writer: TextUiWriter,
+) {
+    for mut node in &mut containers {
+        node.overflow = match node.overflow {
+            Overflow {
+                x: OverflowAxis::Visible,
+                y: OverflowAxis::Visible,
+            } => Overflow::clip_y(),
+            Overflow {
+                x: OverflowAxis::Visible,
+                y: OverflowAxis::Clip,
+            } => Overflow::clip_x(),
+            Overflow {
+                x: OverflowAxis::Clip,
+                y: OverflowAxis::Visible,
+            } => Overflow::clip(),
+            _ => Overflow::visible(),
+        };
+
+        let entity = *instructions;
+        *writer.text(entity, 1) = format!("{:?}", node.overflow);
+    }
+}
+
+fn next_container_size(mut containers: Query<(&mut Node, &mut Container)>) {
+    for (mut node, mut container) in &mut containers {
+        container.0 = (container.0 + 1) % 3;
+
+        node.width = match container.0 {
+            2 => Val::Percent(30.),
+            _ => Val::Percent(100.),
+        };
+        node.height = match container.0 {
+            1 => Val::Percent(30.),
+            _ => Val::Percent(100.),
+        };
+    }
+}

vendor/bevy/examples/ui/relative_cursor_position.rs

@@ -0,0 +1,86 @@
+//! Showcases the [`RelativeCursorPosition`] component, used to check the position of the cursor relative to a UI node.
+
+use bevy::{
+    prelude::*, render::camera::Viewport, ui::RelativeCursorPosition, winit::WinitSettings,
+};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(Update, relative_cursor_position_system)
+        .run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    commands.spawn((
+        Camera2d,
+        Camera {
+            // Cursor position will take the viewport offset into account
+            viewport: Some(Viewport {
+                physical_position: [200, 100].into(),
+                physical_size: [600, 600].into(),
+                ..default()
+            }),
+            ..default()
+        },
+    ));
+
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            flex_direction: FlexDirection::Column,
+            ..default()
+        })
+        .with_children(|parent| {
+            parent
+                .spawn((
+                    Node {
+                        width: Val::Px(250.),
+                        height: Val::Px(250.),
+                        margin: UiRect::bottom(Val::Px(15.)),
+                        ..default()
+                    },
+                    BackgroundColor(Color::srgb(235., 35., 12.)),
+                ))
+                .insert(RelativeCursorPosition::default());
+
+            parent.spawn((
+                Text::new("(0.0, 0.0)"),
+                TextFont {
+                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                    font_size: 33.0,
+                    ..default()
+                },
+                TextColor(Color::srgb(0.9, 0.9, 0.9)),
+            ));
+        });
+}
+
+/// This systems polls the relative cursor position and displays its value in a text component.
+fn relative_cursor_position_system(
+    relative_cursor_position: Single<&RelativeCursorPosition>,
+    output_query: Single<(&mut Text, &mut TextColor)>,
+) {
+    let (mut output, mut text_color) = output_query.into_inner();
+
+    **output = if let Some(relative_cursor_position) = relative_cursor_position.normalized {
+        format!(
+            "({:.1}, {:.1})",
+            relative_cursor_position.x, relative_cursor_position.y
+        )
+    } else {
+        "unknown".to_string()
+    };
+
+    text_color.0 = if relative_cursor_position.mouse_over() {
+        Color::srgb(0.1, 0.9, 0.1)
+    } else {
+        Color::srgb(0.9, 0.1, 0.1)
+    };
+}

vendor/bevy/examples/ui/render_ui_to_texture.rs

@@ -0,0 +1,125 @@
+//! Shows how to render UI to a texture. Useful for displaying UI in 3D space.
+
+use std::f32::consts::PI;
+
+use bevy::{
+    color::palettes::css::GOLD,
+    prelude::*,
+    render::{
+        camera::RenderTarget,
+        render_asset::RenderAssetUsages,
+        render_resource::{Extent3d, TextureDimension, TextureFormat, TextureUsages},
+    },
+};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_systems(Startup, setup)
+        .add_systems(Update, rotator_system)
+        .run();
+}
+
+// Marks the cube, to which the UI texture is applied.
+#[derive(Component)]
+struct Cube;
+
+fn setup(
+    mut commands: Commands,
+    mut meshes: ResMut<Assets<Mesh>>,
+    mut materials: ResMut<Assets<StandardMaterial>>,
+    mut images: ResMut<Assets<Image>>,
+) {
+    let size = Extent3d {
+        width: 512,
+        height: 512,
+        ..default()
+    };
+
+    // This is the texture that will be rendered to.
+    let mut image = Image::new_fill(
+        size,
+        TextureDimension::D2,
+        &[0, 0, 0, 0],
+        TextureFormat::Bgra8UnormSrgb,
+        RenderAssetUsages::default(),
+    );
+    // You need to set these texture usage flags in order to use the image as a render target
+    image.texture_descriptor.usage =
+        TextureUsages::TEXTURE_BINDING | TextureUsages::COPY_DST | TextureUsages::RENDER_ATTACHMENT;
+
+    let image_handle = images.add(image);
+
+    // Light
+    commands.spawn(DirectionalLight::default());
+
+    let texture_camera = commands
+        .spawn((
+            Camera2d,
+            Camera {
+                target: RenderTarget::Image(image_handle.clone().into()),
+                ..default()
+            },
+        ))
+        .id();
+
+    commands
+        .spawn((
+            Node {
+                // Cover the whole image
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                flex_direction: FlexDirection::Column,
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                ..default()
+            },
+            BackgroundColor(GOLD.into()),
+            UiTargetCamera(texture_camera),
+        ))
+        .with_children(|parent| {
+            parent.spawn((
+                Text::new("This is a cube"),
+                TextFont {
+                    font_size: 40.0,
+                    ..default()
+                },
+                TextColor::BLACK,
+            ));
+        });
+
+    let cube_size = 4.0;
+    let cube_handle = meshes.add(Cuboid::new(cube_size, cube_size, cube_size));
+
+    // This material has the texture that has been rendered.
+    let material_handle = materials.add(StandardMaterial {
+        base_color_texture: Some(image_handle),
+        reflectance: 0.02,
+        unlit: false,
+
+        ..default()
+    });
+
+    // Cube with material containing the rendered UI texture.
+    commands.spawn((
+        Mesh3d(cube_handle),
+        MeshMaterial3d(material_handle),
+        Transform::from_xyz(0.0, 0.0, 1.5).with_rotation(Quat::from_rotation_x(-PI / 5.0)),
+        Cube,
+    ));
+
+    // The main pass camera.
+    commands.spawn((
+        Camera3d::default(),
+        Transform::from_xyz(0.0, 0.0, 15.0).looking_at(Vec3::ZERO, Vec3::Y),
+    ));
+}
+
+const ROTATION_SPEED: f32 = 0.5;
+
+fn rotator_system(time: Res<Time>, mut query: Query<&mut Transform, With<Cube>>) {
+    for mut transform in &mut query {
+        transform.rotate_x(1.0 * time.delta_secs() * ROTATION_SPEED);
+        transform.rotate_y(0.7 * time.delta_secs() * ROTATION_SPEED);
+    }
+}

vendor/bevy/examples/ui/scroll.rs

@@ -0,0 +1,359 @@
+//! This example illustrates scrolling in Bevy UI.
+
+use accesskit::{Node as Accessible, Role};
+use bevy::{
+    a11y::AccessibilityNode,
+    input::mouse::{MouseScrollUnit, MouseWheel},
+    picking::hover::HoverMap,
+    prelude::*,
+    winit::WinitSettings,
+};
+
+fn main() {
+    let mut app = App::new();
+    app.add_plugins(DefaultPlugins)
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(Update, update_scroll_position);
+
+    app.run();
+}
+
+const FONT_SIZE: f32 = 20.;
+const LINE_HEIGHT: f32 = 21.;
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    // Camera
+    commands.spawn((Camera2d, IsDefaultUiCamera));
+
+    // root node
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            justify_content: JustifyContent::SpaceBetween,
+            flex_direction: FlexDirection::Column,
+            ..default()
+        })
+        .insert(Pickable::IGNORE)
+        .with_children(|parent| {
+            // horizontal scroll example
+            parent
+                .spawn(Node {
+                    width: Val::Percent(100.),
+                    flex_direction: FlexDirection::Column,
+                    ..default()
+                })
+                .with_children(|parent| {
+                    // header
+                    parent.spawn((
+                        Text::new("Horizontally Scrolling list (Ctrl + MouseWheel)"),
+                        TextFont {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: FONT_SIZE,
+                            ..default()
+                        },
+                        Label,
+                    ));
+
+                    // horizontal scroll container
+                    parent
+                        .spawn((
+                            Node {
+                                width: Val::Percent(80.),
+                                margin: UiRect::all(Val::Px(10.)),
+                                flex_direction: FlexDirection::Row,
+                                overflow: Overflow::scroll_x(), // n.b.
+                                ..default()
+                            },
+                            BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
+                        ))
+                        .with_children(|parent| {
+                            for i in 0..100 {
+                                parent.spawn((Text(format!("Item {i}")),
+                                        TextFont {
+                                            font: asset_server
+                                                .load("fonts/FiraSans-Bold.ttf"),
+                                            ..default()
+                                        },
+                                    Label,
+                                    AccessibilityNode(Accessible::new(Role::ListItem)),
+                                ))
+                                .insert(Node {
+                                    min_width: Val::Px(200.),
+                                    align_content: AlignContent::Center,
+                                    ..default()
+                                })
+                                .insert(Pickable {
+                                    should_block_lower: false,
+                                    ..default()
+                                })
+                                .observe(|
+                                    trigger: Trigger<Pointer<Pressed>>,
+                                    mut commands: Commands
+                                | {
+                                    if trigger.event().button == PointerButton::Primary {
+                                        commands.entity(trigger.target()).despawn();
+                                    }
+                                });
+                            }
+                        });
+                });
+
+            // container for all other examples
+            parent
+                .spawn(Node {
+                    width: Val::Percent(100.),
+                    height: Val::Percent(100.),
+                    flex_direction: FlexDirection::Row,
+                    justify_content: JustifyContent::SpaceBetween,
+                    ..default()
+                })
+                .with_children(|parent| {
+                    // vertical scroll example
+                    parent
+                        .spawn(Node {
+                            flex_direction: FlexDirection::Column,
+                            justify_content: JustifyContent::Center,
+                            align_items: AlignItems::Center,
+                            width: Val::Px(200.),
+                            ..default()
+                        })
+                        .with_children(|parent| {
+                            // Title
+                            parent.spawn((
+                                Text::new("Vertically Scrolling List"),
+                                TextFont {
+                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                    font_size: FONT_SIZE,
+                                    ..default()
+                                },
+                                Label,
+                            ));
+                            // Scrolling list
+                            parent
+                                .spawn((
+                                    Node {
+                                        flex_direction: FlexDirection::Column,
+                                        align_self: AlignSelf::Stretch,
+                                        height: Val::Percent(50.),
+                                        overflow: Overflow::scroll_y(), // n.b.
+                                        ..default()
+                                    },
+                                    BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
+                                ))
+                                .with_children(|parent| {
+                                    // List items
+                                    for i in 0..25 {
+                                        parent
+                                            .spawn(Node {
+                                                min_height: Val::Px(LINE_HEIGHT),
+                                                max_height: Val::Px(LINE_HEIGHT),
+                                                ..default()
+                                            })
+                                            .insert(Pickable {
+                                                should_block_lower: false,
+                                                ..default()
+                                            })
+                                            .with_children(|parent| {
+                                                parent
+                                                    .spawn((
+                                                        Text(format!("Item {i}")),
+                                                        TextFont {
+                                                            font: asset_server
+                                                                .load("fonts/FiraSans-Bold.ttf"),
+                                                            ..default()
+                                                        },
+                                                        Label,
+                                                        AccessibilityNode(Accessible::new(
+                                                            Role::ListItem,
+                                                        )),
+                                                    ))
+                                                    .insert(Pickable {
+                                                        should_block_lower: false,
+                                                        ..default()
+                                                    });
+                                            });
+                                    }
+                                });
+                        });
+
+                    // Bidirectional scroll example
+                    parent
+                        .spawn(Node {
+                            flex_direction: FlexDirection::Column,
+                            justify_content: JustifyContent::Center,
+                            align_items: AlignItems::Center,
+                            width: Val::Px(200.),
+                            ..default()
+                        })
+                        .with_children(|parent| {
+                            // Title
+                            parent.spawn((
+                                Text::new("Bidirectionally Scrolling List"),
+                                TextFont {
+                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                    font_size: FONT_SIZE,
+                                    ..default()
+                                },
+                                Label,
+                            ));
+                            // Scrolling list
+                            parent
+                                .spawn((
+                                    Node {
+                                        flex_direction: FlexDirection::Column,
+                                        align_self: AlignSelf::Stretch,
+                                        height: Val::Percent(50.),
+                                        overflow: Overflow::scroll(), // n.b.
+                                        ..default()
+                                    },
+                                    BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
+                                ))
+                                .with_children(|parent| {
+                                    // Rows in each column
+                                    for oi in 0..10 {
+                                        parent
+                                            .spawn(Node {
+                                                flex_direction: FlexDirection::Row,
+                                                ..default()
+                                            })
+                                            .insert(Pickable::IGNORE)
+                                            .with_children(|parent| {
+                                                // Elements in each row
+                                                for i in 0..25 {
+                                                    parent
+                                                        .spawn((
+                                                            Text(format!("Item {}", (oi * 25) + i)),
+                                                            TextFont {
+                                                                font: asset_server.load(
+                                                                    "fonts/FiraSans-Bold.ttf",
+                                                                ),
+                                                                ..default()
+                                                            },
+                                                            Label,
+                                                            AccessibilityNode(Accessible::new(
+                                                                Role::ListItem,
+                                                            )),
+                                                        ))
+                                                        .insert(Pickable {
+                                                            should_block_lower: false,
+                                                            ..default()
+                                                        });
+                                                }
+                                            });
+                                    }
+                                });
+                        });
+
+                    // Nested scrolls example
+                    parent
+                        .spawn(Node {
+                            flex_direction: FlexDirection::Column,
+                            justify_content: JustifyContent::Center,
+                            align_items: AlignItems::Center,
+                            width: Val::Px(200.),
+                            ..default()
+                        })
+                        .with_children(|parent| {
+                            // Title
+                            parent.spawn((
+                                Text::new("Nested Scrolling Lists"),
+                                TextFont {
+                                    font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                    font_size: FONT_SIZE,
+                                    ..default()
+                                },
+                                Label,
+                            ));
+                            // Outer, horizontal scrolling container
+                            parent
+                                .spawn((
+                                    Node {
+                                        column_gap: Val::Px(20.),
+                                        flex_direction: FlexDirection::Row,
+                                        align_self: AlignSelf::Stretch,
+                                        height: Val::Percent(50.),
+                                        overflow: Overflow::scroll_x(), // n.b.
+                                        ..default()
+                                    },
+                                    BackgroundColor(Color::srgb(0.10, 0.10, 0.10)),
+                                ))
+                                .with_children(|parent| {
+                                    // Inner, scrolling columns
+                                    for oi in 0..30 {
+                                        parent
+                                            .spawn((
+                                                Node {
+                                                    flex_direction: FlexDirection::Column,
+                                                    align_self: AlignSelf::Stretch,
+                                                    overflow: Overflow::scroll_y(),
+                                                    ..default()
+                                                },
+                                                BackgroundColor(Color::srgb(0.05, 0.05, 0.05)),
+                                            ))
+                                            .insert(Pickable {
+                                                should_block_lower: false,
+                                                ..default()
+                                            })
+                                            .with_children(|parent| {
+                                                for i in 0..25 {
+                                                    parent
+                                                        .spawn((
+                                                            Text(format!("Item {}", (oi * 25) + i)),
+                                                            TextFont {
+                                                                font: asset_server.load(
+                                                                    "fonts/FiraSans-Bold.ttf",
+                                                                ),
+                                                                ..default()
+                                                            },
+                                                            Label,
+                                                            AccessibilityNode(Accessible::new(
+                                                                Role::ListItem,
+                                                            )),
+                                                        ))
+                                                        .insert(Pickable {
+                                                            should_block_lower: false,
+                                                            ..default()
+                                                        });
+                                                }
+                                            });
+                                    }
+                                });
+                        });
+                });
+        });
+}
+
+/// Updates the scroll position of scrollable nodes in response to mouse input
+pub fn update_scroll_position(
+    mut mouse_wheel_events: EventReader<MouseWheel>,
+    hover_map: Res<HoverMap>,
+    mut scrolled_node_query: Query<&mut ScrollPosition>,
+    keyboard_input: Res<ButtonInput<KeyCode>>,
+) {
+    for mouse_wheel_event in mouse_wheel_events.read() {
+        let (mut dx, mut dy) = match mouse_wheel_event.unit {
+            MouseScrollUnit::Line => (
+                mouse_wheel_event.x * LINE_HEIGHT,
+                mouse_wheel_event.y * LINE_HEIGHT,
+            ),
+            MouseScrollUnit::Pixel => (mouse_wheel_event.x, mouse_wheel_event.y),
+        };
+
+        if keyboard_input.pressed(KeyCode::ControlLeft)
+            || keyboard_input.pressed(KeyCode::ControlRight)
+        {
+            std::mem::swap(&mut dx, &mut dy);
+        }
+
+        for (_pointer, pointer_map) in hover_map.iter() {
+            for (entity, _hit) in pointer_map.iter() {
+                if let Ok(mut scroll_position) = scrolled_node_query.get_mut(*entity) {
+                    scroll_position.offset_x -= dx;
+                    scroll_position.offset_y -= dy;
+                }
+            }
+        }
+    }
+}

vendor/bevy/examples/ui/size_constraints.rs

@@ -0,0 +1,360 @@
+//! Demonstrates how the to use the size constraints to control the size of a UI node.
+
+use bevy::{color::palettes::css::*, prelude::*};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_event::<ButtonActivatedEvent>()
+        .add_systems(Startup, setup)
+        .add_systems(Update, (update_buttons, update_radio_buttons_colors))
+        .run();
+}
+
+const ACTIVE_BORDER_COLOR: Color = Color::Srgba(ANTIQUE_WHITE);
+const INACTIVE_BORDER_COLOR: Color = Color::BLACK;
+
+const ACTIVE_INNER_COLOR: Color = Color::WHITE;
+const INACTIVE_INNER_COLOR: Color = Color::Srgba(NAVY);
+
+const ACTIVE_TEXT_COLOR: Color = Color::BLACK;
+const HOVERED_TEXT_COLOR: Color = Color::WHITE;
+const UNHOVERED_TEXT_COLOR: Color = Color::srgb(0.5, 0.5, 0.5);
+
+#[derive(Component)]
+struct Bar;
+
+#[derive(Copy, Clone, Debug, Component, PartialEq)]
+enum Constraint {
+    FlexBasis,
+    Width,
+    MinWidth,
+    MaxWidth,
+}
+
+#[derive(Copy, Clone, Component)]
+struct ButtonValue(Val);
+
+#[derive(Event)]
+struct ButtonActivatedEvent(Entity);
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    // ui camera
+    commands.spawn(Camera2d);
+
+    let text_font = (
+        TextFont {
+            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+            font_size: 33.0,
+            ..Default::default()
+        },
+        TextColor(Color::srgb(0.9, 0.9, 0.9)),
+    );
+
+    commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.0),
+                height: Val::Percent(100.0),
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                ..default()
+            },
+            BackgroundColor(Color::BLACK),
+        ))
+        .with_children(|parent| {
+            parent
+                .spawn(Node {
+                    flex_direction: FlexDirection::Column,
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
+                    ..default()
+                })
+                .with_children(|parent| {
+                    parent.spawn((
+                        Text::new("Size Constraints Example"),
+                        text_font.clone(),
+                        Node {
+                            margin: UiRect::bottom(Val::Px(25.)),
+                            ..Default::default()
+                        },
+                    ));
+
+                    spawn_bar(parent);
+
+                    parent
+                        .spawn((
+                            Node {
+                                flex_direction: FlexDirection::Column,
+                                align_items: AlignItems::Stretch,
+                                padding: UiRect::all(Val::Px(10.)),
+                                margin: UiRect::top(Val::Px(50.)),
+                                ..default()
+                            },
+                            BackgroundColor(YELLOW.into()),
+                        ))
+                        .with_children(|parent| {
+                            for constraint in [
+                                Constraint::MinWidth,
+                                Constraint::FlexBasis,
+                                Constraint::Width,
+                                Constraint::MaxWidth,
+                            ] {
+                                spawn_button_row(parent, constraint, text_font.clone());
+                            }
+                        });
+                });
+        });
+}
+
+fn spawn_bar(parent: &mut ChildSpawnerCommands) {
+    parent
+        .spawn((
+            Node {
+                flex_basis: Val::Percent(100.0),
+                align_self: AlignSelf::Stretch,
+                padding: UiRect::all(Val::Px(10.)),
+                ..default()
+            },
+            BackgroundColor(YELLOW.into()),
+        ))
+        .with_children(|parent| {
+            parent
+                .spawn((
+                    Node {
+                        align_items: AlignItems::Stretch,
+                        width: Val::Percent(100.),
+                        height: Val::Px(100.),
+                        padding: UiRect::all(Val::Px(4.)),
+                        ..default()
+                    },
+                    BackgroundColor(Color::BLACK),
+                ))
+                .with_children(|parent| {
+                    parent.spawn((Node::default(), BackgroundColor(Color::WHITE), Bar));
+                });
+        });
+}
+
+fn spawn_button_row(
+    parent: &mut ChildSpawnerCommands,
+    constraint: Constraint,
+    text_style: (TextFont, TextColor),
+) {
+    let label = match constraint {
+        Constraint::FlexBasis => "flex_basis",
+        Constraint::Width => "size",
+        Constraint::MinWidth => "min_size",
+        Constraint::MaxWidth => "max_size",
+    };
+
+    parent
+        .spawn((
+            Node {
+                flex_direction: FlexDirection::Column,
+                padding: UiRect::all(Val::Px(2.)),
+                align_items: AlignItems::Stretch,
+                ..default()
+            },
+            BackgroundColor(Color::BLACK),
+        ))
+        .with_children(|parent| {
+            parent
+                .spawn(Node {
+                    flex_direction: FlexDirection::Row,
+                    justify_content: JustifyContent::End,
+                    padding: UiRect::all(Val::Px(2.)),
+                    ..default()
+                })
+                .with_children(|parent| {
+                    // spawn row label
+                    parent
+                        .spawn((Node {
+                            min_width: Val::Px(200.),
+                            max_width: Val::Px(200.),
+                            justify_content: JustifyContent::Center,
+                            align_items: AlignItems::Center,
+                            ..default()
+                        },))
+                        .with_child((Text::new(label), text_style.clone()));
+
+                    // spawn row buttons
+                    parent.spawn(Node::default()).with_children(|parent| {
+                        spawn_button(
+                            parent,
+                            constraint,
+                            ButtonValue(Val::Auto),
+                            "Auto".to_string(),
+                            text_style.clone(),
+                            true,
+                        );
+                        for percent in [0., 25., 50., 75., 100., 125.] {
+                            spawn_button(
+                                parent,
+                                constraint,
+                                ButtonValue(Val::Percent(percent)),
+                                format!("{percent}%"),
+                                text_style.clone(),
+                                false,
+                            );
+                        }
+                    });
+                });
+        });
+}
+
+fn spawn_button(
+    parent: &mut ChildSpawnerCommands,
+    constraint: Constraint,
+    action: ButtonValue,
+    label: String,
+    text_style: (TextFont, TextColor),
+    active: bool,
+) {
+    parent
+        .spawn((
+            Button,
+            Node {
+                align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
+                border: UiRect::all(Val::Px(2.)),
+                margin: UiRect::horizontal(Val::Px(2.)),
+                ..Default::default()
+            },
+            BorderColor(if active {
+                ACTIVE_BORDER_COLOR
+            } else {
+                INACTIVE_BORDER_COLOR
+            }),
+            constraint,
+            action,
+        ))
+        .with_children(|parent| {
+            parent
+                .spawn((
+                    Node {
+                        width: Val::Px(100.),
+                        justify_content: JustifyContent::Center,
+                        ..default()
+                    },
+                    BackgroundColor(if active {
+                        ACTIVE_INNER_COLOR
+                    } else {
+                        INACTIVE_INNER_COLOR
+                    }),
+                ))
+                .with_child((
+                    Text::new(label),
+                    text_style.0,
+                    TextColor(if active {
+                        ACTIVE_TEXT_COLOR
+                    } else {
+                        UNHOVERED_TEXT_COLOR
+                    }),
+                    TextLayout::new_with_justify(JustifyText::Center),
+                ));
+        });
+}
+
+fn update_buttons(
+    mut button_query: Query<
+        (Entity, &Interaction, &Constraint, &ButtonValue),
+        Changed<Interaction>,
+    >,
+    mut bar_node: Single<&mut Node, With<Bar>>,
+    mut text_query: Query<&mut TextColor>,
+    children_query: Query<&Children>,
+    mut button_activated_event: EventWriter<ButtonActivatedEvent>,
+) {
+    for (button_id, interaction, constraint, value) in button_query.iter_mut() {
+        match interaction {
+            Interaction::Pressed => {
+                button_activated_event.write(ButtonActivatedEvent(button_id));
+                match constraint {
+                    Constraint::FlexBasis => {
+                        bar_node.flex_basis = value.0;
+                    }
+                    Constraint::Width => {
+                        bar_node.width = value.0;
+                    }
+                    Constraint::MinWidth => {
+                        bar_node.min_width = value.0;
+                    }
+                    Constraint::MaxWidth => {
+                        bar_node.max_width = value.0;
+                    }
+                }
+            }
+            Interaction::Hovered => {
+                if let Ok(children) = children_query.get(button_id) {
+                    for &child in children {
+                        if let Ok(grand_children) = children_query.get(child) {
+                            for &grandchild in grand_children {
+                                if let Ok(mut text_color) = text_query.get_mut(grandchild) {
+                                    if text_color.0 != ACTIVE_TEXT_COLOR {
+                                        text_color.0 = HOVERED_TEXT_COLOR;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            Interaction::None => {
+                if let Ok(children) = children_query.get(button_id) {
+                    for &child in children {
+                        if let Ok(grand_children) = children_query.get(child) {
+                            for &grandchild in grand_children {
+                                if let Ok(mut text_color) = text_query.get_mut(grandchild) {
+                                    if text_color.0 != ACTIVE_TEXT_COLOR {
+                                        text_color.0 = UNHOVERED_TEXT_COLOR;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+fn update_radio_buttons_colors(
+    mut event_reader: EventReader<ButtonActivatedEvent>,
+    button_query: Query<(Entity, &Constraint, &Interaction)>,
+    mut border_query: Query<&mut BorderColor>,
+    mut color_query: Query<&mut BackgroundColor>,
+    mut text_query: Query<&mut TextColor>,
+    children_query: Query<&Children>,
+) {
+    for &ButtonActivatedEvent(button_id) in event_reader.read() {
+        let (_, target_constraint, _) = button_query.get(button_id).unwrap();
+        for (id, constraint, interaction) in button_query.iter() {
+            if target_constraint == constraint {
+                let (border_color, inner_color, label_color) = if id == button_id {
+                    (ACTIVE_BORDER_COLOR, ACTIVE_INNER_COLOR, ACTIVE_TEXT_COLOR)
+                } else {
+                    (
+                        INACTIVE_BORDER_COLOR,
+                        INACTIVE_INNER_COLOR,
+                        if matches!(interaction, Interaction::Hovered) {
+                            HOVERED_TEXT_COLOR
+                        } else {
+                            UNHOVERED_TEXT_COLOR
+                        },
+                    )
+                };
+
+                border_query.get_mut(id).unwrap().0 = border_color;
+                for &child in children_query.get(id).into_iter().flatten() {
+                    color_query.get_mut(child).unwrap().0 = inner_color;
+                    for &grandchild in children_query.get(child).into_iter().flatten() {
+                        if let Ok(mut text_color) = text_query.get_mut(grandchild) {
+                            text_color.0 = label_color;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

vendor/bevy/examples/ui/tab_navigation.rs

@@ -0,0 +1,221 @@
+//! This example illustrates the use of tab navigation.
+
+use bevy::{
+    color::palettes::basic::*,
+    input_focus::{
+        tab_navigation::{TabGroup, TabIndex, TabNavigationPlugin},
+        InputDispatchPlugin, InputFocus,
+    },
+    prelude::*,
+    winit::WinitSettings,
+};
+
+fn main() {
+    App::new()
+        .add_plugins((DefaultPlugins, InputDispatchPlugin, TabNavigationPlugin))
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(Update, (button_system, focus_system))
+        .run();
+}
+
+const NORMAL_BUTTON: Color = Color::srgb(0.15, 0.15, 0.15);
+const HOVERED_BUTTON: Color = Color::srgb(0.25, 0.25, 0.25);
+const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
+
+fn button_system(
+    mut interaction_query: Query<
+        (
+            &Interaction,
+            &mut BackgroundColor,
+            &mut BorderColor,
+            &Children,
+        ),
+        (Changed<Interaction>, With<Button>),
+    >,
+    mut text_query: Query<&mut Text>,
+) {
+    for (interaction, mut color, mut border_color, children) in &mut interaction_query {
+        let mut text = text_query.get_mut(children[0]).unwrap();
+        match *interaction {
+            Interaction::Pressed => {
+                **text = "Press".to_string();
+                *color = PRESSED_BUTTON.into();
+                border_color.0 = RED.into();
+            }
+            Interaction::Hovered => {
+                **text = "Hover".to_string();
+                *color = HOVERED_BUTTON.into();
+                border_color.0 = Color::WHITE;
+            }
+            Interaction::None => {
+                **text = "Button".to_string();
+                *color = NORMAL_BUTTON.into();
+                border_color.0 = Color::BLACK;
+            }
+        }
+    }
+}
+
+fn focus_system(
+    mut commands: Commands,
+    focus: Res<InputFocus>,
+    mut query: Query<Entity, With<Button>>,
+) {
+    if focus.is_changed() {
+        for button in query.iter_mut() {
+            if focus.0 == Some(button) {
+                commands.entity(button).insert(Outline {
+                    color: Color::WHITE,
+                    width: Val::Px(2.0),
+                    offset: Val::Px(2.0),
+                });
+            } else {
+                commands.entity(button).remove::<Outline>();
+            }
+        }
+    }
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    // ui camera
+    commands.spawn(Camera2d);
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            display: Display::Flex,
+            flex_direction: FlexDirection::Column,
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
+        .observe(
+            |mut trigger: Trigger<Pointer<Click>>, mut focus: ResMut<InputFocus>| {
+                focus.0 = None;
+                trigger.propagate(false);
+            },
+        )
+        .with_children(|parent| {
+            parent.spawn(Text::new("Tab Group 0"));
+            parent
+                .spawn((
+                    Node {
+                        display: Display::Flex,
+                        flex_direction: FlexDirection::Row,
+                        column_gap: Val::Px(6.0),
+                        margin: UiRect {
+                            bottom: Val::Px(10.0),
+                            ..default()
+                        },
+                        ..default()
+                    },
+                    TabGroup::new(0),
+                ))
+                .with_children(|parent| {
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                });
+
+            parent.spawn(Text::new("Tab Group 2"));
+            parent
+                .spawn((
+                    Node {
+                        display: Display::Flex,
+                        flex_direction: FlexDirection::Row,
+                        column_gap: Val::Px(6.0),
+                        margin: UiRect {
+                            bottom: Val::Px(10.0),
+                            ..default()
+                        },
+                        ..default()
+                    },
+                    TabGroup::new(2),
+                ))
+                .with_children(|parent| {
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                });
+
+            parent.spawn(Text::new("Tab Group 1"));
+            parent
+                .spawn((
+                    Node {
+                        display: Display::Flex,
+                        flex_direction: FlexDirection::Row,
+                        column_gap: Val::Px(6.0),
+                        margin: UiRect {
+                            bottom: Val::Px(10.0),
+                            ..default()
+                        },
+                        ..default()
+                    },
+                    TabGroup::new(1),
+                ))
+                .with_children(|parent| {
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                });
+
+            parent.spawn(Text::new("Modal Tab Group"));
+            parent
+                .spawn((
+                    Node {
+                        display: Display::Flex,
+                        flex_direction: FlexDirection::Row,
+                        column_gap: Val::Px(6.0),
+                        ..default()
+                    },
+                    TabGroup::modal(),
+                ))
+                .with_children(|parent| {
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                    create_button(parent, &asset_server);
+                });
+        });
+}
+
+fn create_button(parent: &mut ChildSpawnerCommands<'_>, asset_server: &AssetServer) {
+    parent
+        .spawn((
+            Button,
+            Node {
+                width: Val::Px(150.0),
+                height: Val::Px(65.0),
+                border: UiRect::all(Val::Px(5.0)),
+                // horizontally center child text
+                justify_content: JustifyContent::Center,
+                // vertically center child text
+                align_items: AlignItems::Center,
+                ..default()
+            },
+            BorderColor(Color::BLACK),
+            BorderRadius::MAX,
+            BackgroundColor(NORMAL_BUTTON),
+            TabIndex(0),
+        ))
+        .observe(
+            |mut trigger: Trigger<Pointer<Click>>, mut focus: ResMut<InputFocus>| {
+                focus.0 = Some(trigger.target());
+                trigger.propagate(false);
+            },
+        )
+        .with_child((
+            Text::new("Button"),
+            TextFont {
+                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                font_size: 23.0,
+                ..default()
+            },
+            TextColor(Color::srgb(0.9, 0.9, 0.9)),
+        ));
+}

vendor/bevy/examples/ui/text.rs

@@ -0,0 +1,145 @@
+//! This example illustrates how to create UI text and update it in a system.
+//!
+//! It displays the current FPS in the top left corner, as well as text that changes color
+//! in the bottom right. For text within a scene, please see the text2d example.
+
+use bevy::{
+    color::palettes::css::GOLD,
+    diagnostic::{DiagnosticsStore, FrameTimeDiagnosticsPlugin},
+    prelude::*,
+};
+
+fn main() {
+    App::new()
+        .add_plugins((DefaultPlugins, FrameTimeDiagnosticsPlugin::default()))
+        .add_systems(Startup, setup)
+        .add_systems(Update, (text_update_system, text_color_system))
+        .run();
+}
+
+// Marker struct to help identify the FPS UI component, since there may be many Text components
+#[derive(Component)]
+struct FpsText;
+
+// Marker struct to help identify the color-changing Text component
+#[derive(Component)]
+struct AnimatedText;
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    // UI camera
+    commands.spawn(Camera2d);
+    // Text with one section
+    commands.spawn((
+        // Accepts a `String` or any type that converts into a `String`, such as `&str`
+        Text::new("hello\nbevy!"),
+        TextFont {
+            // This font is loaded and will be used instead of the default font.
+            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+            font_size: 67.0,
+            ..default()
+        },
+        TextShadow::default(),
+        // Set the justification of the Text
+        TextLayout::new_with_justify(JustifyText::Center),
+        // Set the style of the Node itself.
+        Node {
+            position_type: PositionType::Absolute,
+            bottom: Val::Px(5.0),
+            right: Val::Px(5.0),
+            ..default()
+        },
+        AnimatedText,
+    ));
+
+    // Text with multiple sections
+    commands
+        .spawn((
+            // Create a Text with multiple child spans.
+            Text::new("FPS: "),
+            TextFont {
+                // This font is loaded and will be used instead of the default font.
+                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                font_size: 42.0,
+                ..default()
+            },
+        ))
+        .with_child((
+            TextSpan::default(),
+            if cfg!(feature = "default_font") {
+                (
+                    TextFont {
+                        font_size: 33.0,
+                        // If no font is specified, the default font (a minimal subset of FiraMono) will be used.
+                        ..default()
+                    },
+                    TextColor(GOLD.into()),
+                )
+            } else {
+                (
+                    // "default_font" feature is unavailable, load a font to use instead.
+                    TextFont {
+                        font: asset_server.load("fonts/FiraMono-Medium.ttf"),
+                        font_size: 33.0,
+                        ..Default::default()
+                    },
+                    TextColor(GOLD.into()),
+                )
+            },
+            FpsText,
+        ));
+
+    #[cfg(feature = "default_font")]
+    commands.spawn((
+        // Here we are able to call the `From` method instead of creating a new `TextSection`.
+        // This will use the default font (a minimal subset of FiraMono) and apply the default styling.
+        Text::new("From an &str into a Text with the default font!"),
+        Node {
+            position_type: PositionType::Absolute,
+            bottom: Val::Px(5.0),
+            left: Val::Px(15.0),
+            ..default()
+        },
+    ));
+
+    #[cfg(not(feature = "default_font"))]
+    commands.spawn((
+        Text::new("Default font disabled"),
+        TextFont {
+            font: asset_server.load("fonts/FiraMono-Medium.ttf"),
+            ..default()
+        },
+        Node {
+            position_type: PositionType::Absolute,
+            bottom: Val::Px(5.0),
+            left: Val::Px(15.0),
+            ..default()
+        },
+    ));
+}
+
+fn text_color_system(time: Res<Time>, mut query: Query<&mut TextColor, With<AnimatedText>>) {
+    for mut text_color in &mut query {
+        let seconds = time.elapsed_secs();
+
+        // Update the color of the ColorText span.
+        text_color.0 = Color::srgb(
+            ops::sin(1.25 * seconds) / 2.0 + 0.5,
+            ops::sin(0.75 * seconds) / 2.0 + 0.5,
+            ops::sin(0.50 * seconds) / 2.0 + 0.5,
+        );
+    }
+}
+
+fn text_update_system(
+    diagnostics: Res<DiagnosticsStore>,
+    mut query: Query<&mut TextSpan, With<FpsText>>,
+) {
+    for mut span in &mut query {
+        if let Some(fps) = diagnostics.get(&FrameTimeDiagnosticsPlugin::FPS) {
+            if let Some(value) = fps.smoothed() {
+                // Update the value of the second section
+                **span = format!("{value:.2}");
+            }
+        }
+    }
+}

vendor/bevy/examples/ui/text_debug.rs

@@ -0,0 +1,324 @@
+//! Shows various text layout options.
+
+use std::{collections::VecDeque, time::Duration};
+
+use bevy::{
+    color::palettes::css::*,
+    diagnostic::{DiagnosticsStore, FrameTimeDiagnosticsPlugin},
+    prelude::*,
+    ui::widget::TextUiWriter,
+    window::PresentMode,
+};
+
+fn main() {
+    App::new()
+        .add_plugins((
+            DefaultPlugins.set(WindowPlugin {
+                primary_window: Some(Window {
+                    present_mode: PresentMode::AutoNoVsync,
+                    ..default()
+                }),
+                ..default()
+            }),
+            FrameTimeDiagnosticsPlugin::default(),
+        ))
+        .add_systems(Startup, infotext_system)
+        .add_systems(Update, change_text_system)
+        .run();
+}
+
+#[derive(Component)]
+struct TextChanges;
+
+fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
+    let background_color = MAROON.into();
+    commands.spawn(Camera2d);
+
+    let root_uinode = commands
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            justify_content: JustifyContent::SpaceBetween,
+            ..default()
+        })
+        .id();
+
+    let left_column = commands
+        .spawn(Node {
+            flex_direction: FlexDirection::Column,
+            justify_content: JustifyContent::SpaceBetween,
+            align_items: AlignItems::Start,
+            flex_grow: 1.,
+            margin: UiRect::axes(Val::Px(15.), Val::Px(5.)),
+            ..default()
+        }).with_children(|builder| {
+        builder.spawn((
+            Text::new("This is\ntext with\nline breaks\nin the top left."),
+            TextFont {
+                font: font.clone(),
+                font_size: 25.0,
+                ..default()
+            },
+            BackgroundColor(background_color)
+        ));
+        builder.spawn((
+            Text::new(
+                "This text is right-justified. The `JustifyText` component controls the horizontal alignment of the lines of multi-line text relative to each other, and does not affect the text node's position in the UI layout.",
+            ),
+            TextFont {
+                font: font.clone(),
+                font_size: 25.0,
+                ..default()
+            },
+            TextColor(YELLOW.into()),
+            TextLayout::new_with_justify(JustifyText::Right),
+            Node {
+                max_width: Val::Px(300.),
+                ..default()
+            },
+            BackgroundColor(background_color)
+        ));
+        builder.spawn((
+            Text::new(
+                "This\ntext has\nline breaks and also a set width in the bottom left."),
+            TextFont {
+                font: font.clone(),
+                font_size: 25.0,
+                ..default()
+            },
+            Node {
+                max_width: Val::Px(300.),
+                ..default()
+            },
+            BackgroundColor(background_color)
+        )
+        );
+    }).id();
+
+    let right_column = commands
+        .spawn(Node {
+            flex_direction: FlexDirection::Column,
+            justify_content: JustifyContent::SpaceBetween,
+            align_items: AlignItems::End,
+            flex_grow: 1.,
+            margin: UiRect::axes(Val::Px(15.), Val::Px(5.)),
+            ..default()
+        })
+        .with_children(|builder| {
+            builder.spawn((
+                Text::new("This text is very long, has a limited width, is center-justified, is positioned in the top right and is also colored pink."),
+                TextFont {
+                    font: font.clone(),
+                    font_size: 33.0,
+                    ..default()
+                },
+                TextColor(Color::srgb(0.8, 0.2, 0.7)),
+                TextLayout::new_with_justify(JustifyText::Center),
+                Node {
+                    max_width: Val::Px(400.),
+                    ..default()
+                },
+                BackgroundColor(background_color),
+            ));
+
+            builder.spawn((
+                Text::new("This text is left-justified and is vertically positioned to distribute the empty space equally above and below it."),
+                TextFont {
+                    font: font.clone(),
+                    font_size: 29.0,
+                    ..default()
+                },
+                TextColor(YELLOW.into()),
+                TextLayout::new_with_justify(JustifyText::Left),
+                Node {
+                    max_width: Val::Px(300.),
+                    ..default()
+                },
+                BackgroundColor(background_color),
+            ));
+
+            builder.spawn((
+                Text::new("This text is fully justified and is positioned in the same way."),
+                TextFont {
+                    font: font.clone(),
+                    font_size: 29.0,
+                    ..default()
+                },
+                TextLayout::new_with_justify(JustifyText::Justified),
+                TextColor(GREEN_YELLOW.into()),
+                Node {
+                    max_width: Val::Px(300.),
+                    ..default()
+                },
+                BackgroundColor(background_color),
+            ));
+
+            builder
+                .spawn((
+                    Text::default(),
+                    TextFont {
+                        font: font.clone(),
+                        font_size: 21.0,
+                        ..default()
+                    },
+                    TextChanges,
+                    BackgroundColor(background_color),
+                ))
+                .with_children(|p| {
+                    p.spawn((
+                        TextSpan::new("\nThis text changes in the bottom right"),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 21.0,
+                            ..default()
+                        },
+                    ));
+                    p.spawn((
+                        TextSpan::new(" this text has zero font size"),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 0.0,
+                            ..default()
+                        },
+                        TextColor(BLUE.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::new("\nThis text changes in the bottom right - "),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 21.0,
+                            ..default()
+                        },
+                        TextColor(RED.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::default(),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 21.0,
+                            ..default()
+                        },
+                        TextColor(ORANGE_RED.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::new(" fps, "),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 10.0,
+                            ..default()
+                        },
+                        TextColor(YELLOW.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::default(),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 21.0,
+                            ..default()
+                        },
+                        TextColor(LIME.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::new(" ms/frame"),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: 42.0,
+                            ..default()
+                        },
+                        TextColor(BLUE.into()),
+                    ));
+                    p.spawn((
+                        TextSpan::new(" this text has negative font size"),
+                        TextFont {
+                            font: font.clone(),
+                            font_size: -42.0,
+                            ..default()
+                        },
+                        TextColor(BLUE.into()),
+                    ));
+                });
+        })
+        .id();
+    commands
+        .entity(root_uinode)
+        .add_children(&[left_column, right_column]);
+}
+
+fn change_text_system(
+    mut fps_history: Local<VecDeque<f64>>,
+    mut time_history: Local<VecDeque<Duration>>,
+    time: Res<Time>,
+    diagnostics: Res<DiagnosticsStore>,
+    query: Query<Entity, With<TextChanges>>,
+    mut writer: TextUiWriter,
+) {
+    time_history.push_front(time.elapsed());
+    time_history.truncate(120);
+    let avg_fps = (time_history.len() as f64)
+        / (time_history.front().copied().unwrap_or_default()
+            - time_history.back().copied().unwrap_or_default())
+        .as_secs_f64()
+        .max(0.0001);
+    fps_history.push_front(avg_fps);
+    fps_history.truncate(120);
+    let fps_variance = std_deviation(fps_history.make_contiguous()).unwrap_or_default();
+
+    for entity in &query {
+        let mut fps = 0.0;
+        if let Some(fps_diagnostic) = diagnostics.get(&FrameTimeDiagnosticsPlugin::FPS) {
+            if let Some(fps_smoothed) = fps_diagnostic.smoothed() {
+                fps = fps_smoothed;
+            }
+        }
+
+        let mut frame_time = time.delta_secs_f64();
+        if let Some(frame_time_diagnostic) =
+            diagnostics.get(&FrameTimeDiagnosticsPlugin::FRAME_TIME)
+        {
+            if let Some(frame_time_smoothed) = frame_time_diagnostic.smoothed() {
+                frame_time = frame_time_smoothed;
+            }
+        }
+
+        *writer.text(entity, 0) =
+            format!("{avg_fps:.1} avg fps, {fps_variance:.1} frametime variance",);
+
+        *writer.text(entity, 1) = format!(
+            "\nThis text changes in the bottom right - {fps:.1} fps, {frame_time:.3} ms/frame",
+        );
+
+        *writer.text(entity, 4) = format!("{fps:.1}");
+
+        *writer.text(entity, 6) = format!("{frame_time:.3}");
+    }
+}
+
+fn mean(data: &[f64]) -> Option<f64> {
+    let sum = data.iter().sum::<f64>();
+    let count = data.len();
+
+    match count {
+        positive if positive > 0 => Some(sum / count as f64),
+        _ => None,
+    }
+}
+
+fn std_deviation(data: &[f64]) -> Option<f64> {
+    match (mean(data), data.len()) {
+        (Some(data_mean), count) if count > 0 => {
+            let variance = data
+                .iter()
+                .map(|value| {
+                    let diff = data_mean - *value;
+
+                    diff * diff
+                })
+                .sum::<f64>()
+                / count as f64;
+
+            Some(variance.sqrt())
+        }
+        _ => None,
+    }
+}

vendor/bevy/examples/ui/text_wrap_debug.rs

@@ -0,0 +1,128 @@
+//! This example demonstrates text wrapping and use of the `LineBreakOn` property.
+
+use argh::FromArgs;
+use bevy::{prelude::*, text::LineBreak, window::WindowResolution, winit::WinitSettings};
+
+#[derive(FromArgs, Resource)]
+/// `text_wrap_debug` demonstrates text wrapping and use of the `LineBreakOn` property
+struct Args {
+    #[argh(option)]
+    /// window scale factor
+    scale_factor: Option<f32>,
+
+    #[argh(option, default = "1.")]
+    /// ui scale factor
+    ui_scale: f32,
+}
+
+fn main() {
+    // `from_env` panics on the web
+    #[cfg(not(target_arch = "wasm32"))]
+    let args: Args = argh::from_env();
+    #[cfg(target_arch = "wasm32")]
+    let args = Args::from_args(&[], &[]).unwrap();
+
+    let window = if let Some(scale_factor) = args.scale_factor {
+        Window {
+            resolution: WindowResolution::default().with_scale_factor_override(scale_factor),
+            ..Default::default()
+        }
+    } else {
+        Window::default()
+    };
+
+    App::new()
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(window),
+            ..Default::default()
+        }))
+        .insert_resource(WinitSettings::desktop_app())
+        .insert_resource(UiScale(args.ui_scale))
+        .add_systems(Startup, spawn)
+        .run();
+}
+
+fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
+    commands.spawn(Camera2d);
+
+    let text_font = TextFont {
+        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+        font_size: 12.0,
+        ..default()
+    };
+
+    let root = commands
+        .spawn((
+            Node {
+                width: Val::Percent(100.),
+                height: Val::Percent(100.),
+                flex_direction: FlexDirection::Column,
+                ..default()
+            },
+            BackgroundColor(Color::BLACK),
+        ))
+        .id();
+
+    for linebreak in [
+        LineBreak::AnyCharacter,
+        LineBreak::WordBoundary,
+        LineBreak::WordOrCharacter,
+        LineBreak::NoWrap,
+    ] {
+        let row_id = commands
+            .spawn(Node {
+                flex_direction: FlexDirection::Row,
+                justify_content: JustifyContent::SpaceAround,
+                align_items: AlignItems::Center,
+                width: Val::Percent(100.),
+                height: Val::Percent(50.),
+                ..default()
+            })
+            .id();
+
+        let justifications = vec![
+            JustifyContent::Center,
+            JustifyContent::FlexStart,
+            JustifyContent::FlexEnd,
+            JustifyContent::SpaceAround,
+            JustifyContent::SpaceBetween,
+            JustifyContent::SpaceEvenly,
+        ];
+
+        for (i, justification) in justifications.into_iter().enumerate() {
+            let c = 0.3 + i as f32 * 0.1;
+            let column_id = commands
+                .spawn((
+                    Node {
+                        justify_content: justification,
+                        flex_direction: FlexDirection::Column,
+                        width: Val::Percent(16.),
+                        height: Val::Percent(95.),
+                        overflow: Overflow::clip_x(),
+                        ..default()
+                    },
+                    BackgroundColor(Color::srgb(0.5, c, 1.0 - c)),
+                ))
+                .id();
+
+            let messages = [
+                format!("JustifyContent::{justification:?}"),
+                format!("LineBreakOn::{linebreak:?}"),
+                "Line 1\nLine 2".to_string(),
+                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor, nunc ac faucibus fringilla.".to_string(),
+                "pneumonoultramicroscopicsilicovolcanoconiosis".to_string()
+            ];
+
+            for (j, message) in messages.into_iter().enumerate() {
+                commands.entity(column_id).with_child((
+                    Text(message.clone()),
+                    text_font.clone(),
+                    TextLayout::new(JustifyText::Left, linebreak),
+                    BackgroundColor(Color::srgb(0.8 - j as f32 * 0.2, 0., 0.)),
+                ));
+            }
+            commands.entity(row_id).add_child(column_id);
+        }
+        commands.entity(root).add_child(row_id);
+    }
+}

vendor/bevy/examples/ui/transparency_ui.rs

@@ -0,0 +1,80 @@
+//! Demonstrates how to use transparency with UI.
+//! Shows two colored buttons with transparent text.
+
+use bevy::prelude::*;
+
+fn main() {
+    App::new()
+        .insert_resource(ClearColor(Color::BLACK))
+        .add_plugins(DefaultPlugins)
+        .add_systems(Startup, setup)
+        .run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    commands.spawn(Camera2d);
+
+    let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
+
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::SpaceAround,
+            ..default()
+        })
+        .with_children(|parent| {
+            parent
+                .spawn((
+                    Button,
+                    Node {
+                        width: Val::Px(150.0),
+                        height: Val::Px(65.0),
+                        justify_content: JustifyContent::Center,
+                        align_items: AlignItems::Center,
+                        ..default()
+                    },
+                    BackgroundColor(Color::srgb(0.1, 0.5, 0.1)),
+                ))
+                .with_children(|parent| {
+                    parent.spawn((
+                        Text::new("Button 1"),
+                        TextFont {
+                            font: font_handle.clone(),
+                            font_size: 33.0,
+                            ..default()
+                        },
+                        // Alpha channel of the color controls transparency.
+                        TextColor(Color::srgba(1.0, 1.0, 1.0, 0.2)),
+                    ));
+                });
+
+            // Button with a different color,
+            // to demonstrate the text looks different due to its transparency.
+            parent
+                .spawn((
+                    Button,
+                    Node {
+                        width: Val::Px(150.0),
+                        height: Val::Px(65.0),
+                        justify_content: JustifyContent::Center,
+                        align_items: AlignItems::Center,
+                        ..default()
+                    },
+                    BackgroundColor(Color::srgb(0.5, 0.1, 0.5)),
+                ))
+                .with_children(|parent| {
+                    parent.spawn((
+                        Text::new("Button 2"),
+                        TextFont {
+                            font: font_handle.clone(),
+                            font_size: 33.0,
+                            ..default()
+                        },
+                        // Alpha channel of the color controls transparency.
+                        TextColor(Color::srgba(1.0, 1.0, 1.0, 0.2)),
+                    ));
+                });
+        });
+}

vendor/bevy/examples/ui/ui_material.rs

@@ -0,0 +1,106 @@
+//! Demonstrates the use of [`UiMaterials`](UiMaterial) and how to change material values
+
+use bevy::{
+    color::palettes::css::DARK_BLUE, prelude::*, reflect::TypePath, render::render_resource::*,
+};
+
+/// This example uses a shader source file from the assets subdirectory
+const SHADER_ASSET_PATH: &str = "shaders/custom_ui_material.wgsl";
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(UiMaterialPlugin::<CustomUiMaterial>::default())
+        .add_systems(Startup, setup)
+        .add_systems(Update, animate)
+        .run();
+}
+
+fn setup(
+    mut commands: Commands,
+    mut ui_materials: ResMut<Assets<CustomUiMaterial>>,
+    asset_server: Res<AssetServer>,
+) {
+    // Camera so we can see UI
+    commands.spawn(Camera2d);
+
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
+        .with_children(|parent| {
+            let banner_scale_factor = 0.5;
+            parent.spawn((
+                Node {
+                    position_type: PositionType::Absolute,
+                    width: Val::Px(905.0 * banner_scale_factor),
+                    height: Val::Px(363.0 * banner_scale_factor),
+                    border: UiRect::all(Val::Px(20.)),
+                    ..default()
+                },
+                MaterialNode(ui_materials.add(CustomUiMaterial {
+                    color: LinearRgba::WHITE.to_f32_array().into(),
+                    slider: Vec4::splat(0.5),
+                    color_texture: asset_server.load("branding/banner.png"),
+                    border_color: LinearRgba::WHITE.to_f32_array().into(),
+                })),
+                BorderRadius::all(Val::Px(20.)),
+                // UI material nodes can have outlines and shadows like any other UI node
+                Outline {
+                    width: Val::Px(2.),
+                    offset: Val::Px(100.),
+                    color: DARK_BLUE.into(),
+                },
+            ));
+        });
+}
+
+#[derive(AsBindGroup, Asset, TypePath, Debug, Clone)]
+struct CustomUiMaterial {
+    /// Color multiplied with the image
+    #[uniform(0)]
+    color: Vec4,
+    /// Represents how much of the image is visible
+    /// Goes from 0 to 1
+    /// A `Vec4` is used here because Bevy with webgl2 requires that uniforms are 16-byte aligned but only the first component is read.
+    #[uniform(1)]
+    slider: Vec4,
+    /// Image used to represent the slider
+    #[texture(2)]
+    #[sampler(3)]
+    color_texture: Handle<Image>,
+    /// Color of the image's border
+    #[uniform(4)]
+    border_color: Vec4,
+}
+
+impl UiMaterial for CustomUiMaterial {
+    fn fragment_shader() -> ShaderRef {
+        SHADER_ASSET_PATH.into()
+    }
+}
+
+// Fills the slider slowly over 2 seconds and resets it
+// Also updates the color of the image to a rainbow color
+fn animate(
+    mut materials: ResMut<Assets<CustomUiMaterial>>,
+    q: Query<&MaterialNode<CustomUiMaterial>>,
+    time: Res<Time>,
+) {
+    let duration = 2.0;
+    for handle in &q {
+        if let Some(material) = materials.get_mut(handle) {
+            // rainbow color effect
+            let new_color = Color::hsl((time.elapsed_secs() * 60.0) % 360.0, 1., 0.5);
+            let border_color = Color::hsl((time.elapsed_secs() * 60.0) % 360.0, 0.75, 0.75);
+            material.color = new_color.to_linear().to_vec4();
+            material.slider.x =
+                ((time.elapsed_secs() % (duration * 2.0)) - duration).abs() / duration;
+            material.border_color = border_color.to_linear().to_vec4();
+        }
+    }
+}

vendor/bevy/examples/ui/ui_scaling.rs

@@ -0,0 +1,140 @@
+//! This example illustrates the [`UiScale`] resource from `bevy_ui`.
+
+use bevy::{color::palettes::css::*, prelude::*};
+use core::time::Duration;
+
+const SCALE_TIME: u64 = 400;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .insert_resource(TargetScale {
+            start_scale: 1.0,
+            target_scale: 1.0,
+            target_time: Timer::new(Duration::from_millis(SCALE_TIME), TimerMode::Once),
+        })
+        .add_systems(Startup, setup)
+        .add_systems(
+            Update,
+            (change_scaling, apply_scaling.after(change_scaling)),
+        )
+        .run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    commands.spawn(Camera2d);
+
+    let text_font = TextFont {
+        font_size: 13.,
+        ..default()
+    };
+
+    commands
+        .spawn((
+            Node {
+                width: Val::Percent(50.0),
+                height: Val::Percent(50.0),
+                position_type: PositionType::Absolute,
+                left: Val::Percent(25.),
+                top: Val::Percent(25.),
+                justify_content: JustifyContent::SpaceAround,
+                align_items: AlignItems::Center,
+                ..default()
+            },
+            BackgroundColor(ANTIQUE_WHITE.into()),
+        ))
+        .with_children(|parent| {
+            parent
+                .spawn((
+                    Node {
+                        width: Val::Px(40.0),
+                        height: Val::Px(40.0),
+                        ..default()
+                    },
+                    BackgroundColor(RED.into()),
+                ))
+                .with_children(|parent| {
+                    parent.spawn((Text::new("Size!"), text_font, TextColor::BLACK));
+                });
+            parent.spawn((
+                Node {
+                    width: Val::Percent(15.0),
+                    height: Val::Percent(15.0),
+                    ..default()
+                },
+                BackgroundColor(BLUE.into()),
+            ));
+            parent.spawn((
+                ImageNode::new(asset_server.load("branding/icon.png")),
+                Node {
+                    width: Val::Px(30.0),
+                    height: Val::Px(30.0),
+                    ..default()
+                },
+            ));
+        });
+}
+
+/// System that changes the scale of the ui when pressing up or down on the keyboard.
+fn change_scaling(input: Res<ButtonInput<KeyCode>>, mut ui_scale: ResMut<TargetScale>) {
+    if input.just_pressed(KeyCode::ArrowUp) {
+        let scale = (ui_scale.target_scale * 2.0).min(8.);
+        ui_scale.set_scale(scale);
+        info!("Scaling up! Scale: {}", ui_scale.target_scale);
+    }
+    if input.just_pressed(KeyCode::ArrowDown) {
+        let scale = (ui_scale.target_scale / 2.0).max(1. / 8.);
+        ui_scale.set_scale(scale);
+        info!("Scaling down! Scale: {}", ui_scale.target_scale);
+    }
+}
+
+#[derive(Resource)]
+struct TargetScale {
+    start_scale: f32,
+    target_scale: f32,
+    target_time: Timer,
+}
+
+impl TargetScale {
+    fn set_scale(&mut self, scale: f32) {
+        self.start_scale = self.current_scale();
+        self.target_scale = scale;
+        self.target_time.reset();
+    }
+
+    fn current_scale(&self) -> f32 {
+        let completion = self.target_time.fraction();
+        let t = ease_in_expo(completion);
+        self.start_scale.lerp(self.target_scale, t)
+    }
+
+    fn tick(&mut self, delta: Duration) -> &Self {
+        self.target_time.tick(delta);
+        self
+    }
+
+    fn already_completed(&self) -> bool {
+        self.target_time.finished() && !self.target_time.just_finished()
+    }
+}
+
+fn apply_scaling(
+    time: Res<Time>,
+    mut target_scale: ResMut<TargetScale>,
+    mut ui_scale: ResMut<UiScale>,
+) {
+    if target_scale.tick(time.delta()).already_completed() {
+        return;
+    }
+
+    ui_scale.0 = target_scale.current_scale();
+}
+
+fn ease_in_expo(x: f32) -> f32 {
+    if x == 0. {
+        0.
+    } else {
+        ops::powf(2.0f32, 5. * x - 5.)
+    }
+}

vendor/bevy/examples/ui/ui_texture_atlas.rs

@@ -0,0 +1,81 @@
+//! This example illustrates how to use `TextureAtlases` within ui
+
+use bevy::{color::palettes::css::*, prelude::*, winit::WinitSettings};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins.set(
+            // This sets image filtering to nearest
+            // This is done to prevent textures with low resolution (e.g. pixel art) from being blurred
+            // by linear filtering.
+            ImagePlugin::default_nearest(),
+        ))
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(Update, increment_atlas_index)
+        .run();
+}
+
+fn setup(
+    mut commands: Commands,
+    asset_server: Res<AssetServer>,
+    mut texture_atlases: ResMut<Assets<TextureAtlasLayout>>,
+) {
+    // Camera
+    commands.spawn(Camera2d);
+
+    let text_font = TextFont::default();
+
+    let texture_handle = asset_server.load("textures/rpg/chars/gabe/gabe-idle-run.png");
+    let texture_atlas = TextureAtlasLayout::from_grid(UVec2::splat(24), 7, 1, None, None);
+    let texture_atlas_handle = texture_atlases.add(texture_atlas);
+
+    // root node
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            flex_direction: FlexDirection::Column,
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            row_gap: Val::Px(text_font.font_size * 2.),
+            ..default()
+        })
+        .with_children(|parent| {
+            parent.spawn((
+                ImageNode::from_atlas_image(
+                    texture_handle,
+                    TextureAtlas::from(texture_atlas_handle),
+                ),
+                Node {
+                    width: Val::Px(256.),
+                    height: Val::Px(256.),
+                    ..default()
+                },
+                BackgroundColor(ANTIQUE_WHITE.into()),
+                Outline::new(Val::Px(8.0), Val::ZERO, CRIMSON.into()),
+            ));
+            parent
+                .spawn((Text::new("press "), text_font.clone()))
+                .with_child((
+                    TextSpan::new("space"),
+                    TextColor(YELLOW.into()),
+                    text_font.clone(),
+                ))
+                .with_child((TextSpan::new(" to advance frames"), text_font));
+        });
+}
+
+fn increment_atlas_index(
+    mut image_nodes: Query<&mut ImageNode>,
+    keyboard: Res<ButtonInput<KeyCode>>,
+) {
+    if keyboard.just_pressed(KeyCode::Space) {
+        for mut image_node in &mut image_nodes {
+            if let Some(atlas) = &mut image_node.texture_atlas {
+                atlas.index = (atlas.index + 1) % 6;
+            }
+        }
+    }
+}

vendor/bevy/examples/ui/ui_texture_atlas_slice.rs

@@ -0,0 +1,117 @@
+//! This example illustrates how to create buttons with their texture atlases sliced
+//! and kept in proportion instead of being stretched by the button dimensions
+
+use bevy::{
+    color::palettes::css::{GOLD, ORANGE},
+    prelude::*,
+    ui::widget::NodeImageMode,
+    winit::WinitSettings,
+};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(Update, button_system)
+        .run();
+}
+
+fn button_system(
+    mut interaction_query: Query<
+        (&Interaction, &Children, &mut ImageNode),
+        (Changed<Interaction>, With<Button>),
+    >,
+    mut text_query: Query<&mut Text>,
+) {
+    for (interaction, children, mut image) in &mut interaction_query {
+        let mut text = text_query.get_mut(children[0]).unwrap();
+        match *interaction {
+            Interaction::Pressed => {
+                **text = "Press".to_string();
+                if let Some(atlas) = &mut image.texture_atlas {
+                    atlas.index = (atlas.index + 1) % 30;
+                }
+                image.color = GOLD.into();
+            }
+            Interaction::Hovered => {
+                **text = "Hover".to_string();
+                image.color = ORANGE.into();
+            }
+            Interaction::None => {
+                **text = "Button".to_string();
+                image.color = Color::WHITE;
+            }
+        }
+    }
+}
+
+fn setup(
+    mut commands: Commands,
+    asset_server: Res<AssetServer>,
+    mut texture_atlases: ResMut<Assets<TextureAtlasLayout>>,
+) {
+    let texture_handle = asset_server.load("textures/fantasy_ui_borders/border_sheet.png");
+    let atlas_layout =
+        TextureAtlasLayout::from_grid(UVec2::new(50, 50), 6, 6, Some(UVec2::splat(2)), None);
+    let atlas_layout_handle = texture_atlases.add(atlas_layout);
+
+    let slicer = TextureSlicer {
+        border: BorderRect::all(24.0),
+        center_scale_mode: SliceScaleMode::Stretch,
+        sides_scale_mode: SliceScaleMode::Stretch,
+        max_corner_scale: 1.0,
+    };
+    // ui camera
+    commands.spawn(Camera2d);
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
+        .with_children(|parent| {
+            for (idx, [w, h]) in [
+                (0, [150.0, 150.0]),
+                (7, [300.0, 150.0]),
+                (13, [150.0, 300.0]),
+            ] {
+                parent
+                    .spawn((
+                        Button,
+                        ImageNode::from_atlas_image(
+                            texture_handle.clone(),
+                            TextureAtlas {
+                                index: idx,
+                                layout: atlas_layout_handle.clone(),
+                            },
+                        )
+                        .with_mode(NodeImageMode::Sliced(slicer.clone())),
+                        Node {
+                            width: Val::Px(w),
+                            height: Val::Px(h),
+                            // horizontally center child text
+                            justify_content: JustifyContent::Center,
+                            // vertically center child text
+                            align_items: AlignItems::Center,
+                            margin: UiRect::all(Val::Px(20.0)),
+                            ..default()
+                        },
+                    ))
+                    .with_children(|parent| {
+                        parent.spawn((
+                            Text::new("Button"),
+                            TextFont {
+                                font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                                font_size: 33.0,
+                                ..default()
+                            },
+                            TextColor(Color::srgb(0.9, 0.9, 0.9)),
+                        ));
+                    });
+            }
+        });
+}

vendor/bevy/examples/ui/ui_texture_slice.rs

@@ -0,0 +1,98 @@
+//! This example illustrates how to create buttons with their textures sliced
+//! and kept in proportion instead of being stretched by the button dimensions
+
+use bevy::{
+    color::palettes::css::{GOLD, ORANGE},
+    prelude::*,
+    ui::widget::NodeImageMode,
+    winit::WinitSettings,
+};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .add_systems(Update, button_system)
+        .run();
+}
+
+fn button_system(
+    mut interaction_query: Query<
+        (&Interaction, &Children, &mut ImageNode),
+        (Changed<Interaction>, With<Button>),
+    >,
+    mut text_query: Query<&mut Text>,
+) {
+    for (interaction, children, mut image) in &mut interaction_query {
+        let mut text = text_query.get_mut(children[0]).unwrap();
+        match *interaction {
+            Interaction::Pressed => {
+                **text = "Press".to_string();
+                image.color = GOLD.into();
+            }
+            Interaction::Hovered => {
+                **text = "Hover".to_string();
+                image.color = ORANGE.into();
+            }
+            Interaction::None => {
+                **text = "Button".to_string();
+                image.color = Color::WHITE;
+            }
+        }
+    }
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let image = asset_server.load("textures/fantasy_ui_borders/panel-border-010.png");
+
+    let slicer = TextureSlicer {
+        border: BorderRect::all(22.0),
+        center_scale_mode: SliceScaleMode::Stretch,
+        sides_scale_mode: SliceScaleMode::Stretch,
+        max_corner_scale: 1.0,
+    };
+    // ui camera
+    commands.spawn(Camera2d);
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
+        .with_children(|parent| {
+            for [w, h] in [[150.0, 150.0], [300.0, 150.0], [150.0, 300.0]] {
+                parent
+                    .spawn((
+                        Button,
+                        ImageNode {
+                            image: image.clone(),
+                            image_mode: NodeImageMode::Sliced(slicer.clone()),
+                            ..default()
+                        },
+                        Node {
+                            width: Val::Px(w),
+                            height: Val::Px(h),
+                            // horizontally center child text
+                            justify_content: JustifyContent::Center,
+                            // vertically center child text
+                            align_items: AlignItems::Center,
+                            margin: UiRect::all(Val::Px(20.0)),
+                            ..default()
+                        },
+                    ))
+                    .with_child((
+                        Text::new("Button"),
+                        TextFont {
+                            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+                            font_size: 33.0,
+                            ..default()
+                        },
+                        TextColor(Color::srgb(0.9, 0.9, 0.9)),
+                    ));
+            }
+        });
+}

vendor/bevy/examples/ui/ui_texture_slice_flip_and_tile.rs

@@ -0,0 +1,74 @@
+//! This example illustrates how to how to flip and tile images with 9-slicing in the UI.
+
+use bevy::{
+    image::{ImageLoaderSettings, ImageSampler},
+    prelude::*,
+    ui::widget::NodeImageMode,
+    winit::WinitSettings,
+};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .insert_resource(UiScale(2.))
+        // Only run the app when there is user input. This will significantly reduce CPU/GPU use for UI-only apps.
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, setup)
+        .run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    let image = asset_server.load_with_settings(
+        "textures/fantasy_ui_borders/numbered_slices.png",
+        |settings: &mut ImageLoaderSettings| {
+            // Need to use nearest filtering to avoid bleeding between the slices with tiling
+            settings.sampler = ImageSampler::nearest();
+        },
+    );
+
+    let slicer = TextureSlicer {
+        // `numbered_slices.png` is 48 pixels square. `BorderRect::square(16.)` insets the slicing line from each edge by 16 pixels, resulting in nine slices that are each 16 pixels square.
+        border: BorderRect::all(16.),
+        // With `SliceScaleMode::Tile` the side and center slices are tiled to fill the side and center sections of the target.
+        // And with a `stretch_value` of `1.` the tiles will have the same size as the corresponding slices in the source image.
+        center_scale_mode: SliceScaleMode::Tile { stretch_value: 1. },
+        sides_scale_mode: SliceScaleMode::Tile { stretch_value: 1. },
+        ..default()
+    };
+
+    // ui camera
+    commands.spawn(Camera2d);
+
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            justify_content: JustifyContent::Center,
+            align_content: AlignContent::Center,
+            flex_wrap: FlexWrap::Wrap,
+            column_gap: Val::Px(10.),
+            row_gap: Val::Px(10.),
+            ..default()
+        })
+        .with_children(|parent| {
+            for [columns, rows] in [[3., 3.], [4., 4.], [5., 4.], [4., 5.], [5., 5.]] {
+                for (flip_x, flip_y) in [(false, false), (false, true), (true, false), (true, true)]
+                {
+                    parent.spawn((
+                        ImageNode {
+                            image: image.clone(),
+                            flip_x,
+                            flip_y,
+                            image_mode: NodeImageMode::Sliced(slicer.clone()),
+                            ..default()
+                        },
+                        Node {
+                            width: Val::Px(16. * columns),
+                            height: Val::Px(16. * rows),
+                            ..default()
+                        },
+                    ));
+                }
+            }
+        });
+}

vendor/bevy/examples/ui/viewport_debug.rs

@@ -0,0 +1,222 @@
+//! A simple example for debugging viewport coordinates
+//!
+//! This example creates two UI node trees, one using viewport coordinates and one using pixel coordinates,
+//! and then switches between them once per second using the `Display` style property.
+//! If there are no problems both layouts should be identical, except for the color of the margin changing which is used to signal that the displayed UI node tree has changed
+//! (red for viewport, yellow for pixel).
+use bevy::{color::palettes::css::*, prelude::*};
+
+const PALETTE: [Srgba; 10] = [
+    RED, YELLOW, WHITE, BEIGE, AQUA, CRIMSON, NAVY, AZURE, LIME, BLACK,
+];
+
+#[derive(Component, Default, PartialEq)]
+enum Coords {
+    #[default]
+    Viewport,
+    Pixel,
+}
+
+fn main() {
+    App::new()
+        .insert_resource(UiScale(2.0))
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                title: "Viewport Coordinates Debug".to_string(),
+                // This example relies on these specific viewport dimensions, so let's explicitly
+                // define them.
+                resolution: [1280., 720.].into(),
+                resizable: false,
+                ..Default::default()
+            }),
+            ..Default::default()
+        }))
+        .add_systems(Startup, setup)
+        .add_systems(Update, update)
+        .run();
+}
+
+fn update(
+    mut timer: Local<f32>,
+    mut visible_tree: Local<Coords>,
+    time: Res<Time>,
+    mut coords_nodes: Query<(&Coords, &mut Node)>,
+) {
+    *timer -= time.delta_secs();
+    if *timer <= 0. {
+        *timer = 1.;
+        *visible_tree = match *visible_tree {
+            Coords::Viewport => Coords::Pixel,
+            Coords::Pixel => Coords::Viewport,
+        };
+        for (coords, mut node) in coords_nodes.iter_mut() {
+            node.display = if *coords == *visible_tree {
+                Display::Flex
+            } else {
+                Display::None
+            };
+        }
+    }
+}
+
+fn setup(mut commands: Commands) {
+    commands.spawn(Camera2d);
+    spawn_with_viewport_coords(&mut commands);
+    spawn_with_pixel_coords(&mut commands);
+}
+
+fn spawn_with_viewport_coords(commands: &mut Commands) {
+    commands
+        .spawn((
+            Node {
+                width: Val::Vw(100.),
+                height: Val::Vh(100.),
+                border: UiRect::axes(Val::Vw(5.), Val::Vh(5.)),
+                flex_wrap: FlexWrap::Wrap,
+                ..default()
+            },
+            BorderColor(PALETTE[0].into()),
+            Coords::Viewport,
+        ))
+        .with_children(|builder| {
+            builder.spawn((
+                Node {
+                    width: Val::Vw(30.),
+                    height: Val::Vh(30.),
+                    border: UiRect::all(Val::VMin(5.)),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[2].into()),
+                BorderColor(PALETTE[9].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Vw(60.),
+                    height: Val::Vh(30.),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[3].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Vw(45.),
+                    height: Val::Vh(30.),
+                    border: UiRect::left(Val::VMax(45. / 2.)),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[4].into()),
+                BorderColor(PALETTE[8].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Vw(45.),
+                    height: Val::Vh(30.),
+                    border: UiRect::right(Val::VMax(45. / 2.)),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[5].into()),
+                BorderColor(PALETTE[8].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Vw(60.),
+                    height: Val::Vh(30.),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[6].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Vw(30.),
+                    height: Val::Vh(30.),
+                    border: UiRect::all(Val::VMin(5.)),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[7].into()),
+                BorderColor(PALETTE[9].into()),
+            ));
+        });
+}
+
+fn spawn_with_pixel_coords(commands: &mut Commands) {
+    commands
+        .spawn((
+            Node {
+                width: Val::Px(640.),
+                height: Val::Px(360.),
+                border: UiRect::axes(Val::Px(32.), Val::Px(18.)),
+                flex_wrap: FlexWrap::Wrap,
+                ..default()
+            },
+            BorderColor(PALETTE[1].into()),
+            Coords::Pixel,
+        ))
+        .with_children(|builder| {
+            builder.spawn((
+                Node {
+                    width: Val::Px(192.),
+                    height: Val::Px(108.),
+                    border: UiRect::axes(Val::Px(18.), Val::Px(18.)),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[2].into()),
+                BorderColor(PALETTE[9].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Px(384.),
+                    height: Val::Px(108.),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[3].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Px(288.),
+                    height: Val::Px(108.),
+                    border: UiRect::left(Val::Px(144.)),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[4].into()),
+                BorderColor(PALETTE[8].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Px(288.),
+                    height: Val::Px(108.),
+                    border: UiRect::right(Val::Px(144.)),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[5].into()),
+                BorderColor(PALETTE[8].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Px(384.),
+                    height: Val::Px(108.),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[6].into()),
+            ));
+
+            builder.spawn((
+                Node {
+                    width: Val::Px(192.),
+                    height: Val::Px(108.),
+                    border: UiRect::axes(Val::Px(18.), Val::Px(18.)),
+                    ..default()
+                },
+                BackgroundColor(PALETTE[7].into()),
+                BorderColor(PALETTE[9].into()),
+            ));
+        });
+}

vendor/bevy/examples/ui/window_fallthrough.rs

@@ -0,0 +1,54 @@
+//! This example illustrates how have a mouse's clicks/wheel/movement etc fall through the spawned transparent window to a window below.
+//! If you build this, and hit 'P' it should toggle on/off the mouse's passthrough.
+//! Note: this example will not work on following platforms: iOS / Android / Web / X11. Window fall through is not supported there.
+
+use bevy::prelude::*;
+
+fn main() {
+    App::new()
+        .insert_resource(ClearColor(Color::NONE)) // Use a transparent window, to make effects obvious.
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                // Set the window's parameters, note we're setting the window to always be on top.
+                transparent: true,
+                decorations: true,
+                window_level: bevy::window::WindowLevel::AlwaysOnTop,
+                ..default()
+            }),
+            ..default()
+        }))
+        .add_systems(Startup, setup)
+        .add_systems(Update, toggle_mouse_passthrough) // This allows us to hit 'P' to toggle on/off the mouse's passthrough
+        .run();
+}
+
+fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
+    // UI camera
+    commands.spawn(Camera2d);
+    // Text with one span
+    commands.spawn((
+        // Accepts a `String` or any type that converts into a `String`, such as `&str`
+        Text::new("Hit 'P' then scroll/click around!"),
+        TextFont {
+            font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+            font_size: 83.0, // Nice and big so you can see it!
+            ..default()
+        },
+        // Set the style of the TextBundle itself.
+        Node {
+            position_type: PositionType::Absolute,
+            bottom: Val::Px(5.),
+            right: Val::Px(10.),
+            ..default()
+        },
+    ));
+}
+// A simple system to handle some keyboard input and toggle on/off the hit test.
+fn toggle_mouse_passthrough(
+    keyboard_input: Res<ButtonInput<KeyCode>>,
+    mut window: Single<&mut Window>,
+) {
+    if keyboard_input.just_pressed(KeyCode::KeyP) {
+        window.cursor_options.hit_test = !window.cursor_options.hit_test;
+    }
+}

vendor/bevy/examples/ui/z_index.rs

@@ -0,0 +1,120 @@
+//! Demonstrates how to use the z-index component on UI nodes to control their relative depth
+//!
+//! It uses colored boxes with different z-index values to demonstrate how it can affect the order of
+//! depth of nodes compared to their siblings, but also compared to the entire UI.
+
+use bevy::{
+    color::palettes::basic::{BLUE, GRAY, LIME, PURPLE, RED, YELLOW},
+    prelude::*,
+};
+
+fn main() {
+    App::new()
+        .insert_resource(ClearColor(Color::BLACK))
+        .add_plugins(DefaultPlugins)
+        .add_systems(Startup, setup)
+        .run();
+}
+
+fn setup(mut commands: Commands) {
+    commands.spawn(Camera2d);
+
+    // spawn the container with default z-index.
+    // the default z-index value is `ZIndex(0)`.
+    // because this is a root UI node, using local or global values will do the same thing.
+    commands
+        .spawn(Node {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            ..default()
+        })
+        .with_children(|parent| {
+            parent
+                .spawn((
+                    Node {
+                        width: Val::Px(180.0),
+                        height: Val::Px(100.0),
+                        ..default()
+                    },
+                    BackgroundColor(GRAY.into()),
+                ))
+                .with_children(|parent| {
+                    // spawn a node with default z-index.
+                    parent.spawn((
+                        Node {
+                            position_type: PositionType::Absolute,
+                            left: Val::Px(10.0),
+                            bottom: Val::Px(40.0),
+                            width: Val::Px(100.0),
+                            height: Val::Px(50.0),
+                            ..default()
+                        },
+                        BackgroundColor(RED.into()),
+                    ));
+
+                    // spawn a node with a positive local z-index of 2.
+                    // it will show above other nodes in the gray container.
+                    parent.spawn((
+                        Node {
+                            position_type: PositionType::Absolute,
+                            left: Val::Px(45.0),
+                            bottom: Val::Px(30.0),
+                            width: Val::Px(100.),
+                            height: Val::Px(50.),
+                            ..default()
+                        },
+                        ZIndex(2),
+                        BackgroundColor(BLUE.into()),
+                    ));
+
+                    // spawn a node with a negative local z-index.
+                    // it will show under other nodes in the gray container.
+                    parent.spawn((
+                        Node {
+                            position_type: PositionType::Absolute,
+                            left: Val::Px(70.0),
+                            bottom: Val::Px(20.0),
+                            width: Val::Px(100.),
+                            height: Val::Px(75.),
+                            ..default()
+                        },
+                        ZIndex(-1),
+                        BackgroundColor(LIME.into()),
+                    ));
+
+                    // spawn a node with a positive global z-index of 1.
+                    // it will show above all other nodes, because it's the highest global z-index in this example.
+                    // by default, boxes all share the global z-index of 0 that the gray container is added to.
+                    parent.spawn((
+                        Node {
+                            position_type: PositionType::Absolute,
+                            left: Val::Px(15.0),
+                            bottom: Val::Px(10.0),
+                            width: Val::Px(100.),
+                            height: Val::Px(60.),
+                            ..default()
+                        },
+                        BackgroundColor(PURPLE.into()),
+                        GlobalZIndex(1),
+                    ));
+
+                    // spawn a node with a negative global z-index of -1.
+                    // this will show under all other nodes including its parent, because it's the lowest global z-index
+                    // in this example.
+                    parent.spawn((
+                        Node {
+                            position_type: PositionType::Absolute,
+                            left: Val::Px(-15.0),
+                            bottom: Val::Px(-15.0),
+                            width: Val::Px(100.),
+                            height: Val::Px(125.),
+                            ..default()
+                        },
+                        BackgroundColor(YELLOW.into()),
+                        GlobalZIndex(-1),
+                    ));
+                });
+        });
+}