gridstack 12.4.2 → 12.6.0

package/doc/API.md

@@ -1,4 +1,4 @@
-# gridstack v12.4.2
+# gridstack v12.6.0
 
 ## Classes
 
@@ -31,6 +31,7 @@
 - [GridHTMLElement](#gridhtmlelement)
 - [GridItemHTMLElement](#griditemhtmlelement)
 - [GridStackEngineOptions](#gridstackengineoptions)
+- [GridStackMouseEvent](#gridstackmouseevent)
 - [GridStackMoveOpts](#gridstackmoveopts)
 - [GridStackNode](#gridstacknode-2)
 - [GridStackPosition](#gridstackposition)
@@ -67,18 +68,18 @@
 <a id="gridstack"></a>
 ### GridStack
 
-Defined in: [gridstack.ts:76](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L76)
+Defined in: [gridstack.ts:77](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L77)
 
-Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
+Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
 Note: your grid elements MUST have the following classes for the CSS layout to work:
 
 #### Example
 
 ```ts
-<div class="grid-stack">
-  <div class="grid-stack-item">
-    <div class="grid-stack-item-content">Item 1</div>
-  </div>
+<div class="grid-stack">
+  <div class="grid-stack-item">
+    <div class="grid-stack-item-content">Item 1</div>
+  </div>
 </div>
 ```
 
@@ -113,7 +114,7 @@ Construct a grid item from the given element and options
 protected _updateResizeEvent(forceRemove): GridStack;
 ```
 
-Defined in: [gridstack.ts:2085](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2085)
+Defined in: [gridstack.ts:2088](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2088)
 
 add or remove the grid element size event handler
 
@@ -153,10 +154,10 @@ return our expected width (or parent) , and optionally of window for dynamic col
 static addGrid(parent, opt): GridStack;
 ```
 
-Defined in: [gridstack.ts:141](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L141)
+Defined in: [gridstack.ts:142](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L142)
 
-call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then
-grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from
+call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then
+grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from
 JSON serialized data, including options.
 
 ###### Parameters
@@ -180,8 +181,8 @@ Defined in: [gridstack.ts:432](https://github.com/adumesny/gridstack.js/blob/mas
 
 add a new widget and returns it.
 
-Widget will be always placed even if result height is more than actual grid height.
-You need to use `willItFit()` before calling addWidget for additional check.
+Widget will be always placed even if result height is more than actual grid height.
+You need to use `willItFit()` before calling addWidget for additional check.
 See also `makeWidget(el)` for DOM element.
 
 ###### Parameters
@@ -197,7 +198,7 @@ See also `makeWidget(el)` for DOM element.
 ###### Example
 
 ```ts
-const grid = GridStack.init();
+const grid = GridStack.init();
 grid.addWidget({w: 3, content: 'hello'});
 ```
 
@@ -209,7 +210,7 @@ batchUpdate(flag): GridStack;
 
 Defined in: [gridstack.ts:833](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L833)
 
-use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
+use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
 and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
 
 ###### Parameters
@@ -247,10 +248,10 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-grid.cellHeight(100);     // 100px height
-grid.cellHeight('70px');  // explicit pixel height
-grid.cellHeight('5rem');  // relative to root font size
-grid.cellHeight(grid.cellWidth() * 1.2); // aspect ratio
+grid.cellHeight(100);     // 100px height
+grid.cellHeight('70px');  // explicit pixel height
+grid.cellHeight('5rem');  // relative to root font size
+grid.cellHeight(grid.cellWidth() * 1.2); // aspect ratio
 grid.cellHeight('auto');  // auto-size based on content
 ```
 
@@ -273,10 +274,10 @@ the cell width in pixels
 ###### Example
 
 ```ts
-const width = grid.cellWidth();
+const width = grid.cellWidth();
 console.log('Cell width:', width, 'px');
 
-// Use cell width to calculate widget dimensions
+// Use cell width to calculate widget dimensions
 const widgetWidth = width * 3; // For a 3-column wide widget
 ```
 
@@ -302,11 +303,11 @@ column(column, layout): GridStack;
 
 Defined in: [gridstack.ts:1041](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1041)
 
-Set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
+Set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
 as well as cache the original layout so you can revert back to previous positions without loss.
 
-Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11] columns,
-else you will need to generate correct CSS.
+Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11] columns,
+else you will need to generate correct CSS.
 See: https://github.com/gridstack/gridstack.js#change-grid-columns
 
 ###### Parameters
@@ -325,13 +326,13 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Change to 6 columns with default scaling
+// Change to 6 columns with default scaling
 grid.column(6);
 
-// Change to 4 columns, only move positions
+// Change to 4 columns, only move positions
 grid.column(4, 'move');
 
-// Single column layout (vertical stack)
+// Single column layout (vertical stack)
 grid.column(1);
 ```
 
@@ -343,7 +344,7 @@ compact(layout, doSort): GridStack;
 
 Defined in: [gridstack.ts:1007](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1007)
 
-Re-layout grid items to reclaim any empty space. This is useful after removing widgets
+Re-layout grid items to reclaim any empty space. This is useful after removing widgets
 or when you want to optimize the layout.
 
 ###### Parameters
@@ -362,14 +363,14 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Compact layout after removing widgets
-grid.removeWidget('.widget-to-remove');
+// Compact layout after removing widgets
+grid.removeWidget('.widget-to-remove');
 grid.compact();
 
-// Use list layout (preserve order)
+// Use list layout (preserve order)
 grid.compact('list');
 
-// Compact without sorting first
+// Compact without sorting first
 grid.compact('compact', false);
 ```
 
@@ -427,17 +428,17 @@ Destroys a grid instance. DO NOT CALL any methods or access any vars after this
 disable(recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2286](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2286)
+Defined in: [gridstack.ts:2289](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2289)
 
-Temporarily disables widgets moving/resizing.
+Temporarily disables widgets moving/resizing.
 If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
 
 Note: This is a no-op for static grids.
 
-This is a shortcut for:
-```typescript
-grid.enableMove(false);
-grid.enableResize(false);
+This is a shortcut for:
+```typescript
+grid.enableMove(false);
+grid.enableResize(false);
 ```
 
 ###### Parameters
@@ -455,10 +456,10 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Disable all interactions
+// Disable all interactions
 grid.disable();
 
-// Disable only this grid, not sub-grids
+// Disable only this grid, not sub-grids
 grid.disable(false);
 ```
 
@@ -468,15 +469,15 @@ grid.disable(false);
 enable(recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2313](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2313)
+Defined in: [gridstack.ts:2316](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2316)
 
-Re-enables widgets moving/resizing - see disable().
+Re-enables widgets moving/resizing - see disable().
 Note: This is a no-op for static grids.
 
-This is a shortcut for:
-```typescript
-grid.enableMove(true);
-grid.enableResize(true);
+This is a shortcut for:
+```typescript
+grid.enableMove(true);
+grid.enableResize(true);
 ```
 
 ###### Parameters
@@ -494,10 +495,10 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Re-enable all interactions
+// Re-enable all interactions
 grid.enable();
 
-// Enable only this grid, not sub-grids
+// Enable only this grid, not sub-grids
 grid.enable(false);
 ```
 
@@ -507,9 +508,9 @@ grid.enable(false);
 enableMove(doEnable, recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2339](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2339)
+Defined in: [gridstack.ts:2342](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2342)
 
-Enables/disables widget moving for all widgets. No-op for static grids.
+Enables/disables widget moving for all widgets. No-op for static grids.
 Note: locally defined items (with noMove property) still override this setting.
 
 ###### Parameters
@@ -528,13 +529,13 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Enable moving for all widgets
+// Enable moving for all widgets
 grid.enableMove(true);
 
-// Disable moving for all widgets
+// Disable moving for all widgets
 grid.enableMove(false);
 
-// Enable only this grid, not sub-grids
+// Enable only this grid, not sub-grids
 grid.enableMove(true, false);
 ```
 
@@ -544,9 +545,9 @@ grid.enableMove(true, false);
 enableResize(doEnable, recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2367](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2367)
+Defined in: [gridstack.ts:2370](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2370)
 
-Enables/disables widget resizing for all widgets. No-op for static grids.
+Enables/disables widget resizing for all widgets. No-op for static grids.
 Note: locally defined items (with noResize property) still override this setting.
 
 ###### Parameters
@@ -565,13 +566,13 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Enable resizing for all widgets
+// Enable resizing for all widgets
 grid.enableResize(true);
 
-// Disable resizing for all widgets
+// Disable resizing for all widgets
 grid.enableResize(false);
 
-// Enable only this grid, not sub-grids
+// Enable only this grid, not sub-grids
 grid.enableResize(true, false);
 ```
 
@@ -583,7 +584,7 @@ float(val): GridStack;
 
 Defined in: [gridstack.ts:1149](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1149)
 
-Enable/disable floating widgets (default: `false`). When enabled, widgets can float up to fill empty spaces.
+Enable/disable floating widgets (default: `false`). When enabled, widgets can float up to fill empty spaces.
 See [example](http://gridstackjs.com/demo/float.html)
 
 ###### Parameters
@@ -601,7 +602,7 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-grid.float(true);  // Enable floating
+grid.float(true);  // Enable floating
 grid.float(false); // Disable floating (default)
 ```
 
@@ -651,10 +652,10 @@ the cell height in pixels
 ###### Example
 
 ```ts
-const height = grid.getCellHeight();
+const height = grid.getCellHeight();
 console.log('Cell height:', height, 'px');
 
-// Force pixel conversion
+// Force pixel conversion
 const pixelHeight = grid.getCellHeight(true);
 ```
 
@@ -686,9 +687,9 @@ const columnCount = grid.getColumn(); // returns 12 by default
 static getDD(): DDGridStack;
 ```
 
-Defined in: [gridstack.ts:2183](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2183)
+Defined in: [gridstack.ts:2186](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2186)
 
-Get the global drag & drop implementation instance.
+Get the global drag & drop implementation instance.
 This provides access to the underlying drag & drop functionality.
 
 ###### Returns
@@ -700,7 +701,7 @@ the DDGridStack instance used for drag & drop operations
 ###### Example
 
 ```ts
-const dd = GridStack.getDD();
+const dd = GridStack.getDD();
 // Access drag & drop functionality
 ```
 
@@ -723,7 +724,7 @@ true if floating is enabled, false otherwise
 ###### Example
 
 ```ts
-const isFloating = grid.getFloat();
+const isFloating = grid.getFloat();
 console.log('Floating enabled:', isFloating);
 ```
 
@@ -735,7 +736,7 @@ getGridItems(): GridItemHTMLElement[];
 
 Defined in: [gridstack.ts:1092](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1092)
 
-Returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order.
+Returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order.
 This method excludes placeholder elements and returns only actual grid items.
 
 ###### Returns
@@ -747,9 +748,9 @@ array of GridItemHTMLElement instances representing all grid items
 ###### Example
 
 ```ts
-const items = grid.getGridItems();
-items.forEach(item => {
-  console.log('Item ID:', item.gridstackNode.id);
+const items = grid.getGridItems();
+items.forEach(item => {
+  console.log('Item ID:', item.gridstackNode.id);
 });
 ```
 
@@ -759,9 +760,9 @@ items.forEach(item => {
 getMargin(): number;
 ```
 
-Defined in: [gridstack.ts:1791](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1791)
+Defined in: [gridstack.ts:1793](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1793)
 
-Returns the current margin value as a number (undefined if the 4 sides don't match).
+Returns the current margin value as a number (undefined if the 4 sides don't match).
 This only returns a number if all sides have the same margin value.
 
 ###### Returns
@@ -773,11 +774,11 @@ the margin value in pixels, or undefined if sides have different values
 ###### Example
 
 ```ts
-const margin = grid.getMargin();
-if (margin !== undefined) {
-  console.log('Uniform margin:', margin, 'px');
-} else {
-  console.log('Margins are different on different sides');
+const margin = grid.getMargin();
+if (margin !== undefined) {
+  console.log('Uniform margin:', margin, 'px');
+} else {
+  console.log('Margins are different on different sides');
 }
 ```
 
@@ -789,7 +790,7 @@ getRow(): number;
 
 Defined in: [gridstack.ts:1209](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1209)
 
-Returns the current number of rows, which will be at least `minRow` if set.
+Returns the current number of rows, which will be at least `minRow` if set.
 The row count is based on the highest positioned widget in the grid.
 
 ###### Returns
@@ -801,7 +802,7 @@ the current number of rows in the grid
 ###### Example
 
 ```ts
-const rowCount = grid.getRow();
+const rowCount = grid.getRow();
 console.log('Grid has', rowCount, 'rows');
 ```
 
@@ -811,10 +812,10 @@ console.log('Grid has', rowCount, 'rows');
 static init(options, elOrString): GridStack;
 ```
 
-Defined in: [gridstack.ts:91](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L91)
+Defined in: [gridstack.ts:92](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L92)
 
-initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
-simply return the existing instance (ignore any passed options). There is also an initAll() version that support
+initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
+simply return the existing instance (ignore any passed options). There is also an initAll() version that support
 multiple grids initialization at once. Or you can use addGrid() to create the entire grid from JSON.
 
 ###### Parameters
@@ -833,7 +834,7 @@ multiple grids initialization at once. Or you can use addGrid() to create the en
 ```ts
 const grid = GridStack.init();
 
-Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
+Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
 const grid = document.querySelector('.grid-stack').gridstack;
 ```
 
@@ -843,7 +844,7 @@ const grid = document.querySelector('.grid-stack').gridstack;
 static initAll(options, selector): GridStack[];
 ```
 
-Defined in: [gridstack.ts:118](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L118)
+Defined in: [gridstack.ts:119](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L119)
 
 Will initialize a list of elements (given a selector) and return an array of grids.
 
@@ -861,7 +862,7 @@ Will initialize a list of elements (given a selector) and return an array of gri
 ###### Example
 
 ```ts
-const grids = GridStack.initAll();
+const grids = GridStack.initAll();
 grids.forEach(...)
 ```
 
@@ -897,9 +898,9 @@ true if the area is completely empty, false if any widget overlaps
 ###### Example
 
 ```ts
-// Check if a 2x2 area at position (1,1) is empty
-if (grid.isAreaEmpty(1, 1, 2, 2)) {
-  console.log('Area is available for placement');
+// Check if a 2x2 area at position (1,1) is empty
+if (grid.isAreaEmpty(1, 1, 2, 2)) {
+  console.log('Area is available for placement');
 }
 ```
 
@@ -911,7 +912,7 @@ isIgnoreChangeCB(): boolean;
 
 Defined in: [gridstack.ts:1109](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1109)
 
-Returns true if change callbacks should be ignored due to column change, sizeToContent, loading, etc.
+Returns true if change callbacks should be ignored due to column change, sizeToContent, loading, etc.
 This is useful for callers who want to implement dirty flag functionality.
 
 ###### Returns
@@ -923,9 +924,9 @@ true if change callbacks are currently being ignored
 ###### Example
 
 ```ts
-if (!grid.isIgnoreChangeCB()) {
-  // Process the change event
-  console.log('Grid layout changed');
+if (!grid.isIgnoreChangeCB()) {
+  // Process the change event
+  console.log('Grid layout changed');
 }
 ```
 
@@ -937,7 +938,7 @@ load(items, addRemove): GridStack;
 
 Defined in: [gridstack.ts:722](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L722)
 
-Load widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
+Load widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
 Used to restore a grid layout for a saved layout list (see `save()`).
 
 ###### Parameters
@@ -956,27 +957,27 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Basic usage with saved layout
-const savedLayout = grid.save(); // Save current layout
-// ... later restore it
+// Basic usage with saved layout
+const savedLayout = grid.save(); // Save current layout
+// ... later restore it
 grid.load(savedLayout);
 
-// Load with custom add/remove callback
-grid.load(layout, (items, grid, add) => {
-  if (add) {
-    // Custom logic for adding new widgets
-    items.forEach(item => {
-      const el = document.createElement('div');
-      el.innerHTML = item.content || '';
-      grid.addWidget(el, item);
-    });
-  } else {
-    // Custom logic for removing widgets
-    items.forEach(item => grid.removeWidget(item.el));
-  }
+// Load with custom add/remove callback
+grid.load(layout, (items, grid, add) => {
+  if (add) {
+    // Custom logic for adding new widgets
+    items.forEach(item => {
+      const el = document.createElement('div');
+      el.innerHTML = item.content || '';
+      grid.addWidget(el, item);
+    });
+  } else {
+    // Custom logic for removing widgets
+    items.forEach(item => grid.removeWidget(item.el));
+  }
 });
 
-// Load without adding/removing missing widgets
+// Load without adding/removing missing widgets
 grid.load(layout, false);
 ```
 
@@ -996,7 +997,7 @@ makeSubGrid(
 
 Defined in: [gridstack.ts:506](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L506)
 
-Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them
+Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them
 from the parent's subGrid options.
 
 ###### Parameters
@@ -1022,8 +1023,8 @@ makeWidget(els, options?): GridItemHTMLElement;
 
 Defined in: [gridstack.ts:1256](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1256)
 
-If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.
-If you want gridstack to add the elements for you, use `addWidget()` instead.
+If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.
+If you want gridstack to add the elements for you, use `addWidget()` instead.
 Makes the given element a widget and returns it.
 
 ###### Parameters
@@ -1044,16 +1045,16 @@ the converted GridItemHTMLElement
 ```ts
 const grid = GridStack.init();
 
-// Create HTML content manually, possibly looking like:
-// <div id="item-1" gs-x="0" gs-y="0" gs-w="3" gs-h="2"></div>
+// Create HTML content manually, possibly looking like:
+// <div id="item-1" gs-x="0" gs-y="0" gs-w="3" gs-h="2"></div>
 grid.el.innerHTML = '<div id="item-1" gs-w="3"></div><div id="item-2"></div>';
 
-// Convert existing elements to widgets
-grid.makeWidget('#item-1'); // Uses gs-* attributes from DOM
+// Convert existing elements to widgets
+grid.makeWidget('#item-1'); // Uses gs-* attributes from DOM
 grid.makeWidget('#item-2', {w: 2, h: 1, content: 'Hello World'});
 
-// Or pass DOM element directly
-const element = document.getElementById('item-3');
+// Or pass DOM element directly
+const element = document.getElementById('item-3');
 grid.makeWidget(element, {x: 0, y: 1, w: 4, h: 2});
 ```
 
@@ -1063,9 +1064,9 @@ grid.makeWidget(element, {x: 0, y: 1, w: 4, h: 2});
 margin(value): GridStack;
 ```
 
-Defined in: [gridstack.ts:1762](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1762)
+Defined in: [gridstack.ts:1764](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1764)
 
-Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options.
+Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options.
 Supports CSS string format of 1, 2, or 4 values or a single number.
 
 ###### Parameters
@@ -1083,8 +1084,8 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-grid.margin(10);           // 10px all sides
-grid.margin('10px 20px');  // 10px top/bottom, 20px left/right
+grid.margin(10);           // 10px all sides
+grid.margin('10px 20px');  // 10px top/bottom, 20px left/right
 grid.margin('5px 10px 15px 20px'); // Different for each side
 ```
 
@@ -1094,12 +1095,12 @@ grid.margin('5px 10px 15px 20px'); // Different for each side
 movable(els, val): GridStack;
 ```
 
-Defined in: [gridstack.ts:2227](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2227)
+Defined in: [gridstack.ts:2230](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2230)
 
-Enables/Disables dragging by the user for specific grid elements.
+Enables/Disables dragging by the user for specific grid elements.
 For all items and future items, use enableMove() instead. No-op for static grids.
 
-Note: If you want to prevent an item from moving due to being pushed around by another
+Note: If you want to prevent an item from moving due to being pushed around by another
 during collision, use the 'locked' property instead.
 
 ###### Parameters
@@ -1118,10 +1119,10 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Make specific widgets draggable
+// Make specific widgets draggable
 grid.movable('.my-widget', true);
 
-// Disable dragging for specific widgets
+// Disable dragging for specific widgets
 grid.movable('#fixed-widget', false);
 ```
 
@@ -1179,18 +1180,18 @@ Defined in: [gridstack.ts:1315](https://github.com/adumesny/gridstack.js/blob/ma
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
-Supported events:
-- `added`: Called when widgets are being added to a grid
-- `change`: Occurs when widgets change their position/size due to constraints or direct changes
-- `disable`: Called when grid becomes disabled
-- `dragstart`: Called when grid item starts being dragged
-- `drag`: Called while grid item is being dragged (for each new row/column value)
-- `dragstop`: Called after user is done moving the item, with updated DOM attributes
-- `dropped`: Called when an item has been dropped and accepted over a grid
-- `enable`: Called when grid becomes enabled
-- `removed`: Called when items are being removed from the grid
-- `resizestart`: Called before user starts resizing an item
-- `resize`: Called while grid item is being resized (for each new row/column value)
+Supported events:
+- `added`: Called when widgets are being added to a grid
+- `change`: Occurs when widgets change their position/size due to constraints or direct changes
+- `disable`: Called when grid becomes disabled
+- `dragstart`: Called when grid item starts being dragged
+- `drag`: Called while grid item is being dragged (for each new row/column value)
+- `dragstop`: Called after user is done moving the item, with updated DOM attributes
+- `dropped`: Called when an item has been dropped and accepted over a grid
+- `enable`: Called when grid becomes enabled
+- `removed`: Called when items are being removed from the grid
+- `resizestart`: Called before user starts resizing an item
+- `resize`: Called while grid item is being resized (for each new row/column value)
 - `resizestop`: Called after user is done resizing the item, with updated DOM attributes
 
 ###### Parameters
@@ -1209,14 +1210,14 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Listen to multiple events at once
-grid.on('added removed change', (event, items) => {
-  items.forEach(item => console.log('Item changed:', item));
+// Listen to multiple events at once
+grid.on('added removed change', (event, items) => {
+  items.forEach(item => console.log('Item changed:', item));
 });
 
-// Listen to individual events
-grid.on('added', (event, items) => {
-  items.forEach(item => console.log('Added item:', item));
+// Listen to individual events
+grid.on('added', (event, items) => {
+  items.forEach(item => console.log('Added item:', item));
 });
 ```
 
@@ -1230,18 +1231,18 @@ Defined in: [gridstack.ts:1316](https://github.com/adumesny/gridstack.js/blob/ma
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
-Supported events:
-- `added`: Called when widgets are being added to a grid
-- `change`: Occurs when widgets change their position/size due to constraints or direct changes
-- `disable`: Called when grid becomes disabled
-- `dragstart`: Called when grid item starts being dragged
-- `drag`: Called while grid item is being dragged (for each new row/column value)
-- `dragstop`: Called after user is done moving the item, with updated DOM attributes
-- `dropped`: Called when an item has been dropped and accepted over a grid
-- `enable`: Called when grid becomes enabled
-- `removed`: Called when items are being removed from the grid
-- `resizestart`: Called before user starts resizing an item
-- `resize`: Called while grid item is being resized (for each new row/column value)
+Supported events:
+- `added`: Called when widgets are being added to a grid
+- `change`: Occurs when widgets change their position/size due to constraints or direct changes
+- `disable`: Called when grid becomes disabled
+- `dragstart`: Called when grid item starts being dragged
+- `drag`: Called while grid item is being dragged (for each new row/column value)
+- `dragstop`: Called after user is done moving the item, with updated DOM attributes
+- `dropped`: Called when an item has been dropped and accepted over a grid
+- `enable`: Called when grid becomes enabled
+- `removed`: Called when items are being removed from the grid
+- `resizestart`: Called before user starts resizing an item
+- `resize`: Called while grid item is being resized (for each new row/column value)
 - `resizestop`: Called after user is done resizing the item, with updated DOM attributes
 
 ###### Parameters
@@ -1260,14 +1261,14 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Listen to multiple events at once
-grid.on('added removed change', (event, items) => {
-  items.forEach(item => console.log('Item changed:', item));
+// Listen to multiple events at once
+grid.on('added removed change', (event, items) => {
+  items.forEach(item => console.log('Item changed:', item));
 });
 
-// Listen to individual events
-grid.on('added', (event, items) => {
-  items.forEach(item => console.log('Added item:', item));
+// Listen to individual events
+grid.on('added', (event, items) => {
+  items.forEach(item => console.log('Added item:', item));
 });
 ```
 
@@ -1281,18 +1282,18 @@ Defined in: [gridstack.ts:1317](https://github.com/adumesny/gridstack.js/blob/ma
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
-Supported events:
-- `added`: Called when widgets are being added to a grid
-- `change`: Occurs when widgets change their position/size due to constraints or direct changes
-- `disable`: Called when grid becomes disabled
-- `dragstart`: Called when grid item starts being dragged
-- `drag`: Called while grid item is being dragged (for each new row/column value)
-- `dragstop`: Called after user is done moving the item, with updated DOM attributes
-- `dropped`: Called when an item has been dropped and accepted over a grid
-- `enable`: Called when grid becomes enabled
-- `removed`: Called when items are being removed from the grid
-- `resizestart`: Called before user starts resizing an item
-- `resize`: Called while grid item is being resized (for each new row/column value)
+Supported events:
+- `added`: Called when widgets are being added to a grid
+- `change`: Occurs when widgets change their position/size due to constraints or direct changes
+- `disable`: Called when grid becomes disabled
+- `dragstart`: Called when grid item starts being dragged
+- `drag`: Called while grid item is being dragged (for each new row/column value)
+- `dragstop`: Called after user is done moving the item, with updated DOM attributes
+- `dropped`: Called when an item has been dropped and accepted over a grid
+- `enable`: Called when grid becomes enabled
+- `removed`: Called when items are being removed from the grid
+- `resizestart`: Called before user starts resizing an item
+- `resize`: Called while grid item is being resized (for each new row/column value)
 - `resizestop`: Called after user is done resizing the item, with updated DOM attributes
 
 ###### Parameters
@@ -1311,14 +1312,14 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Listen to multiple events at once
-grid.on('added removed change', (event, items) => {
-  items.forEach(item => console.log('Item changed:', item));
+// Listen to multiple events at once
+grid.on('added removed change', (event, items) => {
+  items.forEach(item => console.log('Item changed:', item));
 });
 
-// Listen to individual events
-grid.on('added', (event, items) => {
-  items.forEach(item => console.log('Added item:', item));
+// Listen to individual events
+grid.on('added', (event, items) => {
+  items.forEach(item => console.log('Added item:', item));
 });
 ```
 
@@ -1332,18 +1333,18 @@ Defined in: [gridstack.ts:1318](https://github.com/adumesny/gridstack.js/blob/ma
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
-Supported events:
-- `added`: Called when widgets are being added to a grid
-- `change`: Occurs when widgets change their position/size due to constraints or direct changes
-- `disable`: Called when grid becomes disabled
-- `dragstart`: Called when grid item starts being dragged
-- `drag`: Called while grid item is being dragged (for each new row/column value)
-- `dragstop`: Called after user is done moving the item, with updated DOM attributes
-- `dropped`: Called when an item has been dropped and accepted over a grid
-- `enable`: Called when grid becomes enabled
-- `removed`: Called when items are being removed from the grid
-- `resizestart`: Called before user starts resizing an item
-- `resize`: Called while grid item is being resized (for each new row/column value)
+Supported events:
+- `added`: Called when widgets are being added to a grid
+- `change`: Occurs when widgets change their position/size due to constraints or direct changes
+- `disable`: Called when grid becomes disabled
+- `dragstart`: Called when grid item starts being dragged
+- `drag`: Called while grid item is being dragged (for each new row/column value)
+- `dragstop`: Called after user is done moving the item, with updated DOM attributes
+- `dropped`: Called when an item has been dropped and accepted over a grid
+- `enable`: Called when grid becomes enabled
+- `removed`: Called when items are being removed from the grid
+- `resizestart`: Called before user starts resizing an item
+- `resize`: Called while grid item is being resized (for each new row/column value)
 - `resizestop`: Called after user is done resizing the item, with updated DOM attributes
 
 ###### Parameters
@@ -1362,14 +1363,14 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Listen to multiple events at once
-grid.on('added removed change', (event, items) => {
-  items.forEach(item => console.log('Item changed:', item));
+// Listen to multiple events at once
+grid.on('added removed change', (event, items) => {
+  items.forEach(item => console.log('Item changed:', item));
 });
 
-// Listen to individual events
-grid.on('added', (event, items) => {
-  items.forEach(item => console.log('Added item:', item));
+// Listen to individual events
+grid.on('added', (event, items) => {
+  items.forEach(item => console.log('Added item:', item));
 });
 ```
 
@@ -1383,18 +1384,18 @@ Defined in: [gridstack.ts:1319](https://github.com/adumesny/gridstack.js/blob/ma
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
-Supported events:
-- `added`: Called when widgets are being added to a grid
-- `change`: Occurs when widgets change their position/size due to constraints or direct changes
-- `disable`: Called when grid becomes disabled
-- `dragstart`: Called when grid item starts being dragged
-- `drag`: Called while grid item is being dragged (for each new row/column value)
-- `dragstop`: Called after user is done moving the item, with updated DOM attributes
-- `dropped`: Called when an item has been dropped and accepted over a grid
-- `enable`: Called when grid becomes enabled
-- `removed`: Called when items are being removed from the grid
-- `resizestart`: Called before user starts resizing an item
-- `resize`: Called while grid item is being resized (for each new row/column value)
+Supported events:
+- `added`: Called when widgets are being added to a grid
+- `change`: Occurs when widgets change their position/size due to constraints or direct changes
+- `disable`: Called when grid becomes disabled
+- `dragstart`: Called when grid item starts being dragged
+- `drag`: Called while grid item is being dragged (for each new row/column value)
+- `dragstop`: Called after user is done moving the item, with updated DOM attributes
+- `dropped`: Called when an item has been dropped and accepted over a grid
+- `enable`: Called when grid becomes enabled
+- `removed`: Called when items are being removed from the grid
+- `resizestart`: Called before user starts resizing an item
+- `resize`: Called while grid item is being resized (for each new row/column value)
 - `resizestop`: Called after user is done resizing the item, with updated DOM attributes
 
 ###### Parameters
@@ -1413,14 +1414,14 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Listen to multiple events at once
-grid.on('added removed change', (event, items) => {
-  items.forEach(item => console.log('Item changed:', item));
+// Listen to multiple events at once
+grid.on('added removed change', (event, items) => {
+  items.forEach(item => console.log('Item changed:', item));
 });
 
-// Listen to individual events
-grid.on('added', (event, items) => {
-  items.forEach(item => console.log('Added item:', item));
+// Listen to individual events
+grid.on('added', (event, items) => {
+  items.forEach(item => console.log('Added item:', item));
 });
 ```
 
@@ -1430,10 +1431,10 @@ grid.on('added', (event, items) => {
 onResize(clientWidth): GridStack;
 ```
 
-Defined in: [gridstack.ts:2024](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2024)
+Defined in: [gridstack.ts:2027](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2027)
 
-called when we are being resized - check if the one Column Mode needs to be turned on/off
-and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
+called when we are being resized - check if the one Column Mode needs to be turned on/off
+and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
 or `sizeToContent` gridItem options.
 
 ###### Parameters
@@ -1452,7 +1453,7 @@ or `sizeToContent` gridItem options.
 prepareDragDrop(el, force?): GridStack;
 ```
 
-Defined in: [gridstack.ts:2710](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2710)
+Defined in: [gridstack.ts:2713](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2713)
 
 prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading
 
@@ -1473,10 +1474,10 @@ prepares the element for drag&drop - this is normally called by makeWidget() unl
 static registerEngine(engineClass): void;
 ```
 
-Defined in: [gridstack.ts:172](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L172)
+Defined in: [gridstack.ts:173](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L173)
 
-call this method to register your engine instead of the default one.
-See instead `GridStackOptions.engineClass` if you only need to
+call this method to register your engine instead of the default one.
+See instead `GridStackOptions.engineClass` if you only need to
 replace just one instance.
 
 ###### Parameters
@@ -1518,7 +1519,7 @@ removeAsSubGrid(nodeThatRemoved?): void;
 
 Defined in: [gridstack.ts:599](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L599)
 
-called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back
+called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back
 to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)
 
 ###### Parameters
@@ -1562,9 +1563,9 @@ Removes widget from the grid.
 resizable(els, val): GridStack;
 ```
 
-Defined in: [gridstack.ts:2253](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2253)
+Defined in: [gridstack.ts:2256](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2256)
 
-Enables/Disables user resizing for specific grid elements.
+Enables/Disables user resizing for specific grid elements.
 For all items and future items, use enableResize() instead. No-op for static grids.
 
 ###### Parameters
@@ -1583,10 +1584,10 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Make specific widgets resizable
+// Make specific widgets resizable
 grid.resizable('.my-widget', true);
 
-// Disable resizing for specific widgets
+// Disable resizing for specific widgets
 grid.resizable('#fixed-size-widget', false);
 ```
 
@@ -1596,12 +1597,12 @@ grid.resizable('#fixed-size-widget', false);
 resizeToContent(el): void;
 ```
 
-Defined in: [gridstack.ts:1652](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1652)
+Defined in: [gridstack.ts:1654](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1654)
 
-Updates widget height to match the content height to avoid vertical scrollbars or dead space.
+Updates widget height to match the content height to avoid vertical scrollbars or dead space.
 This automatically adjusts the widget height based on its content size.
 
-Note: This assumes only 1 child under resizeToContentParent='.grid-stack-item-content'
+Note: This assumes only 1 child under resizeToContentParent='.grid-stack-item-content'
 (sized to gridItem minus padding) that represents the entire content size.
 
 ###### Parameters
@@ -1617,12 +1618,12 @@ Note: This assumes only 1 child under resizeToContentParent='.grid-stack-item-co
 ###### Example
 
 ```ts
-// Resize a widget to fit its content
-const widget = document.querySelector('.grid-stack-item');
+// Resize a widget to fit its content
+const widget = document.querySelector('.grid-stack-item');
 grid.resizeToContent(widget);
 
-// This is commonly used with dynamic content:
-widget.querySelector('.content').innerHTML = 'New longer content...';
+// This is commonly used with dynamic content:
+widget.querySelector('.content').innerHTML = 'New longer content...';
 grid.resizeToContent(widget);
 ```
 
@@ -1632,9 +1633,9 @@ grid.resizeToContent(widget);
 rotate(els, relative?): GridStack;
 ```
 
-Defined in: [gridstack.ts:1727](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1727)
+Defined in: [gridstack.ts:1729](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1729)
 
-Rotate widgets by swapping their width and height. This is typically called when the user presses 'r' during dragging.
+Rotate widgets by swapping their width and height. This is typically called when the user presses 'r' during dragging.
 The rotation swaps the w/h dimensions and adjusts min/max constraints accordingly.
 
 ###### Parameters
@@ -1653,10 +1654,10 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Rotate a specific widget
+// Rotate a specific widget
 grid.rotate('.my-widget');
 
-// Rotate with relative positioning during drag
+// Rotate with relative positioning during drag
 grid.rotate(widget, { left: 50, top: 30 });
 ```
 
@@ -1724,7 +1725,7 @@ setStatic(
 
 Defined in: [gridstack.ts:1470](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1470)
 
-Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
+Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
 Also toggle the grid-stack-static class.
 
 ###### Parameters
@@ -1749,10 +1750,10 @@ static setupDragIn(
    root?): void;
 ```
 
-Defined in: [gridstack.ts:2196](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2196)
+Defined in: [gridstack.ts:2199](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2199)
 
-call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
-Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
+call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
+Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
 is dynamically create and needs to be set later.
 
 ###### Parameters
@@ -1774,7 +1775,7 @@ is dynamically create and needs to be set later.
 protected triggerEvent(event, target): void;
 ```
 
-Defined in: [gridstack.ts:2964](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2964)
+Defined in: [gridstack.ts:2976](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2976)
 
 call given event callback on our main top-most grid (if we're nested)
 
@@ -1795,12 +1796,12 @@ call given event callback on our main top-most grid (if we're nested)
 update(els, opt): GridStack;
 ```
 
-Defined in: [gridstack.ts:1548](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1548)
+Defined in: [gridstack.ts:1550](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1550)
 
-Updates widget position/size and other info. This is used to change widget properties after creation.
+Updates widget position/size and other info. This is used to change widget properties after creation.
 Can update position, size, content, and other widget properties.
 
-Note: If you need to call this on all nodes, use load() instead which will update what changed.
+Note: If you need to call this on all nodes, use load() instead which will update what changed.
 Setting the same x,y for multiple items will be indeterministic and likely unwanted.
 
 ###### Parameters
@@ -1819,18 +1820,18 @@ the grid instance for chaining
 ###### Example
 
 ```ts
-// Update widget size and position
+// Update widget size and position
 grid.update('.my-widget', { x: 2, y: 1, w: 3, h: 2 });
 
-// Update widget content
+// Update widget content
 grid.update(widget, { content: '<p>New content</p>' });
 
-// Update multiple properties
-grid.update('#my-widget', {
-  w: 4,
-  h: 3,
-  noResize: true,
-  locked: true
+// Update multiple properties
+grid.update('#my-widget', {
+  w: 4,
+  h: 3,
+  noResize: true,
+  locked: true
 });
 ```
 
@@ -1860,9 +1861,9 @@ Updates the passed in options on the grid (similar to update(widget) for for the
 willItFit(node): boolean;
 ```
 
-Defined in: [gridstack.ts:1805](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1805)
+Defined in: [gridstack.ts:1807](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1807)
 
-Returns true if the height of the grid will be less than the vertical
+Returns true if the height of the grid will be less than the vertical
 constraint. Always returns true if grid doesn't have height constraint.
 
 ###### Parameters
@@ -1878,10 +1879,10 @@ constraint. Always returns true if grid doesn't have height constraint.
 ###### Example
 
 ```ts
-if (grid.willItFit(newWidget)) {
-  grid.addWidget(newWidget);
-} else {
-  alert('Not enough free space to place the widget');
+if (grid.willItFit(newWidget)) {
+  grid.addWidget(newWidget);
+} else {
+  alert('Not enough free space to place the widget');
 }
 ```
 
@@ -1889,22 +1890,22 @@ if (grid.willItFit(newWidget)) {
 
 | Property | Modifier | Type | Default value | Description | Defined in |
 | ------ | ------ | ------ | ------ | ------ | ------ |
-| <a id="addremovecb"></a> `addRemoveCB?` | `static` | [`AddRemoveFcn`](#addremovefcn) | `undefined` | callback method use when new items|grids needs to be created or deleted, instead of the default item: <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div> grid: <div class="grid-stack">grid content...</div> add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init(). add = false: the item will be removed from DOM (if not already done) grid = true|false for grid vs grid-items | [gridstack.ts:184](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L184) |
-| <a id="animationdelay"></a> `animationDelay` | `public` | `number` | `undefined` | time to wait for animation (if enabled) to be done so content sizing can happen | [gridstack.ts:218](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L218) |
+| <a id="addremovecb"></a> `addRemoveCB?` | `static` | [`AddRemoveFcn`](#addremovefcn) | `undefined` | callback method use when new items|grids needs to be created or deleted, instead of the default item: <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div> grid: <div class="grid-stack">grid content...</div> add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init(). add = false: the item will be removed from DOM (if not already done) grid = true|false for grid vs grid-items | [gridstack.ts:185](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L185) |
+| <a id="animationdelay"></a> `animationDelay` | `public` | `number` | `undefined` | time to wait for animation (if enabled) to be done so content sizing can happen | [gridstack.ts:219](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L219) |
 | <a id="el-4"></a> `el` | `public` | [`GridHTMLElement`](#gridhtmlelement) | `undefined` | the HTML element tied to this grid after it's been initialized | [gridstack.ts:266](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L266) |
-| <a id="engine"></a> `engine` | `public` | [`GridStackEngine`](#gridstackengine-2) | `undefined` | engine used to implement non DOM grid functionality | [gridstack.ts:212](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L212) |
-| <a id="engine-1"></a> `Engine` | `static` | *typeof* [`GridStackEngine`](#gridstackengine-2) | `GridStackEngine` | scoping so users can call new GridStack.Engine(12) for example | [gridstack.ts:209](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L209) |
-| <a id="engineclass"></a> `engineClass` | `static` | *typeof* [`GridStackEngine`](#gridstackengine-2) | `undefined` | - | [gridstack.ts:220](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L220) |
+| <a id="engine"></a> `engine` | `public` | [`GridStackEngine`](#gridstackengine-2) | `undefined` | engine used to implement non DOM grid functionality | [gridstack.ts:213](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L213) |
+| <a id="engine-1"></a> `Engine` | `static` | *typeof* [`GridStackEngine`](#gridstackengine-2) | `GridStackEngine` | scoping so users can call new GridStack.Engine(12) for example | [gridstack.ts:210](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L210) |
+| <a id="engineclass"></a> `engineClass` | `static` | *typeof* [`GridStackEngine`](#gridstackengine-2) | `undefined` | - | [gridstack.ts:221](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L221) |
 | <a id="opts"></a> `opts` | `public` | [`GridStackOptions`](#gridstackoptions) | `{}` | grid options - public for classes to access, but use methods to modify! | [gridstack.ts:266](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L266) |
-| <a id="parentgridnode"></a> `parentGridNode?` | `public` | [`GridStackNode`](#gridstacknode-2) | `undefined` | point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) | [gridstack.ts:215](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L215) |
-| <a id="rendercb"></a> `renderCB?` | `static` | [`RenderFcn`](#renderfcn) | `undefined` | callback to create the content of widgets so the app can control how to store and restore it By default this lib will do 'el.textContent = w.content' forcing text only support for avoiding potential XSS issues. | [gridstack.ts:195](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L195) |
-| <a id="resizeobserver"></a> `resizeObserver` | `protected` | `ResizeObserver` | `undefined` | - | [gridstack.ts:221](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L221) |
-| <a id="resizetocontentcb"></a> `resizeToContentCB?` | `static` | [`ResizeToContentFcn`](#resizetocontentfcn) | `undefined` | callback to use for resizeToContent instead of the built in one | [gridstack.ts:201](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L201) |
-| <a id="resizetocontentparent"></a> `resizeToContentParent` | `static` | `string` | `'.grid-stack-item-content'` | parent class for sizing content. defaults to '.grid-stack-item-content' | [gridstack.ts:203](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L203) |
-| <a id="responselayout"></a> `responseLayout` | `protected` | [`ColumnOptions`](#columnoptions) | `undefined` | - | [gridstack.ts:258](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L258) |
-| <a id="savecb"></a> `saveCB?` | `static` | [`SaveFcn`](#savefcn) | `undefined` | callback during saving to application can inject extra data for each widget, on top of the grid layout properties | [gridstack.ts:189](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L189) |
-| <a id="updatecb"></a> `updateCB?` | `static` | (`w`) => `void` | `undefined` | called after a widget has been updated (eg: load() into an existing list of children) so application can do extra work | [gridstack.ts:198](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L198) |
-| <a id="utils"></a> `Utils` | `static` | *typeof* [`Utils`](#utils-1) | `Utils` | scoping so users can call GridStack.Utils.sort() for example | [gridstack.ts:206](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L206) |
+| <a id="parentgridnode"></a> `parentGridNode?` | `public` | [`GridStackNode`](#gridstacknode-2) | `undefined` | point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) | [gridstack.ts:216](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L216) |
+| <a id="rendercb"></a> `renderCB?` | `static` | [`RenderFcn`](#renderfcn) | `undefined` | callback to create the content of widgets so the app can control how to store and restore it By default this lib will do 'el.textContent = w.content' forcing text only support for avoiding potential XSS issues. | [gridstack.ts:196](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L196) |
+| <a id="resizeobserver"></a> `resizeObserver` | `protected` | `ResizeObserver` | `undefined` | - | [gridstack.ts:222](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L222) |
+| <a id="resizetocontentcb"></a> `resizeToContentCB?` | `static` | [`ResizeToContentFcn`](#resizetocontentfcn) | `undefined` | callback to use for resizeToContent instead of the built in one | [gridstack.ts:202](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L202) |
+| <a id="resizetocontentparent"></a> `resizeToContentParent` | `static` | `string` | `'.grid-stack-item-content'` | parent class for sizing content. defaults to '.grid-stack-item-content' | [gridstack.ts:204](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L204) |
+| <a id="responselayout"></a> `responseLayout` | `protected` | [`ColumnOptions`](#columnoptions) | `undefined` | - | [gridstack.ts:259](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L259) |
+| <a id="savecb"></a> `saveCB?` | `static` | [`SaveFcn`](#savefcn) | `undefined` | callback during saving to application can inject extra data for each widget, on top of the grid layout properties | [gridstack.ts:190](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L190) |
+| <a id="updatecb"></a> `updateCB?` | `static` | (`w`) => `void` | `undefined` | called after a widget has been updated (eg: load() into an existing list of children) so application can do extra work | [gridstack.ts:199](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L199) |
+| <a id="utils"></a> `Utils` | `static` | *typeof* [`Utils`](#utils-1) | `Utils` | scoping so users can call GridStack.Utils.sort() for example | [gridstack.ts:207](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L207) |
 
 ***
 
@@ -2809,8 +2810,8 @@ return true if can fit in grid height constrain only (always true if no maxRow)
 
 Defined in: [utils.ts:97](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L97)
 
-Collection of utility methods used throughout GridStack.
-These are general-purpose helper functions for DOM manipulation,
+Collection of utility methods used throughout GridStack.
+These are general-purpose helper functions for DOM manipulation,
 positioning calculations, object operations, and more.
 
 #### Constructors
@@ -2833,7 +2834,7 @@ new Utils(): Utils;
 static addElStyles(el, styles): void;
 ```
 
-Defined in: [utils.ts:701](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L701)
+Defined in: [utils.ts:667](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L667)
 
 ###### Parameters
 
@@ -2852,7 +2853,7 @@ Defined in: [utils.ts:701](https://github.com/adumesny/gridstack.js/blob/master/
 static appendTo(el, parent): void;
 ```
 
-Defined in: [utils.ts:683](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L683)
+Defined in: [utils.ts:649](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L649)
 
 ###### Parameters
 
@@ -2919,9 +2920,9 @@ the area of overlap (0 if no overlap)
 ###### Example
 
 ```ts
-const overlap = Utils.areaIntercept(
-  {x: 0, y: 0, w: 3, h: 2},
-  {x: 1, y: 0, w: 3, h: 2}
+const overlap = Utils.areaIntercept(
+  {x: 0, y: 0, w: 3, h: 2},
+  {x: 1, y: 0, w: 3, h: 2}
 ); // returns 4 (2x2 overlap)
 ```
 
@@ -2931,7 +2932,7 @@ const overlap = Utils.areaIntercept(
 static canBeRotated(n): boolean;
 ```
 
-Defined in: [utils.ts:804](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L804)
+Defined in: [utils.ts:770](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L770)
 
 true if the item can be rotated (checking for prop, not space available)
 
@@ -2951,7 +2952,7 @@ true if the item can be rotated (checking for prop, not space available)
 static clone<T>(obj): T;
 ```
 
-Defined in: [utils.ts:646](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L646)
+Defined in: [utils.ts:612](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L612)
 
 single level clone, returning a new object with same top fields. This will share sub objects and arrays
 
@@ -2977,9 +2978,9 @@ single level clone, returning a new object with same top fields. This will share
 static cloneDeep<T>(obj): T;
 ```
 
-Defined in: [utils.ts:662](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L662)
+Defined in: [utils.ts:628](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L628)
 
-Recursive clone version that returns a full copy, checking for nested objects and arrays ONLY.
+Recursive clone version that returns a full copy, checking for nested objects and arrays ONLY.
 Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies.
 
 ###### Type Parameters
@@ -3004,7 +3005,7 @@ Note: this will use as-is any key starting with double __ (and not copy inside)
 static cloneNode(el): HTMLElement;
 ```
 
-Defined in: [utils.ts:677](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L677)
+Defined in: [utils.ts:643](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L643)
 
 deep clone the given HTML node, removing teh unique id field
 
@@ -3029,7 +3030,7 @@ static copyPos(
 
 Defined in: [utils.ts:474](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L474)
 
-Copy position and size properties from one widget to another.
+Copy position and size properties from one widget to another.
 Copies x, y, w, h and optionally min/max constraints.
 
 ###### Parameters
@@ -3049,7 +3050,7 @@ the target widget (a)
 ###### Example
 
 ```ts
-Utils.copyPos(widget1, widget2); // Copy position/size
+Utils.copyPos(widget1, widget2); // Copy position/size
 Utils.copyPos(widget1, widget2, true); // Also copy constraints
 ```
 
@@ -3079,7 +3080,7 @@ the created div element
 ###### Example
 
 ```ts
-const div = Utils.createDiv(['grid-item', 'draggable']);
+const div = Utils.createDiv(['grid-item', 'draggable']);
 const nested = Utils.createDiv(['content'], parentDiv);
 ```
 
@@ -3091,7 +3092,7 @@ static defaults(target, ...sources): object;
 
 Defined in: [utils.ts:421](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L421)
 
-Copy unset fields from source objects to target object (shallow merge with defaults).
+Copy unset fields from source objects to target object (shallow merge with defaults).
 Similar to Object.assign but only sets undefined/null fields.
 
 ###### Parameters
@@ -3110,8 +3111,8 @@ the modified target object
 ###### Example
 
 ```ts
-const config = { width: 100 };
-Utils.defaults(config, { width: 200, height: 50 });
+const config = { width: 100 };
+Utils.defaults(config, { width: 200, height: 50 });
 // config is now { width: 100, height: 50 }
 ```
 
@@ -3141,7 +3142,7 @@ the node with matching ID, or undefined if not found
 ###### Example
 
 ```ts
-const node = Utils.find(nodes, 'widget-1');
+const node = Utils.find(nodes, 'widget-1');
 if (node) console.log('Found node at:', node.x, node.y);
 ```
 
@@ -3153,7 +3154,7 @@ static getElement(els, root): HTMLElement;
 
 Defined in: [utils.ts:155](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L155)
 
-Convert a potential selector into a single HTML element.
+Convert a potential selector into a single HTML element.
 Similar to getElements() but returns only the first match.
 
 ###### Parameters
@@ -3172,7 +3173,7 @@ the first HTML element matching the selector, or null if not found
 ###### Example
 
 ```ts
-const element = Utils.getElement('#myWidget');
+const element = Utils.getElement('#myWidget');
 const first = Utils.getElement('.grid-item');
 ```
 
@@ -3184,7 +3185,7 @@ static getElements(els, root): HTMLElement[];
 
 Defined in: [utils.ts:112](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L112)
 
-Convert a potential selector into an actual list of HTML elements.
+Convert a potential selector into an actual list of HTML elements.
 Supports CSS selectors, element references, and special ID handling.
 
 ###### Parameters
@@ -3203,8 +3204,8 @@ array of HTML elements matching the selector
 ###### Example
 
 ```ts
-const elements = Utils.getElements('.grid-item');
-const byId = Utils.getElements('#myWidget');
+const elements = Utils.getElements('.grid-item');
+const byId = Utils.getElements('#myWidget');
 const fromShadow = Utils.getElements('.item', shadowRoot);
 ```
 
@@ -3214,9 +3215,9 @@ const fromShadow = Utils.getElements('.item', shadowRoot);
 static getValuesFromTransformedElement(parent): DragTransform;
 ```
 
-Defined in: [utils.ts:761](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L761)
+Defined in: [utils.ts:727](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L727)
 
-defines an element that is used to get the offset and scale from grid transforms
+defines an element that is used to get the offset and scale from grid transforms
 returns the scale and offsets from said element
 
 ###### Parameters
@@ -3235,7 +3236,7 @@ returns the scale and offsets from said element
 static initEvent<T>(e, info): T;
 ```
 
-Defined in: [utils.ts:718](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L718)
+Defined in: [utils.ts:684](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L684)
 
 ###### Type Parameters
 
@@ -3282,9 +3283,9 @@ true if the positions overlap
 ###### Example
 
 ```ts
-const overlaps = Utils.isIntercepted(
-  {x: 0, y: 0, w: 2, h: 1},
-  {x: 1, y: 0, w: 2, h: 1}
+const overlaps = Utils.isIntercepted(
+  {x: 0, y: 0, w: 2, h: 1},
+  {x: 1, y: 0, w: 2, h: 1}
 ); // true - they overlap
 ```
 
@@ -3314,9 +3315,9 @@ true if the positions are touching
 ###### Example
 
 ```ts
-const touching = Utils.isTouching(
-  {x: 0, y: 0, w: 2, h: 1},
-  {x: 2, y: 0, w: 1, h: 1}
+const touching = Utils.isTouching(
+  {x: 0, y: 0, w: 2, h: 1},
+  {x: 2, y: 0, w: 1, h: 1}
 ); // true - they share an edge
 ```
 
@@ -3345,8 +3346,8 @@ true if the item should be lazy loaded
 ###### Example
 
 ```ts
-if (Utils.lazyLoad(node)) {
-  // Set up intersection observer for lazy loading
+if (Utils.lazyLoad(node)) {
+  // Set up intersection observer for lazy loading
 }
 ```
 
@@ -3358,7 +3359,7 @@ static parseHeight(val): HeightData;
 
 Defined in: [utils.ts:388](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L388)
 
-Parse a height value with units into numeric value and unit string.
+Parse a height value with units into numeric value and unit string.
 Supports px, em, rem, vh, vw, %, cm, mm units.
 
 ###### Parameters
@@ -3376,8 +3377,8 @@ object with h (height) and unit properties
 ###### Example
 
 ```ts
-Utils.parseHeight('100px');  // {h: 100, unit: 'px'}
-Utils.parseHeight('2rem');   // {h: 2, unit: 'rem'}
+Utils.parseHeight('100px');  // {h: 100, unit: 'px'}
+Utils.parseHeight('2rem');   // {h: 2, unit: 'rem'}
 Utils.parseHeight(50);       // {h: 50, unit: 'px'}
 ```
 
@@ -3449,7 +3450,7 @@ static same(a, b): boolean;
 
 Defined in: [utils.ts:450](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L450)
 
-Compare two objects for equality (shallow comparison).
+Compare two objects for equality (shallow comparison).
 Checks if objects have the same fields and values at one level deep.
 
 ###### Parameters
@@ -3468,7 +3469,7 @@ true if objects have the same values
 ###### Example
 
 ```ts
-Utils.same({x: 1, y: 2}, {x: 1, y: 2}); // true
+Utils.same({x: 1, y: 2}, {x: 1, y: 2}); // true
 Utils.same({x: 1}, {x: 1, y: 2}); // false
 ```
 
@@ -3539,8 +3540,8 @@ true if the widget should resize to content
 ###### Example
 
 ```ts
-if (Utils.shouldSizeToContent(node)) {
-  // Trigger content-based resizing
+if (Utils.shouldSizeToContent(node)) {
+  // Trigger content-based resizing
 }
 ```
 
@@ -3553,7 +3554,7 @@ static simulateMouseEvent(
    target?): void;
 ```
 
-Defined in: [utils.ts:734](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L734)
+Defined in: [utils.ts:700](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L700)
 
 copies the MouseEvent (or convert Touch) properties and sends it as another event to the given target
 
@@ -3595,7 +3596,7 @@ the sorted array (modifies original)
 ###### Example
 
 ```ts
-const sorted = Utils.sort(nodes); // Sort top-left to bottom-right
+const sorted = Utils.sort(nodes); // Sort top-left to bottom-right
 const reverse = Utils.sort(nodes, -1); // Sort bottom-right to top-left
 ```
 
@@ -3608,7 +3609,7 @@ static swap(
    b): void;
 ```
 
-Defined in: [utils.ts:785](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L785)
+Defined in: [utils.ts:751](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L751)
 
 swap the given object 2 field values
 
@@ -3659,7 +3660,7 @@ static toBool(v): boolean;
 
 Defined in: [utils.ts:350](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L350)
 
-Convert various value types to boolean.
+Convert various value types to boolean.
 Handles strings like 'false', 'no', '0' as false.
 
 ###### Parameters
@@ -3677,9 +3678,9 @@ boolean representation
 ###### Example
 
 ```ts
-Utils.toBool('true');  // true
-Utils.toBool('false'); // false
-Utils.toBool('no');    // false
+Utils.toBool('true');  // true
+Utils.toBool('false'); // false
+Utils.toBool('no');    // false
 Utils.toBool('1');     // true
 ```
 
@@ -3708,8 +3709,8 @@ number value, or undefined for null/empty strings
 ###### Example
 
 ```ts
-Utils.toNumber('42');  // 42
-Utils.toNumber('');    // undefined
+Utils.toNumber('42');  // 42
+Utils.toNumber('');    // undefined
 Utils.toNumber(null);  // undefined
 ```
 
@@ -3762,7 +3763,7 @@ Defines the options for a Grid
 | <a id="removableoptions"></a> `removableOptions?` | [`DDRemoveOpt`](#ddremoveopt) | allows to override UI removable options. (default?: { accept: '.grid-stack-item' }) | [types.ts:351](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L351) |
 | <a id="resizable-4"></a> `resizable?` | [`DDResizeOpt`](#ddresizeopt) | allows to override UI resizable options. default is { handles: 'se', autoHide: true on desktop, false on mobile } | [types.ts:341](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L341) |
 | <a id="row"></a> `row?` | `number` | fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain) | [types.ts:354](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L354) |
-| <a id="rtl"></a> `rtl?` | `boolean` \| `"auto"` | if true turns grid to RTL. Possible values are true, false, 'auto' (default?: 'auto') See [example](http://gridstack.github.io/gridstack.js/demo/right-to-left(rtl).html) | [types.ts:360](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L360) |
+| <a id="rtl-2"></a> `rtl?` | `boolean` \| `"auto"` | if true turns grid to RTL. Possible values are true, false, 'auto' (default?: 'auto') See [example](http://gridstack.github.io/gridstack.js/demo/right-to-left(rtl).html) | [types.ts:360](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L360) |
 | <a id="sizetocontent-1"></a> `sizeToContent?` | `boolean` | set to true if all grid items (by default, but item can also override) height should be based on content size instead of WidgetItem.h to avoid v-scrollbars. Note: this is still row based, not pixels, so it will use ceil(getBoundingClientRect().height / getCellHeight()) | [types.ts:365](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L365) |
 | <a id="staticgrid"></a> `staticGrid?` | `boolean` | makes grid static (default?: false). If `true` widgets are not movable/resizable. You don't even need draggable/resizable. A CSS class 'grid-stack-static' is also added to the element. | [types.ts:372](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L372) |
 | <a id="styleinhead"></a> ~~`styleInHead?`~~ | `boolean` | **Deprecated** Not used anymore, styles are now implemented with local CSS variables | [types.ts:377](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L377) |
@@ -3977,7 +3978,7 @@ Note: Use enable()/disable() methods to change state as other operations need to
 new DDDraggable(el, option): DDDraggable;
 ```
 
-Defined in: [dd-draggable.ts:65](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L65)
+Defined in: [dd-draggable.ts:69](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L69)
 
 ###### Parameters
 
@@ -4002,7 +4003,7 @@ Defined in: [dd-draggable.ts:65](https://github.com/adumesny/gridstack.js/blob/m
 destroy(): void;
 ```
 
-Defined in: [dd-draggable.ts:118](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L118)
+Defined in: [dd-draggable.ts:131](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L131)
 
 Destroy this drag & drop implementation and clean up resources.
 Removes all event handlers and clears internal state.
@@ -4021,7 +4022,7 @@ Removes all event handlers and clears internal state.
 disable(forDestroy): void;
 ```
 
-Defined in: [dd-draggable.ts:105](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L105)
+Defined in: [dd-draggable.ts:118](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L118)
 
 Disable this drag & drop implementation.
 Subclasses should override to perform additional cleanup.
@@ -4046,7 +4047,7 @@ Subclasses should override to perform additional cleanup.
 enable(): void;
 ```
 
-Defined in: [dd-draggable.ts:91](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L91)
+Defined in: [dd-draggable.ts:104](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L104)
 
 Enable this drag & drop implementation.
 Subclasses should override to perform additional setup.
@@ -4059,13 +4060,27 @@ Subclasses should override to perform additional setup.
 
 [`DDBaseImplement`](#ddbaseimplement).[`enable`](#enable)
 
+##### getAllHandles()
+
+```ts
+protected getAllHandles(): HTMLElement[];
+```
+
+Defined in: [dd-draggable.ts:88](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L88)
+
+return all handles omitting other nested `.grid-stack-item` children (in case node.subGrid isn't set for some reason)
+
+###### Returns
+
+`HTMLElement`[]
+
 ##### off()
 
 ```ts
 off(event): void;
 ```
 
-Defined in: [dd-draggable.ts:87](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L87)
+Defined in: [dd-draggable.ts:100](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L100)
 
 Unregister an event callback for the specified event.
 
@@ -4089,7 +4104,7 @@ Unregister an event callback for the specified event.
 on(event, callback): void;
 ```
 
-Defined in: [dd-draggable.ts:83](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L83)
+Defined in: [dd-draggable.ts:96](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L96)
 
 Register an event callback for the specified event.
 
@@ -4141,7 +4156,7 @@ Result from the callback function, if any
 updateOption(opts): DDDraggable;
 ```
 
-Defined in: [dd-draggable.ts:129](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L129)
+Defined in: [dd-draggable.ts:142](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L142)
 
 Method to update the options and return the DD implementation
 
@@ -4163,9 +4178,11 @@ Method to update the options and return the DD implementation
 
 | Property | Modifier | Type | Default value | Description | Defined in |
 | ------ | ------ | ------ | ------ | ------ | ------ |
-| <a id="el"></a> `el` | `public` | [`GridItemHTMLElement`](#griditemhtmlelement) | `undefined` | The HTML element being extended | [dd-draggable.ts:65](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L65) |
+| <a id="_autoscrollcontainer"></a> `_autoScrollContainer?` | `protected` | `HTMLElement` | `undefined` | - | [dd-draggable.ts:66](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L66) |
+| <a id="_autoscrollmaxspeed"></a> `_autoScrollMaxSpeed?` | `protected` | `number` | `undefined` | - | [dd-draggable.ts:67](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L67) |
+| <a id="el"></a> `el` | `public` | [`GridItemHTMLElement`](#griditemhtmlelement) | `undefined` | The HTML element being extended | [dd-draggable.ts:69](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L69) |
 | <a id="helper"></a> `helper` | `public` | `HTMLElement` | `undefined` | - | [dd-draggable.ts:35](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L35) |
-| <a id="option"></a> `option` | `public` | [`DDDragOpt`](#dddragopt) | `{}` | The drag & drop options/configuration | [dd-draggable.ts:65](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L65) |
+| <a id="option"></a> `option` | `public` | [`DDDragOpt`](#dddragopt) | `{}` | The drag & drop options/configuration | [dd-draggable.ts:69](https://github.com/adumesny/gridstack.js/blob/master/src/dd-draggable.ts#L69) |
 
 ***
 
@@ -4285,7 +4302,7 @@ Subclasses should override to perform additional cleanup.
 drop(e): void;
 ```
 
-Defined in: [dd-droppable.ts:143](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L143)
+Defined in: [dd-droppable.ts:146](https://github.com/adumesny/gridstack.js/blob/master/src/dd-droppable.ts#L146)
 
 item is being dropped on us - called by the drag mouseup handler - this calls the client drop event
 
@@ -4646,7 +4663,7 @@ draggable(
    value?): DDGridStack;
 ```
 
-Defined in: [dd-gridstack.ts:120](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L120)
+Defined in: [dd-gridstack.ts:122](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L122)
 
 Enable/disable/configure dragging for grid elements.
 
@@ -4678,7 +4695,7 @@ dd.draggable(element, {handle: '.drag-handle'});  // Configure drag handle
 dragIn(el, opts): DDGridStack;
 ```
 
-Defined in: [dd-gridstack.ts:144](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L144)
+Defined in: [dd-gridstack.ts:147](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L147)
 
 ###### Parameters
 
@@ -4701,7 +4718,7 @@ droppable(
    value?): DDGridStack;
 ```
 
-Defined in: [dd-gridstack.ts:149](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L149)
+Defined in: [dd-gridstack.ts:152](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L152)
 
 ###### Parameters
 
@@ -4722,7 +4739,7 @@ Defined in: [dd-gridstack.ts:149](https://github.com/adumesny/gridstack.js/blob/
 isDraggable(el): boolean;
 ```
 
-Defined in: [dd-gridstack.ts:174](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L174)
+Defined in: [dd-gridstack.ts:177](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L177)
 
 true if element is draggable
 
@@ -4742,7 +4759,7 @@ true if element is draggable
 isDroppable(el): boolean;
 ```
 
-Defined in: [dd-gridstack.ts:169](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L169)
+Defined in: [dd-gridstack.ts:172](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L172)
 
 true if element is droppable
 
@@ -4762,7 +4779,7 @@ true if element is droppable
 isResizable(el): boolean;
 ```
 
-Defined in: [dd-gridstack.ts:179](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L179)
+Defined in: [dd-gridstack.ts:182](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L182)
 
 true if element is draggable
 
@@ -4782,7 +4799,7 @@ true if element is draggable
 off(el, name): DDGridStack;
 ```
 
-Defined in: [dd-gridstack.ts:195](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L195)
+Defined in: [dd-gridstack.ts:198](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L198)
 
 ###### Parameters
 
@@ -4804,7 +4821,7 @@ on(
    callback): DDGridStack;
 ```
 
-Defined in: [dd-gridstack.ts:183](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L183)
+Defined in: [dd-gridstack.ts:186](https://github.com/adumesny/gridstack.js/blob/master/src/dd-gridstack.ts#L186)
 
 ###### Parameters
 
@@ -4894,7 +4911,7 @@ new DDManager(): DDManager;
 <a id="ddresizable-1"></a>
 ### DDResizable
 
-Defined in: [dd-resizable.ts:32](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L32)
+Defined in: [dd-resizable.ts:41](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L41)
 
 Interface for HTML elements extended with drag & drop options.
 Used to associate DD configuration with DOM elements.
@@ -4938,7 +4955,7 @@ Note: Use enable()/disable() methods to change state as other operations need to
 new DDResizable(el, option): DDResizable;
 ```
 
-Defined in: [dd-resizable.ts:59](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L59)
+Defined in: [dd-resizable.ts:68](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L68)
 
 ###### Parameters
 
@@ -4963,7 +4980,7 @@ Defined in: [dd-resizable.ts:59](https://github.com/adumesny/gridstack.js/blob/m
 destroy(): void;
 ```
 
-Defined in: [dd-resizable.ts:89](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L89)
+Defined in: [dd-resizable.ts:98](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L98)
 
 Destroy this drag & drop implementation and clean up resources.
 Removes all event handlers and clears internal state.
@@ -4982,7 +4999,7 @@ Removes all event handlers and clears internal state.
 disable(): void;
 ```
 
-Defined in: [dd-resizable.ts:83](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L83)
+Defined in: [dd-resizable.ts:92](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L92)
 
 Disable this drag & drop implementation.
 Subclasses should override to perform additional cleanup.
@@ -5001,7 +5018,7 @@ Subclasses should override to perform additional cleanup.
 enable(): void;
 ```
 
-Defined in: [dd-resizable.ts:77](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L77)
+Defined in: [dd-resizable.ts:86](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L86)
 
 Enable this drag & drop implementation.
 Subclasses should override to perform additional setup.
@@ -5020,7 +5037,7 @@ Subclasses should override to perform additional setup.
 off(event): void;
 ```
 
-Defined in: [dd-resizable.ts:73](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L73)
+Defined in: [dd-resizable.ts:82](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L82)
 
 Unregister an event callback for the specified event.
 
@@ -5044,7 +5061,7 @@ Unregister an event callback for the specified event.
 on(event, callback): void;
 ```
 
-Defined in: [dd-resizable.ts:69](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L69)
+Defined in: [dd-resizable.ts:78](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L78)
 
 Register an event callback for the specified event.
 
@@ -5096,7 +5113,7 @@ Result from the callback function, if any
 updateOption(opts): DDResizable;
 ```
 
-Defined in: [dd-resizable.ts:96](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L96)
+Defined in: [dd-resizable.ts:105](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L105)
 
 Method to update the options and return the DD implementation
 
@@ -5118,8 +5135,8 @@ Method to update the options and return the DD implementation
 
 | Property | Modifier | Type | Default value | Description | Defined in |
 | ------ | ------ | ------ | ------ | ------ | ------ |
-| <a id="el-3"></a> `el` | `public` | [`GridItemHTMLElement`](#griditemhtmlelement) | `undefined` | The HTML element being extended | [dd-resizable.ts:59](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L59) |
-| <a id="option-2"></a> `option` | `public` | [`DDResizableOpt`](#ddresizableopt) | `{}` | The drag & drop options/configuration | [dd-resizable.ts:59](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L59) |
+| <a id="el-3"></a> `el` | `public` | [`GridItemHTMLElement`](#griditemhtmlelement) | `undefined` | The HTML element being extended | [dd-resizable.ts:68](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L68) |
+| <a id="option-2"></a> `option` | `public` | [`DDResizableOpt`](#ddresizableopt) | `{}` | The drag & drop options/configuration | [dd-resizable.ts:68](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L68) |
 
 ***
 
@@ -5200,7 +5217,7 @@ Used with the responsive.breakpoints option.
 <a id="cellposition"></a>
 ### CellPosition
 
-Defined in: [gridstack.ts:56](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L56)
+Defined in: [gridstack.ts:57](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L57)
 
 Defines the position of a cell inside the grid
 
@@ -5208,8 +5225,8 @@ Defines the position of a cell inside the grid
 
 | Property | Type | Defined in |
 | ------ | ------ | ------ |
-| <a id="x"></a> `x` | `number` | [gridstack.ts:57](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L57) |
-| <a id="y"></a> `y` | `number` | [gridstack.ts:58](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L58) |
+| <a id="x"></a> `x` | `number` | [gridstack.ts:58](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L58) |
+| <a id="y"></a> `y` | `number` | [gridstack.ts:59](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L59) |
 
 ***
 
@@ -5230,6 +5247,7 @@ Drag&Drop dragging options
 | <a id="handle"></a> `handle?` | `string` | class selector of items that can be dragged. default to '.grid-stack-item-content' | [types.ts:485](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L485) |
 | <a id="helper-1"></a> `helper?` | `"clone"` \| (`el`) => `HTMLElement` | helper function when dropping: 'clone' or your own method | [types.ts:495](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L495) |
 | <a id="pause"></a> `pause?` | `number` \| `boolean` | if set (true | msec), dragging placement (collision) will only happen after a pause by the user. Note: this is Global | [types.ts:489](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L489) |
+| <a id="rtl"></a> `rtl?` | `boolean` | - | [types.ts:500](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L500) |
 | <a id="scroll"></a> `scroll?` | `boolean` | default to `true` | [types.ts:491](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L491) |
 | <a id="start"></a> `start?` | (`event`, `ui`) => `void` | callbacks | [types.ts:497](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L497) |
 | <a id="stop"></a> `stop?` | (`event`) => `void` | - | [types.ts:498](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L498) |
@@ -5330,6 +5348,7 @@ Drag&Drop resize options
 | <a id="minheight"></a> `minHeight?` | `number` | - | - | [dd-resizable.ts:20](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L20) |
 | <a id="minwidth"></a> `minWidth?` | `number` | - | - | [dd-resizable.ts:21](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L21) |
 | <a id="resize"></a> `resize?` | (`event`, `ui`) => `void` | - | - | [dd-resizable.ts:24](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L24) |
+| <a id="rtl-1"></a> `rtl?` | `boolean` | - | - | [dd-resizable.ts:25](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L25) |
 | <a id="start-2"></a> `start?` | (`event`, `ui`) => `void` | - | - | [dd-resizable.ts:22](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L22) |
 | <a id="stop-2"></a> `stop?` | (`event`) => `void` | - | - | [dd-resizable.ts:23](https://github.com/adumesny/gridstack.js/blob/master/src/dd-resizable.ts#L23) |
 
@@ -5359,7 +5378,7 @@ Drag&Drop resize options
 <a id="dduidata"></a>
 ### DDUIData
 
-Defined in: [types.ts:512](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L512)
+Defined in: [types.ts:518](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L518)
 
 data that is passed during drag and resizing callbacks
 
@@ -5367,9 +5386,9 @@ data that is passed during drag and resizing callbacks
 
 | Property | Type | Defined in |
 | ------ | ------ | ------ |
-| <a id="draggable-2"></a> `draggable?` | `HTMLElement` | [types.ts:515](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L515) |
-| <a id="position"></a> `position?` | [`Position`](#position-1) | [types.ts:513](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L513) |
-| <a id="size"></a> `size?` | [`Size`](#size-1) | [types.ts:514](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L514) |
+| <a id="draggable-2"></a> `draggable?` | `HTMLElement` | [types.ts:521](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L521) |
+| <a id="position"></a> `position?` | [`Position`](#position-1) | [types.ts:519](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L519) |
+| <a id="size"></a> `size?` | [`Size`](#size-1) | [types.ts:520](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L520) |
 
 ***
 
@@ -5392,7 +5411,7 @@ Defined in: [utils.ts:13](https://github.com/adumesny/gridstack.js/blob/master/s
 <a id="gridhtmlelement"></a>
 ### GridHTMLElement
 
-Defined in: [gridstack.ts:42](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L42)
+Defined in: [gridstack.ts:43](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L43)
 
 #### Extends
 
@@ -5402,7 +5421,7 @@ Defined in: [gridstack.ts:42](https://github.com/adumesny/gridstack.js/blob/mast
 
 | Property | Type | Defined in |
 | ------ | ------ | ------ |
-| <a id="gridstack"></a> `gridstack?` | [`GridStack`](#gridstack-1) | [gridstack.ts:43](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L43) |
+| <a id="gridstack"></a> `gridstack?` | [`GridStack`](#gridstack-1) | [gridstack.ts:44](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L44) |
 
 ***
 
@@ -5449,6 +5468,25 @@ options used during creation - similar to GridStackOptions
 
 ***
 
+<a id="gridstackmouseevent"></a>
+### GridStackMouseEvent
+
+Defined in: [types.ts:585](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L585)
+
+#### Extends
+
+- `MouseEvent`
+
+#### Properties
+
+| Property | Type | Defined in |
+| ------ | ------ | ------ |
+| <a id="hasmovedx"></a> `hasMovedX?` | `boolean` | [types.ts:587](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L587) |
+| <a id="hasmovedy"></a> `hasMovedY?` | `boolean` | [types.ts:588](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L588) |
+| <a id="resizedir"></a> `resizeDir?` | `string` | [types.ts:586](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L586) |
+
+***
+
 <a id="gridstackmoveopts"></a>
 ### GridStackMoveOpts
 
@@ -5487,7 +5525,7 @@ options used during GridStackEngine.moveNode()
 <a id="gridstacknode-2"></a>
 ### GridStackNode
 
-Defined in: [types.ts:529](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L529)
+Defined in: [types.ts:535](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L535)
 
 internal runtime descriptions describing the widgets in the grid
 
@@ -5501,8 +5539,8 @@ internal runtime descriptions describing the widgets in the grid
 | ------ | ------ | ------ | ------ | ------ |
 | <a id="autoposition"></a> `autoPosition?` | `boolean` | if true then x, y parameters will be ignored and widget will be places on the first available position (default?: false) | [`GridStackWidget`](#gridstackwidget).[`autoPosition`](#autoposition-1) | [types.ts:428](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L428) |
 | <a id="content"></a> `content?` | `string` | html to append inside as content | [`GridStackWidget`](#gridstackwidget).[`content`](#content-1) | [types.ts:446](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L446) |
-| <a id="el-5"></a> `el?` | [`GridItemHTMLElement`](#griditemhtmlelement) | pointer back to HTML element | - | [types.ts:531](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L531) |
-| <a id="grid"></a> `grid?` | [`GridStack`](#gridstack-1) | pointer back to parent Grid instance | - | [types.ts:533](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L533) |
+| <a id="el-5"></a> `el?` | [`GridItemHTMLElement`](#griditemhtmlelement) | pointer back to HTML element | - | [types.ts:537](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L537) |
+| <a id="grid"></a> `grid?` | [`GridStack`](#gridstack-1) | pointer back to parent Grid instance | - | [types.ts:539](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L539) |
 | <a id="h-1"></a> `h?` | `number` | widget dimension height (default?: 1) | [`GridStackWidget`](#gridstackwidget).[`h`](#h-3) | [types.ts:420](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L420) |
 | <a id="id"></a> `id?` | `string` | value for `gs-id` stored on the widget (default?: undefined) | [`GridStackWidget`](#gridstackwidget).[`id`](#id-1) | [types.ts:444](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L444) |
 | <a id="lazyload"></a> `lazyLoad?` | `boolean` | true when widgets are only created when they scroll into view (visible) | [`GridStackWidget`](#gridstackwidget).[`lazyLoad`](#lazyload-2) | [types.ts:448](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L448) |
@@ -5515,9 +5553,9 @@ internal runtime descriptions describing the widgets in the grid
 | <a id="noresize"></a> `noResize?` | `boolean` | prevent direct resizing by the user (default?: undefined = un-constrained) | [`GridStackWidget`](#gridstackwidget).[`noResize`](#noresize-1) | [types.ts:438](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L438) |
 | <a id="resizetocontentparent-1"></a> `resizeToContentParent?` | `string` | local override of GridStack.resizeToContentParent that specify the class to use for the parent (actual) vs child (wanted) height | [`GridStackWidget`](#gridstackwidget).[`resizeToContentParent`](#resizetocontentparent-2) | [types.ts:453](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L453) |
 | <a id="sizetocontent"></a> `sizeToContent?` | `number` \| `boolean` | local (vs grid) override - see GridStackOptions. Note: This also allow you to set a maximum h value (but user changeable during normal resizing) to prevent unlimited content from taking too much space (get scrollbar) | [`GridStackWidget`](#gridstackwidget).[`sizeToContent`](#sizetocontent-2) | [types.ts:451](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L451) |
-| <a id="subgrid"></a> `subGrid?` | [`GridStack`](#gridstack-1) | actual sub-grid instance | - | [types.ts:535](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L535) |
+| <a id="subgrid"></a> `subGrid?` | [`GridStack`](#gridstack-1) | actual sub-grid instance | - | [types.ts:541](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L541) |
 | <a id="subgridopts"></a> `subGridOpts?` | [`GridStackOptions`](#gridstackoptions) | optional nested grid options and list of children, which then turns into actual instance at runtime to get options from | [`GridStackWidget`](#gridstackwidget).[`subGridOpts`](#subgridopts-2) | [types.ts:455](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L455) |
-| <a id="visibleobservable"></a> `visibleObservable?` | `IntersectionObserver` | allow delay creation when visible | - | [types.ts:537](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L537) |
+| <a id="visibleobservable"></a> `visibleObservable?` | `IntersectionObserver` | allow delay creation when visible | - | [types.ts:543](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L543) |
 | <a id="w-2"></a> `w?` | `number` | widget dimension width (default?: 1) | [`GridStackWidget`](#gridstackwidget).[`w`](#w-4) | [types.ts:418](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L418) |
 | <a id="x-2"></a> `x?` | `number` | widget position x (default?: 0) | [`GridStackWidget`](#gridstackwidget).[`x`](#x-4) | [types.ts:414](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L414) |
 | <a id="y-2"></a> `y?` | `number` | widget position y (default?: 0) | [`GridStackWidget`](#gridstackwidget).[`y`](#y-4) | [types.ts:416](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L416) |
@@ -5647,7 +5685,7 @@ Method to update the options and return the DD implementation
 <a id="mouseposition"></a>
 ### MousePosition
 
-Defined in: [gridstack.ts:50](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L50)
+Defined in: [gridstack.ts:51](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L51)
 
 Defines the coordinates of an object
 
@@ -5655,15 +5693,15 @@ Defines the coordinates of an object
 
 | Property | Type | Defined in |
 | ------ | ------ | ------ |
-| <a id="left"></a> `left` | `number` | [gridstack.ts:52](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L52) |
-| <a id="top"></a> `top` | `number` | [gridstack.ts:51](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L51) |
+| <a id="left"></a> `left` | `number` | [gridstack.ts:53](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L53) |
+| <a id="top"></a> `top` | `number` | [gridstack.ts:52](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L52) |
 
 ***
 
 <a id="position-1"></a>
 ### Position
 
-Defined in: [types.ts:505](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L505)
+Defined in: [types.ts:506](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L506)
 
 #### Extended by
 
@@ -5671,17 +5709,17 @@ Defined in: [types.ts:505](https://github.com/adumesny/gridstack.js/blob/master/
 
 #### Properties
 
-| Property | Type | Defined in |
-| ------ | ------ | ------ |
-| <a id="left-1"></a> `left` | `number` | [types.ts:507](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L507) |
-| <a id="top-1"></a> `top` | `number` | [types.ts:506](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L506) |
+| Property | Type | Description | Defined in |
+| ------ | ------ | ------ | ------ |
+| <a id="left-1"></a> `left` | `number` | Start position of the element on the X axis. In LTR mode, this is the coordinate from the left side. In RTL mode it's actually the coordinate from the right side. | [types.ts:513](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L513) |
+| <a id="top-1"></a> `top` | `number` | - | [types.ts:507](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L507) |
 
 ***
 
 <a id="rect-1"></a>
 ### Rect
 
-Defined in: [types.ts:509](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L509)
+Defined in: [types.ts:515](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L515)
 
 #### Extends
 
@@ -5689,12 +5727,12 @@ Defined in: [types.ts:509](https://github.com/adumesny/gridstack.js/blob/master/
 
 #### Properties
 
-| Property | Type | Inherited from | Defined in |
-| ------ | ------ | ------ | ------ |
-| <a id="height"></a> `height` | `number` | [`Size`](#size-1).[`height`](#height-1) | [types.ts:503](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L503) |
-| <a id="left-2"></a> `left` | `number` | [`Position`](#position-1).[`left`](#left-1) | [types.ts:507](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L507) |
-| <a id="top-2"></a> `top` | `number` | [`Position`](#position-1).[`top`](#top-1) | [types.ts:506](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L506) |
-| <a id="width"></a> `width` | `number` | [`Size`](#size-1).[`width`](#width-1) | [types.ts:502](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L502) |
+| Property | Type | Description | Inherited from | Defined in |
+| ------ | ------ | ------ | ------ | ------ |
+| <a id="height"></a> `height` | `number` | - | [`Size`](#size-1).[`height`](#height-1) | [types.ts:504](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L504) |
+| <a id="left-2"></a> `left` | `number` | Start position of the element on the X axis. In LTR mode, this is the coordinate from the left side. In RTL mode it's actually the coordinate from the right side. | [`Position`](#position-1).[`left`](#left-1) | [types.ts:513](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L513) |
+| <a id="top-2"></a> `top` | `number` | - | [`Position`](#position-1).[`top`](#top-1) | [types.ts:507](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L507) |
+| <a id="width"></a> `width` | `number` | - | [`Size`](#size-1).[`width`](#width-1) | [types.ts:503](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L503) |
 
 ***
 
@@ -5723,7 +5761,7 @@ NOTE: Make sure to include the appropriate CSS (gridstack-extra.css) to support
 <a id="size-1"></a>
 ### Size
 
-Defined in: [types.ts:501](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L501)
+Defined in: [types.ts:502](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L502)
 
 #### Extended by
 
@@ -5733,8 +5771,8 @@ Defined in: [types.ts:501](https://github.com/adumesny/gridstack.js/blob/master/
 
 | Property | Type | Defined in |
 | ------ | ------ | ------ |
-| <a id="height-1"></a> `height` | `number` | [types.ts:503](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L503) |
-| <a id="width-1"></a> `width` | `number` | [types.ts:502](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L502) |
+| <a id="height-1"></a> `height` | `number` | [types.ts:504](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L504) |
+| <a id="width-1"></a> `width` | `number` | [types.ts:503](https://github.com/adumesny/gridstack.js/blob/master/src/types.ts#L503) |
 
 ## Variables
 
@@ -6042,7 +6080,7 @@ type GridStackEvent =
   | "resizecontent";
 ```
 
-Defined in: [gridstack.ts:46](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L46)
+Defined in: [gridstack.ts:47](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L47)
 
 list of possible events, or space separated list of them