babylonjs-gui 5.0.0-beta.8 → 5.0.0-rc.1

package/babylon.gui.module.d.ts

@@ -401,6 +401,7 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
         private _resizeObserver;
         private _preKeyboardObserver;
         private _pointerMoveObserver;
+        private _sceneRenderObserver;
         private _pointerObserver;
         private _canvasPointerOutObserver;
         private _canvasBlurObserver;
@@ -573,6 +574,13 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
          */
         get clipboardData(): string;
         set clipboardData(value: string);
+        /**
+         * If set to true, every scene render will trigger a pointer event for the GUI
+         * if it is linked to a mesh or has controls linked to a mesh. This will allow
+         * you to catch the pointer moving around the GUI due to camera or mesh movements,
+         * but it has a performance cost.
+         */
+        checkPointerEveryFrame: boolean;
         /**
          * Creates a new AdvancedDynamicTexture
          * @param name defines the name of the texture
@@ -675,6 +683,7 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
         }, control: Control): void;
         /** @hidden */
         _cleanControlAfterRemoval(control: Control): void;
+        private _translateToPicking;
         /** Attach to all scene events required to support pointer events */
         attach(): void;
         /** @hidden */
@@ -703,6 +712,7 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
          */
         moveFocusToControl(control: IFocusableControl): void;
         private _manageFocus;
+        private _attachPickingToSceneRender;
         private _attachToOnPointerOut;
         private _attachToOnBlur;
         /**
@@ -784,6 +794,7 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
          */
         scaleTo(width: number, height: number): void;
     }
