@bryntum/grid-angular-thin 7.2.4 → 7.3.1

package/fesm2015/bryntum-grid-angular-thin.js

@@ -1,6 +1,7 @@
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { isDevMode, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
-import { Widget, StringHelper } from '@bryntum/core-thin';
+import { GlobalEvents, Widget, StringHelper } from '@bryntum/core-thin';
 import { AIFilterField, ChecklistFilterCombo, Grid, GridBase, GridChartDesigner, GridFieldFilterPicker, GridFieldFilterPickerGroup, GroupBar, TreeCombo, TreeGrid } from '@bryntum/grid-thin';
 
 class WrapperHelper {
@@ -76,6 +77,87 @@ class 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.
+const 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 = document) {
+    if (openShadowRoots.size > 0) {
+        return Array.from(openShadowRoots);
+    }
+    const roots = [];
+    Array.from(root.querySelectorAll('*')).forEach(el => {
+        if (el.shadowRoot) {
+            roots.push(el.shadowRoot);
+            roots.push(...collectOpenShadowRoots(el.shadowRoot));
+        }
+    });
+    roots.forEach(r => 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;
+    const href = headLink.href;
+    const themeAttr = (_a = headLink.getAttribute('data-bryntum-theme')) !== null && _a !== void 0 ? _a : '';
+    collectOpenShadowRoots().forEach(shadowRoot => {
+        Array.from(shadowRoot.querySelectorAll('link[data-bryntum-theme]')).forEach(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() {
+    const headThemeLinks = Array.from(document.head.querySelectorAll('link[data-bryntum-theme]'));
+    if (!headThemeLinks.length) {
+        return;
+    }
+    collectOpenShadowRoots().forEach(shadowRoot => {
+        if (shadowRoot.querySelector('link[data-bryntum-theme]')) {
+            return;
+        }
+        headThemeLinks.forEach(headLink => {
+            if (!headLink.href) {
+                return;
+            }
+            // Clone the head link to preserve all attributes, then ensure absolute href
+            const 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
+GlobalEvents.ion({
+    theme() {
+        const link = document.head.querySelector('link[data-bryntum-theme]');
+        if (link === null || link === void 0 ? void 0 : link.href) {
+            syncThemeToShadowRoots(link);
+        }
+    }
+});
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 class BryntumAIFilterFieldComponent {
     constructor(element) {
@@ -122,8 +204,7 @@ class BryntumAIFilterFieldComponent {
         this.onBeforeShow = new 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
@@ -143,8 +224,7 @@ class BryntumAIFilterFieldComponent {
         this.onChange = new 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
          */
@@ -202,8 +282,7 @@ class BryntumAIFilterFieldComponent {
         /**
          * 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.
@@ -289,9 +368,61 @@ class BryntumAIFilterFieldComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumAIFilterFieldComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? 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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -361,6 +492,7 @@ BryntumAIFilterFieldComponent.bryntumConfigs = BryntumAIFilterFieldComponent.bry
     'callOnFunctions',
     'catchEventHandlerExceptions',
     'centered',
+    'checkValidity',
     'clearable',
     'client',
     'cls',
@@ -432,6 +564,7 @@ BryntumAIFilterFieldComponent.bryntumConfigs = BryntumAIFilterFieldComponent.bry
     'required',
     'revertOnEscape',
     'ripple',
+    'role',
     'rootElement',
     'rtl',
     'scrollAction',
@@ -466,6 +599,7 @@ BryntumAIFilterFieldComponent.bryntumConfigsOnly = [
     'autoSelect',
     'bubbleEvents',
     'centered',
+    'checkValidity',
     'clearable',
     'client',
     'color',
@@ -513,6 +647,7 @@ BryntumAIFilterFieldComponent.bryntumConfigsOnly = [
     'relayStoreEvents',
     'revertOnEscape',
     'ripple',
+    'role',
     'rootElement',
     'scrollAction',
     'showAnimation',
@@ -530,7 +665,6 @@ BryntumAIFilterFieldComponent.bryntumConfigsOnly = [
 ];
 BryntumAIFilterFieldComponent.bryntumProps = BryntumAIFilterFieldComponent.bryntumFeatureNames.concat([
     'alignSelf',
-    'anchorSize',
     'appendTo',
     'badge',
     'callOnFunctions',
@@ -543,7 +677,6 @@ BryntumAIFilterFieldComponent.bryntumProps = BryntumAIFilterFieldComponent.brynt
     'editable',
     'extraData',
     'flex',
-    'focusVisible',
     'formula',
     'height',
     'hidden',
@@ -577,7 +710,7 @@ BryntumAIFilterFieldComponent.bryntumProps = BryntumAIFilterFieldComponent.brynt
     'y'
 ]);
 BryntumAIFilterFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumAIFilterFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumAIFilterFieldComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumAIFilterFieldComponent.ɵcmp = i0.ɵɵ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", checkValidity: "checkValidity", 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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumAIFilterFieldComponent, decorators: [{
             type: Component,
             args: [{
@@ -602,6 +735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], centered: [{
                 type: Input
+            }], checkValidity: [{
+                type: Input
             }], clearable: [{
                 type: Input
             }], client: [{
@@ -696,6 +831,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollAction: [{
@@ -800,12 +937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], y: [{
                 type: Input
-            }], anchorSize: [{
-                type: Input
             }], content: [{
                 type: Input
-            }], focusVisible: [{
-                type: Input
             }], formula: [{
                 type: Input
             }], html: [{
@@ -898,8 +1031,7 @@ class BryntumChecklistFilterComboComponent {
         this.onBeforeShow = new 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
@@ -919,8 +1051,7 @@ class BryntumChecklistFilterComboComponent {
         this.onChange = new 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
          */
@@ -979,8 +1110,7 @@ class BryntumChecklistFilterComboComponent {
         /**
          * 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.
@@ -1075,9 +1205,61 @@ class BryntumChecklistFilterComboComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumChecklistFilterComboComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? 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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -1151,6 +1333,7 @@ BryntumChecklistFilterComboComponent.bryntumConfigs = BryntumChecklistFilterComb
     'caseSensitive',
     'catchEventHandlerExceptions',
     'centered',
+    'checkValidity',
     'chipView',
     'clearable',
     'clearTextOnPickerHide',
@@ -1248,6 +1431,7 @@ BryntumChecklistFilterComboComponent.bryntumConfigs = BryntumChecklistFilterComb
     'required',
     'revertOnEscape',
     'ripple',
+    'role',
     'rootElement',
     'rtl',
     'scrollAction',
@@ -1291,6 +1475,7 @@ BryntumChecklistFilterComboComponent.bryntumConfigsOnly = [
     'cacheLastResult',
     'caseSensitive',
     'centered',
+    'checkValidity',
     'chipView',
     'clearable',
     'clearTextOnPickerHide',
@@ -1361,6 +1546,7 @@ BryntumChecklistFilterComboComponent.bryntumConfigsOnly = [
     'relayStoreEvents',
     'revertOnEscape',
     'ripple',
+    'role',
     'rootElement',
     'scrollAction',
     'showAnimation',
@@ -1381,7 +1567,6 @@ BryntumChecklistFilterComboComponent.bryntumConfigsOnly = [
 ];
 BryntumChecklistFilterComboComponent.bryntumProps = BryntumChecklistFilterComboComponent.bryntumFeatureNames.concat([
     'alignSelf',
-    'anchorSize',
     'appendTo',
     'badge',
     'callOnFunctions',
@@ -1395,7 +1580,6 @@ BryntumChecklistFilterComboComponent.bryntumProps = BryntumChecklistFilterComboC
     'extraData',
     'filterOperator',
     'flex',
-    'focusVisible',
     'formula',
     'height',
     'hidden',
@@ -1435,7 +1619,7 @@ BryntumChecklistFilterComboComponent.bryntumProps = BryntumChecklistFilterComboC
     'y'
 ]);
 BryntumChecklistFilterComboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumChecklistFilterComboComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumChecklistFilterComboComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumChecklistFilterComboComponent.ɵcmp = i0.ɵɵ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", checkValidity: "checkValidity", 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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumChecklistFilterComboComponent, decorators: [{
             type: Component,
             args: [{
@@ -1466,6 +1650,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], centered: [{
                 type: Input
+            }], checkValidity: [{
+                type: Input
             }], chipView: [{
                 type: Input
             }], clearable: [{
@@ -1606,6 +1792,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollAction: [{
@@ -1728,12 +1916,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], y: [{
                 type: Input
-            }], anchorSize: [{
-                type: Input
             }], content: [{
                 type: Input
-            }], focusVisible: [{
-                type: Input
             }], formula: [{
                 type: Input
             }], html: [{
@@ -1809,8 +1993,7 @@ class BryntumGridComponent {
         this.onBeforeCancelCellEdit = new 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
@@ -1925,8 +2108,7 @@ class BryntumGridComponent {
         this.onBeforeFinishCellEdit = new 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
@@ -1971,16 +2153,14 @@ class BryntumGridComponent {
         this.onBeforeRenderRows = new 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 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
          */
@@ -2060,8 +2240,7 @@ class BryntumGridComponent {
         this.onCancelCellEdit = new 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
@@ -2103,8 +2282,7 @@ class BryntumGridComponent {
         /**
          * 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
@@ -2285,8 +2463,7 @@ class BryntumGridComponent {
         this.onCopy = new 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
@@ -2390,8 +2567,7 @@ class BryntumGridComponent {
         this.onFinishCellEdit = new 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
@@ -2491,8 +2667,7 @@ class BryntumGridComponent {
         this.onGridRowDrop = new 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.
@@ -2501,8 +2676,7 @@ class BryntumGridComponent {
         /**
          * 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
@@ -2565,8 +2739,7 @@ class BryntumGridComponent {
         /**
          * 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.
@@ -2585,8 +2758,8 @@ class BryntumGridComponent {
         /**
          * 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 EventEmitter();
         /**
@@ -2643,8 +2816,7 @@ class BryntumGridComponent {
         this.onRowCollapse = new 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
@@ -2782,7 +2954,7 @@ class BryntumGridComponent {
          * @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 EventEmitter();
         /**
@@ -2863,6 +3035,16 @@ class BryntumGridComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumGridComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         // Backwards compatibility for gridInstance, schedulerInstance etc.
@@ -2870,6 +3052,48 @@ class BryntumGridComponent {
         me[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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -3132,6 +3356,7 @@ BryntumGridComponent.bryntumConfigs = BryntumGridComponent.bryntumFeatureNames.c
     'insertFirst',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'listeners',
     'loadMask',
     'loadMaskDefaults',
@@ -3158,6 +3383,7 @@ BryntumGridComponent.bryntumConfigs = BryntumGridComponent.bryntumFeatureNames.c
     'resizeToFitIncludesHeader',
     'responsiveLevels',
     'ripple',
+    'role',
     'rootElement',
     'rowHeight',
     'rowLines',
@@ -3244,6 +3470,7 @@ BryntumGridComponent.bryntumConfigsOnly = [
     'resizeToFitIncludesHeader',
     'responsiveLevels',
     'ripple',
+    'role',
     'rootElement',
     'scrollerClass',
     'scrollManager',
@@ -3281,8 +3508,6 @@ BryntumGridComponent.bryntumProps = BryntumGridComponent.bryntumFeatureNames.con
     'enableUndoRedoKeys',
     'extraData',
     'flex',
-    'focusVisible',
-    'hasChanges',
     'height',
     'hidden',
     'hideFooters',
@@ -3293,6 +3518,7 @@ BryntumGridComponent.bryntumProps = BryntumGridComponent.bryntumFeatureNames.con
     'insertFirst',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'longPressTime',
     'margin',
     'maxHeight',
@@ -3326,7 +3552,7 @@ BryntumGridComponent.bryntumProps = BryntumGridComponent.bryntumFeatureNames.con
     'width'
 ]);
 BryntumGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumGridComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumGridComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -3441,6 +3667,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollerClass: [{
@@ -3531,6 +3759,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], labelPosition: [{
                 type: Input
+            }], labelWidth: [{
+                type: Input
             }], longPressTime: [{
                 type: Input
             }], margin: [{
@@ -3575,10 +3805,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], width: [{
                 type: Input
-            }], focusVisible: [{
-                type: Input
-            }], hasChanges: [{
-                type: Input
             }], originalStore: [{
                 type: Input
             }], parent: [{
@@ -3940,8 +4166,7 @@ class BryntumGridBaseComponent {
         this.onBeforeCancelCellEdit = new 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
@@ -4056,8 +4281,7 @@ class BryntumGridBaseComponent {
         this.onBeforeFinishCellEdit = new 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
@@ -4102,16 +4326,14 @@ class BryntumGridBaseComponent {
         this.onBeforeRenderRows = new 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 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
          */
@@ -4191,8 +4413,7 @@ class BryntumGridBaseComponent {
         this.onCancelCellEdit = new 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
@@ -4234,8 +4455,7 @@ class BryntumGridBaseComponent {
         /**
          * 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
@@ -4416,8 +4636,7 @@ class BryntumGridBaseComponent {
         this.onCopy = new 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
@@ -4521,8 +4740,7 @@ class BryntumGridBaseComponent {
         this.onFinishCellEdit = new 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
@@ -4622,8 +4840,7 @@ class BryntumGridBaseComponent {
         this.onGridRowDrop = new 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.
@@ -4632,8 +4849,7 @@ class BryntumGridBaseComponent {
         /**
          * 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
@@ -4696,8 +4912,7 @@ class BryntumGridBaseComponent {
         /**
          * 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.
@@ -4716,8 +4931,8 @@ class BryntumGridBaseComponent {
         /**
          * 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 EventEmitter();
         /**
@@ -4774,8 +4989,7 @@ class BryntumGridBaseComponent {
         this.onRowCollapse = new 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
@@ -4913,7 +5127,7 @@ class BryntumGridBaseComponent {
          * @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 EventEmitter();
         /**
@@ -4994,6 +5208,16 @@ class BryntumGridBaseComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumGridBaseComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         // Backwards compatibility for gridInstance, schedulerInstance etc.
@@ -5001,6 +5225,48 @@ class BryntumGridBaseComponent {
         me[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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -5263,6 +5529,7 @@ BryntumGridBaseComponent.bryntumConfigs = BryntumGridBaseComponent.bryntumFeatur
     'insertFirst',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'listeners',
     'loadMask',
     'loadMaskDefaults',
@@ -5289,6 +5556,7 @@ BryntumGridBaseComponent.bryntumConfigs = BryntumGridBaseComponent.bryntumFeatur
     'resizeToFitIncludesHeader',
     'responsiveLevels',
     'ripple',
+    'role',
     'rootElement',
     'rowHeight',
     'rowLines',
@@ -5374,6 +5642,7 @@ BryntumGridBaseComponent.bryntumConfigsOnly = [
     'resizeToFitIncludesHeader',
     'responsiveLevels',
     'ripple',
+    'role',
     'rootElement',
     'scrollerClass',
     'scrollManager',
@@ -5410,8 +5679,6 @@ BryntumGridBaseComponent.bryntumProps = BryntumGridBaseComponent.bryntumFeatureN
     'enableUndoRedoKeys',
     'extraData',
     'flex',
-    'focusVisible',
-    'hasChanges',
     'height',
     'hidden',
     'hideFooters',
@@ -5422,6 +5689,7 @@ BryntumGridBaseComponent.bryntumProps = BryntumGridBaseComponent.bryntumFeatureN
     'insertFirst',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'longPressTime',
     'margin',
     'maxHeight',
@@ -5455,7 +5723,7 @@ BryntumGridBaseComponent.bryntumProps = BryntumGridBaseComponent.bryntumFeatureN
     'width'
 ]);
 BryntumGridBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumGridBaseComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumGridBaseComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridBaseComponent, decorators: [{
             type: Component,
             args: [{
@@ -5570,6 +5838,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollerClass: [{
@@ -5658,6 +5928,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], labelPosition: [{
                 type: Input
+            }], labelWidth: [{
+                type: Input
             }], longPressTime: [{
                 type: Input
             }], margin: [{
@@ -5702,10 +5974,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], width: [{
                 type: Input
-            }], focusVisible: [{
-                type: Input
-            }], hasChanges: [{
-                type: Input
             }], originalStore: [{
                 type: Input
             }], parent: [{
@@ -6078,8 +6346,7 @@ class BryntumGridChartDesignerComponent {
         this.onBeforeShow = new 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
@@ -6130,8 +6397,7 @@ class BryntumGridChartDesignerComponent {
         /**
          * 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.
@@ -6210,9 +6476,61 @@ class BryntumGridChartDesignerComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumGridChartDesignerComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? 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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -6321,6 +6639,7 @@ BryntumGridChartDesignerComponent.bryntumConfigs = BryntumGridChartDesignerCompo
     'readOnly',
     'relayStoreEvents',
     'ripple',
+    'role',
     'rootElement',
     'rtl',
     'scrollable',
@@ -6375,6 +6694,7 @@ BryntumGridChartDesignerComponent.bryntumConfigsOnly = [
     'preventTooltipOnTouch',
     'relayStoreEvents',
     'ripple',
+    'role',
     'rootElement',
     'scrollAction',
     'showAnimation',
@@ -6390,7 +6710,6 @@ BryntumGridChartDesignerComponent.bryntumConfigsOnly = [
 ];
 BryntumGridChartDesignerComponent.bryntumProps = BryntumGridChartDesignerComponent.bryntumFeatureNames.concat([
     'alignSelf',
-    'anchorSize',
     'appendTo',
     'callOnFunctions',
     'catchEventHandlerExceptions',
@@ -6401,7 +6720,6 @@ BryntumGridChartDesignerComponent.bryntumProps = BryntumGridChartDesignerCompone
     'disabled',
     'extraData',
     'flex',
-    'focusVisible',
     'height',
     'hidden',
     'html',
@@ -6426,7 +6744,7 @@ BryntumGridChartDesignerComponent.bryntumProps = BryntumGridChartDesignerCompone
     'y'
 ]);
 BryntumGridChartDesignerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridChartDesignerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumGridChartDesignerComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumGridChartDesignerComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridChartDesignerComponent, decorators: [{
             type: Component,
             args: [{
@@ -6499,6 +6817,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollAction: [{
@@ -6587,10 +6907,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], y: [{
                 type: Input
-            }], anchorSize: [{
-                type: Input
-            }], focusVisible: [{
-                type: Input
             }], parent: [{
                 type: Input
             }], onBeforeDestroy: [{
@@ -6663,8 +6979,7 @@ class BryntumGridFieldFilterPickerComponent {
         this.onBeforeShow = new 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
@@ -6730,8 +7045,7 @@ class BryntumGridFieldFilterPickerComponent {
         /**
          * 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.
@@ -6810,9 +7124,61 @@ class BryntumGridFieldFilterPickerComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumGridFieldFilterPickerComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? 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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -6920,6 +7286,7 @@ BryntumGridFieldFilterPickerComponent.bryntumConfigs = BryntumGridFieldFilterPic
     'items',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'layout',
     'layoutStyle',
     'lazyItems',
@@ -6948,6 +7315,7 @@ BryntumGridFieldFilterPickerComponent.bryntumConfigs = BryntumGridFieldFilterPic
     'relayStoreEvents',
     'rendition',
     'ripple',
+    'role',
     'rootElement',
     'rtl',
     'scrollable',
@@ -7024,6 +7392,7 @@ BryntumGridFieldFilterPickerComponent.bryntumConfigsOnly = [
     'propertyLocked',
     'relayStoreEvents',
     'ripple',
+    'role',
     'rootElement',
     'scrollAction',
     'showAnimation',
@@ -7043,7 +7412,6 @@ BryntumGridFieldFilterPickerComponent.bryntumConfigsOnly = [
 ];
 BryntumGridFieldFilterPickerComponent.bryntumProps = BryntumGridFieldFilterPickerComponent.bryntumFeatureNames.concat([
     'alignSelf',
-    'anchorSize',
     'appendTo',
     'callOnFunctions',
     'catchEventHandlerExceptions',
@@ -7054,8 +7422,6 @@ BryntumGridFieldFilterPickerComponent.bryntumProps = BryntumGridFieldFilterPicke
     'disabled',
     'extraData',
     'flex',
-    'focusVisible',
-    'hasChanges',
     'height',
     'hidden',
     'html',
@@ -7063,11 +7429,10 @@ BryntumGridFieldFilterPickerComponent.bryntumProps = BryntumGridFieldFilterPicke
     'inputFieldAlign',
     'insertBefore',
     'insertFirst',
-    'isSettingValues',
-    'isValid',
     'items',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'layout',
     'layoutStyle',
     'margin',
@@ -7091,7 +7456,7 @@ BryntumGridFieldFilterPickerComponent.bryntumProps = BryntumGridFieldFilterPicke
     'y'
 ]);
 BryntumGridFieldFilterPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridFieldFilterPickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumGridFieldFilterPickerComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumGridFieldFilterPickerComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridFieldFilterPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -7198,6 +7563,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollAction: [{
@@ -7272,6 +7639,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], labelPosition: [{
                 type: Input
+            }], labelWidth: [{
+                type: Input
             }], layout: [{
                 type: Input
             }], layoutStyle: [{
@@ -7310,16 +7679,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], y: [{
                 type: Input
-            }], anchorSize: [{
-                type: Input
-            }], focusVisible: [{
-                type: Input
-            }], hasChanges: [{
-                type: Input
-            }], isSettingValues: [{
-                type: Input
-            }], isValid: [{
-                type: Input
             }], parent: [{
                 type: Input
             }], values: [{
@@ -7408,8 +7767,7 @@ class BryntumGridFieldFilterPickerGroupComponent {
         this.onBeforeShow = new 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
@@ -7475,8 +7833,7 @@ class BryntumGridFieldFilterPickerGroupComponent {
         /**
          * 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.
@@ -7555,9 +7912,61 @@ class BryntumGridFieldFilterPickerGroupComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumGridFieldFilterPickerGroupComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? 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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -7668,6 +8077,7 @@ BryntumGridFieldFilterPickerGroupComponent.bryntumConfigs = BryntumGridFieldFilt
     'items',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'layout',
     'layoutStyle',
     'lazyItems',
@@ -7694,6 +8104,7 @@ BryntumGridFieldFilterPickerGroupComponent.bryntumConfigs = BryntumGridFieldFilt
     'relayStoreEvents',
     'rendition',
     'ripple',
+    'role',
     'rootElement',
     'rtl',
     'scrollable',
@@ -7769,6 +8180,7 @@ BryntumGridFieldFilterPickerGroupComponent.bryntumConfigsOnly = [
     'preventTooltipOnTouch',
     'relayStoreEvents',
     'ripple',
+    'role',
     'rootElement',
     'scrollAction',
     'showAddFilterButton',
@@ -7787,7 +8199,6 @@ BryntumGridFieldFilterPickerGroupComponent.bryntumConfigsOnly = [
 ];
 BryntumGridFieldFilterPickerGroupComponent.bryntumProps = BryntumGridFieldFilterPickerGroupComponent.bryntumFeatureNames.concat([
     'alignSelf',
-    'anchorSize',
     'appendTo',
     'callOnFunctions',
     'catchEventHandlerExceptions',
@@ -7798,8 +8209,6 @@ BryntumGridFieldFilterPickerGroupComponent.bryntumProps = BryntumGridFieldFilter
     'disabled',
     'extraData',
     'flex',
-    'focusVisible',
-    'hasChanges',
     'height',
     'hidden',
     'html',
@@ -7807,11 +8216,10 @@ BryntumGridFieldFilterPickerGroupComponent.bryntumProps = BryntumGridFieldFilter
     'inputFieldAlign',
     'insertBefore',
     'insertFirst',
-    'isSettingValues',
-    'isValid',
     'items',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'layout',
     'layoutStyle',
     'margin',
@@ -7836,7 +8244,7 @@ BryntumGridFieldFilterPickerGroupComponent.bryntumProps = BryntumGridFieldFilter
     'y'
 ]);
 BryntumGridFieldFilterPickerGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridFieldFilterPickerGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumGridFieldFilterPickerGroupComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumGridFieldFilterPickerGroupComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridFieldFilterPickerGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -7943,6 +8351,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollAction: [{
@@ -8015,6 +8425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], labelPosition: [{
                 type: Input
+            }], labelWidth: [{
+                type: Input
             }], layout: [{
                 type: Input
             }], layoutStyle: [{
@@ -8053,16 +8465,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], y: [{
                 type: Input
-            }], anchorSize: [{
-                type: Input
-            }], focusVisible: [{
-                type: Input
-            }], hasChanges: [{
-                type: Input
-            }], isSettingValues: [{
-                type: Input
-            }], isValid: [{
-                type: Input
             }], parent: [{
                 type: Input
             }], value: [{
@@ -8151,8 +8553,7 @@ class BryntumGroupBarComponent {
         this.onBeforeShow = new 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
@@ -8214,8 +8615,7 @@ class BryntumGroupBarComponent {
         /**
          * 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.
@@ -8315,9 +8715,61 @@ class BryntumGroupBarComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumGroupBarComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? 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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -8446,6 +8898,7 @@ BryntumGroupBarComponent.bryntumConfigs = BryntumGroupBarComponent.bryntumFeatur
     'readOnly',
     'relayStoreEvents',
     'ripple',
+    'role',
     'rootElement',
     'rtl',
     'scrollable',
@@ -8514,6 +8967,7 @@ BryntumGroupBarComponent.bryntumConfigsOnly = [
     'preventTooltipOnTouch',
     'relayStoreEvents',
     'ripple',
+    'role',
     'rootElement',
     'scrollAction',
     'selectAllItem',
@@ -8531,7 +8985,6 @@ BryntumGroupBarComponent.bryntumConfigsOnly = [
 BryntumGroupBarComponent.bryntumProps = BryntumGroupBarComponent.bryntumFeatureNames.concat([
     'alignSelf',
     'allowGroupSelect',
-    'anchorSize',
     'appendTo',
     'callOnFunctions',
     'catchEventHandlerExceptions',
@@ -8545,7 +8998,6 @@ BryntumGroupBarComponent.bryntumProps = BryntumGroupBarComponent.bryntumFeatureN
     'emptyText',
     'extraData',
     'flex',
-    'focusVisible',
     'height',
     'hidden',
     'html',
@@ -8576,7 +9028,7 @@ BryntumGroupBarComponent.bryntumProps = BryntumGroupBarComponent.bryntumFeatureN
     'y'
 ]);
 BryntumGroupBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGroupBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumGroupBarComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumGroupBarComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGroupBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -8667,6 +9119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollAction: [{
@@ -8777,10 +9231,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], y: [{
                 type: Input
-            }], anchorSize: [{
-                type: Input
-            }], focusVisible: [{
-                type: Input
             }], parent: [{
                 type: Input
             }], onBeforeDestroy: [{
@@ -8865,8 +9315,7 @@ class BryntumTreeComboComponent {
         this.onBeforeShow = new 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
@@ -8886,8 +9335,7 @@ class BryntumTreeComboComponent {
         this.onChange = new 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
          */
@@ -8946,8 +9394,7 @@ class BryntumTreeComboComponent {
         /**
          * 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.
@@ -9042,9 +9489,61 @@ class BryntumTreeComboComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumTreeComboComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? 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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -9118,6 +9617,7 @@ BryntumTreeComboComponent.bryntumConfigs = BryntumTreeComboComponent.bryntumFeat
     'caseSensitive',
     'catchEventHandlerExceptions',
     'centered',
+    'checkValidity',
     'chipView',
     'clearable',
     'clearTextOnPickerHide',
@@ -9215,6 +9715,7 @@ BryntumTreeComboComponent.bryntumConfigs = BryntumTreeComboComponent.bryntumFeat
     'required',
     'revertOnEscape',
     'ripple',
+    'role',
     'rootElement',
     'rtl',
     'scrollAction',
@@ -9256,6 +9757,7 @@ BryntumTreeComboComponent.bryntumConfigsOnly = [
     'cacheLastResult',
     'caseSensitive',
     'centered',
+    'checkValidity',
     'chipView',
     'clearable',
     'clearTextOnPickerHide',
@@ -9326,6 +9828,7 @@ BryntumTreeComboComponent.bryntumConfigsOnly = [
     'relayStoreEvents',
     'revertOnEscape',
     'ripple',
+    'role',
     'rootElement',
     'scrollAction',
     'showAnimation',
@@ -9346,7 +9849,6 @@ BryntumTreeComboComponent.bryntumConfigsOnly = [
 ];
 BryntumTreeComboComponent.bryntumProps = BryntumTreeComboComponent.bryntumFeatureNames.concat([
     'alignSelf',
-    'anchorSize',
     'appendTo',
     'badge',
     'callOnFunctions',
@@ -9360,7 +9862,6 @@ BryntumTreeComboComponent.bryntumProps = BryntumTreeComboComponent.bryntumFeatur
     'extraData',
     'filterOperator',
     'flex',
-    'focusVisible',
     'formula',
     'height',
     'hidden',
@@ -9397,7 +9898,7 @@ BryntumTreeComboComponent.bryntumProps = BryntumTreeComboComponent.bryntumFeatur
     'y'
 ]);
 BryntumTreeComboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumTreeComboComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumTreeComboComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumTreeComboComponent.ɵcmp = i0.ɵɵ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", checkValidity: "checkValidity", 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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumTreeComboComponent, decorators: [{
             type: Component,
             args: [{
@@ -9428,6 +9929,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], centered: [{
                 type: Input
+            }], checkValidity: [{
+                type: Input
             }], chipView: [{
                 type: Input
             }], clearable: [{
@@ -9568,6 +10071,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollAction: [{
@@ -9686,12 +10191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], y: [{
                 type: Input
-            }], anchorSize: [{
-                type: Input
             }], content: [{
                 type: Input
-            }], focusVisible: [{
-                type: Input
             }], formula: [{
                 type: Input
             }], html: [{
@@ -9765,8 +10266,7 @@ class BryntumTreeGridComponent {
         this.onBeforeCancelCellEdit = new 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
@@ -9881,8 +10381,7 @@ class BryntumTreeGridComponent {
         this.onBeforeFinishCellEdit = new 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
@@ -9927,16 +10426,14 @@ class BryntumTreeGridComponent {
         this.onBeforeRenderRows = new 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 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
          */
@@ -10016,8 +10513,7 @@ class BryntumTreeGridComponent {
         this.onCancelCellEdit = new 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
@@ -10059,8 +10555,7 @@ class BryntumTreeGridComponent {
         /**
          * 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
@@ -10241,8 +10736,7 @@ class BryntumTreeGridComponent {
         this.onCopy = new 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
@@ -10346,8 +10840,7 @@ class BryntumTreeGridComponent {
         this.onFinishCellEdit = new 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
@@ -10447,8 +10940,7 @@ class BryntumTreeGridComponent {
         this.onGridRowDrop = new 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.
@@ -10457,8 +10949,7 @@ class BryntumTreeGridComponent {
         /**
          * 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
@@ -10521,8 +11012,7 @@ class BryntumTreeGridComponent {
         /**
          * 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.
@@ -10541,8 +11031,8 @@ class BryntumTreeGridComponent {
         /**
          * 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 EventEmitter();
         /**
@@ -10599,8 +11089,7 @@ class BryntumTreeGridComponent {
         this.onRowCollapse = new 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
@@ -10738,7 +11227,7 @@ class BryntumTreeGridComponent {
          * @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 EventEmitter();
         /**
@@ -10819,6 +11308,16 @@ class BryntumTreeGridComponent {
         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).
+        const shadowRoot = elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            initThemeInShadowRoots();
+            BryntumTreeGridComponent.ensureFontsInDocument(shadowRoot);
+        }
         // @ts-ignore
         me.instance = instanceName === 'Widget' ? Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         // Backwards compatibility for gridInstance, schedulerInstance etc.
@@ -10826,6 +11325,48 @@ class BryntumTreeGridComponent {
         me[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.
+     */
+    static ensureFontsInDocument(shadowRoot) {
+        var _a;
+        if (document.querySelector('#b-shadow-root-fonts')) {
+            return;
+        }
+        const fontFaceRules = [];
+        const extractFromSheet = (sheet) => {
+            try {
+                const rules = sheet.cssRules;
+                for (let i = 0; i < rules.length; i++) {
+                    if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                        fontFaceRules.push(rules[i].cssText);
+                    }
+                }
+            }
+            catch (_e) {
+                // Cross-origin access may throw; silently skip
+            }
+        };
+        // adoptedStyleSheets (Angular 14+ / modern browsers)
+        const adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+        adoptedSheets.forEach(sheet => extractFromSheet(sheet));
+        // <style> elements (older Angular or fallback)
+        shadowRoot.querySelectorAll('style').forEach(el => {
+            if (el.sheet) {
+                extractFromSheet(el.sheet);
+            }
+        });
+        if (fontFaceRules.length > 0) {
+            const style = document.createElement('style');
+            style.id = 'b-shadow-root-fonts';
+            style.textContent = fontFaceRules.join('\n');
+            document.head.appendChild(style);
+        }
+    }
     /**
      * Watch for changes
      * @param changes
@@ -11088,6 +11629,7 @@ BryntumTreeGridComponent.bryntumConfigs = BryntumTreeGridComponent.bryntumFeatur
     'insertFirst',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'listeners',
     'loadMask',
     'loadMaskDefaults',
@@ -11114,6 +11656,7 @@ BryntumTreeGridComponent.bryntumConfigs = BryntumTreeGridComponent.bryntumFeatur
     'resizeToFitIncludesHeader',
     'responsiveLevels',
     'ripple',
+    'role',
     'rootElement',
     'rowHeight',
     'rowLines',
@@ -11200,6 +11743,7 @@ BryntumTreeGridComponent.bryntumConfigsOnly = [
     'resizeToFitIncludesHeader',
     'responsiveLevels',
     'ripple',
+    'role',
     'rootElement',
     'scrollerClass',
     'scrollManager',
@@ -11237,8 +11781,6 @@ BryntumTreeGridComponent.bryntumProps = BryntumTreeGridComponent.bryntumFeatureN
     'enableUndoRedoKeys',
     'extraData',
     'flex',
-    'focusVisible',
-    'hasChanges',
     'height',
     'hidden',
     'hideFooters',
@@ -11249,6 +11791,7 @@ BryntumTreeGridComponent.bryntumProps = BryntumTreeGridComponent.bryntumFeatureN
     'insertFirst',
     'keyMap',
     'labelPosition',
+    'labelWidth',
     'longPressTime',
     'margin',
     'maxHeight',
@@ -11282,7 +11825,7 @@ BryntumTreeGridComponent.bryntumProps = BryntumTreeGridComponent.bryntumFeatureN
     'width'
 ]);
 BryntumTreeGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumTreeGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BryntumTreeGridComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
+BryntumTreeGridComponent.ɵcmp = i0.ɵɵ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, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumTreeGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -11397,6 +11940,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], ripple: [{
                 type: Input
+            }], role: [{
+                type: Input
             }], rootElement: [{
                 type: Input
             }], scrollerClass: [{
@@ -11487,6 +12032,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], labelPosition: [{
                 type: Input
+            }], labelWidth: [{
+                type: Input
             }], longPressTime: [{
                 type: Input
             }], margin: [{
@@ -11531,10 +12078,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }], width: [{
                 type: Input
-            }], focusVisible: [{
-                type: Input
-            }], hasChanges: [{
-                type: Input
             }], originalStore: [{
                 type: Input
             }], parent: [{
@@ -11890,7 +12433,7 @@ BryntumGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         BryntumGridFieldFilterPickerGroupComponent,
         BryntumGroupBarComponent,
         BryntumTreeComboComponent,
-        BryntumTreeGridComponent], exports: [BryntumAIFilterFieldComponent,
+        BryntumTreeGridComponent], imports: [CommonModule], exports: [BryntumAIFilterFieldComponent,
         BryntumChecklistFilterComboComponent,
         BryntumGridComponent,
         BryntumGridBaseComponent,
@@ -11900,7 +12443,7 @@ BryntumGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         BryntumGroupBarComponent,
         BryntumTreeComboComponent,
         BryntumTreeGridComponent] });
-BryntumGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridModule, imports: [[]] });
+BryntumGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BryntumGridModule, decorators: [{
             type: NgModule,
             args: [{
@@ -11916,7 +12459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                         BryntumTreeComboComponent,
                         BryntumTreeGridComponent
                     ],
-                    imports: [],
+                    imports: [CommonModule],
                     exports: [
                         BryntumAIFilterFieldComponent,
                         BryntumChecklistFilterComboComponent,