babylonjs-gui 5.0.0-beta.1 → 5.0.0-beta.12

package/babylon.gui.module.d.ts

@@ -583,7 +583,7 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
          * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
          * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
          */
-        constructor(name: string, width: number | undefined, height: number | undefined, scene: Nullable<Scene>, generateMipMaps?: boolean, samplingMode?: number, invertY?: boolean);
+        constructor(name: string, width?: number, height?: number, scene?: Nullable<Scene>, generateMipMaps?: boolean, samplingMode?: number, invertY?: boolean);
         /**
          * Get the current class name of the texture useful for serialization or dynamic coding.
          * @returns "AdvancedDynamicTexture"
@@ -772,7 +772,19 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
          * @returns a new AdvancedDynamicTexture
          */
         static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Nullable<Scene>, sampling?: number, adaptiveScaling?: boolean): AdvancedDynamicTexture;
+        /**
+         * Scales the texture
+         * @param ratio the scale factor to apply to both width and height
+         */
+        scale(ratio: number): void;
+        /**
+         * Resizes the texture
+         * @param width the new width
+         * @param height the new height
+         */
+        scaleTo(width: number, height: number): void;
     }
+    export { IFocusableControl };
 }
 declare module "babylonjs-gui/2D/controls/control" {
     import { Nullable } from "babylonjs/types";
@@ -1266,10 +1278,10 @@ declare module "babylonjs-gui/2D/controls/control" {
         /** Gets or sets if control is Enabled */
         get isEnabled(): boolean;
         set isEnabled(value: boolean);
-        /** Gets or sets background color of control if it's disabled */
+        /** Gets or sets background color of control if it's disabled. Only applies to Button class. */
         get disabledColor(): string;
         set disabledColor(value: string);
-        /** Gets or sets front color of control if it's disabled */
+        /** Gets or sets front color of control if it's disabled. Only applies to Checkbox class. */
         get disabledColorItem(): string;
         set disabledColorItem(value: string);
         /**
@@ -1298,6 +1310,15 @@ declare module "babylonjs-gui/2D/controls/control" {
          * @returns the ascendant or null if not found
          */
         getAscendantOfClass(className: string): Nullable<Control>;
+        /**
+         * Mark control element as dirty
+         * @param force force non visible elements to be marked too
+         */
+        markAsDirty(force: false): void;
+        /**
+         * Mark the element and its children as dirty
+         */
+        markAllAsDirty(): void;
         /** @hidden */
         _resetFontCache(): void;
         /**
@@ -1380,7 +1401,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 */
@@ -1833,6 +1854,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[];
@@ -2396,6 +2418,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;
@@ -4348,6 +4372,7 @@ declare module "babylonjs-gui/3D/controls/touchButton3D" {
     import { Mesh } from "babylonjs/Meshes/mesh";
     import { TransformNode } from "babylonjs/Meshes/transformNode";
     import { Scene } from "babylonjs/scene";
+    import { Observable } from "babylonjs/Misc/observable";
     import { Button3D } from "babylonjs-gui/3D/controls/button3D";
     /**
      * Class used to create a touchable button in 3D
@@ -4355,13 +4380,25 @@ 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;
+        /**
+         * An event triggered when the button is toggled. Only fired if 'isToggleButton' is true
+         */
+        onToggleObservable: Observable<boolean>;
         /**
          * Creates a new touchable button
          * @param name defines the control name
          * @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
@@ -4376,7 +4413,26 @@ declare module "babylonjs-gui/3D/controls/touchButton3D" {
          * @param collisionMesh the new collision mesh for the button
          */
         set collisionMesh(collisionMesh: Mesh);
+        /**
+         * Setter for if this TouchButton3D should be treated as a toggle button
+         * @param value If this TouchHolographicButton should act like a toggle button
+         */
+        set isToggleButton(value: boolean);
+        get isToggleButton(): boolean;
+        /**
+         * A public entrypoint to set the toggle state of the TouchHolographicButton. Only works if 'isToggleButton' is true
+         * @param newState The new state to set the TouchHolographicButton's toggle state to
+         */
+        set isToggled(newState: boolean);
+        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;
@@ -4768,7 +4824,7 @@ declare module "babylonjs-gui/3D/materials/fluent/fluentMaterial" {
          * @param name defines the name of the material
          * @param scene defines the hosting scene
          */
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -5055,7 +5111,7 @@ declare module "babylonjs-gui/3D/materials/fluentButton/fluentButtonMaterial" {
          */
         globalRightIndexTipPosition: Vector3;
         private _blobTexture;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -5079,9 +5135,11 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
     import { TransformNode } from "babylonjs/Meshes/transformNode";
     import { Mesh } from "babylonjs/Meshes/mesh";
     import { Scene } from "babylonjs/scene";
+    import { FluentMaterial } from "babylonjs-gui/3D/materials/fluent/fluentMaterial";
     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
@@ -5109,6 +5167,8 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
         private _pointerHoverObserver;
         private _frontPlateDepth;
         private _backPlateDepth;
+        private _backplateColor;
+        private _backplateToggledColor;
         private _tooltipFade;
         private _tooltipTextBlock;
         private _tooltipTexture;
@@ -5121,6 +5181,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)
          */
@@ -5139,7 +5203,7 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
         /**
          * Gets the back material used by this button
          */
-        get backMaterial(): StandardMaterial;
+        get backMaterial(): FluentMaterial;
         /**
          * Gets the front material used by this button
          */
@@ -5168,6 +5232,7 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
         private _createBackMaterial;
         private _createFrontMaterial;
         private _createPlateMaterial;
+        protected _onToggle(newState: boolean): void;
         protected _affectMaterial(mesh: Mesh): void;
         /**
          * Releases all associated resources
@@ -5175,6 +5240,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: {
@@ -5394,6 +5534,7 @@ declare module "babylonjs-gui/3D/gizmos/slateGizmo" {
          * Value we use to offset handles from mesh
          */
         private _margin;
+        private _handleSize;
         private _attachedSlate;
         private _existingSlateScale;
         /**
@@ -5404,10 +5545,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
          */
@@ -5426,85 +5563,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: {
@@ -5657,7 +5720,7 @@ declare module "babylonjs-gui/3D/materials/fluentBackplate/fluentBackplateMateri
          */
         globalRightIndexTipPosition: Vector3;
         private _globalRightIndexTipPosition4;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -5676,16 +5739,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
@@ -5703,35 +5766,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
+         * Margin between title bar and contentplate
          */
-        readonly defaultDimensions: Vector3;
-        /**
-         * Dimensions of the backplate
-         */
-        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;
@@ -5741,21 +5793,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
@@ -5767,7 +5840,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;
         /**
@@ -5787,8 +5859,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
          */
@@ -5931,7 +6004,6 @@ declare module "babylonjs-gui/3D/controls/nearMenu" {
          */
         private static PIN_ICON_FILENAME;
         private _pinButton;
-        private _pinMaterial;
         private _dragObserver;
         private _defaultBehavior;
         /**
@@ -6320,7 +6392,7 @@ declare module "babylonjs-gui/3D/materials/mrdl/mrdlSliderBarMaterial" {
          * @hidden
          */
         globalRightIndexMiddlePosition: Vector4;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -6669,7 +6741,7 @@ declare module "babylonjs-gui/3D/materials/mrdl/mrdlSliderThumbMaterial" {
          * @hidden
          */
         globalRightIndexMiddlePosition: Vector4;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -6832,7 +6904,7 @@ declare module "babylonjs-gui/3D/materials/mrdl/mrdlBackplateMaterial" {
          * Gets or sets the edge width of the backplate.
          */
         edgeLineGradientBlend: number;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -6999,43 +7071,6 @@ declare module "babylonjs-gui/3D/controls/touchMeshButton3D" {
         protected _affectMaterial(mesh: AbstractMesh): void;
     }
 }
-declare module "babylonjs-gui/3D/controls/touchToggleButton3D" {
-    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-    import { Mesh } from "babylonjs/Meshes/mesh";
-    import { Observable } from "babylonjs/Misc/observable";
-    import { Scene } from "babylonjs/scene";
-    import { TransformNode } from "babylonjs/Meshes/transformNode";
-    import { Vector3 } from "babylonjs/Maths/math.vector";
-    import { TouchButton3D } from "babylonjs-gui/3D/controls/touchButton3D";
-    /**
-     * Class used as base class for touch-enabled toggleable buttons
-     */
-    export class TouchToggleButton3D extends TouchButton3D {
-        private _isPressed;
-        /**
-         * An event triggered when the button is toggled on
-         */
-        onToggleOnObservable: Observable<Vector3>;
-        /**
-         * An event triggered when the button is toggled off
-         */
-        onToggleOffObservable: Observable<Vector3>;
-        /**
-         * Creates a new button
-         * @param name defines the control name
-         * @param collisionMesh defines the mesh to track near interactions with
-         */
-        constructor(name?: string, collisionMesh?: Mesh);
-        private _onToggle;
-        protected _getTypeName(): string;
-        protected _createNode(scene: Scene): TransformNode;
-        protected _affectMaterial(mesh: AbstractMesh): void;
-        /**
-         * Releases all associated resources
-         */
-        dispose(): void;
-    }
-}
 declare module "babylonjs-gui/3D/controls/holographicBackplate" {
     import { TransformNode } from "babylonjs/Meshes/transformNode";
     import { Mesh } from "babylonjs/Meshes/mesh";
@@ -7106,7 +7141,6 @@ declare module "babylonjs-gui/3D/controls/index" {
     export * from "babylonjs-gui/3D/controls/touchMeshButton3D";
     export * from "babylonjs-gui/3D/controls/touchHolographicButton";
     export * from "babylonjs-gui/3D/controls/touchHolographicMenu";
-    export * from "babylonjs-gui/3D/controls/touchToggleButton3D";
     export * from "babylonjs-gui/3D/controls/volumeBasedPanel";
     export * from "babylonjs-gui/3D/controls/holographicBackplate";
 }
@@ -7721,7 +7755,7 @@ declare module BABYLON.GUI {
          * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
          * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
          */
-        constructor(name: string, width: number | undefined, height: number | undefined, scene: BABYLON.Nullable<BABYLON.Scene>, generateMipMaps?: boolean, samplingMode?: number, invertY?: boolean);
+        constructor(name: string, width?: number, height?: number, scene?: BABYLON.Nullable<BABYLON.Scene>, generateMipMaps?: boolean, samplingMode?: number, invertY?: boolean);
         /**
          * Get the current class name of the texture useful for serialization or dynamic coding.
          * @returns "AdvancedDynamicTexture"
@@ -7910,6 +7944,17 @@ declare module BABYLON.GUI {
          * @returns a new AdvancedDynamicTexture
          */
         static CreateFullscreenUI(name: string, foreground?: boolean, scene?: BABYLON.Nullable<BABYLON.Scene>, sampling?: number, adaptiveScaling?: boolean): AdvancedDynamicTexture;
+        /**
+         * Scales the texture
+         * @param ratio the scale factor to apply to both width and height
+         */
+        scale(ratio: number): void;
+        /**
+         * Resizes the texture
+         * @param width the new width
+         * @param height the new height
+         */
+        scaleTo(width: number, height: number): void;
     }
 }
 declare module BABYLON.GUI {
@@ -8391,10 +8436,10 @@ declare module BABYLON.GUI {
         /** Gets or sets if control is Enabled */
         get isEnabled(): boolean;
         set isEnabled(value: boolean);
-        /** Gets or sets background color of control if it's disabled */
+        /** Gets or sets background color of control if it's disabled. Only applies to Button class. */
         get disabledColor(): string;
         set disabledColor(value: string);
-        /** Gets or sets front color of control if it's disabled */
+        /** Gets or sets front color of control if it's disabled. Only applies to Checkbox class. */
         get disabledColorItem(): string;
         set disabledColorItem(value: string);
         /**
@@ -8423,6 +8468,15 @@ declare module BABYLON.GUI {
          * @returns the ascendant or null if not found
          */
         getAscendantOfClass(className: string): BABYLON.Nullable<Control>;
+        /**
+         * Mark control element as dirty
+         * @param force force non visible elements to be marked too
+         */
+        markAsDirty(force: false): void;
+        /**
+         * Mark the element and its children as dirty
+         */
+        markAllAsDirty(): void;
         /** @hidden */
         _resetFontCache(): void;
         /**
@@ -8505,7 +8559,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 */
@@ -8943,6 +8997,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[];
@@ -9466,6 +9521,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;
@@ -11253,13 +11310,25 @@ 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;
+        /**
+         * An event triggered when the button is toggled. Only fired if 'isToggleButton' is true
+         */
+        onToggleObservable: BABYLON.Observable<boolean>;
         /**
          * Creates a new touchable button
          * @param name defines the control name
          * @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
@@ -11274,7 +11343,26 @@ declare module BABYLON.GUI {
          * @param collisionMesh the new collision mesh for the button
          */
         set collisionMesh(collisionMesh: BABYLON.Mesh);
+        /**
+         * Setter for if this TouchButton3D should be treated as a toggle button
+         * @param value If this TouchHolographicButton should act like a toggle button
+         */
+        set isToggleButton(value: boolean);
+        get isToggleButton(): boolean;
+        /**
+         * A public entrypoint to set the toggle state of the TouchHolographicButton. Only works if 'isToggleButton' is true
+         * @param newState The new state to set the TouchHolographicButton's toggle state to
+         */
+        set isToggled(newState: boolean);
+        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;
@@ -11630,7 +11718,7 @@ declare module BABYLON.GUI {
          * @param name defines the name of the material
          * @param scene defines the hosting scene
          */
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -11897,7 +11985,7 @@ declare module BABYLON.GUI {
          */
         globalRightIndexTipPosition: BABYLON.Vector3;
         private _blobTexture;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -11943,6 +12031,8 @@ declare module BABYLON.GUI {
         private _pointerHoverObserver;
         private _frontPlateDepth;
         private _backPlateDepth;
+        private _backplateColor;
+        private _backplateToggledColor;
         private _tooltipFade;
         private _tooltipTextBlock;
         private _tooltipTexture;
@@ -11955,6 +12045,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)
          */
@@ -11973,7 +12067,7 @@ declare module BABYLON.GUI {
         /**
          * Gets the back material used by this button
          */
-        get backMaterial(): BABYLON.StandardMaterial;
+        get backMaterial(): FluentMaterial;
         /**
          * Gets the front material used by this button
          */
@@ -12002,6 +12096,7 @@ declare module BABYLON.GUI {
         private _createBackMaterial;
         private _createFrontMaterial;
         private _createPlateMaterial;
+        protected _onToggle(newState: boolean): void;
         protected _affectMaterial(mesh: BABYLON.Mesh): void;
         /**
          * Releases all associated resources
@@ -12009,6 +12104,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: {
@@ -12211,6 +12374,7 @@ declare module BABYLON.GUI {
          * Value we use to offset handles from mesh
          */
         private _margin;
+        private _handleSize;
         private _attachedSlate;
         private _existingSlateScale;
         /**
@@ -12221,10 +12385,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
          */
@@ -12243,78 +12403,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: {
@@ -12455,7 +12548,7 @@ declare module BABYLON.GUI {
          */
         globalRightIndexTipPosition: BABYLON.Vector3;
         private _globalRightIndexTipPosition4;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -12491,35 +12584,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
+         * Margin between title bar and contentplate
          */
-        dimensions: BABYLON.Vector3;
-        /**
-         * Minimum dimensions of the slate
-         */
-        minDimensions: BABYLON.Vector3;
-        /**
-         * Default dimensions of the slate
-         */
-        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;
@@ -12529,21 +12611,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
@@ -12555,7 +12658,6 @@ declare module BABYLON.GUI {
          * @param facadeTexture defines the AdvancedDynamicTexture to use
          */
         protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
-        private _rebuildContent;
         private _addControl;
         protected _getTypeName(): string;
         /**
@@ -12575,8 +12677,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
          */
@@ -12693,7 +12796,6 @@ declare module BABYLON.GUI {
          */
         private static PIN_ICON_FILENAME;
         private _pinButton;
-        private _pinMaterial;
         private _dragObserver;
         private _defaultBehavior;
         /**
@@ -13062,7 +13164,7 @@ declare module BABYLON.GUI {
          * @hidden
          */
         globalRightIndexMiddlePosition: BABYLON.Vector4;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -13398,7 +13500,7 @@ declare module BABYLON.GUI {
          * @hidden
          */
         globalRightIndexMiddlePosition: BABYLON.Vector4;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -13549,7 +13651,7 @@ declare module BABYLON.GUI {
          * Gets or sets the edge width of the backplate.
          */
         edgeLineGradientBlend: number;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -13697,36 +13799,6 @@ declare module BABYLON.GUI {
         protected _affectMaterial(mesh: BABYLON.AbstractMesh): void;
     }
 }
-declare module BABYLON.GUI {
-    /**
-     * Class used as base class for touch-enabled toggleable buttons
-     */
-    export class TouchToggleButton3D extends TouchButton3D {
-        private _isPressed;
-        /**
-         * An event triggered when the button is toggled on
-         */
-        onToggleOnObservable: BABYLON.Observable<BABYLON.Vector3>;
-        /**
-         * An event triggered when the button is toggled off
-         */
-        onToggleOffObservable: BABYLON.Observable<BABYLON.Vector3>;
-        /**
-         * Creates a new button
-         * @param name defines the control name
-         * @param collisionMesh defines the mesh to track near interactions with
-         */
-        constructor(name?: string, collisionMesh?: BABYLON.Mesh);
-        private _onToggle;
-        protected _getTypeName(): string;
-        protected _createNode(scene: BABYLON.Scene): BABYLON.TransformNode;
-        protected _affectMaterial(mesh: BABYLON.AbstractMesh): void;
-        /**
-         * Releases all associated resources
-         */
-        dispose(): void;
-    }
-}
 declare module BABYLON.GUI {
     /**
      * Class used to create a holographic backplate in 3D