+    export { IFocusableControl };
 }
 declare module "babylonjs-gui/2D/controls/control" {
     import { Nullable } from "babylonjs/types";
@@ -1400,7 +1411,7 @@ declare module "babylonjs-gui/2D/controls/control" {
         /** @hidden */
         _flagDescendantsAsMatrixDirty(): void;
         /** @hidden */
-        _intersectsRect(rect: Measure): boolean;
+        _intersectsRect(rect: Measure, context?: ICanvasRenderingContext): boolean;
         /** @hidden */
         protected _computeAdditionnalOffsetX(): number;
         /** @hidden */
@@ -1451,17 +1462,17 @@ declare module "babylonjs-gui/2D/controls/control" {
          */
         contains(x: number, y: number): boolean;
         /** @hidden */
-        _processPicking(x: number, y: number, pi: PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
+        _processPicking(x: number, y: number, pi: Nullable<PointerInfoBase>, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
         /** @hidden */
-        _onPointerMove(target: Control, coordinates: Vector2, pointerId: number, pi: PointerInfoBase): void;
+        _onPointerMove(target: Control, coordinates: Vector2, pointerId: number, pi: Nullable<PointerInfoBase>): void;
         /** @hidden */
-        _onPointerEnter(target: Control, pi: PointerInfoBase): boolean;
+        _onPointerEnter(target: Control, pi: Nullable<PointerInfoBase>): boolean;
         /** @hidden */
         _onPointerOut(target: Control, pi: Nullable<PointerInfoBase>, force?: boolean): void;
         /** @hidden */
-        _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
+        _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: Nullable<PointerInfoBase>): boolean;
         /** @hidden */
-        _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi?: PointerInfoBase): void;
+        _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi?: Nullable<PointerInfoBase>): void;
         /** @hidden */
         _forcePointerUp(pointerId?: Nullable<number>): void;
         /** @hidden */
@@ -1469,7 +1480,7 @@ declare module "babylonjs-gui/2D/controls/control" {
         /** @hidden */
         _onCanvasBlur(): void;
         /** @hidden */
-        _processObservables(type: number, x: number, y: number, pi: PointerInfoBase, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
+        _processObservables(type: number, x: number, y: number, pi: Nullable<PointerInfoBase>, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
         private _prepareFont;
         /**
          * Serializes the current control
@@ -1648,7 +1659,7 @@ declare module "babylonjs-gui/2D/controls/container" {
         _draw(context: ICanvasRenderingContext, invalidatedRectangle?: Measure): void;
         getDescendantsToRef(results: Control[], directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): void;
         /** @hidden */
-        _processPicking(x: number, y: number, pi: PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
+        _processPicking(x: number, y: number, pi: Nullable<PointerInfoBase>, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
         /** @hidden */
         protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void;
         /**
@@ -1853,6 +1864,7 @@ declare module "babylonjs-gui/2D/controls/textBlock" {
         protected _applyStates(context: ICanvasRenderingContext): void;
         protected _breakLines(refWidth: number, refHeight: number, context: ICanvasRenderingContext): object[];
         protected _parseLine(line: string | undefined, context: ICanvasRenderingContext): object;
+        private _getCharsToRemove;
         protected _parseLineEllipsis(line: string | undefined, width: number, context: ICanvasRenderingContext): object;
         protected _parseLineWordWrap(line: string | undefined, width: number, context: ICanvasRenderingContext): object[];
         protected _parseLineWordWrapEllipsis(line: string | undefined, width: number, height: number, context: ICanvasRenderingContext): object[];
@@ -2416,6 +2428,8 @@ declare module "babylonjs-gui/2D/controls/inputText" {
         private _autoStretchWidth;
         private _maxWidth;
         private _isFocused;
+        /** the type of device that most recently focused the input: "mouse", "touch" or "pen" */
+        private _focusedBy;
         private _blinkTimeout;
         private _blinkIsEven;
         private _cursorOffset;
@@ -4376,7 +4390,8 @@ declare module "babylonjs-gui/3D/controls/touchButton3D" {
     export class TouchButton3D extends Button3D {
         private _collisionMesh;
         private _collidableFrontDirection;
-        protected _isNearPressed: boolean;
+        private _isNearPressed;
+        private _interactionSurfaceHeight;
         private _isToggleButton;
         private _toggleState;
         private _toggleButtonCallback;
@@ -4390,6 +4405,10 @@ declare module "babylonjs-gui/3D/controls/touchButton3D" {
          * @param collisionMesh mesh to track collisions with
          */
         constructor(name?: string, collisionMesh?: Mesh);
+        /**
+         * Whether the current interaction is caused by near interaction or not
+         */
+        get isActiveNearInteraction(): boolean;
         /**
          * Sets the front-facing direction of the button. Pass in Vector3.Zero to allow interactions from any direction
          * @param frontDir the forward direction of the button
@@ -4418,6 +4437,12 @@ declare module "babylonjs-gui/3D/controls/touchButton3D" {
         get isToggled(): boolean;
         protected _onToggle(newState: boolean): void;
         private _isInteractionInFrontOfButton;
+        /**
+         * Get the height of the touchPoint from the collidable part of the button
+         * @param touchPoint the point to compare to the button, in absolute position
+         * @returns the depth of the touch point into the front of the button
+         */
+        getPressDepth(touchPoint: Vector3): number;
         protected _getInteractionHeight(interactionPos: Vector3, basePos: Vector3): number;
         /** @hidden */
         _generatePointerEventType(providedType: number, nearMeshPosition: Vector3, activeInteractionCount: number): number;
@@ -5124,6 +5149,7 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
     import { FluentButtonMaterial } from "babylonjs-gui/3D/materials/fluentButton/fluentButtonMaterial";
     import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
     import { TouchButton3D } from "babylonjs-gui/3D/controls/touchButton3D";
+    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
     /**
      * Class used to create a holographic button in 3D
      * @since 5.0.0
@@ -5165,6 +5191,10 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
          */
         set renderingGroupId(id: number);
         get renderingGroupId(): number;
+        /**
+         * Gets the mesh used to render this control
+         */
+        get mesh(): Nullable<AbstractMesh>;
         /**
          * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
          */
@@ -5220,6 +5250,81 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
         dispose(): void;
     }
 }
+declare module "babylonjs-gui/3D/behaviors/defaultBehavior" {
+    import { Behavior } from "babylonjs/Behaviors/behavior";
+    import { FollowBehavior } from "babylonjs/Behaviors/Meshes/followBehavior";
+    import { SixDofDragBehavior } from "babylonjs/Behaviors/Meshes/sixDofDragBehavior";
+    import { Mesh } from "babylonjs/Meshes/mesh";
+    import { Nullable } from "babylonjs/types";
+    import { SurfaceMagnetismBehavior } from "babylonjs/Behaviors/Meshes/surfaceMagnetismBehavior";
+    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+    /**
+     * Default behavior for 3D UI elements.
+     * Handles a FollowBehavior, SixDofBehavior and SurfaceMagnetismBehavior
+     * @since 5.0.0
+     */
+    export class DefaultBehavior implements Behavior<Mesh> {
+        private _scene;
+        private _followBehavior;
+        private _sixDofDragBehavior;
+        private _surfaceMagnetismBehavior;
+        private _onBeforeRenderObserver;
+        private _onDragObserver;
+        /**
+         * Instantiates the default behavior
+         */
+        constructor();
+        /**
+         * Attached node of this behavior
+         */
+        attachedNode: Nullable<Mesh>;
+        /**
+         *  The name of the behavior
+         */
+        get name(): string;
+        /**
+         *  The follow behavior
+         */
+        get followBehavior(): FollowBehavior;
+        /**
+         *  The six DoF drag behavior
+         */
+        get sixDofDragBehavior(): SixDofDragBehavior;
+        /**
+         * The surface magnetism behavior
+         */
+        get surfaceMagnetismBehavior(): SurfaceMagnetismBehavior;
+        /**
+         * Enables the follow behavior
+         */
+        followBehaviorEnabled: boolean;
+        /**
+         * Enables the six DoF drag behavior
+         */
+        sixDofDragBehaviorEnabled: boolean;
+        /**
+         * Enables the surface magnetism behavior
+         */
+        surfaceMagnetismBehaviorEnabled: boolean;
+        /**
+         *  Initializes the behavior
+         */
+        init(): void;
+        /**
+         * Attaches the default behavior
+         * @param ownerMesh The top level mesh
+         * @param draggablesMeshes Descendant meshes that can be used for dragging the owner mesh
+         * @param sceneUnderstandingMeshes Meshes from the scene understanding that will be used for surface magnetism
+         */
+        attach(ownerMesh: Mesh, draggablesMeshes?: Mesh[], sceneUnderstandingMeshes?: AbstractMesh[]): void;
+        /**
+         *  Detaches the behavior from the mesh
+         */
+        detach(): void;
+        private _addObservables;
+        private _removeObservables;
+    }
+}
 declare module "babylonjs-gui/3D/materials/handle/shaders/handle.vertex" {
     /** @hidden */
     export var handleVertexShader: {
@@ -5439,6 +5544,7 @@ declare module "babylonjs-gui/3D/gizmos/slateGizmo" {
          * Value we use to offset handles from mesh
          */
         private _margin;
+        private _handleSize;
         private _attachedSlate;
         private _existingSlateScale;
         /**
@@ -5449,10 +5555,6 @@ declare module "babylonjs-gui/3D/gizmos/slateGizmo" {
          * The distance away from the object which the draggable meshes should appear world sized when fixedScreenSize is set to true (default: 10)
          */
         fixedScreenSizeDistanceFactor: number;
-        /**
-         * Size of the handles (meters in XR)
-         */
-        handleSize: number;
         /**
          * The slate attached to this gizmo
          */
@@ -5471,85 +5573,11 @@ declare module "babylonjs-gui/3D/gizmos/slateGizmo" {
          */
         updateBoundingBox(): void;
         private _updateHandlesPosition;
+        private _updateHandlesScaling;
         protected _update(): void;
         dispose(): void;
     }
 }
-declare module "babylonjs-gui/3D/behaviors/defaultBehavior" {
-    import { Behavior } from "babylonjs/Behaviors/behavior";
-    import { FollowBehavior } from "babylonjs/Behaviors/Meshes/followBehavior";
-    import { SixDofDragBehavior } from "babylonjs/Behaviors/Meshes/sixDofDragBehavior";
-    import { Mesh } from "babylonjs/Meshes/mesh";
-    import { Nullable } from "babylonjs/types";
-    import { SurfaceMagnetismBehavior } from "babylonjs/Behaviors/Meshes/surfaceMagnetismBehavior";
-    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-    /**
-     * Default behavior for 3D UI elements.
-     * Handles a FollowBehavior, SixDofBehavior and SurfaceMagnetismBehavior
-     * @since 5.0.0
-     */
-    export class DefaultBehavior implements Behavior<Mesh> {
-        private _scene;
-        private _followBehavior;
-        private _sixDofDragBehavior;
-        private _surfaceMagnetismBehavior;
-        private _onBeforeRenderObserver;
-        private _onDragObserver;
-        /**
-         * Instantiates the default behavior
-         */
-        constructor();
-        /**
-         * Attached node of this behavior
-         */
-        attachedNode: Nullable<Mesh>;
-        /**
-         *  The name of the behavior
-         */
-        get name(): string;
-        /**
-         *  The follow behavior
-         */
-        get followBehavior(): FollowBehavior;
-        /**
-         *  The six DoF drag behavior
-         */
-        get sixDofDragBehavior(): SixDofDragBehavior;
-        /**
-         * The surface magnetism behavior
-         */
-        get surfaceMagnetismBehavior(): SurfaceMagnetismBehavior;
-        /**
-         * Enables the follow behavior
-         */
-        followBehaviorEnabled: boolean;
-        /**
-         * Enables the six DoF drag behavior
-         */
-        sixDofDragBehaviorEnabled: boolean;
-        /**
-         * Enables the surface magnetism behavior
-         */
-        surfaceMagnetismBehaviorEnabled: boolean;
-        /**
-         *  Initializes the behavior
-         */
-        init(): void;
-        /**
-         * Attaches the default behavior
-         * @param ownerMesh The top level mesh
-         * @param draggablesMeshes Descendant meshes that can be used for dragging the owner mesh
-         * @param sceneUnderstandingMeshes Meshes from the scene understanding that will be used for surface magnetism
-         */
-        attach(ownerMesh: Mesh, draggablesMeshes?: Mesh[], sceneUnderstandingMeshes?: AbstractMesh[]): void;
-        /**
-         *  Detaches the behavior from the mesh
-         */
-        detach(): void;
-        private _addObservables;
-        private _removeObservables;
-    }
-}
 declare module "babylonjs-gui/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment" {
     /** @hidden */
     export var fluentBackplatePixelShader: {
@@ -5721,16 +5749,16 @@ declare module "babylonjs-gui/3D/materials/fluentBackplate/fluentBackplateMateri
     }
 }
 declare module "babylonjs-gui/3D/controls/holographicSlate" {
-    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-    import { Scene } from "babylonjs/scene";
-    import { TransformNode } from "babylonjs/Meshes/transformNode";
-    import { Mesh } from "babylonjs/Meshes/mesh";
-    import { TouchHolographicButton } from "babylonjs-gui/3D/controls/touchHolographicButton";
-    import { Vector3 } from "babylonjs/Maths/math.vector";
     import { ContentDisplay3D } from "babylonjs-gui/3D/controls/contentDisplay3D";
+    import { TouchHolographicButton } from "babylonjs-gui/3D/controls/touchHolographicButton";
     import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
-    import { SlateGizmo } from "babylonjs-gui/3D/gizmos/slateGizmo";
     import { DefaultBehavior } from "babylonjs-gui/3D/behaviors/defaultBehavior";
+    import { SlateGizmo } from "babylonjs-gui/3D/gizmos/slateGizmo";
+    import { Vector2, Vector3 } from "babylonjs/Maths/math.vector";
+    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+    import { TransformNode } from "babylonjs/Meshes/transformNode";
+    import { Mesh } from "babylonjs/Meshes/mesh";
+    import { Scene } from "babylonjs/scene";
     /**
      * Class used to create a holographic slate
      * @since 5.0.0
@@ -5748,35 +5776,24 @@ declare module "babylonjs-gui/3D/controls/holographicSlate" {
          * File name for the close icon.
          */
         static FOLLOW_ICON_FILENAME: string;
+        private static DEFAULT_TEXT_RESOLUTION_Y;
         /**
-         * Dimensions of the slate
-         */
-        dimensions: Vector3;
-        /**
-         * Minimum dimensions of the slate
-         */
-        minDimensions: Vector3;
-        /**
-         * Default dimensions of the slate
-         */
-        readonly defaultDimensions: Vector3;
-        /**
-         * Dimensions of the backplate
+         * Margin between title bar and contentplate
          */
-        backplateDimensions: Vector3;
-        /**
-         * Margin between backplate and contentplate
-         */
-        backPlateMargin: number;
+        titleBarMargin: number;
         /**
          * Origin in local coordinates (top left corner)
          */
         origin: Vector3;
-        private _backPlateMaterial;
+        private _dimensions;
+        private _titleBarHeight;
+        private _titleBarMaterial;
+        private _backMaterial;
         private _contentMaterial;
         private _pickedPointObserver;
         private _positionChangedObserver;
-        private _imageUrl;
+        private _titleText;
+        private _titleTextComponent;
         private _contentViewport;
         private _contentDragBehavior;
         private _defaultBehavior;
@@ -5786,21 +5803,42 @@ declare module "babylonjs-gui/3D/controls/holographicSlate" {
         get defaultBehavior(): DefaultBehavior;
         /** @hidden */
         _gizmo: SlateGizmo;
-        protected _backPlate: Mesh;
+        protected _titleBar: Mesh;
+        protected _titleBarTitle: Mesh;
         protected _contentPlate: Mesh;
-        protected _followButton: TouchHolographicButton;
+        protected _backPlate: Mesh;
+        /** @hidden */
+        _followButton: TouchHolographicButton;
         protected _closeButton: TouchHolographicButton;
         protected _contentScaleRatio: number;
         /**
-         * Rendering ground id of all the mesh in the button
+         * 2D dimensions of the slate
+         */
+        get dimensions(): Vector2;
+        set dimensions(value: Vector2);
+        /**
+         * Minimum dimensions of the slate
+         */
+        minDimensions: Vector2;
+        /**
+         * Default dimensions of the slate
+         */
+        readonly defaultDimensions: Vector2;
+        /**
+         * Height of the title bar component
+         */
+        get titleBarHeight(): number;
+        set titleBarHeight(value: number);
+        /**
+         * Rendering ground id of all the meshes
          */
         set renderingGroupId(id: number);
         get renderingGroupId(): number;
         /**
-         * Gets or sets the image url for the button
+         * The title text displayed at the top of the slate
          */
-        get imageUrl(): string;
-        set imageUrl(value: string);
+        set title(title: string);
+        get title(): string;
         /**
          * Creates a new slate
          * @param name defines the control name
@@ -5812,7 +5850,6 @@ declare module "babylonjs-gui/3D/controls/holographicSlate" {
          * @param facadeTexture defines the AdvancedDynamicTexture to use
          */
         protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
-        private _rebuildContent;
         private _addControl;
         protected _getTypeName(): string;
         /**
@@ -5832,8 +5869,9 @@ declare module "babylonjs-gui/3D/controls/holographicSlate" {
         _prepareNode(scene: Scene): void;
         /**
          * Resets the aspect and pose of the slate so it is right in front of the active camera, facing towards it.
+         * @param resetAspect Should the slate's dimensions/aspect ratio be reset as well
          */
-        resetDefaultAspectAndPose(): void;
+        resetDefaultAspectAndPose(resetAspect?: boolean): void;
         /**
          * Releases all associated resources
          */
@@ -6927,6 +6965,7 @@ declare module "babylonjs-gui/3D/controls/slider3D" {
         private _maximum;
         private _value;
         private _step;
+        private _draggedPosition;
         /** Observable raised when the sldier value changes */
         onValueChangedObservable: Observable<number>;
         /**
@@ -7545,6 +7584,7 @@ declare module BABYLON.GUI {
         private _resizeObserver;
         private _preKeyboardObserver;
         private _pointerMoveObserver;
+        private _sceneRenderObserver;
         private _pointerObserver;
         private _canvasPointerOutObserver;
         private _canvasBlurObserver;
@@ -7717,6 +7757,13 @@ declare module BABYLON.GUI {
          */
         get clipboardData(): string;
         set clipboardData(value: string);
+        /**
+         * If set to true, every scene render will trigger a pointer event for the GUI
+         * if it is linked to a mesh or has controls linked to a mesh. This will allow
+         * you to catch the pointer moving around the GUI due to camera or mesh movements,
+         * but it has a performance cost.
+         */
+        checkPointerEveryFrame: boolean;
         /**
          * Creates a new AdvancedDynamicTexture
          * @param name defines the name of the texture
@@ -7819,6 +7866,7 @@ declare module BABYLON.GUI {
         }, control: Control): void;
         /** @hidden */
         _cleanControlAfterRemoval(control: Control): void;
+        private _translateToPicking;
         /** Attach to all scene events required to support pointer events */
         attach(): void;
         /** @hidden */
@@ -7847,6 +7895,7 @@ declare module BABYLON.GUI {
          */
         moveFocusToControl(control: IFocusableControl): void;
         private _manageFocus;
+        private _attachPickingToSceneRender;
         private _attachToOnPointerOut;
         private _attachToOnBlur;
         /**
@@ -8531,7 +8580,7 @@ declare module BABYLON.GUI {
         /** @hidden */
         _flagDescendantsAsMatrixDirty(): void;
         /** @hidden */
-        _intersectsRect(rect: Measure): boolean;
+        _intersectsRect(rect: Measure, context?: BABYLON.ICanvasRenderingContext): boolean;
         /** @hidden */
         protected _computeAdditionnalOffsetX(): number;
         /** @hidden */
@@ -8582,17 +8631,17 @@ declare module BABYLON.GUI {
          */
         contains(x: number, y: number): boolean;
         /** @hidden */
-        _processPicking(x: number, y: number, pi: BABYLON.PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
+        _processPicking(x: number, y: number, pi: BABYLON.Nullable<BABYLON.PointerInfoBase>, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
         /** @hidden */
-        _onPointerMove(target: Control, coordinates: BABYLON.Vector2, pointerId: number, pi: BABYLON.PointerInfoBase): void;
+        _onPointerMove(target: Control, coordinates: BABYLON.Vector2, pointerId: number, pi: BABYLON.Nullable<BABYLON.PointerInfoBase>): void;
         /** @hidden */
-        _onPointerEnter(target: Control, pi: BABYLON.PointerInfoBase): boolean;
+        _onPointerEnter(target: Control, pi: BABYLON.Nullable<BABYLON.PointerInfoBase>): boolean;
         /** @hidden */
         _onPointerOut(target: Control, pi: BABYLON.Nullable<BABYLON.PointerInfoBase>, force?: boolean): void;
         /** @hidden */
-        _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.PointerInfoBase): boolean;
+        _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.Nullable<BABYLON.PointerInfoBase>): boolean;
         /** @hidden */
-        _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi?: BABYLON.PointerInfoBase): void;
+        _onPointerUp(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi?: BABYLON.Nullable<BABYLON.PointerInfoBase>): void;
         /** @hidden */
         _forcePointerUp(pointerId?: BABYLON.Nullable<number>): void;
         /** @hidden */
@@ -8600,7 +8649,7 @@ declare module BABYLON.GUI {
         /** @hidden */
         _onCanvasBlur(): void;
         /** @hidden */
-        _processObservables(type: number, x: number, y: number, pi: BABYLON.PointerInfoBase, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
+        _processObservables(type: number, x: number, y: number, pi: BABYLON.Nullable<BABYLON.PointerInfoBase>, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
         private _prepareFont;
         /**
          * Serializes the current control
@@ -8772,7 +8821,7 @@ declare module BABYLON.GUI {
         _draw(context: BABYLON.ICanvasRenderingContext, invalidatedRectangle?: Measure): void;
         getDescendantsToRef(results: Control[], directDescendantsOnly?: boolean, predicate?: (control: Control) => boolean): void;
         /** @hidden */
-        _processPicking(x: number, y: number, pi: BABYLON.PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
+        _processPicking(x: number, y: number, pi: BABYLON.Nullable<BABYLON.PointerInfoBase>, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean;
         /** @hidden */
         protected _additionalProcessing(parentMeasure: Measure, context: BABYLON.ICanvasRenderingContext): void;
         /**
@@ -8969,6 +9018,7 @@ declare module BABYLON.GUI {
         protected _applyStates(context: BABYLON.ICanvasRenderingContext): void;
         protected _breakLines(refWidth: number, refHeight: number, context: BABYLON.ICanvasRenderingContext): object[];
         protected _parseLine(line: string | undefined, context: BABYLON.ICanvasRenderingContext): object;
+        private _getCharsToRemove;
         protected _parseLineEllipsis(line: string | undefined, width: number, context: BABYLON.ICanvasRenderingContext): object;
         protected _parseLineWordWrap(line: string | undefined, width: number, context: BABYLON.ICanvasRenderingContext): object[];
         protected _parseLineWordWrapEllipsis(line: string | undefined, width: number, height: number, context: BABYLON.ICanvasRenderingContext): object[];
@@ -9492,6 +9542,8 @@ declare module BABYLON.GUI {
         private _autoStretchWidth;
         private _maxWidth;
         private _isFocused;
+        /** the type of device that most recently focused the input: "mouse", "touch" or "pen" */
+        private _focusedBy;
         private _blinkTimeout;
         private _blinkIsEven;
         private _cursorOffset;
@@ -11279,7 +11331,8 @@ declare module BABYLON.GUI {
     export class TouchButton3D extends Button3D {
         private _collisionMesh;
         private _collidableFrontDirection;
-        protected _isNearPressed: boolean;
+        private _isNearPressed;
+        private _interactionSurfaceHeight;
         private _isToggleButton;
         private _toggleState;
         private _toggleButtonCallback;
@@ -11293,6 +11346,10 @@ declare module BABYLON.GUI {
          * @param collisionMesh mesh to track collisions with
          */
         constructor(name?: string, collisionMesh?: BABYLON.Mesh);
+        /**
+         * Whether the current interaction is caused by near interaction or not
+         */
+        get isActiveNearInteraction(): boolean;
         /**
          * Sets the front-facing direction of the button. Pass in BABYLON.Vector3.Zero to allow interactions from any direction
          * @param frontDir the forward direction of the button
@@ -11321,6 +11378,12 @@ declare module BABYLON.GUI {
         get isToggled(): boolean;
         protected _onToggle(newState: boolean): void;
         private _isInteractionInFrontOfButton;
+        /**
+         * Get the height of the touchPoint from the collidable part of the button
+         * @param touchPoint the point to compare to the button, in absolute position
+         * @returns the depth of the touch point into the front of the button
+         */
+        getPressDepth(touchPoint: BABYLON.Vector3): number;
         protected _getInteractionHeight(interactionPos: BABYLON.Vector3, basePos: BABYLON.Vector3): number;
         /** @hidden */
         _generatePointerEventType(providedType: number, nearMeshPosition: BABYLON.Vector3, activeInteractionCount: number): number;
@@ -12003,6 +12066,10 @@ declare module BABYLON.GUI {
          */
         set renderingGroupId(id: number);
         get renderingGroupId(): number;
+        /**
+         * Gets the mesh used to render this control
+         */
+        get mesh(): BABYLON.Nullable<BABYLON.AbstractMesh>;
         /**
          * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
          */
@@ -12058,6 +12125,74 @@ declare module BABYLON.GUI {
         dispose(): void;
     }
 }
+declare module BABYLON.GUI {
+    /**
+     * Default behavior for 3D UI elements.
+     * Handles a BABYLON.FollowBehavior, SixDofBehavior and BABYLON.SurfaceMagnetismBehavior
+     * @since 5.0.0
+     */
+    export class DefaultBehavior implements BABYLON.Behavior<BABYLON.Mesh> {
+        private _scene;
+        private _followBehavior;
+        private _sixDofDragBehavior;
+        private _surfaceMagnetismBehavior;
+        private _onBeforeRenderObserver;
+        private _onDragObserver;
+        /**
+         * Instantiates the default behavior
+         */
+        constructor();
+        /**
+         * Attached node of this behavior
+         */
+        attachedNode: BABYLON.Nullable<BABYLON.Mesh>;
+        /**
+         *  The name of the behavior
+         */
+        get name(): string;
+        /**
+         *  The follow behavior
+         */
+        get followBehavior(): BABYLON.FollowBehavior;
+        /**
+         *  The six DoF drag behavior
+         */
+        get sixDofDragBehavior(): BABYLON.SixDofDragBehavior;
+        /**
+         * The surface magnetism behavior
+         */
+        get surfaceMagnetismBehavior(): BABYLON.SurfaceMagnetismBehavior;
+        /**
+         * Enables the follow behavior
+         */
+        followBehaviorEnabled: boolean;
+        /**
+         * Enables the six DoF drag behavior
+         */
+        sixDofDragBehaviorEnabled: boolean;
+        /**
+         * Enables the surface magnetism behavior
+         */
+        surfaceMagnetismBehaviorEnabled: boolean;
+        /**
+         *  Initializes the behavior
+         */
+        init(): void;
+        /**
+         * Attaches the default behavior
+         * @param ownerMesh The top level mesh
+         * @param draggablesMeshes Descendant meshes that can be used for dragging the owner mesh
+         * @param sceneUnderstandingMeshes Meshes from the scene understanding that will be used for surface magnetism
+         */
+        attach(ownerMesh: BABYLON.Mesh, draggablesMeshes?: BABYLON.Mesh[], sceneUnderstandingMeshes?: BABYLON.AbstractMesh[]): void;
+        /**
+         *  Detaches the behavior from the mesh
+         */
+        detach(): void;
+        private _addObservables;
+        private _removeObservables;
+    }
+}
 declare module BABYLON.GUI {
     /** @hidden */
     export var handleVertexShader: {
@@ -12260,6 +12395,7 @@ declare module BABYLON.GUI {
          * Value we use to offset handles from mesh
          */
         private _margin;
+        private _handleSize;
         private _attachedSlate;
         private _existingSlateScale;
         /**
@@ -12270,10 +12406,6 @@ declare module BABYLON.GUI {
          * The distance away from the object which the draggable meshes should appear world sized when fixedScreenSize is set to true (default: 10)
          */
         fixedScreenSizeDistanceFactor: number;
-        /**
-         * Size of the handles (meters in XR)
-         */
-        handleSize: number;
         /**
          * The slate attached to this gizmo
          */
@@ -12292,78 +12424,11 @@ declare module BABYLON.GUI {
          */
         updateBoundingBox(): void;
         private _updateHandlesPosition;
+        private _updateHandlesScaling;
         protected _update(): void;
         dispose(): void;
     }
 }
-declare module BABYLON.GUI {
-    /**
-     * Default behavior for 3D UI elements.
-     * Handles a BABYLON.FollowBehavior, SixDofBehavior and BABYLON.SurfaceMagnetismBehavior
-     * @since 5.0.0
-     */
-    export class DefaultBehavior implements BABYLON.Behavior<BABYLON.Mesh> {
-        private _scene;
-        private _followBehavior;
-        private _sixDofDragBehavior;
-        private _surfaceMagnetismBehavior;
-        private _onBeforeRenderObserver;
-        private _onDragObserver;
-        /**
-         * Instantiates the default behavior
-         */
-        constructor();
-        /**
-         * Attached node of this behavior
-         */
-        attachedNode: BABYLON.Nullable<BABYLON.Mesh>;
-        /**
-         *  The name of the behavior
-         */
-        get name(): string;
-        /**
-         *  The follow behavior
-         */
-        get followBehavior(): BABYLON.FollowBehavior;
-        /**
-         *  The six DoF drag behavior
-         */
-        get sixDofDragBehavior(): BABYLON.SixDofDragBehavior;
-        /**
-         * The surface magnetism behavior
-         */
-        get surfaceMagnetismBehavior(): BABYLON.SurfaceMagnetismBehavior;
-        /**
-         * Enables the follow behavior
-         */
-        followBehaviorEnabled: boolean;
-        /**
-         * Enables the six DoF drag behavior
-         */
-        sixDofDragBehaviorEnabled: boolean;
-        /**
-         * Enables the surface magnetism behavior
-         */
-        surfaceMagnetismBehaviorEnabled: boolean;
-        /**
-         *  Initializes the behavior
-         */
-        init(): void;
-        /**
-         * Attaches the default behavior
-         * @param ownerMesh The top level mesh
-         * @param draggablesMeshes Descendant meshes that can be used for dragging the owner mesh
-         * @param sceneUnderstandingMeshes Meshes from the scene understanding that will be used for surface magnetism
-         */
-        attach(ownerMesh: BABYLON.Mesh, draggablesMeshes?: BABYLON.Mesh[], sceneUnderstandingMeshes?: BABYLON.AbstractMesh[]): void;
-        /**
-         *  Detaches the behavior from the mesh
-         */
-        detach(): void;
-        private _addObservables;
-        private _removeObservables;
-    }
-}
 declare module BABYLON.GUI {
     /** @hidden */
     export var fluentBackplatePixelShader: {
@@ -12540,35 +12605,24 @@ declare module BABYLON.GUI {
          * File name for the close icon.
          */
         static FOLLOW_ICON_FILENAME: string;
+        private static DEFAULT_TEXT_RESOLUTION_Y;
         /**
-         * Dimensions of the slate
-         */
-        dimensions: BABYLON.Vector3;
-        /**
-         * Minimum dimensions of the slate
-         */
-        minDimensions: BABYLON.Vector3;
-        /**
-         * Default dimensions of the slate
+         * Margin between title bar and contentplate
          */
-        readonly defaultDimensions: BABYLON.Vector3;
-        /**
-         * Dimensions of the backplate
-         */
-        backplateDimensions: BABYLON.Vector3;
-        /**
-         * Margin between backplate and contentplate
-         */
-        backPlateMargin: number;
+        titleBarMargin: number;
         /**
          * Origin in local coordinates (top left corner)
          */
         origin: BABYLON.Vector3;
-        private _backPlateMaterial;
+        private _dimensions;
+        private _titleBarHeight;
+        private _titleBarMaterial;
+        private _backMaterial;
         private _contentMaterial;
         private _pickedPointObserver;
         private _positionChangedObserver;
-        private _imageUrl;
+        private _titleText;
+        private _titleTextComponent;
         private _contentViewport;
         private _contentDragBehavior;
         private _defaultBehavior;
@@ -12578,21 +12632,42 @@ declare module BABYLON.GUI {
         get defaultBehavior(): DefaultBehavior;
         /** @hidden */
         _gizmo: SlateGizmo;
-        protected _backPlate: BABYLON.Mesh;
+        protected _titleBar: BABYLON.Mesh;
+        protected _titleBarTitle: BABYLON.Mesh;
         protected _contentPlate: BABYLON.Mesh;
-        protected _followButton: TouchHolographicButton;
+        protected _backPlate: BABYLON.Mesh;
+        /** @hidden */
+        _followButton: TouchHolographicButton;
         protected _closeButton: TouchHolographicButton;
         protected _contentScaleRatio: number;
         /**
-         * Rendering ground id of all the mesh in the button
+         * 2D dimensions of the slate
+         */
+        get dimensions(): BABYLON.Vector2;
+        set dimensions(value: BABYLON.Vector2);
+        /**
+         * Minimum dimensions of the slate
+         */
+        minDimensions: BABYLON.Vector2;
+        /**
+         * Default dimensions of the slate
+         */
+        readonly defaultDimensions: BABYLON.Vector2;
+        /**
+         * Height of the title bar component
+         */
+        get titleBarHeight(): number;
+        set titleBarHeight(value: number);
+        /**
+         * Rendering ground id of all the meshes
          */
         set renderingGroupId(id: number);
         get renderingGroupId(): number;
         /**
-         * Gets or sets the image url for the button
+         * The title text displayed at the top of the slate
          */
-        get imageUrl(): string;
-        set imageUrl(value: string);
+        set title(title: string);
+        get title(): string;
         /**
          * Creates a new slate
          * @param name defines the control name
@@ -12604,7 +12679,6 @@ declare module BABYLON.GUI {
          * @param facadeTexture defines the AdvancedDynamicTexture to use
          */
         protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
-        private _rebuildContent;
         private _addControl;
         protected _getTypeName(): string;
         /**
@@ -12624,8 +12698,9 @@ declare module BABYLON.GUI {
         _prepareNode(scene: BABYLON.Scene): void;
         /**
          * Resets the aspect and pose of the slate so it is right in front of the active camera, facing towards it.
+         * @param resetAspect Should the slate's dimensions/aspect ratio be reset as well
          */
-        resetDefaultAspectAndPose(): void;
+        resetDefaultAspectAndPose(resetAspect?: boolean): void;
         /**
          * Releases all associated resources
          */
@@ -13639,6 +13714,7 @@ declare module BABYLON.GUI {
         private _maximum;
         private _value;
         private _step;
+        private _draggedPosition;
         /** BABYLON.Observable raised when the sldier value changes */
         onValueChangedObservable: BABYLON.Observable<number>;
         /**