@bryntum/grid-angular-thin 7.2.3 → 7.3.0

package/bundles/bryntum-grid-angular-thin.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@bryntum/core-thin'), require('@bryntum/grid-thin')) :
-    typeof define === 'function' && define.amd ? define('@bryntum/grid-angular-thin', ['exports', '@angular/core', '@bryntum/core-thin', '@bryntum/grid-thin'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bryntum = global.bryntum || {}, global.bryntum["grid-angular-thin"] = {}), global.ng.core, global["@bryntum/core-thin"], global["@bryntum/grid-thin"]));
-})(this, (function (exports, i0, coreThin, gridThin) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@bryntum/core-thin'), require('@bryntum/grid-thin')) :
+    typeof define === 'function' && define.amd ? define('@bryntum/grid-angular-thin', ['exports', '@angular/common', '@angular/core', '@bryntum/core-thin', '@bryntum/grid-thin'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bryntum = global.bryntum || {}, global.bryntum["grid-angular-thin"] = {}), global.ng.common, global.ng.core, global["@bryntum/core-thin"], global["@bryntum/grid-thin"]));
+})(this, (function (exports, common, i0, coreThin, gridThin) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -486,6 +486,88 @@
         return WrapperHelper;
     }());
 
+    // Module-level registry of all open shadow roots that host Bryntum widgets.
+    // Populated lazily by collectOpenShadowRoots() the first time it is called, and
+    // kept up to date via registerShadowRoot / unregisterShadowRoot.
+    var openShadowRoots = new Set();
+    // Walks the DOM tree starting from `root` and collects every open shadow root found.
+    // Results are cached in openShadowRoots after the first traversal so subsequent calls
+    // are O(1). Recursive so nested shadow roots are also discovered.
+    function collectOpenShadowRoots(root) {
+        if (root === void 0) { root = document; }
+        if (openShadowRoots.size > 0) {
+            return Array.from(openShadowRoots);
+        }
+        var roots = [];
+        Array.from(root.querySelectorAll('*')).forEach(function (el) {
+            if (el.shadowRoot) {
+                roots.push(el.shadowRoot);
+                roots.push.apply(roots, __spreadArray([], __read(collectOpenShadowRoots(el.shadowRoot))));
+            }
+        });
+        roots.forEach(function (r) { return openShadowRoots.add(r); });
+        return roots;
+    }
+    // Updates the href and data-bryntum-theme attribute of every theme <link> inside all
+    // registered shadow roots to mirror the new head link after a theme change.
+    function syncThemeToShadowRoots(headLink) {
+        var _a;
+        var href = headLink.href;
+        var themeAttr = (_a = headLink.getAttribute('data-bryntum-theme')) !== null && _a !== void 0 ? _a : '';
+        collectOpenShadowRoots().forEach(function (shadowRoot) {
+            Array.from(shadowRoot.querySelectorAll('link[data-bryntum-theme]')).forEach(function (link) {
+                link.setAttribute('data-bryntum-theme', themeAttr);
+                link.href = href;
+            });
+        });
+    }
+    // Adds a shadow root to the registry so it is included in theme sync operations.
+    // Called by BryntumThemeComboComponent.ngOnInit when it detects it is inside a shadow root.
+    function registerShadowRoot(shadowRoot) {
+        openShadowRoots.add(shadowRoot);
+    }
+    // Removes a shadow root from the registry.
+    // Called by BryntumThemeComboComponent.ngOnDestroy to clean up on component teardown.
+    function unregisterShadowRoot(shadowRoot) {
+        openShadowRoots.delete(shadowRoot);
+    }
+    // Injects a clone of each document.head theme <link> into every registered shadow root
+    // that does not already have one. This is required because CSS from document.head does
+    // not cascade into shadow DOM, so Bryntum theme styles would be absent without this.
+    // Safe to call multiple times — the presence check prevents duplicate injection.
+    function initThemeInShadowRoots() {
+        var headThemeLinks = Array.from(document.head.querySelectorAll('link[data-bryntum-theme]'));
+        if (!headThemeLinks.length) {
+            return;
+        }
+        collectOpenShadowRoots().forEach(function (shadowRoot) {
+            if (shadowRoot.querySelector('link[data-bryntum-theme]')) {
+                return;
+            }
+            headThemeLinks.forEach(function (headLink) {
+                if (!headLink.href) {
+                    return;
+                }
+                // Clone the head link to preserve all attributes, then ensure absolute href
+                var clone = headLink.cloneNode();
+                clone.href = headLink.href;
+                shadowRoot.appendChild(clone);
+            });
+        });
+    }
+    // Listens for Bryntum's internal theme-change event and keeps every shadow root's
+    // theme link in sync with the new document.head link. Fires after the old <link>s
+    // are removed and the new one is fully loaded in document.head.
+    // @ts-ignore - ion() is public but not present on GlobalEventsSingleton typings
+    coreThin.GlobalEvents.ion({
+        theme: function () {
+            var link = document.head.querySelector('link[data-bryntum-theme]');
+            if (link === null || link === void 0 ? void 0 : link.href) {
+                syncThemeToShadowRoots(link);
+            }
+        }
+    });
+
     var BryntumAIFilterFieldComponent = /** @class */ (function () {
         function BryntumAIFilterFieldComponent(element) {
             this.bryntumConfig = {
@@ -531,8 +613,7 @@
             this.onBeforeShow = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/AIFilterField#event-catchAll)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/AIFilterField#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
@@ -552,8 +633,7 @@
             this.onChange = new i0.EventEmitter();
             /**
              * Fired when this field is [cleared](https://bryntum.com/products/grid/docs/api/Core/widget/Field#function-clear).
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/AIFilterField#event-clear)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/AIFilterField#event-clear)
              * @param {object} event Event object
              * @param {Core.widget.Field,any} event.source This Field
              */
@@ -611,8 +691,7 @@
             /**
              * 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/widget/AIFilterField#event-paint)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/AIFilterField#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.
@@ -699,9 +778,61 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumAIFilterFieldComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         };
+        /**
+         * 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.
+         */
+        BryntumAIFilterFieldComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -713,8 +844,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumAIFilterFieldComponent.bryntumConfigsOnly, bryntumProps = BryntumAIFilterFieldComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -845,6 +976,7 @@
         'required',
         'revertOnEscape',
         'ripple',
+        'role',
         'rootElement',
         'rtl',
         'scrollAction',
@@ -926,6 +1058,7 @@
         'relayStoreEvents',
         'revertOnEscape',
         'ripple',
+        'role',
         'rootElement',
         'scrollAction',
         'showAnimation',
@@ -943,7 +1076,6 @@
     ];
     BryntumAIFilterFieldComponent.bryntumProps = BryntumAIFilterFieldComponent.bryntumFeatureNames.concat([
         'alignSelf',
-        'anchorSize',
         'appendTo',
         'badge',
         'callOnFunctions',
@@ -956,7 +1088,6 @@
         'editable',
         'extraData',
         'flex',
-        'focusVisible',
         'formula',
         'height',
         'hidden',
@@ -990,7 +1121,7 @@
         'y'
     ]);
     BryntumAIFilterFieldComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumAIFilterFieldComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumAIFilterFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumAIFilterFieldComponent, selector: "bryntum-a-i-filter-field", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoComplete: "autoComplete", autoSelect: "autoSelect", bubbleEvents: "bubbleEvents", centered: "centered", clearable: "clearable", client: "client", color: "color", config: "config", constrainTo: "constrainTo", container: "container", containValues: "containValues", contentElementCls: "contentElementCls", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", floating: "floating", hideAnimation: "hideAnimation", highlightExternalChange: "highlightExternalChange", hint: "hint", hintHtml: "hintHtml", ignoreParentReadOnly: "ignoreParentReadOnly", inline: "inline", inputAlign: "inputAlign", inputAttributes: "inputAttributes", inputTag: "inputTag", inputType: "inputType", inputWidth: "inputWidth", keyStrokeChangeDelay: "keyStrokeChangeDelay", labelCls: "labelCls", labelPosition: "labelPosition", labels: "labels", labelWidth: "labelWidth", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", maxLength: "maxLength", minLength: "minLength", monitorResize: "monitorResize", name: "name", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", progressText: "progressText", relayStoreEvents: "relayStoreEvents", revertOnEscape: "revertOnEscape", ripple: "ripple", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", skipValidation: "skipValidation", spellCheck: "spellCheck", tab: "tab", tabIndex: "tabIndex", textAlign: "textAlign", title: "title", type: "type", ui: "ui", validateOnInput: "validateOnInput", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", badge: "badge", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", dataset: "dataset", disabled: "disabled", editable: "editable", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", label: "label", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", placeholder: "placeholder", readOnly: "readOnly", rendition: "rendition", required: "required", rtl: "rtl", showRequiredIndicator: "showRequiredIndicator", span: "span", tooltip: "tooltip", triggers: "triggers", value: "value", width: "width", x: "x", y: "y", anchorSize: "anchorSize", content: "content", focusVisible: "focusVisible", formula: "formula", html: "html", input: "input", parent: "parent", scrollable: "scrollable" }, outputs: { onAction: "onAction", onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onClear: "onClear", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onInput: "onInput", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow", onTrigger: "onTrigger" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumAIFilterFieldComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumAIFilterFieldComponent, selector: "bryntum-a-i-filter-field", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoComplete: "autoComplete", autoSelect: "autoSelect", bubbleEvents: "bubbleEvents", centered: "centered", clearable: "clearable", client: "client", color: "color", config: "config", constrainTo: "constrainTo", container: "container", containValues: "containValues", contentElementCls: "contentElementCls", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", floating: "floating", hideAnimation: "hideAnimation", highlightExternalChange: "highlightExternalChange", hint: "hint", hintHtml: "hintHtml", ignoreParentReadOnly: "ignoreParentReadOnly", inline: "inline", inputAlign: "inputAlign", inputAttributes: "inputAttributes", inputTag: "inputTag", inputType: "inputType", inputWidth: "inputWidth", keyStrokeChangeDelay: "keyStrokeChangeDelay", labelCls: "labelCls", labelPosition: "labelPosition", labels: "labels", labelWidth: "labelWidth", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", maxLength: "maxLength", minLength: "minLength", monitorResize: "monitorResize", name: "name", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", progressText: "progressText", relayStoreEvents: "relayStoreEvents", revertOnEscape: "revertOnEscape", ripple: "ripple", role: "role", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", skipValidation: "skipValidation", spellCheck: "spellCheck", tab: "tab", tabIndex: "tabIndex", textAlign: "textAlign", title: "title", type: "type", ui: "ui", validateOnInput: "validateOnInput", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", badge: "badge", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", dataset: "dataset", disabled: "disabled", editable: "editable", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", label: "label", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", placeholder: "placeholder", readOnly: "readOnly", rendition: "rendition", required: "required", rtl: "rtl", showRequiredIndicator: "showRequiredIndicator", span: "span", tooltip: "tooltip", triggers: "triggers", value: "value", width: "width", x: "x", y: "y", content: "content", formula: "formula", html: "html", input: "input", parent: "parent", scrollable: "scrollable" }, outputs: { onAction: "onAction", onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onClear: "onClear", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onInput: "onInput", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow", onTrigger: "onTrigger" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumAIFilterFieldComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1109,6 +1240,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollAction: [{
@@ -1213,12 +1346,8 @@
                     type: i0.Input
                 }], y: [{
                     type: i0.Input
-                }], anchorSize: [{
-                    type: i0.Input
                 }], content: [{
                     type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
                 }], formula: [{
                     type: i0.Input
                 }], html: [{
@@ -1310,8 +1439,7 @@
             this.onBeforeShow = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/ChecklistFilterCombo#event-catchAll)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/ChecklistFilterCombo#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
@@ -1331,8 +1459,7 @@
             this.onChange = new i0.EventEmitter();
             /**
              * Fired when this field is [cleared](https://bryntum.com/products/grid/docs/api/Core/widget/Field#function-clear).
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/ChecklistFilterCombo#event-clear)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/ChecklistFilterCombo#event-clear)
              * @param {object} event Event object
              * @param {Core.widget.Field,any} event.source This Field
              */
@@ -1391,8 +1518,7 @@
             /**
              * 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/widget/ChecklistFilterCombo#event-paint)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/ChecklistFilterCombo#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.
@@ -1488,9 +1614,61 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumChecklistFilterComboComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         };
+        /**
+         * 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.
+         */
+        BryntumChecklistFilterComboComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -1502,8 +1680,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumChecklistFilterComboComponent.bryntumConfigsOnly, bryntumProps = BryntumChecklistFilterComboComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -1664,6 +1842,7 @@
         'required',
         'revertOnEscape',
         'ripple',
+        'role',
         'rootElement',
         'rtl',
         'scrollAction',
@@ -1777,6 +1956,7 @@
         'relayStoreEvents',
         'revertOnEscape',
         'ripple',
+        'role',
         'rootElement',
         'scrollAction',
         'showAnimation',
@@ -1797,7 +1977,6 @@
     ];
     BryntumChecklistFilterComboComponent.bryntumProps = BryntumChecklistFilterComboComponent.bryntumFeatureNames.concat([
         'alignSelf',
-        'anchorSize',
         'appendTo',
         'badge',
         'callOnFunctions',
@@ -1811,7 +1990,6 @@
         'extraData',
         'filterOperator',
         'flex',
-        'focusVisible',
         'formula',
         'height',
         'hidden',
@@ -1851,7 +2029,7 @@
         'y'
     ]);
     BryntumChecklistFilterComboComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChecklistFilterComboComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumChecklistFilterComboComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumChecklistFilterComboComponent, selector: "bryntum-checklist-filter-combo", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoComplete: "autoComplete", autoExpand: "autoExpand", autoSelect: "autoSelect", bubbleEvents: "bubbleEvents", cacheLastResult: "cacheLastResult", caseSensitive: "caseSensitive", centered: "centered", chipView: "chipView", clearable: "clearable", clearTextOnPickerHide: "clearTextOnPickerHide", clearTextOnSelection: "clearTextOnSelection", clearWhenInputEmpty: "clearWhenInputEmpty", color: "color", config: "config", constrainTo: "constrainTo", container: "container", containValues: "containValues", contentElementCls: "contentElementCls", createOnUnmatched: "createOnUnmatched", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", displayField: "displayField", displayValueRenderer: "displayValueRenderer", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", emptyText: "emptyText", encodeFilterParams: "encodeFilterParams", filterOnEnter: "filterOnEnter", filterParamName: "filterParamName", filterSelected: "filterSelected", floating: "floating", hideAnimation: "hideAnimation", hidePickerOnSelect: "hidePickerOnSelect", hideTrigger: "hideTrigger", highlightExternalChange: "highlightExternalChange", hint: "hint", hintHtml: "hintHtml", ignoreParentReadOnly: "ignoreParentReadOnly", inline: "inline", inlinePicker: "inlinePicker", inputAlign: "inputAlign", inputAttributes: "inputAttributes", inputTag: "inputTag", inputType: "inputType", inputWidth: "inputWidth", items: "items", keyStrokeChangeDelay: "keyStrokeChangeDelay", keyStrokeFilterDelay: "keyStrokeFilterDelay", labelCls: "labelCls", labelPosition: "labelPosition", labels: "labels", labelWidth: "labelWidth", listCls: "listCls", listeners: "listeners", listItemTpl: "listItemTpl", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", maxLength: "maxLength", minChars: "minChars", minLength: "minLength", monitorResize: "monitorResize", multiValueSeparator: "multiValueSeparator", name: "name", overlayAnchor: "overlayAnchor", pickerAlignElement: "pickerAlignElement", pickerWidth: "pickerWidth", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", primaryFilter: "primaryFilter", relayStoreEvents: "relayStoreEvents", revertOnEscape: "revertOnEscape", ripple: "ripple", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", skipValidation: "skipValidation", spellCheck: "spellCheck", tab: "tab", tabIndex: "tabIndex", textAlign: "textAlign", title: "title", triggerAction: "triggerAction", type: "type", ui: "ui", validateFilter: "validateFilter", validateOnInput: "validateOnInput", valueField: "valueField", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", badge: "badge", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", dataset: "dataset", disabled: "disabled", editable: "editable", extraData: "extraData", filterOperator: "filterOperator", flex: "flex", height: "height", hidden: "hidden", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", label: "label", listItemPillTpl: "listItemPillTpl", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", picker: "picker", placeholder: "placeholder", readOnly: "readOnly", rendition: "rendition", required: "required", rtl: "rtl", searchText: "searchText", showApplyButton: "showApplyButton", showRequiredIndicator: "showRequiredIndicator", span: "span", store: "store", tooltip: "tooltip", triggers: "triggers", value: "value", width: "width", x: "x", y: "y", anchorSize: "anchorSize", content: "content", focusVisible: "focusVisible", formula: "formula", html: "html", input: "input", multiSelect: "multiSelect", parent: "parent", scrollable: "scrollable" }, outputs: { onAction: "onAction", onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onClear: "onClear", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onInput: "onInput", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onSelect: "onSelect", onShow: "onShow", onTrigger: "onTrigger" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumChecklistFilterComboComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumChecklistFilterComboComponent, selector: "bryntum-checklist-filter-combo", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoComplete: "autoComplete", autoExpand: "autoExpand", autoSelect: "autoSelect", bubbleEvents: "bubbleEvents", cacheLastResult: "cacheLastResult", caseSensitive: "caseSensitive", centered: "centered", chipView: "chipView", clearable: "clearable", clearTextOnPickerHide: "clearTextOnPickerHide", clearTextOnSelection: "clearTextOnSelection", clearWhenInputEmpty: "clearWhenInputEmpty", color: "color", config: "config", constrainTo: "constrainTo", container: "container", containValues: "containValues", contentElementCls: "contentElementCls", createOnUnmatched: "createOnUnmatched", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", displayField: "displayField", displayValueRenderer: "displayValueRenderer", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", emptyText: "emptyText", encodeFilterParams: "encodeFilterParams", filterOnEnter: "filterOnEnter", filterParamName: "filterParamName", filterSelected: "filterSelected", floating: "floating", hideAnimation: "hideAnimation", hidePickerOnSelect: "hidePickerOnSelect", hideTrigger: "hideTrigger", highlightExternalChange: "highlightExternalChange", hint: "hint", hintHtml: "hintHtml", ignoreParentReadOnly: "ignoreParentReadOnly", inline: "inline", inlinePicker: "inlinePicker", inputAlign: "inputAlign", inputAttributes: "inputAttributes", inputTag: "inputTag", inputType: "inputType", inputWidth: "inputWidth", items: "items", keyStrokeChangeDelay: "keyStrokeChangeDelay", keyStrokeFilterDelay: "keyStrokeFilterDelay", labelCls: "labelCls", labelPosition: "labelPosition", labels: "labels", labelWidth: "labelWidth", listCls: "listCls", listeners: "listeners", listItemTpl: "listItemTpl", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", maxLength: "maxLength", minChars: "minChars", minLength: "minLength", monitorResize: "monitorResize", multiValueSeparator: "multiValueSeparator", name: "name", overlayAnchor: "overlayAnchor", pickerAlignElement: "pickerAlignElement", pickerWidth: "pickerWidth", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", primaryFilter: "primaryFilter", relayStoreEvents: "relayStoreEvents", revertOnEscape: "revertOnEscape", ripple: "ripple", role: "role", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", skipValidation: "skipValidation", spellCheck: "spellCheck", tab: "tab", tabIndex: "tabIndex", textAlign: "textAlign", title: "title", triggerAction: "triggerAction", type: "type", ui: "ui", validateFilter: "validateFilter", validateOnInput: "validateOnInput", valueField: "valueField", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", badge: "badge", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", dataset: "dataset", disabled: "disabled", editable: "editable", extraData: "extraData", filterOperator: "filterOperator", flex: "flex", height: "height", hidden: "hidden", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", label: "label", listItemPillTpl: "listItemPillTpl", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", picker: "picker", placeholder: "placeholder", readOnly: "readOnly", rendition: "rendition", required: "required", rtl: "rtl", searchText: "searchText", showApplyButton: "showApplyButton", showRequiredIndicator: "showRequiredIndicator", span: "span", store: "store", tooltip: "tooltip", triggers: "triggers", value: "value", width: "width", x: "x", y: "y", content: "content", formula: "formula", html: "html", input: "input", multiSelect: "multiSelect", parent: "parent", scrollable: "scrollable" }, outputs: { onAction: "onAction", onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onClear: "onClear", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onInput: "onInput", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onSelect: "onSelect", onShow: "onShow", onTrigger: "onTrigger" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChecklistFilterComboComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -2022,6 +2200,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollAction: [{
@@ -2144,12 +2324,8 @@
                     type: i0.Input
                 }], y: [{
                     type: i0.Input
-                }], anchorSize: [{
-                    type: i0.Input
                 }], content: [{
                     type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
                 }], formula: [{
                     type: i0.Input
                 }], html: [{
@@ -2224,8 +2400,7 @@
             this.onBeforeCancelCellEdit = new i0.EventEmitter();
             /**
              * 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
@@ -2340,8 +2515,7 @@
             this.onBeforeFinishCellEdit = new i0.EventEmitter();
             /**
              * 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
@@ -2386,16 +2560,14 @@
             this.onBeforeRenderRows = new i0.EventEmitter();
             /**
              * 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
              */
             this.onBeforeRowCollapse = new i0.EventEmitter();
             /**
              * 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
              */
@@ -2475,8 +2647,7 @@
             this.onCancelCellEdit = new i0.EventEmitter();
             /**
              * 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
@@ -2518,8 +2689,7 @@
             /**
              * 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
@@ -2700,8 +2870,7 @@
             this.onCopy = new i0.EventEmitter();
             /**
              * 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
@@ -2805,8 +2974,7 @@
             this.onFinishCellEdit = new i0.EventEmitter();
             /**
              * 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
@@ -2906,8 +3074,7 @@
             this.onGridRowDrop = new i0.EventEmitter();
             /**
              * 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.
@@ -2916,8 +3083,7 @@
             /**
              * 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
@@ -2980,8 +3146,7 @@
             /**
              * 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.
@@ -3000,8 +3165,8 @@
             /**
              * 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
              */
             this.onPdfExport = new i0.EventEmitter();
             /**
@@ -3058,8 +3223,7 @@
             this.onRowCollapse = new i0.EventEmitter();
             /**
              * 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
@@ -3197,7 +3361,7 @@
              * @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
              */
             this.onToggleGroup = new i0.EventEmitter();
             /**
@@ -3279,6 +3443,16 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumGridComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
             // Backwards compatibility for gridInstance, schedulerInstance etc.
@@ -3286,6 +3460,48 @@
             me[coreThin.StringHelper.uncapitalize(instanceName) + 'Instance'] = me.instance;
             // 
         };
+        /**
+         * 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.
+         */
+        BryntumGridComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -3297,8 +3513,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumGridComponent.bryntumConfigsOnly, bryntumProps = BryntumGridComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -3551,6 +3767,7 @@
         'insertFirst',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'listeners',
         'loadMask',
         'loadMaskDefaults',
@@ -3577,6 +3794,7 @@
         'resizeToFitIncludesHeader',
         'responsiveLevels',
         'ripple',
+        'role',
         'rootElement',
         'rowHeight',
         'rowLines',
@@ -3663,6 +3881,7 @@
         'resizeToFitIncludesHeader',
         'responsiveLevels',
         'ripple',
+        'role',
         'rootElement',
         'scrollerClass',
         'scrollManager',
@@ -3700,8 +3919,6 @@
         'enableUndoRedoKeys',
         'extraData',
         'flex',
-        'focusVisible',
-        'hasChanges',
         'height',
         'hidden',
         'hideFooters',
@@ -3712,6 +3929,7 @@
         'insertFirst',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'longPressTime',
         'margin',
         'maxHeight',
@@ -3745,7 +3963,7 @@
         'width'
     ]);
     BryntumGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridComponent, selector: "bryntum-grid", inputs: { adopt: "adopt", animateFilterRemovals: "animateFilterRemovals", animateRemovingRows: "animateRemovingRows", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoHeight: "autoHeight", bbar: "bbar", bodyCls: "bodyCls", border: "border", bubbleEvents: "bubbleEvents", collapsible: "collapsible", color: "color", config: "config", contentElementCls: "contentElementCls", contextMenuTriggerEvent: "contextMenuTriggerEvent", dataField: "dataField", defaultRegion: "defaultRegion", destroyStore: "destroyStore", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", disableGridColumnIdWarning: "disableGridColumnIdWarning", disableGridRowModelWarning: "disableGridRowModelWarning", dock: "dock", drawer: "drawer", elementAttributes: "elementAttributes", enableSticky: "enableSticky", enableTextSelection: "enableTextSelection", fillLastColumn: "fillLastColumn", fixedRowHeight: "fixedRowHeight", footer: "footer", formulaProviders: "formulaProviders", fullRowRefresh: "fullRowRefresh", getRowHeight: "getRowHeight", header: "header", hideHorizontalScrollbar: "hideHorizontalScrollbar", hoverCls: "hoverCls", icon: "icon", ignoreParentReadOnly: "ignoreParentReadOnly", listeners: "listeners", loadMask: "loadMask", loadMaskDefaults: "loadMaskDefaults", loadMaskError: "loadMaskError", localizable: "localizable", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", plugins: "plugins", preserveFocusOnDatasetChange: "preserveFocusOnDatasetChange", preserveScrollOnDatasetChange: "preserveScrollOnDatasetChange", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", resizable: "resizable", resizeToFitIncludesHeader: "resizeToFitIncludesHeader", responsiveLevels: "responsiveLevels", ripple: "ripple", rootElement: "rootElement", scrollerClass: "scrollerClass", scrollManager: "scrollManager", showDirty: "showDirty", stateful: "stateful", statefulEvents: "statefulEvents", stateId: "stateId", stateProvider: "stateProvider", strips: "strips", subGridConfigs: "subGridConfigs", syncMask: "syncMask", tab: "tab", tabBarItems: "tabBarItems", tbar: "tbar", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", animateTreeNodeToggle: "animateTreeNodeToggle", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cellEllipsis: "cellEllipsis", cls: "cls", collapsed: "collapsed", column: "column", columnLines: "columnLines", columns: "columns", data: "data", dataset: "dataset", disabled: "disabled", emptyText: "emptyText", enableUndoRedoKeys: "enableUndoRedoKeys", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", hideFooters: "hideFooters", hideHeaders: "hideHeaders", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", labelPosition: "labelPosition", longPressTime: "longPressTime", margin: "margin", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", preserveScroll: "preserveScroll", readOnly: "readOnly", rendition: "rendition", rowHeight: "rowHeight", rowLines: "rowLines", rtl: "rtl", scrollable: "scrollable", selectionMode: "selectionMode", span: "span", stateSettings: "stateSettings", store: "store", title: "title", tools: "tools", transition: "transition", transitionDuration: "transitionDuration", width: "width", focusVisible: "focusVisible", hasChanges: "hasChanges", originalStore: "originalStore", parent: "parent", selectedCell: "selectedCell", selectedCells: "selectedCells", selectedRecord: "selectedRecord", selectedRecords: "selectedRecords", selectedRows: "selectedRows", state: "state", tooltip: "tooltip", aiFeature: "aiFeature", aiFilterFeature: "aiFilterFeature", cellCopyPasteFeature: "cellCopyPasteFeature", cellEditFeature: "cellEditFeature", cellMenuFeature: "cellMenuFeature", cellTooltipFeature: "cellTooltipFeature", chartsFeature: "chartsFeature", columnAutoWidthFeature: "columnAutoWidthFeature", columnDragToolbarFeature: "columnDragToolbarFeature", columnPickerFeature: "columnPickerFeature", columnRenameFeature: "columnRenameFeature", columnReorderFeature: "columnReorderFeature", columnResizeFeature: "columnResizeFeature", excelExporterFeature: "excelExporterFeature", fileDropFeature: "fileDropFeature", fillHandleFeature: "fillHandleFeature", filterFeature: "filterFeature", filterBarFeature: "filterBarFeature", groupFeature: "groupFeature", groupSummaryFeature: "groupSummaryFeature", headerMenuFeature: "headerMenuFeature", lockRowsFeature: "lockRowsFeature", mergeCellsFeature: "mergeCellsFeature", pdfExportFeature: "pdfExportFeature", pinColumnsFeature: "pinColumnsFeature", printFeature: "printFeature", quickFindFeature: "quickFindFeature", regionResizeFeature: "regionResizeFeature", rowCopyPasteFeature: "rowCopyPasteFeature", rowEditFeature: "rowEditFeature", rowExpanderFeature: "rowExpanderFeature", rowReorderFeature: "rowReorderFeature", rowResizeFeature: "rowResizeFeature", searchFeature: "searchFeature", sortFeature: "sortFeature", splitFeature: "splitFeature", stickyCellsFeature: "stickyCellsFeature", stripeFeature: "stripeFeature", summaryFeature: "summaryFeature", treeFeature: "treeFeature", treeGroupFeature: "treeGroupFeature" }, outputs: { onBeforeCancelCellEdit: "onBeforeCancelCellEdit", onBeforeCancelRowEdit: "onBeforeCancelRowEdit", onBeforeCellEditStart: "onBeforeCellEditStart", onBeforeCellRangeDelete: "onBeforeCellRangeDelete", onBeforeCellRangeEdit: "onBeforeCellRangeEdit", onBeforeColumnCollapseToggle: "onBeforeColumnCollapseToggle", onBeforeColumnDragStart: "onBeforeColumnDragStart", onBeforeColumnDropFinalize: "onBeforeColumnDropFinalize", onBeforeColumnResize: "onBeforeColumnResize", onBeforeCopy: "onBeforeCopy", onBeforeCSVExport: "onBeforeCSVExport", onBeforeDestroy: "onBeforeDestroy", onBeforeExcelExport: "onBeforeExcelExport", onBeforeFillHandleDragStart: "onBeforeFillHandleDragStart", onBeforeFinishCellEdit: "onBeforeFinishCellEdit", onBeforeFinishRowEdit: "onBeforeFinishRowEdit", onBeforeHide: "onBeforeHide", onBeforePaste: "onBeforePaste", onBeforePdfExport: "onBeforePdfExport", onBeforeRenderRow: "onBeforeRenderRow", onBeforeRenderRows: "onBeforeRenderRows", onBeforeRowCollapse: "onBeforeRowCollapse", onBeforeRowExpand: "onBeforeRowExpand", onBeforeSelectionChange: "onBeforeSelectionChange", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onBeforeStartRowEdit: "onBeforeStartRowEdit", onBeforeStateApply: "onBeforeStateApply", onBeforeStateSave: "onBeforeStateSave", onBeforeToggleGroup: "onBeforeToggleGroup", onBeforeToggleNode: "onBeforeToggleNode", onCancelCellEdit: "onCancelCellEdit", onCatchAll: "onCatchAll", onCellClick: "onCellClick", onCellContextMenu: "onCellContextMenu", onCellDblClick: "onCellDblClick", onCellMenuBeforeShow: "onCellMenuBeforeShow", onCellMenuItem: "onCellMenuItem", onCellMenuShow: "onCellMenuShow", onCellMenuToggleItem: "onCellMenuToggleItem", onCellMouseEnter: "onCellMouseEnter", onCellMouseLeave: "onCellMouseLeave", onCellMouseOut: "onCellMouseOut", onCellMouseOver: "onCellMouseOver", onCollapse: "onCollapse", onCollapseNode: "onCollapseNode", onColumnCollapseToggle: "onColumnCollapseToggle", onColumnDrag: "onColumnDrag", onColumnDragStart: "onColumnDragStart", onColumnDrop: "onColumnDrop", onColumnResize: "onColumnResize", onColumnResizeStart: "onColumnResizeStart", onContextMenuItem: "onContextMenuItem", onContextMenuToggleItem: "onContextMenuToggleItem", onCopy: "onCopy", onDataChange: "onDataChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onDragSelecting: "onDragSelecting", onElementCreated: "onElementCreated", onExpand: "onExpand", onExpandNode: "onExpandNode", onFileDrop: "onFileDrop", onFillHandleBeforeDragFinalize: "onFillHandleBeforeDragFinalize", onFillHandleDrag: "onFillHandleDrag", onFillHandleDragAbort: "onFillHandleDragAbort", onFillHandleDragEnd: "onFillHandleDragEnd", onFillHandleDragStart: "onFillHandleDragStart", onFinishCellEdit: "onFinishCellEdit", onFinishRowEdit: "onFinishRowEdit", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onGridRowBeforeDragStart: "onGridRowBeforeDragStart", onGridRowBeforeDropFinalize: "onGridRowBeforeDropFinalize", onGridRowDrag: "onGridRowDrag", onGridRowDragAbort: "onGridRowDragAbort", onGridRowDragStart: "onGridRowDragStart", onGridRowDrop: "onGridRowDrop", onHeaderClick: "onHeaderClick", onHeaderMenuBeforeShow: "onHeaderMenuBeforeShow", onHeaderMenuItem: "onHeaderMenuItem", onHeaderMenuShow: "onHeaderMenuShow", onHeaderMenuToggleItem: "onHeaderMenuToggleItem", onHide: "onHide", onLockRows: "onLockRows", onMouseOut: "onMouseOut", onMouseOver: "onMouseOver", onPaint: "onPaint", onPaste: "onPaste", onPdfExport: "onPdfExport", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onRenderRow: "onRenderRow", onRenderRows: "onRenderRows", onResize: "onResize", onResponsive: "onResponsive", onRowCollapse: "onRowCollapse", onRowExpand: "onRowExpand", onRowMouseEnter: "onRowMouseEnter", onRowMouseLeave: "onRowMouseLeave", onScroll: "onScroll", onSelectionChange: "onSelectionChange", onSelectionModeChange: "onSelectionModeChange", onShow: "onShow", onSplit: "onSplit", onSplitterCollapseClick: "onSplitterCollapseClick", onSplitterDragEnd: "onSplitterDragEnd", onSplitterDragStart: "onSplitterDragStart", onSplitterExpandClick: "onSplitterExpandClick", onStartCellEdit: "onStartCellEdit", onStartRowEdit: "onStartRowEdit", onSubGridCollapse: "onSubGridCollapse", onSubGridExpand: "onSubGridExpand", onToggleGroup: "onToggleGroup", onToggleNode: "onToggleNode", onToolClick: "onToolClick", onTreeGroup: "onTreeGroup", onUnlockRows: "onUnlockRows", onUnsplit: "onUnsplit" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridComponent, selector: "bryntum-grid", inputs: { adopt: "adopt", animateFilterRemovals: "animateFilterRemovals", animateRemovingRows: "animateRemovingRows", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoHeight: "autoHeight", bbar: "bbar", bodyCls: "bodyCls", border: "border", bubbleEvents: "bubbleEvents", collapsible: "collapsible", color: "color", config: "config", contentElementCls: "contentElementCls", contextMenuTriggerEvent: "contextMenuTriggerEvent", dataField: "dataField", defaultRegion: "defaultRegion", destroyStore: "destroyStore", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", disableGridColumnIdWarning: "disableGridColumnIdWarning", disableGridRowModelWarning: "disableGridRowModelWarning", dock: "dock", drawer: "drawer", elementAttributes: "elementAttributes", enableSticky: "enableSticky", enableTextSelection: "enableTextSelection", fillLastColumn: "fillLastColumn", fixedRowHeight: "fixedRowHeight", footer: "footer", formulaProviders: "formulaProviders", fullRowRefresh: "fullRowRefresh", getRowHeight: "getRowHeight", header: "header", hideHorizontalScrollbar: "hideHorizontalScrollbar", hoverCls: "hoverCls", icon: "icon", ignoreParentReadOnly: "ignoreParentReadOnly", listeners: "listeners", loadMask: "loadMask", loadMaskDefaults: "loadMaskDefaults", loadMaskError: "loadMaskError", localizable: "localizable", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", plugins: "plugins", preserveFocusOnDatasetChange: "preserveFocusOnDatasetChange", preserveScrollOnDatasetChange: "preserveScrollOnDatasetChange", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", resizable: "resizable", resizeToFitIncludesHeader: "resizeToFitIncludesHeader", responsiveLevels: "responsiveLevels", ripple: "ripple", role: "role", rootElement: "rootElement", scrollerClass: "scrollerClass", scrollManager: "scrollManager", showDirty: "showDirty", stateful: "stateful", statefulEvents: "statefulEvents", stateId: "stateId", stateProvider: "stateProvider", strips: "strips", subGridConfigs: "subGridConfigs", syncMask: "syncMask", tab: "tab", tabBarItems: "tabBarItems", tbar: "tbar", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", animateTreeNodeToggle: "animateTreeNodeToggle", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cellEllipsis: "cellEllipsis", cls: "cls", collapsed: "collapsed", column: "column", columnLines: "columnLines", columns: "columns", data: "data", dataset: "dataset", disabled: "disabled", emptyText: "emptyText", enableUndoRedoKeys: "enableUndoRedoKeys", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", hideFooters: "hideFooters", hideHeaders: "hideHeaders", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", labelPosition: "labelPosition", labelWidth: "labelWidth", longPressTime: "longPressTime", margin: "margin", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", preserveScroll: "preserveScroll", readOnly: "readOnly", rendition: "rendition", rowHeight: "rowHeight", rowLines: "rowLines", rtl: "rtl", scrollable: "scrollable", selectionMode: "selectionMode", span: "span", stateSettings: "stateSettings", store: "store", title: "title", tools: "tools", transition: "transition", transitionDuration: "transitionDuration", width: "width", originalStore: "originalStore", parent: "parent", selectedCell: "selectedCell", selectedCells: "selectedCells", selectedRecord: "selectedRecord", selectedRecords: "selectedRecords", selectedRows: "selectedRows", state: "state", tooltip: "tooltip", aiFeature: "aiFeature", aiFilterFeature: "aiFilterFeature", cellCopyPasteFeature: "cellCopyPasteFeature", cellEditFeature: "cellEditFeature", cellMenuFeature: "cellMenuFeature", cellTooltipFeature: "cellTooltipFeature", chartsFeature: "chartsFeature", columnAutoWidthFeature: "columnAutoWidthFeature", columnDragToolbarFeature: "columnDragToolbarFeature", columnPickerFeature: "columnPickerFeature", columnRenameFeature: "columnRenameFeature", columnReorderFeature: "columnReorderFeature", columnResizeFeature: "columnResizeFeature", excelExporterFeature: "excelExporterFeature", fileDropFeature: "fileDropFeature", fillHandleFeature: "fillHandleFeature", filterFeature: "filterFeature", filterBarFeature: "filterBarFeature", groupFeature: "groupFeature", groupSummaryFeature: "groupSummaryFeature", headerMenuFeature: "headerMenuFeature", lockRowsFeature: "lockRowsFeature", mergeCellsFeature: "mergeCellsFeature", pdfExportFeature: "pdfExportFeature", pinColumnsFeature: "pinColumnsFeature", printFeature: "printFeature", quickFindFeature: "quickFindFeature", regionResizeFeature: "regionResizeFeature", rowCopyPasteFeature: "rowCopyPasteFeature", rowEditFeature: "rowEditFeature", rowExpanderFeature: "rowExpanderFeature", rowReorderFeature: "rowReorderFeature", rowResizeFeature: "rowResizeFeature", searchFeature: "searchFeature", sortFeature: "sortFeature", splitFeature: "splitFeature", stickyCellsFeature: "stickyCellsFeature", stripeFeature: "stripeFeature", summaryFeature: "summaryFeature", treeFeature: "treeFeature", treeGroupFeature: "treeGroupFeature" }, outputs: { onBeforeCancelCellEdit: "onBeforeCancelCellEdit", onBeforeCancelRowEdit: "onBeforeCancelRowEdit", onBeforeCellEditStart: "onBeforeCellEditStart", onBeforeCellRangeDelete: "onBeforeCellRangeDelete", onBeforeCellRangeEdit: "onBeforeCellRangeEdit", onBeforeColumnCollapseToggle: "onBeforeColumnCollapseToggle", onBeforeColumnDragStart: "onBeforeColumnDragStart", onBeforeColumnDropFinalize: "onBeforeColumnDropFinalize", onBeforeColumnResize: "onBeforeColumnResize", onBeforeCopy: "onBeforeCopy", onBeforeCSVExport: "onBeforeCSVExport", onBeforeDestroy: "onBeforeDestroy", onBeforeExcelExport: "onBeforeExcelExport", onBeforeFillHandleDragStart: "onBeforeFillHandleDragStart", onBeforeFinishCellEdit: "onBeforeFinishCellEdit", onBeforeFinishRowEdit: "onBeforeFinishRowEdit", onBeforeHide: "onBeforeHide", onBeforePaste: "onBeforePaste", onBeforePdfExport: "onBeforePdfExport", onBeforeRenderRow: "onBeforeRenderRow", onBeforeRenderRows: "onBeforeRenderRows", onBeforeRowCollapse: "onBeforeRowCollapse", onBeforeRowExpand: "onBeforeRowExpand", onBeforeSelectionChange: "onBeforeSelectionChange", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onBeforeStartRowEdit: "onBeforeStartRowEdit", onBeforeStateApply: "onBeforeStateApply", onBeforeStateSave: "onBeforeStateSave", onBeforeToggleGroup: "onBeforeToggleGroup", onBeforeToggleNode: "onBeforeToggleNode", onCancelCellEdit: "onCancelCellEdit", onCatchAll: "onCatchAll", onCellClick: "onCellClick", onCellContextMenu: "onCellContextMenu", onCellDblClick: "onCellDblClick", onCellMenuBeforeShow: "onCellMenuBeforeShow", onCellMenuItem: "onCellMenuItem", onCellMenuShow: "onCellMenuShow", onCellMenuToggleItem: "onCellMenuToggleItem", onCellMouseEnter: "onCellMouseEnter", onCellMouseLeave: "onCellMouseLeave", onCellMouseOut: "onCellMouseOut", onCellMouseOver: "onCellMouseOver", onCollapse: "onCollapse", onCollapseNode: "onCollapseNode", onColumnCollapseToggle: "onColumnCollapseToggle", onColumnDrag: "onColumnDrag", onColumnDragStart: "onColumnDragStart", onColumnDrop: "onColumnDrop", onColumnResize: "onColumnResize", onColumnResizeStart: "onColumnResizeStart", onContextMenuItem: "onContextMenuItem", onContextMenuToggleItem: "onContextMenuToggleItem", onCopy: "onCopy", onDataChange: "onDataChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onDragSelecting: "onDragSelecting", onElementCreated: "onElementCreated", onExpand: "onExpand", onExpandNode: "onExpandNode", onFileDrop: "onFileDrop", onFillHandleBeforeDragFinalize: "onFillHandleBeforeDragFinalize", onFillHandleDrag: "onFillHandleDrag", onFillHandleDragAbort: "onFillHandleDragAbort", onFillHandleDragEnd: "onFillHandleDragEnd", onFillHandleDragStart: "onFillHandleDragStart", onFinishCellEdit: "onFinishCellEdit", onFinishRowEdit: "onFinishRowEdit", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onGridRowBeforeDragStart: "onGridRowBeforeDragStart", onGridRowBeforeDropFinalize: "onGridRowBeforeDropFinalize", onGridRowDrag: "onGridRowDrag", onGridRowDragAbort: "onGridRowDragAbort", onGridRowDragStart: "onGridRowDragStart", onGridRowDrop: "onGridRowDrop", onHeaderClick: "onHeaderClick", onHeaderMenuBeforeShow: "onHeaderMenuBeforeShow", onHeaderMenuItem: "onHeaderMenuItem", onHeaderMenuShow: "onHeaderMenuShow", onHeaderMenuToggleItem: "onHeaderMenuToggleItem", onHide: "onHide", onLockRows: "onLockRows", onMouseOut: "onMouseOut", onMouseOver: "onMouseOver", onPaint: "onPaint", onPaste: "onPaste", onPdfExport: "onPdfExport", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onRenderRow: "onRenderRow", onRenderRows: "onRenderRows", onResize: "onResize", onResponsive: "onResponsive", onRowCollapse: "onRowCollapse", onRowExpand: "onRowExpand", onRowMouseEnter: "onRowMouseEnter", onRowMouseLeave: "onRowMouseLeave", onScroll: "onScroll", onSelectionChange: "onSelectionChange", onSelectionModeChange: "onSelectionModeChange", onShow: "onShow", onSplit: "onSplit", onSplitterCollapseClick: "onSplitterCollapseClick", onSplitterDragEnd: "onSplitterDragEnd", onSplitterDragStart: "onSplitterDragStart", onSplitterExpandClick: "onSplitterExpandClick", onStartCellEdit: "onStartCellEdit", onStartRowEdit: "onStartRowEdit", onSubGridCollapse: "onSubGridCollapse", onSubGridExpand: "onSubGridExpand", onToggleGroup: "onToggleGroup", onToggleNode: "onToggleNode", onToolClick: "onToolClick", onTreeGroup: "onTreeGroup", onUnlockRows: "onUnlockRows", onUnsplit: "onUnsplit" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3860,6 +4078,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollerClass: [{
@@ -3950,6 +4170,8 @@
                     type: i0.Input
                 }], labelPosition: [{
                     type: i0.Input
+                }], labelWidth: [{
+                    type: i0.Input
                 }], longPressTime: [{
                     type: i0.Input
                 }], margin: [{
@@ -3994,10 +4216,6 @@
                     type: i0.Input
                 }], width: [{
                     type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
-                }], hasChanges: [{
-                    type: i0.Input
                 }], originalStore: [{
                     type: i0.Input
                 }], parent: [{
@@ -4358,8 +4576,7 @@
             this.onBeforeCancelCellEdit = new i0.EventEmitter();
             /**
              * 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/GridBase#event-beforeCancelRowEdit)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-beforeCancelRowEdit)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.grid Target grid
              * @param {RowEditorContext} event.editorContext Editing context
@@ -4474,8 +4691,7 @@
             this.onBeforeFinishCellEdit = new i0.EventEmitter();
             /**
              * 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/GridBase#event-beforeFinishRowEdit)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-beforeFinishRowEdit)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.grid Target grid
              * @param {RowEditorContext} event.editorContext Editing context
@@ -4520,16 +4736,14 @@
             this.onBeforeRenderRows = new i0.EventEmitter();
             /**
              * This event fires before row collapse is started.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-beforeRowCollapse)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-beforeRowCollapse)
              * @param {object} event Event object
              * @param {Core.data.Model} event.record Record
              */
             this.onBeforeRowCollapse = new i0.EventEmitter();
             /**
              * This event fires before row expand is started.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-beforeRowExpand)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-beforeRowExpand)
              * @param {object} event Event object
              * @param {Core.data.Model} event.record Record
              */
@@ -4609,8 +4823,7 @@
             this.onCancelCellEdit = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-catchAll)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#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
@@ -4652,8 +4865,7 @@
             /**
              * 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/GridBase#event-cellMenuBeforeShow)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-cellMenuBeforeShow)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.source The grid
              * @param {Core.widget.Menu} event.menu The menu
@@ -4834,8 +5046,7 @@
             this.onCopy = new i0.EventEmitter();
             /**
              * Fired when data in the store changes.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-dataChange)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-dataChange)
              * @param {object} event Event object
              * @param {Grid.view.GridBase} event.source Owning grid
              * @param {Core.data.Store} event.store The originating store
@@ -4939,8 +5150,7 @@
             this.onFinishCellEdit = new i0.EventEmitter();
             /**
              * 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/GridBase#event-finishRowEdit)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-finishRowEdit)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.grid Target grid
              * @param {RowEditorContext} event.editorContext Editing context
@@ -5040,8 +5250,7 @@
             this.onGridRowDrop = new i0.EventEmitter();
             /**
              * Fired when a grid header is clicked on.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-headerClick)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#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.
@@ -5050,8 +5259,7 @@
             /**
              * 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/GridBase#event-headerMenuBeforeShow)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-headerMenuBeforeShow)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.source The grid
              * @param {Core.widget.Menu} event.menu The menu
@@ -5114,8 +5322,7 @@
             /**
              * 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/GridBase#event-paint)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#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.
@@ -5134,8 +5341,8 @@
             /**
              * 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
              */
             this.onPdfExport = new i0.EventEmitter();
             /**
@@ -5192,8 +5399,7 @@
             this.onRowCollapse = new i0.EventEmitter();
             /**
              * This event fires when a row expand has finished expanding.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#event-rowExpand)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#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
@@ -5331,7 +5537,7 @@
              * @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
              */
             this.onToggleGroup = new i0.EventEmitter();
             /**
@@ -5413,6 +5619,16 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumGridBaseComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
             // Backwards compatibility for gridInstance, schedulerInstance etc.
@@ -5420,6 +5636,48 @@
             me[coreThin.StringHelper.uncapitalize(instanceName) + 'Instance'] = me.instance;
             // 
         };
+        /**
+         * 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.
+         */
+        BryntumGridBaseComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -5431,8 +5689,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumGridBaseComponent.bryntumConfigsOnly, bryntumProps = BryntumGridBaseComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -5685,6 +5943,7 @@
         'insertFirst',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'listeners',
         'loadMask',
         'loadMaskDefaults',
@@ -5711,6 +5970,7 @@
         'resizeToFitIncludesHeader',
         'responsiveLevels',
         'ripple',
+        'role',
         'rootElement',
         'rowHeight',
         'rowLines',
@@ -5796,6 +6056,7 @@
         'resizeToFitIncludesHeader',
         'responsiveLevels',
         'ripple',
+        'role',
         'rootElement',
         'scrollerClass',
         'scrollManager',
@@ -5832,8 +6093,6 @@
         'enableUndoRedoKeys',
         'extraData',
         'flex',
-        'focusVisible',
-        'hasChanges',
         'height',
         'hidden',
         'hideFooters',
@@ -5844,6 +6103,7 @@
         'insertFirst',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'longPressTime',
         'margin',
         'maxHeight',
@@ -5877,7 +6137,7 @@
         'width'
     ]);
     BryntumGridBaseComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridBaseComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumGridBaseComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridBaseComponent, selector: "bryntum-grid-base", inputs: { adopt: "adopt", animateFilterRemovals: "animateFilterRemovals", animateRemovingRows: "animateRemovingRows", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoHeight: "autoHeight", bbar: "bbar", bodyCls: "bodyCls", border: "border", bubbleEvents: "bubbleEvents", collapsible: "collapsible", color: "color", config: "config", contentElementCls: "contentElementCls", contextMenuTriggerEvent: "contextMenuTriggerEvent", dataField: "dataField", defaultRegion: "defaultRegion", destroyStore: "destroyStore", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", disableGridColumnIdWarning: "disableGridColumnIdWarning", disableGridRowModelWarning: "disableGridRowModelWarning", dock: "dock", drawer: "drawer", elementAttributes: "elementAttributes", enableSticky: "enableSticky", enableTextSelection: "enableTextSelection", fillLastColumn: "fillLastColumn", fixedRowHeight: "fixedRowHeight", footer: "footer", formulaProviders: "formulaProviders", fullRowRefresh: "fullRowRefresh", getRowHeight: "getRowHeight", header: "header", hideHorizontalScrollbar: "hideHorizontalScrollbar", hoverCls: "hoverCls", icon: "icon", ignoreParentReadOnly: "ignoreParentReadOnly", listeners: "listeners", loadMask: "loadMask", loadMaskDefaults: "loadMaskDefaults", loadMaskError: "loadMaskError", localizable: "localizable", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", plugins: "plugins", preserveFocusOnDatasetChange: "preserveFocusOnDatasetChange", preserveScrollOnDatasetChange: "preserveScrollOnDatasetChange", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", resizable: "resizable", resizeToFitIncludesHeader: "resizeToFitIncludesHeader", responsiveLevels: "responsiveLevels", ripple: "ripple", rootElement: "rootElement", scrollerClass: "scrollerClass", scrollManager: "scrollManager", showDirty: "showDirty", stateful: "stateful", statefulEvents: "statefulEvents", stateId: "stateId", stateProvider: "stateProvider", strips: "strips", subGridConfigs: "subGridConfigs", syncMask: "syncMask", tab: "tab", tabBarItems: "tabBarItems", tbar: "tbar", ui: "ui", weight: "weight", alignSelf: "alignSelf", animateTreeNodeToggle: "animateTreeNodeToggle", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cellEllipsis: "cellEllipsis", cls: "cls", collapsed: "collapsed", column: "column", columnLines: "columnLines", columns: "columns", data: "data", dataset: "dataset", disabled: "disabled", emptyText: "emptyText", enableUndoRedoKeys: "enableUndoRedoKeys", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", hideFooters: "hideFooters", hideHeaders: "hideHeaders", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", labelPosition: "labelPosition", longPressTime: "longPressTime", margin: "margin", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", preserveScroll: "preserveScroll", readOnly: "readOnly", rendition: "rendition", rowHeight: "rowHeight", rowLines: "rowLines", rtl: "rtl", scrollable: "scrollable", selectionMode: "selectionMode", span: "span", stateSettings: "stateSettings", store: "store", title: "title", tools: "tools", transition: "transition", transitionDuration: "transitionDuration", width: "width", focusVisible: "focusVisible", hasChanges: "hasChanges", originalStore: "originalStore", parent: "parent", selectedCell: "selectedCell", selectedCells: "selectedCells", selectedRecord: "selectedRecord", selectedRecords: "selectedRecords", selectedRows: "selectedRows", state: "state", tooltip: "tooltip", aiFeature: "aiFeature", aiFilterFeature: "aiFilterFeature", cellCopyPasteFeature: "cellCopyPasteFeature", cellEditFeature: "cellEditFeature", cellMenuFeature: "cellMenuFeature", cellTooltipFeature: "cellTooltipFeature", chartsFeature: "chartsFeature", columnAutoWidthFeature: "columnAutoWidthFeature", columnDragToolbarFeature: "columnDragToolbarFeature", columnPickerFeature: "columnPickerFeature", columnRenameFeature: "columnRenameFeature", columnReorderFeature: "columnReorderFeature", columnResizeFeature: "columnResizeFeature", excelExporterFeature: "excelExporterFeature", fileDropFeature: "fileDropFeature", fillHandleFeature: "fillHandleFeature", filterFeature: "filterFeature", filterBarFeature: "filterBarFeature", groupFeature: "groupFeature", groupSummaryFeature: "groupSummaryFeature", headerMenuFeature: "headerMenuFeature", lockRowsFeature: "lockRowsFeature", mergeCellsFeature: "mergeCellsFeature", pdfExportFeature: "pdfExportFeature", pinColumnsFeature: "pinColumnsFeature", printFeature: "printFeature", quickFindFeature: "quickFindFeature", regionResizeFeature: "regionResizeFeature", rowCopyPasteFeature: "rowCopyPasteFeature", rowEditFeature: "rowEditFeature", rowExpanderFeature: "rowExpanderFeature", rowReorderFeature: "rowReorderFeature", rowResizeFeature: "rowResizeFeature", searchFeature: "searchFeature", sortFeature: "sortFeature", splitFeature: "splitFeature", stickyCellsFeature: "stickyCellsFeature", stripeFeature: "stripeFeature", summaryFeature: "summaryFeature", treeFeature: "treeFeature", treeGroupFeature: "treeGroupFeature" }, outputs: { onBeforeCancelCellEdit: "onBeforeCancelCellEdit", onBeforeCancelRowEdit: "onBeforeCancelRowEdit", onBeforeCellEditStart: "onBeforeCellEditStart", onBeforeCellRangeDelete: "onBeforeCellRangeDelete", onBeforeCellRangeEdit: "onBeforeCellRangeEdit", onBeforeColumnCollapseToggle: "onBeforeColumnCollapseToggle", onBeforeColumnDragStart: "onBeforeColumnDragStart", onBeforeColumnDropFinalize: "onBeforeColumnDropFinalize", onBeforeColumnResize: "onBeforeColumnResize", onBeforeCopy: "onBeforeCopy", onBeforeCSVExport: "onBeforeCSVExport", onBeforeDestroy: "onBeforeDestroy", onBeforeExcelExport: "onBeforeExcelExport", onBeforeFillHandleDragStart: "onBeforeFillHandleDragStart", onBeforeFinishCellEdit: "onBeforeFinishCellEdit", onBeforeFinishRowEdit: "onBeforeFinishRowEdit", onBeforeHide: "onBeforeHide", onBeforePaste: "onBeforePaste", onBeforePdfExport: "onBeforePdfExport", onBeforeRenderRow: "onBeforeRenderRow", onBeforeRenderRows: "onBeforeRenderRows", onBeforeRowCollapse: "onBeforeRowCollapse", onBeforeRowExpand: "onBeforeRowExpand", onBeforeSelectionChange: "onBeforeSelectionChange", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onBeforeStartRowEdit: "onBeforeStartRowEdit", onBeforeStateApply: "onBeforeStateApply", onBeforeStateSave: "onBeforeStateSave", onBeforeToggleGroup: "onBeforeToggleGroup", onBeforeToggleNode: "onBeforeToggleNode", onCancelCellEdit: "onCancelCellEdit", onCatchAll: "onCatchAll", onCellClick: "onCellClick", onCellContextMenu: "onCellContextMenu", onCellDblClick: "onCellDblClick", onCellMenuBeforeShow: "onCellMenuBeforeShow", onCellMenuItem: "onCellMenuItem", onCellMenuShow: "onCellMenuShow", onCellMenuToggleItem: "onCellMenuToggleItem", onCellMouseEnter: "onCellMouseEnter", onCellMouseLeave: "onCellMouseLeave", onCellMouseOut: "onCellMouseOut", onCellMouseOver: "onCellMouseOver", onCollapse: "onCollapse", onCollapseNode: "onCollapseNode", onColumnCollapseToggle: "onColumnCollapseToggle", onColumnDrag: "onColumnDrag", onColumnDragStart: "onColumnDragStart", onColumnDrop: "onColumnDrop", onColumnResize: "onColumnResize", onColumnResizeStart: "onColumnResizeStart", onContextMenuItem: "onContextMenuItem", onContextMenuToggleItem: "onContextMenuToggleItem", onCopy: "onCopy", onDataChange: "onDataChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onDragSelecting: "onDragSelecting", onElementCreated: "onElementCreated", onExpand: "onExpand", onExpandNode: "onExpandNode", onFileDrop: "onFileDrop", onFillHandleBeforeDragFinalize: "onFillHandleBeforeDragFinalize", onFillHandleDrag: "onFillHandleDrag", onFillHandleDragAbort: "onFillHandleDragAbort", onFillHandleDragEnd: "onFillHandleDragEnd", onFillHandleDragStart: "onFillHandleDragStart", onFinishCellEdit: "onFinishCellEdit", onFinishRowEdit: "onFinishRowEdit", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onGridRowBeforeDragStart: "onGridRowBeforeDragStart", onGridRowBeforeDropFinalize: "onGridRowBeforeDropFinalize", onGridRowDrag: "onGridRowDrag", onGridRowDragAbort: "onGridRowDragAbort", onGridRowDragStart: "onGridRowDragStart", onGridRowDrop: "onGridRowDrop", onHeaderClick: "onHeaderClick", onHeaderMenuBeforeShow: "onHeaderMenuBeforeShow", onHeaderMenuItem: "onHeaderMenuItem", onHeaderMenuShow: "onHeaderMenuShow", onHeaderMenuToggleItem: "onHeaderMenuToggleItem", onHide: "onHide", onLockRows: "onLockRows", onMouseOut: "onMouseOut", onMouseOver: "onMouseOver", onPaint: "onPaint", onPaste: "onPaste", onPdfExport: "onPdfExport", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onRenderRow: "onRenderRow", onRenderRows: "onRenderRows", onResize: "onResize", onResponsive: "onResponsive", onRowCollapse: "onRowCollapse", onRowExpand: "onRowExpand", onRowMouseEnter: "onRowMouseEnter", onRowMouseLeave: "onRowMouseLeave", onScroll: "onScroll", onSelectionChange: "onSelectionChange", onSelectionModeChange: "onSelectionModeChange", onShow: "onShow", onSplit: "onSplit", onSplitterCollapseClick: "onSplitterCollapseClick", onSplitterDragEnd: "onSplitterDragEnd", onSplitterDragStart: "onSplitterDragStart", onSplitterExpandClick: "onSplitterExpandClick", onStartCellEdit: "onStartCellEdit", onStartRowEdit: "onStartRowEdit", onSubGridCollapse: "onSubGridCollapse", onSubGridExpand: "onSubGridExpand", onToggleGroup: "onToggleGroup", onToggleNode: "onToggleNode", onToolClick: "onToolClick", onTreeGroup: "onTreeGroup", onUnlockRows: "onUnlockRows", onUnsplit: "onUnsplit" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumGridBaseComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridBaseComponent, selector: "bryntum-grid-base", inputs: { adopt: "adopt", animateFilterRemovals: "animateFilterRemovals", animateRemovingRows: "animateRemovingRows", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoHeight: "autoHeight", bbar: "bbar", bodyCls: "bodyCls", border: "border", bubbleEvents: "bubbleEvents", collapsible: "collapsible", color: "color", config: "config", contentElementCls: "contentElementCls", contextMenuTriggerEvent: "contextMenuTriggerEvent", dataField: "dataField", defaultRegion: "defaultRegion", destroyStore: "destroyStore", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", disableGridColumnIdWarning: "disableGridColumnIdWarning", disableGridRowModelWarning: "disableGridRowModelWarning", dock: "dock", drawer: "drawer", elementAttributes: "elementAttributes", enableSticky: "enableSticky", enableTextSelection: "enableTextSelection", fillLastColumn: "fillLastColumn", fixedRowHeight: "fixedRowHeight", footer: "footer", formulaProviders: "formulaProviders", fullRowRefresh: "fullRowRefresh", getRowHeight: "getRowHeight", header: "header", hideHorizontalScrollbar: "hideHorizontalScrollbar", hoverCls: "hoverCls", icon: "icon", ignoreParentReadOnly: "ignoreParentReadOnly", listeners: "listeners", loadMask: "loadMask", loadMaskDefaults: "loadMaskDefaults", loadMaskError: "loadMaskError", localizable: "localizable", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", plugins: "plugins", preserveFocusOnDatasetChange: "preserveFocusOnDatasetChange", preserveScrollOnDatasetChange: "preserveScrollOnDatasetChange", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", resizable: "resizable", resizeToFitIncludesHeader: "resizeToFitIncludesHeader", responsiveLevels: "responsiveLevels", ripple: "ripple", role: "role", rootElement: "rootElement", scrollerClass: "scrollerClass", scrollManager: "scrollManager", showDirty: "showDirty", stateful: "stateful", statefulEvents: "statefulEvents", stateId: "stateId", stateProvider: "stateProvider", strips: "strips", subGridConfigs: "subGridConfigs", syncMask: "syncMask", tab: "tab", tabBarItems: "tabBarItems", tbar: "tbar", ui: "ui", weight: "weight", alignSelf: "alignSelf", animateTreeNodeToggle: "animateTreeNodeToggle", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cellEllipsis: "cellEllipsis", cls: "cls", collapsed: "collapsed", column: "column", columnLines: "columnLines", columns: "columns", data: "data", dataset: "dataset", disabled: "disabled", emptyText: "emptyText", enableUndoRedoKeys: "enableUndoRedoKeys", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", hideFooters: "hideFooters", hideHeaders: "hideHeaders", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", labelPosition: "labelPosition", labelWidth: "labelWidth", longPressTime: "longPressTime", margin: "margin", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", preserveScroll: "preserveScroll", readOnly: "readOnly", rendition: "rendition", rowHeight: "rowHeight", rowLines: "rowLines", rtl: "rtl", scrollable: "scrollable", selectionMode: "selectionMode", span: "span", stateSettings: "stateSettings", store: "store", title: "title", tools: "tools", transition: "transition", transitionDuration: "transitionDuration", width: "width", originalStore: "originalStore", parent: "parent", selectedCell: "selectedCell", selectedCells: "selectedCells", selectedRecord: "selectedRecord", selectedRecords: "selectedRecords", selectedRows: "selectedRows", state: "state", tooltip: "tooltip", aiFeature: "aiFeature", aiFilterFeature: "aiFilterFeature", cellCopyPasteFeature: "cellCopyPasteFeature", cellEditFeature: "cellEditFeature", cellMenuFeature: "cellMenuFeature", cellTooltipFeature: "cellTooltipFeature", chartsFeature: "chartsFeature", columnAutoWidthFeature: "columnAutoWidthFeature", columnDragToolbarFeature: "columnDragToolbarFeature", columnPickerFeature: "columnPickerFeature", columnRenameFeature: "columnRenameFeature", columnReorderFeature: "columnReorderFeature", columnResizeFeature: "columnResizeFeature", excelExporterFeature: "excelExporterFeature", fileDropFeature: "fileDropFeature", fillHandleFeature: "fillHandleFeature", filterFeature: "filterFeature", filterBarFeature: "filterBarFeature", groupFeature: "groupFeature", groupSummaryFeature: "groupSummaryFeature", headerMenuFeature: "headerMenuFeature", lockRowsFeature: "lockRowsFeature", mergeCellsFeature: "mergeCellsFeature", pdfExportFeature: "pdfExportFeature", pinColumnsFeature: "pinColumnsFeature", printFeature: "printFeature", quickFindFeature: "quickFindFeature", regionResizeFeature: "regionResizeFeature", rowCopyPasteFeature: "rowCopyPasteFeature", rowEditFeature: "rowEditFeature", rowExpanderFeature: "rowExpanderFeature", rowReorderFeature: "rowReorderFeature", rowResizeFeature: "rowResizeFeature", searchFeature: "searchFeature", sortFeature: "sortFeature", splitFeature: "splitFeature", stickyCellsFeature: "stickyCellsFeature", stripeFeature: "stripeFeature", summaryFeature: "summaryFeature", treeFeature: "treeFeature", treeGroupFeature: "treeGroupFeature" }, outputs: { onBeforeCancelCellEdit: "onBeforeCancelCellEdit", onBeforeCancelRowEdit: "onBeforeCancelRowEdit", onBeforeCellEditStart: "onBeforeCellEditStart", onBeforeCellRangeDelete: "onBeforeCellRangeDelete", onBeforeCellRangeEdit: "onBeforeCellRangeEdit", onBeforeColumnCollapseToggle: "onBeforeColumnCollapseToggle", onBeforeColumnDragStart: "onBeforeColumnDragStart", onBeforeColumnDropFinalize: "onBeforeColumnDropFinalize", onBeforeColumnResize: "onBeforeColumnResize", onBeforeCopy: "onBeforeCopy", onBeforeCSVExport: "onBeforeCSVExport", onBeforeDestroy: "onBeforeDestroy", onBeforeExcelExport: "onBeforeExcelExport", onBeforeFillHandleDragStart: "onBeforeFillHandleDragStart", onBeforeFinishCellEdit: "onBeforeFinishCellEdit", onBeforeFinishRowEdit: "onBeforeFinishRowEdit", onBeforeHide: "onBeforeHide", onBeforePaste: "onBeforePaste", onBeforePdfExport: "onBeforePdfExport", onBeforeRenderRow: "onBeforeRenderRow", onBeforeRenderRows: "onBeforeRenderRows", onBeforeRowCollapse: "onBeforeRowCollapse", onBeforeRowExpand: "onBeforeRowExpand", onBeforeSelectionChange: "onBeforeSelectionChange", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onBeforeStartRowEdit: "onBeforeStartRowEdit", onBeforeStateApply: "onBeforeStateApply", onBeforeStateSave: "onBeforeStateSave", onBeforeToggleGroup: "onBeforeToggleGroup", onBeforeToggleNode: "onBeforeToggleNode", onCancelCellEdit: "onCancelCellEdit", onCatchAll: "onCatchAll", onCellClick: "onCellClick", onCellContextMenu: "onCellContextMenu", onCellDblClick: "onCellDblClick", onCellMenuBeforeShow: "onCellMenuBeforeShow", onCellMenuItem: "onCellMenuItem", onCellMenuShow: "onCellMenuShow", onCellMenuToggleItem: "onCellMenuToggleItem", onCellMouseEnter: "onCellMouseEnter", onCellMouseLeave: "onCellMouseLeave", onCellMouseOut: "onCellMouseOut", onCellMouseOver: "onCellMouseOver", onCollapse: "onCollapse", onCollapseNode: "onCollapseNode", onColumnCollapseToggle: "onColumnCollapseToggle", onColumnDrag: "onColumnDrag", onColumnDragStart: "onColumnDragStart", onColumnDrop: "onColumnDrop", onColumnResize: "onColumnResize", onColumnResizeStart: "onColumnResizeStart", onContextMenuItem: "onContextMenuItem", onContextMenuToggleItem: "onContextMenuToggleItem", onCopy: "onCopy", onDataChange: "onDataChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onDragSelecting: "onDragSelecting", onElementCreated: "onElementCreated", onExpand: "onExpand", onExpandNode: "onExpandNode", onFileDrop: "onFileDrop", onFillHandleBeforeDragFinalize: "onFillHandleBeforeDragFinalize", onFillHandleDrag: "onFillHandleDrag", onFillHandleDragAbort: "onFillHandleDragAbort", onFillHandleDragEnd: "onFillHandleDragEnd", onFillHandleDragStart: "onFillHandleDragStart", onFinishCellEdit: "onFinishCellEdit", onFinishRowEdit: "onFinishRowEdit", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onGridRowBeforeDragStart: "onGridRowBeforeDragStart", onGridRowBeforeDropFinalize: "onGridRowBeforeDropFinalize", onGridRowDrag: "onGridRowDrag", onGridRowDragAbort: "onGridRowDragAbort", onGridRowDragStart: "onGridRowDragStart", onGridRowDrop: "onGridRowDrop", onHeaderClick: "onHeaderClick", onHeaderMenuBeforeShow: "onHeaderMenuBeforeShow", onHeaderMenuItem: "onHeaderMenuItem", onHeaderMenuShow: "onHeaderMenuShow", onHeaderMenuToggleItem: "onHeaderMenuToggleItem", onHide: "onHide", onLockRows: "onLockRows", onMouseOut: "onMouseOut", onMouseOver: "onMouseOver", onPaint: "onPaint", onPaste: "onPaste", onPdfExport: "onPdfExport", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onRenderRow: "onRenderRow", onRenderRows: "onRenderRows", onResize: "onResize", onResponsive: "onResponsive", onRowCollapse: "onRowCollapse", onRowExpand: "onRowExpand", onRowMouseEnter: "onRowMouseEnter", onRowMouseLeave: "onRowMouseLeave", onScroll: "onScroll", onSelectionChange: "onSelectionChange", onSelectionModeChange: "onSelectionModeChange", onShow: "onShow", onSplit: "onSplit", onSplitterCollapseClick: "onSplitterCollapseClick", onSplitterDragEnd: "onSplitterDragEnd", onSplitterDragStart: "onSplitterDragStart", onSplitterExpandClick: "onSplitterExpandClick", onStartCellEdit: "onStartCellEdit", onStartRowEdit: "onStartRowEdit", onSubGridCollapse: "onSubGridCollapse", onSubGridExpand: "onSubGridExpand", onToggleGroup: "onToggleGroup", onToggleNode: "onToggleNode", onToolClick: "onToolClick", onTreeGroup: "onTreeGroup", onUnlockRows: "onUnlockRows", onUnsplit: "onUnsplit" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridBaseComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5992,6 +6252,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollerClass: [{
@@ -6080,6 +6342,8 @@
                     type: i0.Input
                 }], labelPosition: [{
                     type: i0.Input
+                }], labelWidth: [{
+                    type: i0.Input
                 }], longPressTime: [{
                     type: i0.Input
                 }], margin: [{
@@ -6124,10 +6388,6 @@
                     type: i0.Input
                 }], width: [{
                     type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
-                }], hasChanges: [{
-                    type: i0.Input
                 }], originalStore: [{
                     type: i0.Input
                 }], parent: [{
@@ -6499,8 +6759,7 @@
             this.onBeforeShow = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/GridChartDesigner#event-catchAll)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/GridChartDesigner#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
@@ -6551,8 +6810,7 @@
             /**
              * 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/widget/GridChartDesigner#event-paint)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/GridChartDesigner#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.
@@ -6632,9 +6890,61 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumGridChartDesignerComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         };
+        /**
+         * 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.
+         */
+        BryntumGridChartDesignerComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -6646,8 +6956,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumGridChartDesignerComponent.bryntumConfigsOnly, bryntumProps = BryntumGridChartDesignerComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -6746,6 +7056,7 @@
         'readOnly',
         'relayStoreEvents',
         'ripple',
+        'role',
         'rootElement',
         'rtl',
         'scrollable',
@@ -6800,6 +7111,7 @@
         'preventTooltipOnTouch',
         'relayStoreEvents',
         'ripple',
+        'role',
         'rootElement',
         'scrollAction',
         'showAnimation',
@@ -6815,7 +7127,6 @@
     ];
     BryntumGridChartDesignerComponent.bryntumProps = BryntumGridChartDesignerComponent.bryntumFeatureNames.concat([
         'alignSelf',
-        'anchorSize',
         'appendTo',
         'callOnFunctions',
         'catchEventHandlerExceptions',
@@ -6826,7 +7137,6 @@
         'disabled',
         'extraData',
         'flex',
-        'focusVisible',
         'height',
         'hidden',
         'html',
@@ -6851,7 +7161,7 @@
         'y'
     ]);
     BryntumGridChartDesignerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridChartDesignerComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumGridChartDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridChartDesignerComponent, selector: "bryntum-grid-chart-designer", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", bubbleEvents: "bubbleEvents", centered: "centered", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", floating: "floating", grid: "grid", hideAnimation: "hideAnimation", htmlCls: "htmlCls", ignoreParentReadOnly: "ignoreParentReadOnly", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", ripple: "ripple", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", sync: "sync", tab: "tab", tag: "tag", textAlign: "textAlign", title: "title", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", content: "content", dataset: "dataset", disabled: "disabled", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", html: "html", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", readOnly: "readOnly", rtl: "rtl", scrollable: "scrollable", span: "span", tooltip: "tooltip", width: "width", x: "x", y: "y", anchorSize: "anchorSize", focusVisible: "focusVisible", parent: "parent" }, outputs: { onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumGridChartDesignerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridChartDesignerComponent, selector: "bryntum-grid-chart-designer", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", bubbleEvents: "bubbleEvents", centered: "centered", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", floating: "floating", grid: "grid", hideAnimation: "hideAnimation", htmlCls: "htmlCls", ignoreParentReadOnly: "ignoreParentReadOnly", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", ripple: "ripple", role: "role", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", sync: "sync", tab: "tab", tag: "tag", textAlign: "textAlign", title: "title", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", content: "content", dataset: "dataset", disabled: "disabled", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", html: "html", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", readOnly: "readOnly", rtl: "rtl", scrollable: "scrollable", span: "span", tooltip: "tooltip", width: "width", x: "x", y: "y", parent: "parent" }, outputs: { onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridChartDesignerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6924,6 +7234,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollAction: [{
@@ -7012,10 +7324,6 @@
                     type: i0.Input
                 }], y: [{
                     type: i0.Input
-                }], anchorSize: [{
-                    type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
                 }], parent: [{
                     type: i0.Input
                 }], onBeforeDestroy: [{
@@ -7087,8 +7395,7 @@
             this.onBeforeShow = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/GridFieldFilterPicker#event-catchAll)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/GridFieldFilterPicker#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
@@ -7154,8 +7461,7 @@
             /**
              * 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/widget/GridFieldFilterPicker#event-paint)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/GridFieldFilterPicker#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.
@@ -7235,9 +7541,61 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumGridFieldFilterPickerComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         };
+        /**
+         * 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.
+         */
+        BryntumGridFieldFilterPickerComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -7249,8 +7607,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumGridFieldFilterPickerComponent.bryntumConfigsOnly, bryntumProps = BryntumGridFieldFilterPickerComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -7348,6 +7706,7 @@
         'items',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'layout',
         'layoutStyle',
         'lazyItems',
@@ -7376,6 +7735,7 @@
         'relayStoreEvents',
         'rendition',
         'ripple',
+        'role',
         'rootElement',
         'rtl',
         'scrollable',
@@ -7452,6 +7812,7 @@
         'propertyLocked',
         'relayStoreEvents',
         'ripple',
+        'role',
         'rootElement',
         'scrollAction',
         'showAnimation',
@@ -7471,7 +7832,6 @@
     ];
     BryntumGridFieldFilterPickerComponent.bryntumProps = BryntumGridFieldFilterPickerComponent.bryntumFeatureNames.concat([
         'alignSelf',
-        'anchorSize',
         'appendTo',
         'callOnFunctions',
         'catchEventHandlerExceptions',
@@ -7482,8 +7842,6 @@
         'disabled',
         'extraData',
         'flex',
-        'focusVisible',
-        'hasChanges',
         'height',
         'hidden',
         'html',
@@ -7491,11 +7849,10 @@
         'inputFieldAlign',
         'insertBefore',
         'insertFirst',
-        'isSettingValues',
-        'isValid',
         'items',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'layout',
         'layoutStyle',
         'margin',
@@ -7519,7 +7876,7 @@
         'y'
     ]);
     BryntumGridFieldFilterPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridFieldFilterPickerComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumGridFieldFilterPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridFieldFilterPickerComponent, selector: "bryntum-grid-field-filter-picker", inputs: { adopt: "adopt", align: "align", allowedFieldNames: "allowedFieldNames", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoUpdateRecord: "autoUpdateRecord", border: "border", bubbleEvents: "bubbleEvents", centered: "centered", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", dateFormat: "dateFormat", defaultBindProperty: "defaultBindProperty", defaultFocus: "defaultFocus", defaults: "defaults", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", fields: "fields", filter: "filter", floating: "floating", getValueFieldConfig: "getValueFieldConfig", grid: "grid", hideAnimation: "hideAnimation", hideWhenEmpty: "hideWhenEmpty", htmlCls: "htmlCls", ignoreParentReadOnly: "ignoreParentReadOnly", itemCls: "itemCls", lazyItems: "lazyItems", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", namedItems: "namedItems", operatorLocked: "operatorLocked", operators: "operators", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", propertyFieldConfig: "propertyFieldConfig", propertyLocked: "propertyLocked", relayStoreEvents: "relayStoreEvents", ripple: "ripple", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", tab: "tab", tabBarItems: "tabBarItems", tag: "tag", textAlign: "textAlign", textContent: "textContent", title: "title", triggerChangeOnInput: "triggerChangeOnInput", type: "type", ui: "ui", valueFieldPlaceholders: "valueFieldPlaceholders", valueLocked: "valueLocked", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", content: "content", dataset: "dataset", disabled: "disabled", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", html: "html", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", items: "items", keyMap: "keyMap", labelPosition: "labelPosition", layout: "layout", layoutStyle: "layoutStyle", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", readOnly: "readOnly", record: "record", rendition: "rendition", rtl: "rtl", scrollable: "scrollable", span: "span", strictRecordMapping: "strictRecordMapping", tooltip: "tooltip", width: "width", x: "x", y: "y", anchorSize: "anchorSize", focusVisible: "focusVisible", hasChanges: "hasChanges", isSettingValues: "isSettingValues", isValid: "isValid", parent: "parent", values: "values" }, outputs: { onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumGridFieldFilterPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridFieldFilterPickerComponent, selector: "bryntum-grid-field-filter-picker", inputs: { adopt: "adopt", align: "align", allowedFieldNames: "allowedFieldNames", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoUpdateRecord: "autoUpdateRecord", border: "border", bubbleEvents: "bubbleEvents", centered: "centered", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", dateFormat: "dateFormat", defaultBindProperty: "defaultBindProperty", defaultFocus: "defaultFocus", defaults: "defaults", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", fields: "fields", filter: "filter", floating: "floating", getValueFieldConfig: "getValueFieldConfig", grid: "grid", hideAnimation: "hideAnimation", hideWhenEmpty: "hideWhenEmpty", htmlCls: "htmlCls", ignoreParentReadOnly: "ignoreParentReadOnly", itemCls: "itemCls", lazyItems: "lazyItems", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", namedItems: "namedItems", operatorLocked: "operatorLocked", operators: "operators", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", propertyFieldConfig: "propertyFieldConfig", propertyLocked: "propertyLocked", relayStoreEvents: "relayStoreEvents", ripple: "ripple", role: "role", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", tab: "tab", tabBarItems: "tabBarItems", tag: "tag", textAlign: "textAlign", textContent: "textContent", title: "title", triggerChangeOnInput: "triggerChangeOnInput", type: "type", ui: "ui", valueFieldPlaceholders: "valueFieldPlaceholders", valueLocked: "valueLocked", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", content: "content", dataset: "dataset", disabled: "disabled", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", html: "html", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", items: "items", keyMap: "keyMap", labelPosition: "labelPosition", labelWidth: "labelWidth", layout: "layout", layoutStyle: "layoutStyle", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", readOnly: "readOnly", record: "record", rendition: "rendition", rtl: "rtl", scrollable: "scrollable", span: "span", strictRecordMapping: "strictRecordMapping", tooltip: "tooltip", width: "width", x: "x", y: "y", parent: "parent", values: "values" }, outputs: { onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridFieldFilterPickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7626,6 +7983,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollAction: [{
@@ -7700,6 +8059,8 @@
                     type: i0.Input
                 }], labelPosition: [{
                     type: i0.Input
+                }], labelWidth: [{
+                    type: i0.Input
                 }], layout: [{
                     type: i0.Input
                 }], layoutStyle: [{
@@ -7738,16 +8099,6 @@
                     type: i0.Input
                 }], y: [{
                     type: i0.Input
-                }], anchorSize: [{
-                    type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
-                }], hasChanges: [{
-                    type: i0.Input
-                }], isSettingValues: [{
-                    type: i0.Input
-                }], isValid: [{
-                    type: i0.Input
                 }], parent: [{
                     type: i0.Input
                 }], values: [{
@@ -7835,8 +8186,7 @@
             this.onBeforeShow = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/GridFieldFilterPickerGroup#event-catchAll)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/GridFieldFilterPickerGroup#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
@@ -7902,8 +8252,7 @@
             /**
              * 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/widget/GridFieldFilterPickerGroup#event-paint)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/GridFieldFilterPickerGroup#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.
@@ -7983,9 +8332,61 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumGridFieldFilterPickerGroupComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         };
+        /**
+         * 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.
+         */
+        BryntumGridFieldFilterPickerGroupComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -7997,8 +8398,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumGridFieldFilterPickerGroupComponent.bryntumConfigsOnly, bryntumProps = BryntumGridFieldFilterPickerGroupComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -8099,6 +8500,7 @@
         'items',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'layout',
         'layoutStyle',
         'lazyItems',
@@ -8125,6 +8527,7 @@
         'relayStoreEvents',
         'rendition',
         'ripple',
+        'role',
         'rootElement',
         'rtl',
         'scrollable',
@@ -8200,6 +8603,7 @@
         'preventTooltipOnTouch',
         'relayStoreEvents',
         'ripple',
+        'role',
         'rootElement',
         'scrollAction',
         'showAddFilterButton',
@@ -8218,7 +8622,6 @@
     ];
     BryntumGridFieldFilterPickerGroupComponent.bryntumProps = BryntumGridFieldFilterPickerGroupComponent.bryntumFeatureNames.concat([
         'alignSelf',
-        'anchorSize',
         'appendTo',
         'callOnFunctions',
         'catchEventHandlerExceptions',
@@ -8229,8 +8632,6 @@
         'disabled',
         'extraData',
         'flex',
-        'focusVisible',
-        'hasChanges',
         'height',
         'hidden',
         'html',
@@ -8238,11 +8639,10 @@
         'inputFieldAlign',
         'insertBefore',
         'insertFirst',
-        'isSettingValues',
-        'isValid',
         'items',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'layout',
         'layoutStyle',
         'margin',
@@ -8267,7 +8667,7 @@
         'y'
     ]);
     BryntumGridFieldFilterPickerGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridFieldFilterPickerGroupComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumGridFieldFilterPickerGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridFieldFilterPickerGroupComponent, selector: "bryntum-grid-field-filter-picker-group", inputs: { addFilterButtonText: "addFilterButtonText", adopt: "adopt", align: "align", allowedFieldNames: "allowedFieldNames", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoUpdateRecord: "autoUpdateRecord", border: "border", bubbleEvents: "bubbleEvents", canDeleteFilter: "canDeleteFilter", canManageFilter: "canManageFilter", centered: "centered", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", dateFormat: "dateFormat", defaultBindProperty: "defaultBindProperty", defaultFocus: "defaultFocus", defaults: "defaults", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", filters: "filters", floating: "floating", getFieldFilterPickerConfig: "getFieldFilterPickerConfig", grid: "grid", hideAnimation: "hideAnimation", hideWhenEmpty: "hideWhenEmpty", htmlCls: "htmlCls", ignoreParentReadOnly: "ignoreParentReadOnly", itemCls: "itemCls", lazyItems: "lazyItems", limitToProperty: "limitToProperty", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", namedItems: "namedItems", operators: "operators", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", ripple: "ripple", rootElement: "rootElement", scrollAction: "scrollAction", showAddFilterButton: "showAddFilterButton", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", tab: "tab", tabBarItems: "tabBarItems", tag: "tag", textAlign: "textAlign", textContent: "textContent", title: "title", triggerChangeOnInput: "triggerChangeOnInput", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", content: "content", dataset: "dataset", disabled: "disabled", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", html: "html", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", items: "items", keyMap: "keyMap", labelPosition: "labelPosition", layout: "layout", layoutStyle: "layoutStyle", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", readOnly: "readOnly", record: "record", rendition: "rendition", rtl: "rtl", scrollable: "scrollable", span: "span", strictRecordMapping: "strictRecordMapping", tooltip: "tooltip", width: "width", x: "x", y: "y", anchorSize: "anchorSize", focusVisible: "focusVisible", hasChanges: "hasChanges", isSettingValues: "isSettingValues", isValid: "isValid", parent: "parent", value: "value", values: "values" }, outputs: { onBeforeAddFilter: "onBeforeAddFilter", onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumGridFieldFilterPickerGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGridFieldFilterPickerGroupComponent, selector: "bryntum-grid-field-filter-picker-group", inputs: { addFilterButtonText: "addFilterButtonText", adopt: "adopt", align: "align", allowedFieldNames: "allowedFieldNames", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoUpdateRecord: "autoUpdateRecord", border: "border", bubbleEvents: "bubbleEvents", canDeleteFilter: "canDeleteFilter", canManageFilter: "canManageFilter", centered: "centered", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", dateFormat: "dateFormat", defaultBindProperty: "defaultBindProperty", defaultFocus: "defaultFocus", defaults: "defaults", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", filters: "filters", floating: "floating", getFieldFilterPickerConfig: "getFieldFilterPickerConfig", grid: "grid", hideAnimation: "hideAnimation", hideWhenEmpty: "hideWhenEmpty", htmlCls: "htmlCls", ignoreParentReadOnly: "ignoreParentReadOnly", itemCls: "itemCls", lazyItems: "lazyItems", limitToProperty: "limitToProperty", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", namedItems: "namedItems", operators: "operators", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", ripple: "ripple", role: "role", rootElement: "rootElement", scrollAction: "scrollAction", showAddFilterButton: "showAddFilterButton", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", tab: "tab", tabBarItems: "tabBarItems", tag: "tag", textAlign: "textAlign", textContent: "textContent", title: "title", triggerChangeOnInput: "triggerChangeOnInput", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", content: "content", dataset: "dataset", disabled: "disabled", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", html: "html", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", items: "items", keyMap: "keyMap", labelPosition: "labelPosition", labelWidth: "labelWidth", layout: "layout", layoutStyle: "layoutStyle", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", readOnly: "readOnly", record: "record", rendition: "rendition", rtl: "rtl", scrollable: "scrollable", span: "span", strictRecordMapping: "strictRecordMapping", tooltip: "tooltip", width: "width", x: "x", y: "y", parent: "parent", value: "value", values: "values" }, outputs: { onBeforeAddFilter: "onBeforeAddFilter", onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridFieldFilterPickerGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -8374,6 +8774,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollAction: [{
@@ -8446,6 +8848,8 @@
                     type: i0.Input
                 }], labelPosition: [{
                     type: i0.Input
+                }], labelWidth: [{
+                    type: i0.Input
                 }], layout: [{
                     type: i0.Input
                 }], layoutStyle: [{
@@ -8484,16 +8888,6 @@
                     type: i0.Input
                 }], y: [{
                     type: i0.Input
-                }], anchorSize: [{
-                    type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
-                }], hasChanges: [{
-                    type: i0.Input
-                }], isSettingValues: [{
-                    type: i0.Input
-                }], isValid: [{
-                    type: i0.Input
                 }], parent: [{
                     type: i0.Input
                 }], value: [{
@@ -8581,8 +8975,7 @@
             this.onBeforeShow = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/GroupBar#event-catchAll)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/GroupBar#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
@@ -8644,8 +9037,7 @@
             /**
              * 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/widget/GroupBar#event-paint)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/GroupBar#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.
@@ -8746,9 +9138,61 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumGroupBarComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         };
+        /**
+         * 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.
+         */
+        BryntumGroupBarComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -8760,8 +9204,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumGroupBarComponent.bryntumConfigsOnly, bryntumProps = BryntumGroupBarComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -8880,6 +9324,7 @@
         'readOnly',
         'relayStoreEvents',
         'ripple',
+        'role',
         'rootElement',
         'rtl',
         'scrollable',
@@ -8948,6 +9393,7 @@
         'preventTooltipOnTouch',
         'relayStoreEvents',
         'ripple',
+        'role',
         'rootElement',
         'scrollAction',
         'selectAllItem',
@@ -8965,7 +9411,6 @@
     BryntumGroupBarComponent.bryntumProps = BryntumGroupBarComponent.bryntumFeatureNames.concat([
         'alignSelf',
         'allowGroupSelect',
-        'anchorSize',
         'appendTo',
         'callOnFunctions',
         'catchEventHandlerExceptions',
@@ -8979,7 +9424,6 @@
         'emptyText',
         'extraData',
         'flex',
-        'focusVisible',
         'height',
         'hidden',
         'html',
@@ -9010,7 +9454,7 @@
         'y'
     ]);
     BryntumGroupBarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGroupBarComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumGroupBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGroupBarComponent, selector: "bryntum-group-bar", inputs: { activateOnMouseover: "activateOnMouseover", adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", bubbleEvents: "bubbleEvents", centered: "centered", closable: "closable", closeHandler: "closeHandler", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", displayField: "displayField", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", floating: "floating", getItemCls: "getItemCls", getItemStyle: "getItemStyle", groupHeaderTpl: "groupHeaderTpl", hideAnimation: "hideAnimation", htmlCls: "htmlCls", iconTpl: "iconTpl", ignoreParentReadOnly: "ignoreParentReadOnly", isSelectable: "isSelectable", itemTpl: "itemTpl", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", ripple: "ripple", rootElement: "rootElement", scrollAction: "scrollAction", selectAllItem: "selectAllItem", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", tab: "tab", tag: "tag", textAlign: "textAlign", tooltipTemplate: "tooltipTemplate", type: "type", ui: "ui", virtualize: "virtualize", weight: "weight", alignSelf: "alignSelf", allowGroupSelect: "allowGroupSelect", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", clearSelectionOnEmptySpaceClick: "clearSelectionOnEmptySpaceClick", cls: "cls", collapsibleGroups: "collapsibleGroups", column: "column", content: "content", dataset: "dataset", disabled: "disabled", emptyText: "emptyText", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", html: "html", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", items: "items", keyMap: "keyMap", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", multiSelect: "multiSelect", readOnly: "readOnly", rtl: "rtl", scrollable: "scrollable", selected: "selected", span: "span", store: "store", title: "title", toggleAllIfCtrlPressed: "toggleAllIfCtrlPressed", tooltip: "tooltip", width: "width", x: "x", y: "y", anchorSize: "anchorSize", focusVisible: "focusVisible", parent: "parent" }, outputs: { onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeItem: "onBeforeItem", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onItem: "onItem", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onSelectionChange: "onSelectionChange", onShow: "onShow", onToggleGroup: "onToggleGroup", onToggleNode: "onToggleNode" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumGroupBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumGroupBarComponent, selector: "bryntum-group-bar", inputs: { activateOnMouseover: "activateOnMouseover", adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", bubbleEvents: "bubbleEvents", centered: "centered", closable: "closable", closeHandler: "closeHandler", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", displayField: "displayField", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", floating: "floating", getItemCls: "getItemCls", getItemStyle: "getItemStyle", groupHeaderTpl: "groupHeaderTpl", hideAnimation: "hideAnimation", htmlCls: "htmlCls", iconTpl: "iconTpl", ignoreParentReadOnly: "ignoreParentReadOnly", isSelectable: "isSelectable", itemTpl: "itemTpl", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", ripple: "ripple", role: "role", rootElement: "rootElement", scrollAction: "scrollAction", selectAllItem: "selectAllItem", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", tab: "tab", tag: "tag", textAlign: "textAlign", tooltipTemplate: "tooltipTemplate", type: "type", ui: "ui", virtualize: "virtualize", weight: "weight", alignSelf: "alignSelf", allowGroupSelect: "allowGroupSelect", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", clearSelectionOnEmptySpaceClick: "clearSelectionOnEmptySpaceClick", cls: "cls", collapsibleGroups: "collapsibleGroups", column: "column", content: "content", dataset: "dataset", disabled: "disabled", emptyText: "emptyText", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", html: "html", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", items: "items", keyMap: "keyMap", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", multiSelect: "multiSelect", readOnly: "readOnly", rtl: "rtl", scrollable: "scrollable", selected: "selected", span: "span", store: "store", title: "title", toggleAllIfCtrlPressed: "toggleAllIfCtrlPressed", tooltip: "tooltip", width: "width", x: "x", y: "y", parent: "parent" }, outputs: { onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeItem: "onBeforeItem", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onItem: "onItem", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onSelectionChange: "onSelectionChange", onShow: "onShow", onToggleGroup: "onToggleGroup", onToggleNode: "onToggleNode" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGroupBarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9101,6 +9545,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollAction: [{
@@ -9211,10 +9657,6 @@
                     type: i0.Input
                 }], y: [{
                     type: i0.Input
-                }], anchorSize: [{
-                    type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
                 }], parent: [{
                     type: i0.Input
                 }], onBeforeDestroy: [{
@@ -9298,8 +9740,7 @@
             this.onBeforeShow = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/TreeCombo#event-catchAll)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/TreeCombo#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
@@ -9319,8 +9760,7 @@
             this.onChange = new i0.EventEmitter();
             /**
              * Fired when this field is [cleared](https://bryntum.com/products/grid/docs/api/Core/widget/Field#function-clear).
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/widget/TreeCombo#event-clear)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/TreeCombo#event-clear)
              * @param {object} event Event object
              * @param {Core.widget.Field,any} event.source This Field
              */
@@ -9379,8 +9819,7 @@
             /**
              * 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/widget/TreeCombo#event-paint)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/widget/TreeCombo#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.
@@ -9476,9 +9915,61 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumTreeComboComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         };
+        /**
+         * 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.
+         */
+        BryntumTreeComboComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -9490,8 +9981,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumTreeComboComponent.bryntumConfigsOnly, bryntumProps = BryntumTreeComboComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -9652,6 +10143,7 @@
         'required',
         'revertOnEscape',
         'ripple',
+        'role',
         'rootElement',
         'rtl',
         'scrollAction',
@@ -9763,6 +10255,7 @@
         'relayStoreEvents',
         'revertOnEscape',
         'ripple',
+        'role',
         'rootElement',
         'scrollAction',
         'showAnimation',
@@ -9783,7 +10276,6 @@
     ];
     BryntumTreeComboComponent.bryntumProps = BryntumTreeComboComponent.bryntumFeatureNames.concat([
         'alignSelf',
-        'anchorSize',
         'appendTo',
         'badge',
         'callOnFunctions',
@@ -9797,7 +10289,6 @@
         'extraData',
         'filterOperator',
         'flex',
-        'focusVisible',
         'formula',
         'height',
         'hidden',
@@ -9834,7 +10325,7 @@
         'y'
     ]);
     BryntumTreeComboComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumTreeComboComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumTreeComboComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumTreeComboComponent, selector: "bryntum-tree-combo", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoComplete: "autoComplete", autoExpand: "autoExpand", autoSelect: "autoSelect", bubbleEvents: "bubbleEvents", cacheLastResult: "cacheLastResult", caseSensitive: "caseSensitive", centered: "centered", chipView: "chipView", clearable: "clearable", clearTextOnPickerHide: "clearTextOnPickerHide", clearTextOnSelection: "clearTextOnSelection", clearWhenInputEmpty: "clearWhenInputEmpty", color: "color", config: "config", constrainTo: "constrainTo", container: "container", containValues: "containValues", contentElementCls: "contentElementCls", createOnUnmatched: "createOnUnmatched", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", displayField: "displayField", displayValueRenderer: "displayValueRenderer", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", emptyText: "emptyText", encodeFilterParams: "encodeFilterParams", filterOnEnter: "filterOnEnter", filterParamName: "filterParamName", filterSelected: "filterSelected", floating: "floating", hideAnimation: "hideAnimation", hidePickerOnSelect: "hidePickerOnSelect", hideTrigger: "hideTrigger", highlightExternalChange: "highlightExternalChange", hint: "hint", hintHtml: "hintHtml", ignoreParentReadOnly: "ignoreParentReadOnly", inline: "inline", inlinePicker: "inlinePicker", inputAlign: "inputAlign", inputAttributes: "inputAttributes", inputTag: "inputTag", inputType: "inputType", inputWidth: "inputWidth", items: "items", keyStrokeChangeDelay: "keyStrokeChangeDelay", keyStrokeFilterDelay: "keyStrokeFilterDelay", labelCls: "labelCls", labelPosition: "labelPosition", labels: "labels", labelWidth: "labelWidth", listCls: "listCls", listeners: "listeners", listItemTpl: "listItemTpl", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", maxLength: "maxLength", minChars: "minChars", minLength: "minLength", monitorResize: "monitorResize", multiValueSeparator: "multiValueSeparator", name: "name", overlayAnchor: "overlayAnchor", pickerAlignElement: "pickerAlignElement", pickerWidth: "pickerWidth", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", primaryFilter: "primaryFilter", relayStoreEvents: "relayStoreEvents", revertOnEscape: "revertOnEscape", ripple: "ripple", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", skipValidation: "skipValidation", spellCheck: "spellCheck", tab: "tab", tabIndex: "tabIndex", textAlign: "textAlign", title: "title", triggerAction: "triggerAction", type: "type", ui: "ui", validateFilter: "validateFilter", validateOnInput: "validateOnInput", valueField: "valueField", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", badge: "badge", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", dataset: "dataset", disabled: "disabled", editable: "editable", extraData: "extraData", filterOperator: "filterOperator", flex: "flex", height: "height", hidden: "hidden", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", label: "label", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", multiSelect: "multiSelect", picker: "picker", placeholder: "placeholder", readOnly: "readOnly", rendition: "rendition", required: "required", rtl: "rtl", showRequiredIndicator: "showRequiredIndicator", span: "span", store: "store", tooltip: "tooltip", triggers: "triggers", value: "value", width: "width", x: "x", y: "y", anchorSize: "anchorSize", content: "content", focusVisible: "focusVisible", formula: "formula", html: "html", input: "input", parent: "parent", scrollable: "scrollable" }, outputs: { onAction: "onAction", onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onClear: "onClear", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onInput: "onInput", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onSelect: "onSelect", onShow: "onShow", onTrigger: "onTrigger" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumTreeComboComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumTreeComboComponent, selector: "bryntum-tree-combo", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoComplete: "autoComplete", autoExpand: "autoExpand", autoSelect: "autoSelect", bubbleEvents: "bubbleEvents", cacheLastResult: "cacheLastResult", caseSensitive: "caseSensitive", centered: "centered", chipView: "chipView", clearable: "clearable", clearTextOnPickerHide: "clearTextOnPickerHide", clearTextOnSelection: "clearTextOnSelection", clearWhenInputEmpty: "clearWhenInputEmpty", color: "color", config: "config", constrainTo: "constrainTo", container: "container", containValues: "containValues", contentElementCls: "contentElementCls", createOnUnmatched: "createOnUnmatched", dataField: "dataField", defaultBindProperty: "defaultBindProperty", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", displayField: "displayField", displayValueRenderer: "displayValueRenderer", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", emptyText: "emptyText", encodeFilterParams: "encodeFilterParams", filterOnEnter: "filterOnEnter", filterParamName: "filterParamName", filterSelected: "filterSelected", floating: "floating", hideAnimation: "hideAnimation", hidePickerOnSelect: "hidePickerOnSelect", hideTrigger: "hideTrigger", highlightExternalChange: "highlightExternalChange", hint: "hint", hintHtml: "hintHtml", ignoreParentReadOnly: "ignoreParentReadOnly", inline: "inline", inlinePicker: "inlinePicker", inputAlign: "inputAlign", inputAttributes: "inputAttributes", inputTag: "inputTag", inputType: "inputType", inputWidth: "inputWidth", items: "items", keyStrokeChangeDelay: "keyStrokeChangeDelay", keyStrokeFilterDelay: "keyStrokeFilterDelay", labelCls: "labelCls", labelPosition: "labelPosition", labels: "labels", labelWidth: "labelWidth", listCls: "listCls", listeners: "listeners", listItemTpl: "listItemTpl", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", maxLength: "maxLength", minChars: "minChars", minLength: "minLength", monitorResize: "monitorResize", multiValueSeparator: "multiValueSeparator", name: "name", overlayAnchor: "overlayAnchor", pickerAlignElement: "pickerAlignElement", pickerWidth: "pickerWidth", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", primaryFilter: "primaryFilter", relayStoreEvents: "relayStoreEvents", revertOnEscape: "revertOnEscape", ripple: "ripple", role: "role", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", skipValidation: "skipValidation", spellCheck: "spellCheck", tab: "tab", tabIndex: "tabIndex", textAlign: "textAlign", title: "title", triggerAction: "triggerAction", type: "type", ui: "ui", validateFilter: "validateFilter", validateOnInput: "validateOnInput", valueField: "valueField", weight: "weight", alignSelf: "alignSelf", appendTo: "appendTo", badge: "badge", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cls: "cls", column: "column", dataset: "dataset", disabled: "disabled", editable: "editable", extraData: "extraData", filterOperator: "filterOperator", flex: "flex", height: "height", hidden: "hidden", id: "id", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", label: "label", margin: "margin", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", multiSelect: "multiSelect", picker: "picker", placeholder: "placeholder", readOnly: "readOnly", rendition: "rendition", required: "required", rtl: "rtl", showRequiredIndicator: "showRequiredIndicator", span: "span", store: "store", tooltip: "tooltip", triggers: "triggers", value: "value", width: "width", x: "x", y: "y", content: "content", formula: "formula", html: "html", input: "input", parent: "parent", scrollable: "scrollable" }, outputs: { onAction: "onAction", onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onChange: "onChange", onClear: "onClear", onDestroy: "onDestroy", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onInput: "onInput", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onSelect: "onSelect", onShow: "onShow", onTrigger: "onTrigger" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumTreeComboComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -10005,6 +10496,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollAction: [{
@@ -10123,12 +10616,8 @@
                     type: i0.Input
                 }], y: [{
                     type: i0.Input
-                }], anchorSize: [{
-                    type: i0.Input
                 }], content: [{
                     type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
                 }], formula: [{
                     type: i0.Input
                 }], html: [{
@@ -10201,8 +10690,7 @@
             this.onBeforeCancelCellEdit = new i0.EventEmitter();
             /**
              * 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/TreeGrid#event-beforeCancelRowEdit)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-beforeCancelRowEdit)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.grid Target grid
              * @param {RowEditorContext} event.editorContext Editing context
@@ -10317,8 +10805,7 @@
             this.onBeforeFinishCellEdit = new i0.EventEmitter();
             /**
              * 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/TreeGrid#event-beforeFinishRowEdit)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-beforeFinishRowEdit)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.grid Target grid
              * @param {RowEditorContext} event.editorContext Editing context
@@ -10363,16 +10850,14 @@
             this.onBeforeRenderRows = new i0.EventEmitter();
             /**
              * This event fires before row collapse is started.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-beforeRowCollapse)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-beforeRowCollapse)
              * @param {object} event Event object
              * @param {Core.data.Model} event.record Record
              */
             this.onBeforeRowCollapse = new i0.EventEmitter();
             /**
              * This event fires before row expand is started.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-beforeRowExpand)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-beforeRowExpand)
              * @param {object} event Event object
              * @param {Core.data.Model} event.record Record
              */
@@ -10452,8 +10937,7 @@
             this.onCancelCellEdit = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-catchAll)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#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
@@ -10495,8 +10979,7 @@
             /**
              * 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/TreeGrid#event-cellMenuBeforeShow)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-cellMenuBeforeShow)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.source The grid
              * @param {Core.widget.Menu} event.menu The menu
@@ -10677,8 +11160,7 @@
             this.onCopy = new i0.EventEmitter();
             /**
              * Fired when data in the store changes.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-dataChange)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-dataChange)
              * @param {object} event Event object
              * @param {Grid.view.GridBase} event.source Owning grid
              * @param {Core.data.Store} event.store The originating store
@@ -10782,8 +11264,7 @@
             this.onFinishCellEdit = new i0.EventEmitter();
             /**
              * 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/TreeGrid#event-finishRowEdit)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-finishRowEdit)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.grid Target grid
              * @param {RowEditorContext} event.editorContext Editing context
@@ -10883,8 +11364,7 @@
             this.onGridRowDrop = new i0.EventEmitter();
             /**
              * Fired when a grid header is clicked on.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-headerClick)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#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.
@@ -10893,8 +11373,7 @@
             /**
              * 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/TreeGrid#event-headerMenuBeforeShow)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-headerMenuBeforeShow)
              * @param {object} event Event object
              * @param {Grid.view.Grid} event.source The grid
              * @param {Core.widget.Menu} event.menu The menu
@@ -10957,8 +11436,7 @@
             /**
              * 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/TreeGrid#event-paint)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#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.
@@ -10977,8 +11455,8 @@
             /**
              * 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
              */
             this.onPdfExport = new i0.EventEmitter();
             /**
@@ -11035,8 +11513,7 @@
             this.onRowCollapse = new i0.EventEmitter();
             /**
              * This event fires when a row expand has finished expanding.
-             * ...
-             * [View online docs...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#event-rowExpand)
+             * [More...](https://bryntum.com/products/grid/docs/api/Grid/view/TreeGrid#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
@@ -11174,7 +11651,7 @@
              * @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
              */
             this.onToggleGroup = new i0.EventEmitter();
             /**
@@ -11256,6 +11733,16 @@
             else {
                 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).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumTreeGridComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
             // Backwards compatibility for gridInstance, schedulerInstance etc.
@@ -11263,6 +11750,48 @@
             me[coreThin.StringHelper.uncapitalize(instanceName) + 'Instance'] = me.instance;
             // 
         };
+        /**
+         * 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.
+         */
+        BryntumTreeGridComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var 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)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -11274,8 +11803,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumTreeGridComponent.bryntumConfigsOnly, bryntumProps = BryntumTreeGridComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -11528,6 +12057,7 @@
         'insertFirst',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'listeners',
         'loadMask',
         'loadMaskDefaults',
@@ -11554,6 +12084,7 @@
         'resizeToFitIncludesHeader',
         'responsiveLevels',
         'ripple',
+        'role',
         'rootElement',
         'rowHeight',
         'rowLines',
@@ -11640,6 +12171,7 @@
         'resizeToFitIncludesHeader',
         'responsiveLevels',
         'ripple',
+        'role',
         'rootElement',
         'scrollerClass',
         'scrollManager',
@@ -11677,8 +12209,6 @@
         'enableUndoRedoKeys',
         'extraData',
         'flex',
-        'focusVisible',
-        'hasChanges',
         'height',
         'hidden',
         'hideFooters',
@@ -11689,6 +12219,7 @@
         'insertFirst',
         'keyMap',
         'labelPosition',
+        'labelWidth',
         'longPressTime',
         'margin',
         'maxHeight',
@@ -11722,7 +12253,7 @@
         'width'
     ]);
     BryntumTreeGridComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumTreeGridComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumTreeGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumTreeGridComponent, selector: "bryntum-tree-grid", inputs: { adopt: "adopt", animateFilterRemovals: "animateFilterRemovals", animateRemovingRows: "animateRemovingRows", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoHeight: "autoHeight", bbar: "bbar", bodyCls: "bodyCls", border: "border", bubbleEvents: "bubbleEvents", collapsible: "collapsible", color: "color", config: "config", contentElementCls: "contentElementCls", contextMenuTriggerEvent: "contextMenuTriggerEvent", dataField: "dataField", defaultRegion: "defaultRegion", destroyStore: "destroyStore", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", disableGridColumnIdWarning: "disableGridColumnIdWarning", disableGridRowModelWarning: "disableGridRowModelWarning", dock: "dock", drawer: "drawer", elementAttributes: "elementAttributes", enableSticky: "enableSticky", enableTextSelection: "enableTextSelection", fillLastColumn: "fillLastColumn", fixedRowHeight: "fixedRowHeight", footer: "footer", formulaProviders: "formulaProviders", fullRowRefresh: "fullRowRefresh", getRowHeight: "getRowHeight", header: "header", hideHorizontalScrollbar: "hideHorizontalScrollbar", hoverCls: "hoverCls", icon: "icon", ignoreParentReadOnly: "ignoreParentReadOnly", listeners: "listeners", loadMask: "loadMask", loadMaskDefaults: "loadMaskDefaults", loadMaskError: "loadMaskError", localizable: "localizable", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", plugins: "plugins", preserveFocusOnDatasetChange: "preserveFocusOnDatasetChange", preserveScrollOnDatasetChange: "preserveScrollOnDatasetChange", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", resizable: "resizable", resizeToFitIncludesHeader: "resizeToFitIncludesHeader", responsiveLevels: "responsiveLevels", ripple: "ripple", rootElement: "rootElement", scrollerClass: "scrollerClass", scrollManager: "scrollManager", showDirty: "showDirty", stateful: "stateful", statefulEvents: "statefulEvents", stateId: "stateId", stateProvider: "stateProvider", strips: "strips", subGridConfigs: "subGridConfigs", syncMask: "syncMask", tab: "tab", tabBarItems: "tabBarItems", tbar: "tbar", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", animateTreeNodeToggle: "animateTreeNodeToggle", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cellEllipsis: "cellEllipsis", cls: "cls", collapsed: "collapsed", column: "column", columnLines: "columnLines", columns: "columns", data: "data", dataset: "dataset", disabled: "disabled", emptyText: "emptyText", enableUndoRedoKeys: "enableUndoRedoKeys", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", hideFooters: "hideFooters", hideHeaders: "hideHeaders", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", labelPosition: "labelPosition", longPressTime: "longPressTime", margin: "margin", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", preserveScroll: "preserveScroll", readOnly: "readOnly", rendition: "rendition", rowHeight: "rowHeight", rowLines: "rowLines", rtl: "rtl", scrollable: "scrollable", selectionMode: "selectionMode", span: "span", stateSettings: "stateSettings", store: "store", title: "title", tools: "tools", transition: "transition", transitionDuration: "transitionDuration", width: "width", focusVisible: "focusVisible", hasChanges: "hasChanges", originalStore: "originalStore", parent: "parent", selectedCell: "selectedCell", selectedCells: "selectedCells", selectedRecord: "selectedRecord", selectedRecords: "selectedRecords", selectedRows: "selectedRows", state: "state", tooltip: "tooltip", aiFeature: "aiFeature", aiFilterFeature: "aiFilterFeature", cellCopyPasteFeature: "cellCopyPasteFeature", cellEditFeature: "cellEditFeature", cellMenuFeature: "cellMenuFeature", cellTooltipFeature: "cellTooltipFeature", chartsFeature: "chartsFeature", columnAutoWidthFeature: "columnAutoWidthFeature", columnDragToolbarFeature: "columnDragToolbarFeature", columnPickerFeature: "columnPickerFeature", columnRenameFeature: "columnRenameFeature", columnReorderFeature: "columnReorderFeature", columnResizeFeature: "columnResizeFeature", excelExporterFeature: "excelExporterFeature", fileDropFeature: "fileDropFeature", fillHandleFeature: "fillHandleFeature", filterFeature: "filterFeature", filterBarFeature: "filterBarFeature", groupFeature: "groupFeature", groupSummaryFeature: "groupSummaryFeature", headerMenuFeature: "headerMenuFeature", lockRowsFeature: "lockRowsFeature", mergeCellsFeature: "mergeCellsFeature", pdfExportFeature: "pdfExportFeature", pinColumnsFeature: "pinColumnsFeature", printFeature: "printFeature", quickFindFeature: "quickFindFeature", regionResizeFeature: "regionResizeFeature", rowCopyPasteFeature: "rowCopyPasteFeature", rowEditFeature: "rowEditFeature", rowExpanderFeature: "rowExpanderFeature", rowReorderFeature: "rowReorderFeature", rowResizeFeature: "rowResizeFeature", searchFeature: "searchFeature", sortFeature: "sortFeature", splitFeature: "splitFeature", stickyCellsFeature: "stickyCellsFeature", stripeFeature: "stripeFeature", summaryFeature: "summaryFeature", treeFeature: "treeFeature", treeGroupFeature: "treeGroupFeature" }, outputs: { onBeforeCancelCellEdit: "onBeforeCancelCellEdit", onBeforeCancelRowEdit: "onBeforeCancelRowEdit", onBeforeCellEditStart: "onBeforeCellEditStart", onBeforeCellRangeDelete: "onBeforeCellRangeDelete", onBeforeCellRangeEdit: "onBeforeCellRangeEdit", onBeforeColumnCollapseToggle: "onBeforeColumnCollapseToggle", onBeforeColumnDragStart: "onBeforeColumnDragStart", onBeforeColumnDropFinalize: "onBeforeColumnDropFinalize", onBeforeColumnResize: "onBeforeColumnResize", onBeforeCopy: "onBeforeCopy", onBeforeCSVExport: "onBeforeCSVExport", onBeforeDestroy: "onBeforeDestroy", onBeforeExcelExport: "onBeforeExcelExport", onBeforeFillHandleDragStart: "onBeforeFillHandleDragStart", onBeforeFinishCellEdit: "onBeforeFinishCellEdit", onBeforeFinishRowEdit: "onBeforeFinishRowEdit", onBeforeHide: "onBeforeHide", onBeforePaste: "onBeforePaste", onBeforePdfExport: "onBeforePdfExport", onBeforeRenderRow: "onBeforeRenderRow", onBeforeRenderRows: "onBeforeRenderRows", onBeforeRowCollapse: "onBeforeRowCollapse", onBeforeRowExpand: "onBeforeRowExpand", onBeforeSelectionChange: "onBeforeSelectionChange", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onBeforeStartRowEdit: "onBeforeStartRowEdit", onBeforeStateApply: "onBeforeStateApply", onBeforeStateSave: "onBeforeStateSave", onBeforeToggleGroup: "onBeforeToggleGroup", onBeforeToggleNode: "onBeforeToggleNode", onCancelCellEdit: "onCancelCellEdit", onCatchAll: "onCatchAll", onCellClick: "onCellClick", onCellContextMenu: "onCellContextMenu", onCellDblClick: "onCellDblClick", onCellMenuBeforeShow: "onCellMenuBeforeShow", onCellMenuItem: "onCellMenuItem", onCellMenuShow: "onCellMenuShow", onCellMenuToggleItem: "onCellMenuToggleItem", onCellMouseEnter: "onCellMouseEnter", onCellMouseLeave: "onCellMouseLeave", onCellMouseOut: "onCellMouseOut", onCellMouseOver: "onCellMouseOver", onCollapse: "onCollapse", onCollapseNode: "onCollapseNode", onColumnCollapseToggle: "onColumnCollapseToggle", onColumnDrag: "onColumnDrag", onColumnDragStart: "onColumnDragStart", onColumnDrop: "onColumnDrop", onColumnResize: "onColumnResize", onColumnResizeStart: "onColumnResizeStart", onContextMenuItem: "onContextMenuItem", onContextMenuToggleItem: "onContextMenuToggleItem", onCopy: "onCopy", onDataChange: "onDataChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onDragSelecting: "onDragSelecting", onElementCreated: "onElementCreated", onExpand: "onExpand", onExpandNode: "onExpandNode", onFileDrop: "onFileDrop", onFillHandleBeforeDragFinalize: "onFillHandleBeforeDragFinalize", onFillHandleDrag: "onFillHandleDrag", onFillHandleDragAbort: "onFillHandleDragAbort", onFillHandleDragEnd: "onFillHandleDragEnd", onFillHandleDragStart: "onFillHandleDragStart", onFinishCellEdit: "onFinishCellEdit", onFinishRowEdit: "onFinishRowEdit", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onGridRowBeforeDragStart: "onGridRowBeforeDragStart", onGridRowBeforeDropFinalize: "onGridRowBeforeDropFinalize", onGridRowDrag: "onGridRowDrag", onGridRowDragAbort: "onGridRowDragAbort", onGridRowDragStart: "onGridRowDragStart", onGridRowDrop: "onGridRowDrop", onHeaderClick: "onHeaderClick", onHeaderMenuBeforeShow: "onHeaderMenuBeforeShow", onHeaderMenuItem: "onHeaderMenuItem", onHeaderMenuShow: "onHeaderMenuShow", onHeaderMenuToggleItem: "onHeaderMenuToggleItem", onHide: "onHide", onLockRows: "onLockRows", onMouseOut: "onMouseOut", onMouseOver: "onMouseOver", onPaint: "onPaint", onPaste: "onPaste", onPdfExport: "onPdfExport", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onRenderRow: "onRenderRow", onRenderRows: "onRenderRows", onResize: "onResize", onResponsive: "onResponsive", onRowCollapse: "onRowCollapse", onRowExpand: "onRowExpand", onRowMouseEnter: "onRowMouseEnter", onRowMouseLeave: "onRowMouseLeave", onScroll: "onScroll", onSelectionChange: "onSelectionChange", onSelectionModeChange: "onSelectionModeChange", onShow: "onShow", onSplit: "onSplit", onSplitterCollapseClick: "onSplitterCollapseClick", onSplitterDragEnd: "onSplitterDragEnd", onSplitterDragStart: "onSplitterDragStart", onSplitterExpandClick: "onSplitterExpandClick", onStartCellEdit: "onStartCellEdit", onStartRowEdit: "onStartRowEdit", onSubGridCollapse: "onSubGridCollapse", onSubGridExpand: "onSubGridExpand", onToggleGroup: "onToggleGroup", onToggleNode: "onToggleNode", onToolClick: "onToolClick", onTreeGroup: "onTreeGroup", onUnlockRows: "onUnlockRows", onUnsplit: "onUnsplit" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumTreeGridComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumTreeGridComponent, selector: "bryntum-tree-grid", inputs: { adopt: "adopt", animateFilterRemovals: "animateFilterRemovals", animateRemovingRows: "animateRemovingRows", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoHeight: "autoHeight", bbar: "bbar", bodyCls: "bodyCls", border: "border", bubbleEvents: "bubbleEvents", collapsible: "collapsible", color: "color", config: "config", contentElementCls: "contentElementCls", contextMenuTriggerEvent: "contextMenuTriggerEvent", dataField: "dataField", defaultRegion: "defaultRegion", destroyStore: "destroyStore", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", disableGridColumnIdWarning: "disableGridColumnIdWarning", disableGridRowModelWarning: "disableGridRowModelWarning", dock: "dock", drawer: "drawer", elementAttributes: "elementAttributes", enableSticky: "enableSticky", enableTextSelection: "enableTextSelection", fillLastColumn: "fillLastColumn", fixedRowHeight: "fixedRowHeight", footer: "footer", formulaProviders: "formulaProviders", fullRowRefresh: "fullRowRefresh", getRowHeight: "getRowHeight", header: "header", hideHorizontalScrollbar: "hideHorizontalScrollbar", hoverCls: "hoverCls", icon: "icon", ignoreParentReadOnly: "ignoreParentReadOnly", listeners: "listeners", loadMask: "loadMask", loadMaskDefaults: "loadMaskDefaults", loadMaskError: "loadMaskError", localizable: "localizable", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", plugins: "plugins", preserveFocusOnDatasetChange: "preserveFocusOnDatasetChange", preserveScrollOnDatasetChange: "preserveScrollOnDatasetChange", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", resizable: "resizable", resizeToFitIncludesHeader: "resizeToFitIncludesHeader", responsiveLevels: "responsiveLevels", ripple: "ripple", role: "role", rootElement: "rootElement", scrollerClass: "scrollerClass", scrollManager: "scrollManager", showDirty: "showDirty", stateful: "stateful", statefulEvents: "statefulEvents", stateId: "stateId", stateProvider: "stateProvider", strips: "strips", subGridConfigs: "subGridConfigs", syncMask: "syncMask", tab: "tab", tabBarItems: "tabBarItems", tbar: "tbar", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", animateTreeNodeToggle: "animateTreeNodeToggle", appendTo: "appendTo", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", cellEllipsis: "cellEllipsis", cls: "cls", collapsed: "collapsed", column: "column", columnLines: "columnLines", columns: "columns", data: "data", dataset: "dataset", disabled: "disabled", emptyText: "emptyText", enableUndoRedoKeys: "enableUndoRedoKeys", extraData: "extraData", flex: "flex", height: "height", hidden: "hidden", hideFooters: "hideFooters", hideHeaders: "hideHeaders", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", keyMap: "keyMap", labelPosition: "labelPosition", labelWidth: "labelWidth", longPressTime: "longPressTime", margin: "margin", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", preserveScroll: "preserveScroll", readOnly: "readOnly", rendition: "rendition", rowHeight: "rowHeight", rowLines: "rowLines", rtl: "rtl", scrollable: "scrollable", selectionMode: "selectionMode", span: "span", stateSettings: "stateSettings", store: "store", title: "title", tools: "tools", transition: "transition", transitionDuration: "transitionDuration", width: "width", originalStore: "originalStore", parent: "parent", selectedCell: "selectedCell", selectedCells: "selectedCells", selectedRecord: "selectedRecord", selectedRecords: "selectedRecords", selectedRows: "selectedRows", state: "state", tooltip: "tooltip", aiFeature: "aiFeature", aiFilterFeature: "aiFilterFeature", cellCopyPasteFeature: "cellCopyPasteFeature", cellEditFeature: "cellEditFeature", cellMenuFeature: "cellMenuFeature", cellTooltipFeature: "cellTooltipFeature", chartsFeature: "chartsFeature", columnAutoWidthFeature: "columnAutoWidthFeature", columnDragToolbarFeature: "columnDragToolbarFeature", columnPickerFeature: "columnPickerFeature", columnRenameFeature: "columnRenameFeature", columnReorderFeature: "columnReorderFeature", columnResizeFeature: "columnResizeFeature", excelExporterFeature: "excelExporterFeature", fileDropFeature: "fileDropFeature", fillHandleFeature: "fillHandleFeature", filterFeature: "filterFeature", filterBarFeature: "filterBarFeature", groupFeature: "groupFeature", groupSummaryFeature: "groupSummaryFeature", headerMenuFeature: "headerMenuFeature", lockRowsFeature: "lockRowsFeature", mergeCellsFeature: "mergeCellsFeature", pdfExportFeature: "pdfExportFeature", pinColumnsFeature: "pinColumnsFeature", printFeature: "printFeature", quickFindFeature: "quickFindFeature", regionResizeFeature: "regionResizeFeature", rowCopyPasteFeature: "rowCopyPasteFeature", rowEditFeature: "rowEditFeature", rowExpanderFeature: "rowExpanderFeature", rowReorderFeature: "rowReorderFeature", rowResizeFeature: "rowResizeFeature", searchFeature: "searchFeature", sortFeature: "sortFeature", splitFeature: "splitFeature", stickyCellsFeature: "stickyCellsFeature", stripeFeature: "stripeFeature", summaryFeature: "summaryFeature", treeFeature: "treeFeature", treeGroupFeature: "treeGroupFeature" }, outputs: { onBeforeCancelCellEdit: "onBeforeCancelCellEdit", onBeforeCancelRowEdit: "onBeforeCancelRowEdit", onBeforeCellEditStart: "onBeforeCellEditStart", onBeforeCellRangeDelete: "onBeforeCellRangeDelete", onBeforeCellRangeEdit: "onBeforeCellRangeEdit", onBeforeColumnCollapseToggle: "onBeforeColumnCollapseToggle", onBeforeColumnDragStart: "onBeforeColumnDragStart", onBeforeColumnDropFinalize: "onBeforeColumnDropFinalize", onBeforeColumnResize: "onBeforeColumnResize", onBeforeCopy: "onBeforeCopy", onBeforeCSVExport: "onBeforeCSVExport", onBeforeDestroy: "onBeforeDestroy", onBeforeExcelExport: "onBeforeExcelExport", onBeforeFillHandleDragStart: "onBeforeFillHandleDragStart", onBeforeFinishCellEdit: "onBeforeFinishCellEdit", onBeforeFinishRowEdit: "onBeforeFinishRowEdit", onBeforeHide: "onBeforeHide", onBeforePaste: "onBeforePaste", onBeforePdfExport: "onBeforePdfExport", onBeforeRenderRow: "onBeforeRenderRow", onBeforeRenderRows: "onBeforeRenderRows", onBeforeRowCollapse: "onBeforeRowCollapse", onBeforeRowExpand: "onBeforeRowExpand", onBeforeSelectionChange: "onBeforeSelectionChange", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onBeforeStartRowEdit: "onBeforeStartRowEdit", onBeforeStateApply: "onBeforeStateApply", onBeforeStateSave: "onBeforeStateSave", onBeforeToggleGroup: "onBeforeToggleGroup", onBeforeToggleNode: "onBeforeToggleNode", onCancelCellEdit: "onCancelCellEdit", onCatchAll: "onCatchAll", onCellClick: "onCellClick", onCellContextMenu: "onCellContextMenu", onCellDblClick: "onCellDblClick", onCellMenuBeforeShow: "onCellMenuBeforeShow", onCellMenuItem: "onCellMenuItem", onCellMenuShow: "onCellMenuShow", onCellMenuToggleItem: "onCellMenuToggleItem", onCellMouseEnter: "onCellMouseEnter", onCellMouseLeave: "onCellMouseLeave", onCellMouseOut: "onCellMouseOut", onCellMouseOver: "onCellMouseOver", onCollapse: "onCollapse", onCollapseNode: "onCollapseNode", onColumnCollapseToggle: "onColumnCollapseToggle", onColumnDrag: "onColumnDrag", onColumnDragStart: "onColumnDragStart", onColumnDrop: "onColumnDrop", onColumnResize: "onColumnResize", onColumnResizeStart: "onColumnResizeStart", onContextMenuItem: "onContextMenuItem", onContextMenuToggleItem: "onContextMenuToggleItem", onCopy: "onCopy", onDataChange: "onDataChange", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onDragSelecting: "onDragSelecting", onElementCreated: "onElementCreated", onExpand: "onExpand", onExpandNode: "onExpandNode", onFileDrop: "onFileDrop", onFillHandleBeforeDragFinalize: "onFillHandleBeforeDragFinalize", onFillHandleDrag: "onFillHandleDrag", onFillHandleDragAbort: "onFillHandleDragAbort", onFillHandleDragEnd: "onFillHandleDragEnd", onFillHandleDragStart: "onFillHandleDragStart", onFinishCellEdit: "onFinishCellEdit", onFinishRowEdit: "onFinishRowEdit", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onGridRowBeforeDragStart: "onGridRowBeforeDragStart", onGridRowBeforeDropFinalize: "onGridRowBeforeDropFinalize", onGridRowDrag: "onGridRowDrag", onGridRowDragAbort: "onGridRowDragAbort", onGridRowDragStart: "onGridRowDragStart", onGridRowDrop: "onGridRowDrop", onHeaderClick: "onHeaderClick", onHeaderMenuBeforeShow: "onHeaderMenuBeforeShow", onHeaderMenuItem: "onHeaderMenuItem", onHeaderMenuShow: "onHeaderMenuShow", onHeaderMenuToggleItem: "onHeaderMenuToggleItem", onHide: "onHide", onLockRows: "onLockRows", onMouseOut: "onMouseOut", onMouseOver: "onMouseOver", onPaint: "onPaint", onPaste: "onPaste", onPdfExport: "onPdfExport", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onRenderRow: "onRenderRow", onRenderRows: "onRenderRows", onResize: "onResize", onResponsive: "onResponsive", onRowCollapse: "onRowCollapse", onRowExpand: "onRowExpand", onRowMouseEnter: "onRowMouseEnter", onRowMouseLeave: "onRowMouseLeave", onScroll: "onScroll", onSelectionChange: "onSelectionChange", onSelectionModeChange: "onSelectionModeChange", onShow: "onShow", onSplit: "onSplit", onSplitterCollapseClick: "onSplitterCollapseClick", onSplitterDragEnd: "onSplitterDragEnd", onSplitterDragStart: "onSplitterDragStart", onSplitterExpandClick: "onSplitterExpandClick", onStartCellEdit: "onStartCellEdit", onStartRowEdit: "onStartRowEdit", onSubGridCollapse: "onSubGridCollapse", onSubGridExpand: "onSubGridExpand", onToggleGroup: "onToggleGroup", onToggleNode: "onToggleNode", onToolClick: "onToolClick", onTreeGroup: "onTreeGroup", onUnlockRows: "onUnlockRows", onUnsplit: "onUnsplit" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumTreeGridComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11837,6 +12368,8 @@
                     type: i0.Input
                 }], ripple: [{
                     type: i0.Input
+                }], role: [{
+                    type: i0.Input
                 }], rootElement: [{
                     type: i0.Input
                 }], scrollerClass: [{
@@ -11927,6 +12460,8 @@
                     type: i0.Input
                 }], labelPosition: [{
                     type: i0.Input
+                }], labelWidth: [{
+                    type: i0.Input
                 }], longPressTime: [{
                     type: i0.Input
                 }], margin: [{
@@ -11971,10 +12506,6 @@
                     type: i0.Input
                 }], width: [{
                     type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
-                }], hasChanges: [{
-                    type: i0.Input
                 }], originalStore: [{
                     type: i0.Input
                 }], parent: [{
@@ -12333,7 +12864,7 @@
             BryntumGridFieldFilterPickerGroupComponent,
             BryntumGroupBarComponent,
             BryntumTreeComboComponent,
-            BryntumTreeGridComponent], exports: [BryntumAIFilterFieldComponent,
+            BryntumTreeGridComponent], imports: [common.CommonModule], exports: [BryntumAIFilterFieldComponent,
             BryntumChecklistFilterComboComponent,
             BryntumGridComponent,
             BryntumGridBaseComponent,
@@ -12343,7 +12874,7 @@
             BryntumGroupBarComponent,
             BryntumTreeComboComponent,
             BryntumTreeGridComponent] });
-    BryntumGridModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridModule, imports: [[]] });
+    BryntumGridModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridModule, imports: [[common.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumGridModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
@@ -12359,7 +12890,7 @@
                             BryntumTreeComboComponent,
                             BryntumTreeGridComponent
                         ],
-                        imports: [],
+                        imports: [common.CommonModule],
                         exports: [
                             BryntumAIFilterFieldComponent,
                             BryntumChecklistFilterComboComponent,