@bryntum/grid-angular-thin 7.2.4 → 7.3.1

package/src/lib/bryntum-grid.component.ts

@@ -7,18 +7,18 @@ import { Component, ElementRef, EventEmitter, Output, Input, SimpleChange, Simpl
 
 import WrapperHelper from './wrapper.helper';
 
-import { AjaxStore, AjaxStoreConfig, Base, Color, Container, DomConfig, FormulaProviderConfig, KeyMapConfig, Mask, MaskConfig, Menu, MenuItem, MenuItemEntry, Model, ModelConfig, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, ScrollManager, ScrollManagerConfig, Scroller, ScrollerConfig, StateProvider, Store, StoreConfig, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, Widget } from '@bryntum/core-thin';
+import { AjaxStore, AjaxStoreConfig, Base, Color, Container, DomConfig, FormulaProviderConfig, InstancePlugin, KeyMapConfig, Mask, MaskConfig, Menu, MenuItem, MenuItemEntry, Model, ModelConfig, PagingToolbarConfig, Panel, PanelCollapserConfig, PanelCollapserOverlayConfig, PanelHeader, ScrollManager, ScrollManagerConfig, Scroller, ScrollerConfig, StateProvider, Store, StoreConfig, TabConfig, Tool, ToolConfig, ToolbarConfig, ToolbarItems, TooltipConfig, Widget } from '@bryntum/core-thin';
 import { AI, AIConfig, AIFilter, AIFilterConfig, CellCopyPaste, CellCopyPasteConfig, CellEdit, CellEditConfig, CellEditorContext, CellMenu, CellMenuConfig, CellTooltip, CellTooltipConfig, Charts, ChartsConfig, Column, ColumnAutoWidth, ColumnAutoWidthConfig, ColumnDragToolbar, ColumnDragToolbarConfig, ColumnPicker, ColumnPickerConfig, ColumnRename, ColumnRenameConfig, ColumnReorder, ColumnReorderConfig, ColumnResize, ColumnResizeConfig, ColumnStore, ColumnStoreConfig, GridContainerItemConfig, EmptyTextDomConfig, ExcelExporter, ExcelExporterConfig, ExportConfig, FileDrop, FileDropConfig, FillHandle, FillHandleConfig, Filter, FilterBar, FilterBarConfig, FilterConfig, Grid, GridBase, GridColumnConfig, GridListeners, GridLocation, GridLocationConfig, GridSelectionMode, GridStateInfo, Group, GroupConfig, GroupSummary, GroupSummaryConfig, HeaderMenu, HeaderMenuConfig, LockRows, LockRowsConfig, MergeCells, MergeCellsConfig, PdfExport, PdfExportConfig, PinColumns, PinColumnsConfig, PreserveScrollOptions, Print, PrintConfig, QuickFind, QuickFindConfig, RecordPositionContext, RegionResize, RegionResizeConfig, ResponsiveLevelConfig, Row, RowCopyPaste, RowCopyPasteConfig, RowEdit, RowEditConfig, RowEditorContext, RowExpander, RowExpanderConfig, RowReorder, RowReorderConfig, RowResize, RowResizeConfig, Search, SearchConfig, Sort, SortConfig, Split, SplitConfig, StickyCells, StickyCellsConfig, Stripe, StripeConfig, SubGrid, SubGridConfig, Summary, SummaryConfig, Tree, TreeConfig, TreeGroup, TreeGroupConfig, XLSColumn } from '@bryntum/grid-thin';
 
-import { StringHelper } from '@bryntum/core-thin';
+import { DomHelper, StringHelper } from '@bryntum/core-thin';
+import { initThemeInShadowRoots } from './shadowdom.helper';
 
 export type BryntumGridProps = {
     // Configs
     /**
      * Element (or element id) to adopt as this Widget's encapsulating element. The widget's
      * content will be placed inside this element.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-adopt)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-adopt)
      */
     adopt ? : HTMLElement|string
     /**
@@ -53,15 +53,13 @@ export type BryntumGridProps = {
     /**
      * A localizable string (May contain `'L{}'` tokens which resolve in the locale file) to inject
      * into an element which will be linked using the `aria-describedby` attribute.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ariaDescription)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ariaDescription)
      */
     ariaDescription ? : string
     /**
      * A localizable string (May contain `'L{}'` tokens which resolve in the locale file) to inject as
      * the `aria-label` attribute.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ariaLabel)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ariaLabel)
      */
     ariaLabel ? : string
     /**
@@ -73,14 +71,12 @@ export type BryntumGridProps = {
     /**
      * A Config object representing the configuration of a [Toolbar](https://bryntum.com/products/grid/docs/api/Core/widget/Toolbar),
      * or array of config objects representing the child items of a Toolbar. Another way to add a bbar is to use [strips](https://bryntum.com/products/grid/docs/api/Core/widget/Panel#config-strips).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-bbar)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-bbar)
      */
     bbar ? : (GridContainerItemConfig|string)[]|ToolbarConfig|PagingToolbarConfig|null
     /**
      * Custom CSS classes to add to the panel's body element.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-bodyCls)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-bodyCls)
      */
     bodyCls ? : string|object
     /**
@@ -90,21 +86,18 @@ export type BryntumGridProps = {
     /**
      * An object where property names with a truthy value indicate which events should bubble up the ownership
      * hierarchy when triggered.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-bubbleEvents)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-bubbleEvents)
      */
     bubbleEvents ? : object
     /**
      * Set to `false` to not call onXXX method names (e.g. `onShow`, `onClick`), as an easy way to listen for events.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-callOnFunctions)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-callOnFunctions)
      */
     callOnFunctions ? : boolean
     /**
      * By default, if an event handler throws an exception, the error propagates up the stack and the
      * application state is undefined. Code which follows the event handler will *not* be executed.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-catchEventHandlerExceptions)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-catchEventHandlerExceptions)
      */
     catchEventHandlerExceptions ? : boolean
     /**
@@ -117,8 +110,7 @@ export type BryntumGridProps = {
      * Custom CSS classes to add to element.
      * May be specified as a space separated string, or as an object in which property names
      * with truthy values are used as the class names:
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-cls)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-cls)
      */
     cls ? : string|object
     /**
@@ -128,15 +120,13 @@ export type BryntumGridProps = {
     collapsed ? : boolean
     /**
      * This config enables collapsibility for the panel. See [collapsed](https://bryntum.com/products/grid/docs/api/Core/widget/Panel#config-collapsed).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-collapsible)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-collapsible)
      */
     collapsible ? : boolean|PanelCollapserConfig|PanelCollapserOverlayConfig
     /**
      * Applies the specified color to the widget, by setting the `--b-primary` CSS variable in the widgets
      * `style` block.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-color)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-color)
      */
     color ? : Color
     /**
@@ -150,8 +140,7 @@ export type BryntumGridProps = {
     /**
      * Accepts column definitions for the grid during initialization. They will be used to create
      * [Column](https://bryntum.com/products/grid/docs/api/Grid/column/Column) instances that are added to a [ColumnStore](#Grid/data/ColumnStore).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-columns)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-columns)
      */
     columns ? : ColumnStore|GridColumnConfig[]|ColumnStoreConfig
     config ? : object
@@ -159,8 +148,7 @@ export type BryntumGridProps = {
      * Custom CSS classes to add to the [contentElement](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#property-contentElement).
      * May be specified as a space separated string, or as an object in which property names
      * with truthy values are used as the class names:
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-contentElementCls)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-contentElementCls)
      */
     contentElementCls ? : string|object
     /**
@@ -172,8 +160,7 @@ export type BryntumGridProps = {
      * Convenient shortcut to set data in grids store both during initialization and at runtime. Can also be
      * used to retrieve data at runtime, although we do recommend interacting with Grids store instead using
      * the [store](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#property-store) property.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-data)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-data)
      */
     data ? : object[]|Model[]|ModelConfig[]
     /**
@@ -194,16 +181,15 @@ export type BryntumGridProps = {
      */
     destroyStore ? : boolean
     /**
-     * Check for CSS compatibility issues when upgrading to v7. Performs the following checks:
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-detectCSSCompatibilityIssues)
+     * Check for CSS compatibility and inclusion related issues and try to auto fix them. Performs the following
+     * checks:
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-detectCSSCompatibilityIssues)
      */
     detectCSSCompatibilityIssues ? : boolean
     /**
      * Disable or enable the widget. It is similar to [readOnly](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#config-readOnly) except a disabled widget
      * cannot be focused, uses a different rendition (usually greyish) and does not allow selecting its value.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-disabled)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-disabled)
      */
     disabled ? : boolean|'inert'
     /**
@@ -223,43 +209,39 @@ export type BryntumGridProps = {
      * [strips collection](https://bryntum.com/products/grid/docs/api/Core/widget/Panel#config-strips). Typical values for this config are `'top'`,
      * `'bottom'`, `'left'`, or `'right'`, which cause the widget to be placed on that side of the panel's
      * body. Such widgets are called "edge strips".
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-dock)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-dock)
      */
     dock ? : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object
     /**
      * Make this Panel a docked drawer which slides out from one side of the browser viewport by default.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-drawer)
-     * @param {'start','left','end','right','top','bottom'} side The side of the viewport to dock the drawer to.  * `'start'` means the `inline-start` side. * `'end'` means the `inline-end` side.
-     * @param {string,number} size The size of the drawer in its collapsible axis.
-     * @param {boolean} inline If using the [appendTo](https://bryntum.com/products/grid/docs/api/Core/widget/Panel#config-appendTo) config to place the drawer inside a host widget, this may be set to `true` to make the drawer inline within that host. Note that, if using this, the layout of the host element must have `flex-direction` set appropriately.
-     * @param {boolean,object} autoClose Specifies what user actions should automatically close the drawer. Defaults to closing when the user clicks outside of the drawer or when focus moves outside of the drawer.
-     * @param {boolean,string} autoClose.mousedown If the user clicks outside of the drawer, the drawer will automatically be hidden. If the value is a string, it is used as a CSS selector to filter clicks which should close the drawer.
-     * @param {boolean,string} autoClose.focusout If focus moves outside of the drawer, the drawer will automatically be hidden.
-     * @param {string} autoClose.mouseout Hides the drawer when the mouse leaves the drawer after the `autoCloseDelay` period.
-     * @param {number} autoCloseDelay When using `mouseout`, this is the delay in milliseconds
-     */
-    drawer ? : boolean|{side?: 'start'|'left'|'end'|'right'|'top'|'bottom', size?: string|number, inline?: boolean, autoClose: { mousedown?: boolean|string, focusout?: boolean|string, mouseout?: string }, autoCloseDelay?: number}
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-drawer)
+     * @param {'start','left','end','right','top','bottom'} [side] The side of the viewport to dock the drawer to.  * `'start'` means the `inline-start` side. * `'end'` means the `inline-end` side.
+     * @param {string,number} [size] The size of the drawer in its collapsible axis.
+     * @param {boolean} [inline] If using the [appendTo](https://bryntum.com/products/grid/docs/api/Core/widget/Panel#config-appendTo) config to place the drawer inside a host widget, this may be set to `true` to make the drawer inline within that host. Note that, if using this, the layout of the host element must have `flex-direction` set appropriately.
+     * @param {boolean,object} [autoClose] Specifies what user actions should automatically close the drawer. Defaults to closing when the user clicks outside of the drawer or when focus moves outside of the drawer.
+     * @param {boolean,string} [autoClose.mousedown] If the user clicks outside of the drawer, the drawer will automatically be hidden. If the value is a string, it is used as a CSS selector to filter clicks which should close the drawer.
+     * @param {boolean,string} [autoClose.focusout] If focus moves outside of the drawer, the drawer will automatically be hidden.
+     * @param {string} [autoClose.mouseout] Hides the drawer when the mouse leaves the drawer after the `autoCloseDelay` period.
+     * @param {number} [autoCloseDelay] When using `mouseout`, this is the delay in milliseconds
+     */
+    drawer ? : boolean|{ side?: 'start'|'left'|'end'|'right'|'top'|'bottom', size?: string|number, inline?: boolean, autoClose?: boolean|{ mousedown?: boolean|string, focusout?: boolean|string, mouseout?: string }, autoCloseDelay?: number }
     /**
      * An object specifying attributes to assign to the root element of this widget.
      * Set `null` value to attribute to remove it.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-elementAttributes)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-elementAttributes)
      */
     elementAttributes ? : Record<string, string|null>
     /**
      * Text or HTML, or a [EmptyTextDomConfig](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#typedef-EmptyTextDomConfig) block to display when there is no data to display in the grid.
      * When using multiple Grid regions, provide the `region` property to decide where the text is shown.
      * By default, it is shown in the first region.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-emptyText)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-emptyText)
      */
     emptyText ? : string|EmptyTextDomConfig
     /**
-     * Configure this as `true` to allow elements within cells to be styled as `position: sticky`.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-enableSticky)
+     * Set to `true` to enable the [StickyCells](https://bryntum.com/products/grid/docs/api/Grid/feature/StickyCells) feature, which pins cell
+     * content to the top of the grid while rows scroll off the top but remain visible.
+     * @deprecated 7.3.0 Use `features : { stickyCells : true }` instead
      */
     enableSticky ? : boolean
     /**
@@ -283,8 +265,7 @@ export type BryntumGridProps = {
      * Use fixed row height. Setting this to `true` will configure the underlying RowManager to use fixed row
      * height, which sacrifices the ability to use rows with variable height to gain a fraction better
      * performance.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-fixedRowHeight)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-fixedRowHeight)
      */
     fixedRowHeight ? : boolean
     /**
@@ -298,41 +279,35 @@ export type BryntumGridProps = {
     /**
      * Config object of a footer. May contain a `dock`, `html` and a `cls` property. A footer is not a widget,
      * but rather plain HTML that follows the last element of the panel's body and [strips](https://bryntum.com/products/grid/docs/api/Core/widget/Panel#config-strips).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-footer)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-footer)
+     * @property {'top','right','bottom','left','start','end'} dock Where to dock
+     * @property {string} html Html to populate the footer with
+     * @property {string} cls CSS class to add to the footer
      */
-    footer ? : {
-        dock?: 'top'|'right'|'bottom'|'left'|'start'|'end'
-        html?: string
-        cls?: string
-    }|string
+    footer ? : object|string
     /**
      * An object which names formula prefixes which will be applied to all columns configured with
      * `formula : true`.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-formulaProviders)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-formulaProviders)
      */
     formulaProviders ? : Record<string, FormulaProviderConfig>
     /**
      * Refresh entire row when a record changes (`true`) or, if possible, only the cells affected (`false`).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-fullRowRefresh)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-fullRowRefresh)
      */
     fullRowRefresh ? : boolean
     /**
      * A function called for each row to determine its height. It is passed a [record](https://bryntum.com/products/grid/docs/api/Core/data/Model) and
      * expected to return the desired height of that records row. If the function returns a falsy value, Grids
      * configured [rowHeight](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#config-rowHeight) is used.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-getRowHeight)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-getRowHeight)
      * @param {Core.data.Model} getRowHeight.record Record to determine row height for
      * @returns {number} Desired row height
      */
-    getRowHeight ? : (getRowHeight: { record: Model }) => number
+    getRowHeight ? : () => number
     /**
      * A config [object](https://bryntum.com/products/grid/docs/api/Core/widget/Panel#typedef-PanelHeader) for the panel's header or a string in place of a `title`.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-header)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-header)
      */
     header ? : string|boolean|PanelHeader
     /**
@@ -372,16 +347,14 @@ export type BryntumGridProps = {
     id ? : string
     /**
      * Determines if the widgets read-only state should be controlled by its parent.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ignoreParentReadOnly)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ignoreParentReadOnly)
      */
     ignoreParentReadOnly ? : boolean
     /**
      * Convenience setting to align input fields of child widgets. By default, the Field input element is
      * placed immediately following the `label`. If you prefer to have all input fields aligned to the
      * right, set this config to `'end'`.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-inputFieldAlign)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-inputFieldAlign)
      */
     inputFieldAlign ? : 'start'|'end'
     /**
@@ -398,14 +371,17 @@ export type BryntumGridProps = {
     keyMap ? : Record<string, KeyMapConfig>
     /**
      * Convenience setting to use same label placement on all child widgets.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-labelPosition)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-labelPosition)
      */
     labelPosition ? : 'before'|'above'|'align-before'|'auto'|null
+    /**
+     * Sets `labelWidth´ for all children of this Container, that does not define their own `labelWidth`.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-labelWidth)
+     */
+    labelWidth ? : number|null
     /**
      * The listener set for this object.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-listeners)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-listeners)
      */
     listeners ? : GridListeners
     /**
@@ -418,15 +394,13 @@ export type BryntumGridProps = {
      * when data is loading. The message and optional configuration from the
      * [loadMask](https://bryntum.com/products/grid/docs/api/Core/mixin/LoadMaskable#config-loadMask) config take priority over these options, just as they do
      * for `maskDefaults`, respectively.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-loadMaskDefaults)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-loadMaskDefaults)
      */
     loadMaskDefaults ? : MaskConfig
     /**
      * A [Mask](https://bryntum.com/products/grid/docs/api/Core/widget/Mask) config object to adjust the [maskDefaults](#Core/widget/Widget#config-maskDefaults)
      * when an error occurs loading data.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-loadMaskError)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-loadMaskError)
      */
     loadMaskError ? : MaskConfig|Mask|boolean
     /**
@@ -464,8 +438,7 @@ export type BryntumGridProps = {
     /**
      * Grid's `min-height`. Defaults to `10em` to be sure that the Grid always has a height wherever it is
      * inserted.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-minHeight)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-minHeight)
      */
     minHeight ? : string|number
     /**
@@ -480,7 +453,7 @@ export type BryntumGridProps = {
     /**
      * Specify plugins (an array of classes) in config
      */
-    plugins ? : Function[]
+    plugins ? : InstancePlugin[]|InstancePlugin
     /**
      * True to preserve focused cell after loading new data
      */
@@ -502,54 +475,61 @@ export type BryntumGridProps = {
     preventTooltipOnTouch ? : boolean
     /**
      * Set to `true` to make the grid read-only, by disabling any UIs for modifying data.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-readOnly)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-readOnly)
      */
     readOnly ? : boolean
     relayStoreEvents ? : boolean
     /**
      * Either a default `rendition` to apply to all child widgets, or a map of renditions keyed by child widget
      * `type`.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-rendition)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-rendition)
      */
     rendition ? : string|Record<string, string>|null
     /**
      * Configure this property to allow the widget/component to be resized. Pressing <kbd>Shift</kbd> while resizing will
      * constrain the aspect ratio.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-resizable)
-     */
-    resizable ? : boolean|{
-        minWidth?: number
-        maxWidth?: number
-        minHeight?: number
-        maxHeight?: number
-        handles?: object
-    }
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-resizable)
+     * @property {number} [resizable.minWidth] The minimum width of the element.
+     * @property {number} [resizable.maxWidth] The maximum width of the element.
+     * @property {number} [resizable.minHeight] The minimum height of the element.
+     * @property {number} [resizable.maxHeight] The maximum height of the element
+     * @property {object} [resizable.handles] An object controlling which edges/corners are resizable.
+     * @property {boolean} [resizable.handles.topStart] Resizable from top-start corner
+     * @property {boolean} [resizable.handles.top] Resizable from top edge
+     * @property {boolean} [resizable.handles.topEnd] Resizable from top-end corner
+     * @property {boolean} [resizable.handles.end] Resizable from end edge
+     * @property {boolean} [resizable.handles.bottomEnd] Resizable from bottom-end corner
+     * @property {boolean} [resizable.handles.bottom] Resizable from bottom edge
+     * @property {boolean} [resizable.handles.bottomStart] Resizable from bottom-start corner
+     * @property {boolean} [resizable.handles.start] Resizable from start edge
+     */
+    resizable ? : boolean|{ minWidth?: number, maxWidth?: number, minHeight?: number, maxHeight?: number, handles?: { topStart?: boolean, top?: boolean, topEnd?: boolean, end?: boolean, bottomEnd?: boolean, bottom?: boolean, bottomStart?: boolean, start?: boolean } }
     /**
      * Set to `false` to only measure cell contents when double-clicking the edge between column headers.
      */
     resizeToFitIncludesHeader ? : boolean
     /**
      * "Break points" for which responsive config to use for columns and css.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-responsiveLevels)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-responsiveLevels)
      */
     responsiveLevels ? : Record<string, number|string|ResponsiveLevelConfig>
     /**
      * Configure as `true` to have the component display a translucent ripple when its
      * [focusElement](https://bryntum.com/products/grid/docs/api/Core/widget/Widget#property-focusElement), or [element](#Core/widget/Widget#property-element) is tapped <em>if the
      * current theme supports ripples</em>. Out of the box, only the Material theme supports ripples.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ripple)
-     */
-    ripple ? : boolean|{
-        delegate?: string
-        color?: string
-        radius?: number
-        clip?: string
-    }
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ripple)
+     * @property {string} [delegate] A CSS selector to filter which child elements trigger ripples. By default, the ripple is clipped to the triggering element.
+     * @property {string} [color] A CSS color name or specification.
+     * @property {number} [radius] The ending radius of the ripple. Note that it will be clipped by the target element by default.
+     * @property {string} [clip] A string which describes how to clip the ripple if it is not to be clipped to the default element. Either the property of the widget to use as the clipping element, or a selector to allow clipping to the closest matching ancestor to the target element.
+     */
+    ripple ? : boolean|object
+    /**
+     * The ARIA role to apply to this widget's element. By default, this is set to `'presentation'` to avoid
+     * accidentally applying a role which may interfere with screen readers.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-role)
+     */
+    role ? : string
     /**
      * If you are rendering this widget to a shadow root inside a web component, set this config to the shadowRoot. If not inside a web component, set it to `document.body`
      */
@@ -558,8 +538,7 @@ export type BryntumGridProps = {
      * Row height in pixels. This allows the default height for rows to be controlled. Note that it may be
      * overridden by specifying a [rowHeight](https://bryntum.com/products/grid/docs/api/Grid/data/GridRowModel#field-rowHeight) on a per record basis, or from
      * a column [renderer](https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-renderer).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-rowHeight)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-rowHeight)
      */
     rowHeight ? : number
     /**
@@ -568,15 +547,13 @@ export type BryntumGridProps = {
     rowLines ? : boolean
     /**
      * This may be configured as `true` to make the widget's element use the `direction:rtl` style.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-rtl)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-rtl)
      */
     rtl ? : boolean
     /**
      * Configures whether the grid is scrollable in the `Y` axis. This is used to configure a [Scroller](https://bryntum.com/products/grid/docs/api/Core/helper/util/Scroller).
      * See the [scrollerClass](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#config-scrollerClass) config option.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-scrollable)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-scrollable)
      */
     scrollable ? : boolean|ScrollerConfig|Scroller
     /**
@@ -591,141 +568,122 @@ export type BryntumGridProps = {
     /**
      * Selection configuration settings, change these properties to control how selection works and what can be
      * selected.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-selectionMode)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-selectionMode)
      */
     selectionMode ? : GridSelectionMode
     /**
      * Configure as `true` to have the grid show a red "changed" tag in cells whose
      * field value has changed and not yet been committed.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-showDirty)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-showDirty)
+     * @property {boolean} showDirty.duringEdit Set to `true` to show the red tag while editing a cell
+     * @property {boolean} showDirty.newRecord Set to `true` to show the red tag for all the cells of the new record
      */
-    showDirty ? : boolean|{
-        duringEdit?: boolean
-        newRecord?: boolean
-    }
+    showDirty ? : boolean|{ duringEdit: boolean, newRecord: boolean }
     /**
      * Programmatic control over how many columns to span when used in a grid layout.
      */
     span ? : number
     /**
      * This value can be one of the following:
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-stateful)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-stateful)
      */
     stateful ? : boolean|object|string[]
     /**
      * The events that, when fired by this component, should trigger it to save its state by calling
      * [saveState](https://bryntum.com/products/grid/docs/api/Core/mixin/State#function-saveState).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-statefulEvents)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-statefulEvents)
      */
     statefulEvents ? : object|string[]
     /**
      * The key to use when saving this object's state in the [stateProvider](https://bryntum.com/products/grid/docs/api/Core/mixin/State#config-stateProvider). If this config is
      * not assigned, and [stateful](https://bryntum.com/products/grid/docs/api/Core/mixin/State#config-stateful) is not set to `false`, the [id](#Core/widget/Widget#config-id)
      * (if explicitly specified) will be used as the `stateId`.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-stateId)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-stateId)
      */
     stateId ? : string
     /**
      * The `StateProvider` to use to save and restore this object's [state](https://bryntum.com/products/grid/docs/api/Core/mixin/State#property-state). By default, `state`
      * will be saved using the [default state provider](https://bryntum.com/products/grid/docs/api/Core/state/StateProvider#property-instance-static).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-stateProvider)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-stateProvider)
      */
     stateProvider ? : StateProvider
     /**
      * The properties of this settings object controls how grid is restored from state data.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-stateSettings)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-stateSettings)
+     * @property {boolean} [restoreUnconfiguredColumns] Determines whether to restore columns from the state that are not explicitly defined in the grid configuration.
      */
-    stateSettings ? : {
-        restoreUnconfiguredColumns?: boolean
-    }
+    stateSettings ? : object
     /**
      * Store that holds records to display in the grid, or a store config object. If the configuration contains
      * a `readUrl`, an `AjaxStore` will be created.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-store)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-store)
      */
     store ? : Store|StoreConfig|AjaxStore|AjaxStoreConfig
     /**
      * An object containing widgets keyed by name. By default (when no `type` is given), strips are
      * [toolbars](https://bryntum.com/products/grid/docs/api/Core/widget/Toolbar). If you want to pass an array, you can use
      * the toolbar's [items](https://bryntum.com/products/grid/docs/api/Core/widget/Container#config-items).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-strips)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-strips)
      */
     strips ? : Record<string, GridContainerItemConfig>
     /**
      * An object containing sub grid configuration objects keyed by a `region` property.
      * By default, grid has a 'locked' region (if configured with locked columns) and a 'normal' region.
      * The 'normal' region defaults to use `flex: 1`.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-subGridConfigs)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-subGridConfigs)
      */
     subGridConfigs ? : Record<string, SubGridConfig>
     /**
      * A [Mask](https://bryntum.com/products/grid/docs/api/Core/widget/Mask) config object, or a message to be shown when Crud Manager
      * is persisting changes on the server. Set to `null` to disable default sync mask.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-syncMask)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-syncMask)
      */
     syncMask ? : string|MaskConfig|null
     /**
      * A configuration for the [tab](https://bryntum.com/products/grid/docs/api/Core/widget/Tab) created for this widget when it is placed in a
      * [TabPanel](https://bryntum.com/products/grid/docs/api/Core/widget/TabPanel). For example, this config can be used to control the icon of the `tab` for
      * this widget:
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-tab)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-tab)
      */
     tab ? : boolean|TabConfig
     /**
      * When this container is used as a tab in a TabPanel, these items are added to the
      * [TabBar](https://bryntum.com/products/grid/docs/api/Core/widget/TabBar) when this container is the active tab.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-tabBarItems)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-tabBarItems)
      */
     tabBarItems ? : ToolbarItems[]|Widget[]
     /**
      * A Config object representing the configuration of a [Toolbar](https://bryntum.com/products/grid/docs/api/Core/widget/Toolbar),
      * or array of config objects representing the child items of a Toolbar.
      * This creates a toolbar docked to the top of the panel immediately below the header.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-tbar)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-tbar)
      */
     tbar ? : (GridContainerItemConfig|string)[]|ToolbarConfig|PagingToolbarConfig|null
     /**
      * A title to display in the header or owning TabPanel. Causes creation and docking of a header
      * to the top if no header is configured.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-title)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-title)
      */
     title ? : string
     /**
      * The [tools](https://bryntum.com/products/grid/docs/api/Core/widget/Tool) to add either before or after the `title` in the Panel header. Each
      * property name is the reference by which an instantiated tool may be retrieved from the live
      * `[tools](https://bryntum.com/products/grid/docs/api/Core/widget/mixin/Toolable#property-tools)` property.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-tools)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-tools)
      */
     tools ? : Record<string, ToolConfig>|null
     /**
      * Configure UI transitions for various actions in the grid.
+     * @property {boolean} insertRecord Transition record insertions
+     * @property {boolean} removeRecord Transition record removals
+     * @property {boolean} toggleColumn Transition column visibility changes
+     * @property {boolean} expandCollapseColumn Transition parent/group column expand/collapse
+     * @property {boolean} toggleRegion Transition region expand/collapse
+     * @property {boolean} toggleTreeNode Transition tree node expand/collapse
+     * @property {boolean} toggleGroup Transition group expand/collapse
+     * @property {boolean} filterRemoval Transition row removals caused by filtering (under specific conditions)
      */
-    transition ? : {
-        insertRecord?: boolean
-        removeRecord?: boolean
-        toggleColumn?: boolean
-        expandCollapseColumn?: boolean
-        toggleRegion?: boolean
-        toggleTreeNode?: boolean
-        toggleGroup?: boolean
-        filterRemoval?: boolean
-    }
+    transition ? : object
     /**
      * Animation transition duration in milliseconds.
      */
@@ -735,8 +693,7 @@ export type BryntumGridProps = {
      * Custom CSS class name suffixes to apply to the elements rendered by this widget. This may be specified
      * as a space separated string, an array of strings, or as an object in which property names with truthy
      * values are used as the class names.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ui)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#config-ui)
      */
     ui ? : 'plain'|'toolbar'|string|object
     /**
@@ -757,129 +714,117 @@ export type BryntumGridProps = {
      * agent and see the responses. Which allows the user to use natural language to interact with the Grid in different
      * ways. For example, the user can ask the agent to filter the data, sort it, or select specific records. The agent can
      * also perform data manipulation operations such as adding, updating, deleting records.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/AI)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/AI)
      */
     aiFeature ? : object|boolean|string|AI|AIConfig
     /**
      * AI-powered filter feature for Grid. Allows users to type natural language queries to filter grid data.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/ai/AIFilter)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/ai/AIFilter)
      */
     aiFilterFeature ? : object|boolean|string|AIFilter|AIFilterConfig
     /**
      * Allows using `[Ctrl/CMD + C]`, `[Ctrl/CMD + X]` and `[Ctrl/CMD + V]` to cut, copy and paste cell or cell ranges. Also
      * makes cut, copy and paste actions available via the cell context menu.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/CellCopyPaste)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/CellCopyPaste)
      */
     cellCopyPasteFeature ? : object|boolean|string|CellCopyPaste|CellCopyPasteConfig
     /**
      * Adding this feature to the grid and other Bryntum products which are based on the Grid (i.e. Scheduler, SchedulerPro, and Gantt)
      * enables cell editing. Any subclass of [Field](https://bryntum.com/products/grid/docs/api/Core/widget/Field) can be used
      * as editor for the [Column](https://bryntum.com/products/grid/docs/api/Grid/column/Column). The most popular are:
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/CellEdit)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/CellEdit)
      */
     cellEditFeature ? : object|boolean|string|CellEdit|CellEditConfig
     /**
      * Right click to display context menu for cells. To invoke the cell menu in a keyboard-accessible manner, use the
      * <kbd>Space</kbd> key when the cell is focused.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/CellMenu)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/CellMenu)
      */
     cellMenuFeature ? : object|boolean|string|CellMenu|CellMenuConfig
     /**
      * Displays a tooltip when hovering cells.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/CellTooltip)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/CellTooltip)
      */
     cellTooltipFeature ? : object|boolean|string|CellTooltip|CellTooltipConfig
     /**
      * Adds interactive charting to a Grid. [Charts](https://bryntum.com/products/grid/docs/api/Chart/widget/Chart) can be created from a selection of Grid data
      * and updated in realtime as data changes. Supports many common chart types with extensive styling and customization
      * options.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/Charts)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/Charts)
      */
     chartsFeature ? : object|boolean|string|Charts|ChartsConfig
     /**
-     * Enables the [autoWidth](https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-autoWidth) config for a grid's columns.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnAutoWidth)
+     * Enables the [autoWidth](https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-autoWidth) config for a grid's columns. When a column
+     * has `autoWidth` set, this feature measures the rendered content of all visible cells in that column
+     * and adjusts the column width to fit. The measurement is triggered automatically when data changes
+     * or rows are rendered.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnAutoWidth)
      */
     columnAutoWidthFeature ? : object|boolean|string|ColumnAutoWidth|ColumnAutoWidthConfig
     /**
      * Displays a toolbar while dragging column headers. Drop on a button in the toolbar to activate a certain function,
      * for example to group by that column. This feature simplifies certain operations on touch devices.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnDragToolbar)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnDragToolbar)
      */
     columnDragToolbarFeature ? : object|boolean|string|ColumnDragToolbar|ColumnDragToolbarConfig
     /**
      * Displays a column picker (to show/hide columns) in the header context menu. Columns can be displayed in sub menus
      * by region or tag. Grouped headers are displayed as menu hierarchies.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnPicker)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnPicker)
      */
     columnPickerFeature ? : object|boolean|string|ColumnPicker|ColumnPickerConfig
     /**
      * Allows user to rename columns by either right-clicking column header or using keyboard shortcuts when column header
      * is focused.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnRename)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnRename)
      */
     columnRenameFeature ? : object|boolean|string|ColumnRename|ColumnRenameConfig
     /**
-     * Allows user to reorder columns by dragging headers. To get notified about column reorder listen to `change` event
-     * on [columns](https://bryntum.com/products/grid/docs/api/Grid/data/ColumnStore) store.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnReorder)
+     * Allows user to reorder columns by dragging headers. Click and drag a column header to move it to a new position.
+     * Visual feedback shows the drop target while dragging. To get notified about column reorder, listen to the
+     * `change` event on the [columns](https://bryntum.com/products/grid/docs/api/Grid/data/ColumnStore) store.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnReorder)
      */
     columnReorderFeature ? : object|boolean|string|ColumnReorder|ColumnReorderConfig
     /**
-     * Enables user to resize columns by dragging a handle on the right hand side of the header. To get notified about column
-     * resize listen to `change` event on [columns](https://bryntum.com/products/grid/docs/api/Grid/data/ColumnStore) store.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnResize)
+     * Enables user to resize columns by dragging a handle on the right hand side of the header. A drag handle
+     * appears when hovering near the right edge of a column header. Dragging it adjusts the column width, respecting
+     * any [minWidth](https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-minWidth) or [maxWidth](#Grid/column/Column#config-maxWidth) constraints.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/ColumnResize)
      */
     columnResizeFeature ? : object|boolean|string|ColumnResize|ColumnResizeConfig
     /**
      * A feature that allows exporting Grid data to Excel or CSV without involving the server. It uses
      * [TableExporter](https://bryntum.com/products/grid/docs/api/Grid/util/TableExporter) class as data provider, 3rd party provider to generate XLS files, and
      * [Microsoft XML specification](https://msdn.microsoft.com/en-us/library/office/documentformat.openxml.spreadsheet.aspx).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/experimental/ExcelExporter)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/experimental/ExcelExporter)
      */
     excelExporterFeature ? : object|boolean|string|ExcelExporter|ExcelExporterConfig
     /**
-     * An experimental feature that lets users drop files on a Widget. The widget fires an event when a file is dropped onto it.
-     * In the event, you get access to the raw files as strings, that were parsed by calling `readAsBinaryString`.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/experimental/FileDrop)
+     * An experimental feature that lets users drop files on a Widget. The widget fires a
+     * [fileDrop](https://bryntum.com/products/grid/docs/api/Grid/feature/experimental/FileDrop#event-fileDrop) event when a file is dropped onto it. In the event, you get access to the raw
+     * files as strings, that were parsed by calling `readAsBinaryString`.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/experimental/FileDrop)
      */
     fileDropFeature ? : object|boolean|string|FileDrop|FileDropConfig
     /**
      * This feature adds a fill handle to a Grid range selection, which when dragged, fills the cells being dragged over
      * with values based on the values in the original selected range. This is similar to functionality normally seen in
      * various spreadsheet applications.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/FillHandle)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/FillHandle)
      */
     fillHandleFeature ? : object|boolean|string|FillHandle|FillHandleConfig
     /**
      * Feature that allows filtering of the grid by settings filters on columns. The actual filtering is done by the store.
      * For info on programmatically handling filters, see [StoreFilter](https://bryntum.com/products/grid/docs/api/Core/data/mixin/StoreFilter).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/Filter)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/Filter)
      */
     filterFeature ? : object|boolean|string|Filter|FilterConfig
     /**
      * Feature that allows filtering of the grid by entering filters on column headers.
      * The actual filtering is done by the store.
      * For info on programmatically handling filters, see [StoreFilter](https://bryntum.com/products/grid/docs/api/Core/data/mixin/StoreFilter).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/FilterBar)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/FilterBar)
      */
     filterBarFeature ? : object|boolean|string|FilterBar|FilterBarConfig
     /**
@@ -887,141 +832,124 @@ export type BryntumGridProps = {
      * <kbd>Shift</kbd> + clicking headers, or by using the context menu, or by using two finger tap (one on header,
      * one anywhere on grid). Use <kbd>Shift</kbd> + <kbd>Alt</kbd> + click, or the context menu, to remove a column
      * grouper.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/Group)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/Group)
      */
     groupFeature ? : object|boolean|string|Group|GroupConfig
     /**
      * Displays a summary row as a group footer in a grouped grid. Uses the same configuration options on columns as
      * [Summary](https://bryntum.com/products/grid/docs/api/Grid/feature/Summary).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/GroupSummary)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/GroupSummary)
      */
     groupSummaryFeature ? : object|boolean|string|GroupSummary|GroupSummaryConfig
     /**
      * Right click column header or focus it and press SPACE key to show the context menu for headers.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/HeaderMenu)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/HeaderMenu)
      */
     headerMenuFeature ? : object|boolean|string|HeaderMenu|HeaderMenuConfig
     /**
      * This feature allows records which satisfy a certain condition to be locked at the top of the grid.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/LockRows)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/LockRows)
      */
     lockRowsFeature ? : object|boolean|string|LockRows|LockRowsConfig
     /**
      * This feature merges cells that have the same value in sorted (or [optionally](https://bryntum.com/products/grid/docs/api/Grid/feature/MergeCells#config-sortedOnly) any) columns
      * configured to [mergeCells](https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-mergeCells).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/MergeCells)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/MergeCells)
      */
     mergeCellsFeature ? : object|boolean|string|MergeCells|MergeCellsConfig
     /**
      * Generates PDF/PNG files from the Grid component.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/export/PdfExport)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/export/PdfExport)
      */
     pdfExportFeature ? : object|boolean|string|PdfExport|PdfExportConfig
     /**
      * Allows pinning columns to the start or end region of the grid without any additional subGrid configurations.
      * When pinning to a region that does not yet exist, the feature creates the required subGrid on the fly.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/PinColumns)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/PinColumns)
      */
     pinColumnsFeature ? : object|boolean|string|PinColumns|PinColumnsConfig
     /**
      * Allows printing Grid contents using browser print dialog.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/export/Print)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/export/Print)
      */
     printFeature ? : object|boolean|string|Print|PrintConfig
     /**
      * Feature that allows the user to search in a column by focusing a cell and typing. Navigate between hits using the
-     * keyboard, [f3] or [ctrl]/[cmd] + [g] moves to next, also pressing [shift] moves to previous.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/QuickFind)
+     * keyboard, <kbd>f3</kbd> or <kbd>ctrl</kbd>/<kbd>cmd</kbd> + <kbd>g</kbd> moves to next, also pressing
+     * <kbd>shift</kbd> moves to previous.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/QuickFind)
      */
     quickFindFeature ? : object|boolean|string|QuickFind|QuickFindConfig
     /**
      * Makes the splitter between grid [sections](https://bryntum.com/products/grid/docs/api/Grid/view/SubGrid) draggable, to let users resize, and
      * collapse/expand the sections.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/RegionResize)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/RegionResize)
      */
     regionResizeFeature ? : object|boolean|string|RegionResize|RegionResizeConfig
     /**
      * Allow using [Ctrl/CMD + C/X] and [Ctrl/CMD + V] to copy/cut-and-paste rows. Also makes cut, copy and paste actions
      * available via the cell context menu.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowCopyPaste)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowCopyPaste)
      */
     rowCopyPasteFeature ? : object|boolean|string|RowCopyPaste|RowCopyPasteConfig
     /**
      * This feature allows editing of entire rows in a grid in a docked panel which by default slides out from the right.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowEdit)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowEdit)
      */
     rowEditFeature ? : object|boolean|string|RowEdit|RowEditConfig
     /**
      * Enables expanding of Grid rows by either row click or double click, or by adding a separate Grid column which renders
      * a button that expands or collapses the row.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowExpander)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowExpander)
      */
     rowExpanderFeature ? : object|boolean|string|RowExpander|RowExpanderConfig
     /**
      * Allows user to reorder rows by dragging them. To get notified about row reorder listen to `change` event
      * on the grid [store](https://bryntum.com/products/grid/docs/api/Core/data/Store).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowReorder)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowReorder)
      */
     rowReorderFeature ? : object|boolean|string|RowReorder|RowReorderConfig
     /**
      * Enables user to change row height by dragging the bottom row border. After a resize operation, the [rowHeight](https://bryntum.com/products/grid/docs/api/Grid/data/GridRowModel#field-rowHeight)
      * field of the record is updated (when [applyToAllRows](https://bryntum.com/products/grid/docs/api/Grid/feature/RowResize#config-applyToAllRows) is `false`).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowResize)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/RowResize)
      */
     rowResizeFeature ? : object|boolean|string|RowResize|RowResizeConfig
     /**
      * <div class="external-example vertical" data-file="Grid/feature/Search.js"></div>
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/Search)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/Search)
      */
     searchFeature ? : object|boolean|string|Search|SearchConfig
     /**
      * Allows sorting of grid by clicking (or tapping) headers, also displays which columns grid is sorted by (numbered if
      * using multisort). Use modifier keys for multisorting: [Ctrl/CMD + click] to add sorter, [Ctrl/CMD + Alt + click] to remove sorter.
      * The actual sorting is done by the store, see [Store.sort()](https://bryntum.com/products/grid/docs/api/Core/data/mixin/StoreSort#function-sort).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/Sort)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/Sort)
      */
     sortFeature ? : object|boolean|string|Sort|SortConfig
     /**
      * This feature allows splitting the Grid into multiple views, either by using the cell context menu, or
      * programmatically by calling [split()](https://bryntum.com/products/grid/docs/api/Grid/feature/Split#function-split).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/Split)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/Split)
      */
     splitFeature ? : object|boolean|string|Split|SplitConfig
     /**
-     * A feature which pins configurable content from a grid row to the top of the grid
-     * while the row scrolls off the top but is still visible.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/StickyCells)
+     * A feature which pins cell content to the top of the grid while the row scrolls off the top but is still visible. Very
+     * similar to native `position: sticky`, which because of Grid's multiple-region setup unfortunately cannot be used to
+     * achieve the same effect.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/StickyCells)
      */
     stickyCellsFeature ? : object|boolean|string|StickyCells|StickyCellsConfig
     /**
      * Stripes rows by adding alternating CSS classes to all row elements (`b-even` and `b-odd`).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/Stripe)
+     * This improves visual readability in data-heavy grids by giving adjacent rows different background colors.
+     * Style the striped rows using the `.b-even` and `.b-odd` CSS classes.
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/Stripe)
      */
     stripeFeature ? : object|boolean|string|Stripe|StripeConfig
     /**
      * Displays a summary row in the grid footer.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/Summary)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/Summary)
      */
     summaryFeature ? : object|boolean|string|Summary|SummaryConfig
     /**
@@ -1029,15 +957,13 @@ export type BryntumGridProps = {
      * exactly one [TreeColumn](https://bryntum.com/products/grid/docs/api/Grid/column/TreeColumn) among grids columns. That column will have its renderer replaced with a
      * tree renderer that adds padding and icon to give the appearance of a tree. The original renderer is preserved and
      * also called.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/Tree)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/Tree)
      */
     treeFeature ? : object|boolean|string|Tree|TreeConfig
     /**
      * A feature that allows transforming a flat dataset (or the leaves of a hierarchical) into a tree by specifying a
      * record field per parent level. Parents are generated based on each leaf's value for those fields.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/feature/TreeGroup)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/feature/TreeGroup)
      */
     treeGroupFeature ? : object|boolean|string|TreeGroup|TreeGroupConfig
 
@@ -1285,6 +1211,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
         'insertFirst',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'listeners',
         'loadMask',
         'loadMaskDefaults',
@@ -1311,6 +1238,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
         'resizeToFitIncludesHeader',
         'responsiveLevels',
         'ripple',
+        'role',
         'rootElement',
         'rowHeight',
         'rowLines',
@@ -1398,6 +1326,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
         'resizeToFitIncludesHeader',
         'responsiveLevels',
         'ripple',
+        'role',
         'rootElement',
         'scrollerClass',
         'scrollManager',
@@ -1436,8 +1365,6 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
         'enableUndoRedoKeys',
         'extraData',
         'flex',
-        'focusVisible',
-        'hasChanges',
         'height',
         'hidden',
         'hideFooters',
@@ -1448,6 +1375,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
         'insertFirst',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'longPressTime',
         'margin',
         'maxHeight',
@@ -1520,20 +1448,16 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Input() disableGridColumnIdWarning    ! : boolean;
     @Input() disableGridRowModelWarning    ! : boolean;
     @Input() dock                          ! : 'top'|'bottom'|'left'|'right'|'start'|'end'|'header'|'pre-header'|object;
-    @Input() drawer                        ! : boolean|{side?: 'start'|'left'|'end'|'right'|'top'|'bottom', size?: string|number, inline?: boolean, autoClose: { mousedown?: boolean|string, focusout?: boolean|string, mouseout?: string }, autoCloseDelay?: number};
+    @Input() drawer                        ! : boolean|{ side?: 'start'|'left'|'end'|'right'|'top'|'bottom', size?: string|number, inline?: boolean, autoClose?: boolean|{ mousedown?: boolean|string, focusout?: boolean|string, mouseout?: string }, autoCloseDelay?: number };
     @Input() elementAttributes             ! : Record<string, string|null>;
     @Input() enableSticky                  ! : boolean;
     @Input() enableTextSelection           ! : boolean;
     @Input() fillLastColumn                ! : boolean;
     @Input() fixedRowHeight                ! : boolean;
-    @Input() footer                        ! : {
-        dock?: 'top'|'right'|'bottom'|'left'|'start'|'end'
-        html?: string
-        cls?: string
-    }|string;
+    @Input() footer                        ! : object|string;
     @Input() formulaProviders              ! : Record<string, FormulaProviderConfig>;
     @Input() fullRowRefresh                ! : boolean;
-    @Input() getRowHeight                  ! : (getRowHeight: { record: Model }) => number;
+    @Input() getRowHeight                  ! : () => number;
     @Input() header                        ! : string|boolean|PanelHeader;
     @Input() hideHorizontalScrollbar       ! : boolean;
     @Input() hoverCls                      ! : string;
@@ -1547,33 +1471,20 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Input() maskDefaults                  ! : MaskConfig;
     @Input() masked                        ! : boolean|string|MaskConfig;
     @Input() monitorResize                 ! : boolean;
-    @Input() plugins                       ! : Function[];
+    @Input() plugins                       ! : InstancePlugin[]|InstancePlugin;
     @Input() preserveFocusOnDatasetChange  ! : boolean;
     @Input() preserveScrollOnDatasetChange ! : boolean;
     @Input() preventTooltipOnTouch         ! : boolean;
     @Input() relayStoreEvents              ! : boolean;
-    @Input() resizable                     ! : boolean|{
-        minWidth?: number
-        maxWidth?: number
-        minHeight?: number
-        maxHeight?: number
-        handles?: object
-    };
+    @Input() resizable                     ! : boolean|{ minWidth?: number, maxWidth?: number, minHeight?: number, maxHeight?: number, handles?: { topStart?: boolean, top?: boolean, topEnd?: boolean, end?: boolean, bottomEnd?: boolean, bottom?: boolean, bottomStart?: boolean, start?: boolean } };
     @Input() resizeToFitIncludesHeader     ! : boolean;
     @Input() responsiveLevels              ! : Record<string, number|string|ResponsiveLevelConfig>;
-    @Input() ripple                        ! : boolean|{
-        delegate?: string
-        color?: string
-        radius?: number
-        clip?: string
-    };
+    @Input() ripple                        ! : boolean|object;
+    @Input() role                          ! : string;
     @Input() rootElement                   ! : ShadowRoot|HTMLElement;
     @Input() scrollerClass                 ! : typeof Scroller;
     @Input() scrollManager                 ! : ScrollManagerConfig|ScrollManager;
-    @Input() showDirty                     ! : boolean|{
-        duringEdit?: boolean
-        newRecord?: boolean
-    };
+    @Input() showDirty                     ! : boolean|{ duringEdit: boolean, newRecord: boolean };
     @Input() stateful                      ! : boolean|object|string[];
     @Input() statefulEvents                ! : object|string[];
     @Input() stateId                       ! : string;
@@ -1617,6 +1528,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Input() insertFirst                 ! : HTMLElement|string;
     @Input() keyMap                      ! : Record<string, KeyMapConfig>;
     @Input() labelPosition               ! : 'before'|'above'|'align-before'|'auto'|null;
+    @Input() labelWidth                  ! : number|null;
     @Input() longPressTime               ! : number;
     @Input() margin                      ! : number|string;
     @Input() maxHeight                   ! : string|number;
@@ -1652,8 +1564,6 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Input() width                       ! : number|string;
 
     // Properties only
-    @Input() focusVisible    ! : boolean;
-    @Input() hasChanges      ! : boolean;
     @Input() originalStore   ! : Store;
     @Input() parent          ! : Widget;
     @Input() selectedCell    ! : GridLocation|GridLocationConfig;
@@ -1714,11 +1624,10 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.view.Grid} event.source Owner grid
      * @param {Grid.util.GridLocation} event.editorContext Editing context
      */
-    @Output() onBeforeCancelCellEdit: any = new EventEmitter<((event: { source: Grid, editorContext: GridLocation }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeCancelCellEdit: any = new EventEmitter<((event: { source: Grid, editorContext: GridLocation }) => boolean|void)|string>();
     /**
      * Fires on the owning Grid before the row editing is canceled, return false to signal that the value is invalid and editing should not be finalized.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-beforeCancelRowEdit)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-beforeCancelRowEdit)
      * @param {object} event Event object
      * @param {Grid.view.Grid} event.grid Target grid
      * @param {RowEditorContext} event.editorContext Editing context
@@ -1730,7 +1639,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.view.Grid} event.source Owner grid
      * @param {CellEditorContext} event.editorContext Editing context
      */
-    @Output() onBeforeCellEditStart: any = new EventEmitter<((event: { source: Grid, editorContext: CellEditorContext }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeCellEditStart: any = new EventEmitter<((event: { source: Grid, editorContext: CellEditorContext }) => boolean|void)|string>();
     /**
      * Fires on the owning Grid before deleting a range of selected cell values by pressing <kbd>Backspace</kbd> or <kbd>Delete</kbd>
      * buttons while [autoEdit](https://bryntum.com/products/grid/docs/api/Grid/feature/CellEdit#config-autoEdit) is set to `true`. Return `false` to prevent editing.
@@ -1738,7 +1647,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.view.Grid} event.source Owner grid
      * @param {(Grid.util.GridLocation|Core.data.Model)[]} event.gridSelection An array of cell selectors or records that will have their values deleted (the records themselves will not get deleted, only visible column values).
      */
-    @Output() onBeforeCellRangeDelete: any = new EventEmitter<((event: { source: Grid, gridSelection: (GridLocation|Model)[] }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeCellRangeDelete: any = new EventEmitter<((event: { source: Grid, gridSelection: (GridLocation|Model)[] }) => boolean|void)|string>();
     /**
      * Fires for each selected record on the owning Grid before editing a range of selected cell values
      * @param {object} event Event object
@@ -1746,7 +1655,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {string} event.field The field being changed
      * @param {any} event.value The value being set
      */
-    @Output() onBeforeCellRangeEdit: any = new EventEmitter<((event: { record: Model, field: string, value: any }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeCellRangeEdit: any = new EventEmitter<((event: { record: Model, field: string, value: any }) => boolean|void)|string>();
     /**
      * This event is triggered before a parent column is collapsed or expanded.
      * @param {object} event Event object
@@ -1762,7 +1671,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.column.Column} event.column The dragged column.
      * @param {Event} event.event The browser event.
      */
-    @Output() onBeforeColumnDragStart: any = new EventEmitter<((event: { source: Grid, column: Column, event: Event }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeColumnDragStart: any = new EventEmitter<((event: { source: Grid, column: Column, event: Event }) => boolean|void)|string>();
     /**
      * This event is fired when a column is dropped, and you can return false from a listener to abort the operation.
      * @param {object} event Event object
@@ -1773,7 +1682,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Event} event.event The browser event.
      * @param {string} event.region The region where the column was dropped.
      */
-    @Output() onBeforeColumnDropFinalize: any = new EventEmitter<((event: { source: Grid, column: Column, insertBefore: Column, newParent: Column, event: Event, region: string }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeColumnDropFinalize: any = new EventEmitter<((event: { source: Grid, column: Column, insertBefore: Column, newParent: Column, event: Event, region: string }) => boolean|void)|string>();
     /**
      * This event is fired prior to starting a column resize gesture. The resize is canceled if a listener returns
      * `false`.
@@ -1782,7 +1691,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.column.Column} event.column The column
      * @param {Event} event.domEvent The browser event
      */
-    @Output() onBeforeColumnResize: any = new EventEmitter<((event: { source: Grid, column: Column, domEvent: Event }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeColumnResize: any = new EventEmitter<((event: { source: Grid, column: Column, domEvent: Event }) => boolean|void)|string>();
     /**
      * Fires on the owning Grid before a copy action is performed, return `false` to prevent the action
      * @param {object} event Event object
@@ -1802,7 +1711,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {string} event.lineDelimiter The CSV delimiter to separate lines
      * @param {string} event.columnDelimiter The CSV delimiter to separate values on one line
      */
-    @Output() onBeforeCSVExport: any = new EventEmitter<((event: { config: ExportConfig, columns: Column[], rows: Model[], lineDelimiter: string, columnDelimiter: string }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeCSVExport: any = new EventEmitter<((event: { config: ExportConfig, columns: Column[], rows: Model[], lineDelimiter: string, columnDelimiter: string }) => boolean|void)|string>();
     /**
      * Fires before an object is destroyed.
      * @param {object} event Event object
@@ -1816,14 +1725,14 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {XLSColumn[]} event.columns An array of columns to export
      * @param {any[][]} event.rows An array of records to export
      */
-    @Output() onBeforeExcelExport: any = new EventEmitter<((event: { config: ExportConfig, columns: XLSColumn[], rows: any[] }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeExcelExport: any = new EventEmitter<((event: { config: ExportConfig, columns: XLSColumn[], rows: any[] }) => boolean|void)|string>();
     /**
      * Fired before dragging of the FillHandle starts, return `false` to prevent the drag operation.
      * @param {object} event Event object
      * @param {Grid.util.GridLocation} event.cell Information about the column / record
      * @param {MouseEvent} event.domEvent The raw DOM event
      */
-    @Output() onBeforeFillHandleDragStart: any = new EventEmitter<((event: { cell: GridLocation, domEvent: MouseEvent }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeFillHandleDragStart: any = new EventEmitter<((event: { cell: GridLocation, domEvent: MouseEvent }) => boolean|void)|string>();
     /**
      * Fires on the owning Grid before the cell editing is finished, return false to signal that the value is invalid and editing should not be finalized.
      * @param {object} event Event object
@@ -1833,8 +1742,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Output() onBeforeFinishCellEdit: any = new EventEmitter<((event: { grid: Grid, editorContext: CellEditorContext }) => void)|string>();
     /**
      * Fires on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-beforeFinishRowEdit)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-beforeFinishRowEdit)
      * @param {object} event Event object
      * @param {Grid.view.Grid} event.grid Target grid
      * @param {RowEditorContext} event.editorContext Editing context
@@ -1845,7 +1753,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {object} event Event object
      * @param {Core.widget.Widget} event.source The widget being hidden.
      */
-    @Output() onBeforeHide: any = new EventEmitter<((event: { source: Widget }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeHide: any = new EventEmitter<((event: { source: Widget }) => boolean|void)|string>();
     /**
      * Fires on the owning Grid before a paste action is performed, return `false` to prevent the action
      * @param {object} event Event object
@@ -1861,7 +1769,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {object} event Event object
      * @param {PdfExportConfig} event.config Export config
      */
-    @Output() onBeforePdfExport: any = new EventEmitter<((event: { config: PdfExportConfig }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforePdfExport: any = new EventEmitter<((event: { config: PdfExportConfig }) => boolean|void)|string>();
     /**
      * Fires before a row is rendered.
      * @param {object} event Event object
@@ -1879,16 +1787,14 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Output() onBeforeRenderRows: any = new EventEmitter<((event: { source: GridBase }) => void)|string>();
     /**
      * This event fires before row collapse is started.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-beforeRowCollapse)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-beforeRowCollapse)
      * @param {object} event Event object
      * @param {Core.data.Model} event.record Record
      */
     @Output() onBeforeRowCollapse: any = new EventEmitter<((event: { record: Model }) => Promise<boolean>|boolean|void)|string>();
     /**
      * This event fires before row expand is started.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-beforeRowExpand)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-beforeRowExpand)
      * @param {object} event Event object
      * @param {Core.data.Model} event.record Record
      */
@@ -1906,7 +1812,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.util.GridLocation[]} event.selectedCells The cells to be selected in this operation.
      * @param {Grid.util.GridLocation[]} event.cellSelection The cells in the current selection, before applying `selectedCells` and `deselectedCells`
      */
-    @Output() onBeforeSelectionChange: any = new EventEmitter<((event: { action: string, mode: 'row'|'cell', source: Grid, deselected: Model[], selected: Model[], selection: Model[], deselectedCells: GridLocation[], selectedCells: GridLocation[], cellSelection: GridLocation[] }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeSelectionChange: any = new EventEmitter<((event: { action: string, mode: 'row'|'cell', source: Grid, deselected: Model[], selected: Model[], selection: Model[], deselectedCells: GridLocation[], selectedCells: GridLocation[], cellSelection: GridLocation[] }) => boolean|void)|string>();
     /**
      * Fired before this container will load record values into its child fields. This is useful if you
      * want to modify the UI before data is loaded (e.g. set some input field to be readonly)
@@ -1927,19 +1833,19 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.view.Grid} event.source Owner grid
      * @param {RowEditorContext} event.editorContext Editing context
      */
-    @Output() onBeforeStartRowEdit: any = new EventEmitter<((event: { source: Grid, editorContext: RowEditorContext }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeStartRowEdit: any = new EventEmitter<((event: { source: Grid, editorContext: RowEditorContext }) => boolean|void)|string>();
     /**
      * Fired before state is applied to the source. Allows editing the state object or preventing the operation.
      * @param {object} event Event object
      * @param {GridStateInfo} event.state State object config
      */
-    @Output() onBeforeStateApply: any = new EventEmitter<((event: { state: GridStateInfo }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeStateApply: any = new EventEmitter<((event: { state: GridStateInfo }) => boolean|void)|string>();
     /**
      * Fired before state is saved by the StateProvider. Allows editing the state object or preventing the operation.
      * @param {object} event Event object
      * @param {GridStateInfo} event.state State object config
      */
-    @Output() onBeforeStateSave: any = new EventEmitter<((event: { state: GridStateInfo }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeStateSave: any = new EventEmitter<((event: { state: GridStateInfo }) => boolean|void)|string>();
     /**
      * Fired when a group is going to be expanded or collapsed using the UI.
      * Returning `false` from a listener prevents the operation
@@ -1949,7 +1855,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {boolean} event.collapse Collapsed (true) or expanded (false)
      * @param {Event} event.domEvent The user interaction event (eg a `click` event) if the toggle request was instigated by user interaction.
      */
-    @Output() onBeforeToggleGroup: any = new EventEmitter<((event: { groupRecord: Model, groupRecords: Model[], collapse: boolean, domEvent: Event }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onBeforeToggleGroup: any = new EventEmitter<((event: { groupRecord: Model, groupRecords: Model[], collapse: boolean, domEvent: Event }) => boolean|void)|string>();
     /**
      * Fired before a parent node record toggles its collapsed state.
      * @param {object} event Event object
@@ -1968,8 +1874,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Output() onCancelCellEdit: any = new EventEmitter<((event: { source: Grid, editorContext: GridLocation, event: Event }) => void)|string>();
     /**
      * Fires when any other event is fired from the object.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-catchAll)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-catchAll)
      * @param {object} event Event object
      * @param {{[key: string]: any, type: string}} event.event The Object that contains event details
      * @param {string} event.event.type The type of the event which is caught by the listener
@@ -2011,8 +1916,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     /**
      * This event fires on the owning grid before the context menu is shown for a cell.
      * Allows manipulation of the items to show in the same way as in the [processItems](https://bryntum.com/products/grid/docs/api/Grid/feature/CellMenu#config-processItems).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-cellMenuBeforeShow)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-cellMenuBeforeShow)
      * @param {object} event Event object
      * @param {Grid.view.Grid} event.source The grid
      * @param {Core.widget.Menu} event.menu The menu
@@ -2020,7 +1924,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.column.Column} event.column Column
      * @param {Core.data.Model} event.record Record
      */
-    @Output() onCellMenuBeforeShow: any = new EventEmitter<((event: { source: Grid, menu: Menu, items: Record<string, MenuItemEntry>, column: Column, record: Model }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onCellMenuBeforeShow: any = new EventEmitter<((event: { source: Grid, menu: Menu, items: Record<string, MenuItemEntry>, column: Column, record: Model }) => boolean|void)|string>();
     /**
      * This event fires on the owning grid when an item is selected in the cell context menu.
      * @param {object} event Event object
@@ -2147,7 +2051,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Event} event.event The browser event.
      * @param {string} event.region The region where the column was dropped.
      */
-    @Output() onColumnDrop: any = new EventEmitter<((event: { source: Grid, column: Column, insertBefore: Column, newParent: Column, valid: boolean, event: Event, region: string }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onColumnDrop: any = new EventEmitter<((event: { source: Grid, column: Column, insertBefore: Column, newParent: Column, valid: boolean, event: Event, region: string }) => boolean|void)|string>();
     /**
      * This event is fired after a resize gesture is completed.
      * @param {object} event Event object
@@ -2193,8 +2097,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Output() onCopy: any = new EventEmitter<((event: { source: Grid, cells: GridLocation[], copiedDataString: string, isCut: boolean, entityName: string }) => void)|string>();
     /**
      * Fired when data in the store changes.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-dataChange)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-dataChange)
      * @param {object} event Event object
      * @param {Grid.view.GridBase} event.source Owning grid
      * @param {Core.data.Store} event.store The originating store
@@ -2288,7 +2191,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.util.GridLocation} event.cell Information about the column / record
      * @param {MouseEvent} event.domEvent The raw DOM event
      */
-    @Output() onFillHandleDragStart: any = new EventEmitter<((event: { cell: GridLocation, domEvent: MouseEvent }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onFillHandleDragStart: any = new EventEmitter<((event: { cell: GridLocation, domEvent: MouseEvent }) => boolean|void)|string>();
     /**
      * Fires on the owning Grid when cell editing is finished
      * @param {object} event Event object
@@ -2298,8 +2201,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Output() onFinishCellEdit: any = new EventEmitter<((event: { grid: Grid, editorContext: CellEditorContext }) => void)|string>();
     /**
      * Fires on the owning Grid before the row editing is finished, return false to signal that the value is invalid and editing should not be finalized.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-finishRowEdit)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-finishRowEdit)
      * @param {object} event Event object
      * @param {Grid.view.Grid} event.grid Target grid
      * @param {RowEditorContext} event.editorContext Editing context
@@ -2337,7 +2239,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Core.data.Model[]} event.context.records The dragged row records
      * @param {MouseEvent,TouchEvent} event.event
      */
-    @Output() onGridRowBeforeDragStart: any = new EventEmitter<((event: { source: GridBase, context: { records: Model[] }, event: MouseEvent|TouchEvent }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onGridRowBeforeDragStart: any = new EventEmitter<((event: { source: GridBase, context: { records: Model[] }, event: MouseEvent|TouchEvent }) => boolean|void)|string>();
     /**
      * Fired before the row drop operation is finalized. You can return false to abort the drop operation, or a
      * Promise yielding `true` / `false` which allows for asynchronous abort (e.g. first show user a confirmation dialog).
@@ -2399,25 +2301,23 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Output() onGridRowDrop: any = new EventEmitter<((event: { source: GridBase, context: { valid: boolean, insertBefore: Model, parent: Model, records: Model[], oldPositionContext: RecordPositionContext[] }, event: MouseEvent }) => void)|string>();
     /**
      * Fired when a grid header is clicked on.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-headerClick)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-headerClick)
      * @param {object} event Event object
      * @param {Event} event.domEvent The triggering DOM event.
      * @param {Grid.column.Column} event.column The column clicked on.
      */
-    @Output() onHeaderClick: any = new EventEmitter<((event: { domEvent: Event, column: Column }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onHeaderClick: any = new EventEmitter<((event: { domEvent: Event, column: Column }) => boolean|void)|string>();
     /**
      * This event fires on the owning Grid before the context menu is shown for a header.
      * Allows manipulation of the items to show in the same way as in the [processItems](https://bryntum.com/products/grid/docs/api/Grid/feature/HeaderMenu#config-processItems).
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-headerMenuBeforeShow)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-headerMenuBeforeShow)
      * @param {object} event Event object
      * @param {Grid.view.Grid} event.source The grid
      * @param {Core.widget.Menu} event.menu The menu
      * @param {Record<string, MenuItemEntry>} event.items Menu item configs
      * @param {Grid.column.Column} event.column Column
      */
-    @Output() onHeaderMenuBeforeShow: any = new EventEmitter<((event: { source: Grid, menu: Menu, items: Record<string, MenuItemEntry>, column: Column }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onHeaderMenuBeforeShow: any = new EventEmitter<((event: { source: Grid, menu: Menu, items: Record<string, MenuItemEntry>, column: Column }) => boolean|void)|string>();
     /**
      * This event fires on the owning Grid when an item is selected in the header context menu.
      * @param {object} event Event object
@@ -2473,8 +2373,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     /**
      * Triggered when a widget which had been in a non-visible state for any reason
      * achieves visibility.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-paint)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-paint)
      * @param {object} event Event object
      * @param {Core.widget.Widget} event.source The widget being painted.
      * @param {boolean} event.firstPaint `true` if this is the first paint.
@@ -2493,8 +2392,8 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     /**
      * Fires on the owning Grid when export has finished
      * @param {object} event Event object
-     * @param {Response} event.response Optional response, if received
-     * @param {Error} event.error Optional error, if exception occurred
+     * @param {Response} [event.response] Optional response, if received
+     * @param {Error} [event.error] Optional error, if exception occurred
      */
     @Output() onPdfExport: any = new EventEmitter<((event: { response?: Response, error?: Error }) => void)|string>();
     /**
@@ -2551,8 +2450,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
     @Output() onRowCollapse: any = new EventEmitter<((event: { record: Model }) => void)|string>();
     /**
      * This event fires when a row expand has finished expanding.
-     * ...
-     * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-rowExpand)
+     * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-rowExpand)
      * @param {object} event Event object
      * @param {Core.data.Model} event.record Record
      * @param {object} event.expandedElements An object with the Grid region name as property and the expanded body element as value
@@ -2630,7 +2528,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.view.SubGrid} event.subGrid The subgrid
      * @param {Event} event.domEvent The native DOM event
      */
-    @Output() onSplitterCollapseClick: any = new EventEmitter<((event: { source: Grid, subGrid: SubGrid, domEvent: Event }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onSplitterCollapseClick: any = new EventEmitter<((event: { source: Grid, subGrid: SubGrid, domEvent: Event }) => boolean|void)|string>();
     /**
      * Fired by the Grid after a sub-grid has been resized using the splitter
      * @param {object} event Event object
@@ -2655,7 +2553,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Grid.view.SubGrid} event.subGrid The subgrid
      * @param {Event} event.domEvent The native DOM event
      */
-    @Output() onSplitterExpandClick: any = new EventEmitter<((event: { source: Grid, subGrid: SubGrid, domEvent: Event }) => Promise<boolean>|boolean|void)|string>();
+    @Output() onSplitterExpandClick: any = new EventEmitter<((event: { source: Grid, subGrid: SubGrid, domEvent: Event }) => boolean|void)|string>();
     /**
      * Fires on the owning Grid when editing starts
      * @param {object} event Event object
@@ -2690,7 +2588,7 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
      * @param {Core.data.Model} event.groupRecord [DEPRECATED] Use `groupRecords` param instead
      * @param {Core.data.Model[]} event.groupRecords The group records being toggled
      * @param {boolean} event.collapse Collapsed (true) or expanded (false)
-     * @param {boolean} event.allRecords True if this event is part of toggling all groups
+     * @param {boolean} [event.allRecords] True if this event is part of toggling all groups
      */
     @Output() onToggleGroup: any = new EventEmitter<((event: { groupRecord: Model, groupRecords: Model[], collapse: boolean, allRecords?: boolean }) => void)|string>();
     /**
@@ -2788,6 +2686,17 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
             WrapperHelper.devWarningContainer(instanceName, containerParam);
         }
 
+        // In shadow DOM (e.g. Angular ViewEncapsulation.ShadowDom), theme CSS from document.head
+        // does not cascade into the shadow root. Inject a matching <link> so Bryntum's CSS check
+        // finds the theme. The @font-face rules from component styles are also extracted to
+        // document scope so document.fonts detects them (shadow-root @font-face is not reliably
+        // included in document.fonts across all browsers).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumGridComponent.ensureFontsInDocument(shadowRoot);
+        }
+
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
 
@@ -2797,6 +2706,53 @@ export class BryntumGridComponent implements OnInit, OnDestroy {
         // 
     }
 
+    /**
+     * Extracts all @font-face declarations from a shadow root's stylesheets and adds them to
+     * document.head as a single <style> element. This is needed because @font-face rules inside
+     * a shadow root are not reliably included in document.fonts across all browsers, causing
+     * Bryntum's CSS compatibility check to incorrectly report missing fonts.
+     * Safe to call multiple times — the extraction runs only once per page.
+     */
+    private static ensureFontsInDocument(shadowRoot: ShadowRoot): void {
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+
+        const fontFaceRules: string[] = [];
+
+        const extractFromSheet = (sheet: CSSStyleSheet): void => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets: CSSStyleSheet[] = (shadowRoot as any).adoptedStyleSheets ?? [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
+
     /**
      * Watch for changes
      * @param changes